@infineon/infineon-design-system-stencil 35.5.0--canary.1904.c3cb7254ae476891ebdb18f1579f66379ad24854.0 → 36.0.0--canary.1926.3b76d5defe8b9a743d9ec0dd5e6879c04e8055c0.0

package/dist/collection/components/select/multi-select/multiselect.stories.js

@@ -1,97 +1,47 @@
 import { action } from "@storybook/addon-actions";
-const options = [
-    {
-        value: 'a',
-        label: 'Option a',
-        selected: false,
-    },
-    {
-        value: 'b',
-        label: 'Option b',
-        selected: false,
-    },
-    {
-        value: 'c',
-        label: 'Option c',
-        selected: false,
-        children: [
-            {
-                value: 'z1',
-                label: 'Option c1',
-                selected: false,
-            },
-            {
-                value: 'z2',
-                label: 'Option c2',
-                selected: false,
-            },
-        ],
-    },
-];
-const longOptions = [];
-for (let i = 1; i <= 50; i++) {
-    let children = undefined;
-    if (i % 3 == 0) {
-        children = [{
-                "value": `${i}.1`,
-                "label": `Option ${i}.1`,
-                "selected": i % 2 == 0 ? true : false
-            }, {
-                "value": `${i}.2`,
-                "label": `Option ${i}.2`,
-                "selected": i % 4 == 0 ? true : false
-            }];
-    }
-    longOptions.push({
-        "value": i,
-        "label": `Option ${i}`,
-        "selected": i % 2 == 0 ? true : false,
-        "children": children
-    });
-}
 export default {
     title: 'Components/Select/Multi Select',
-    // tags: ['autodocs'],
+    parameters: {
+        controls: {
+            expanded: true,
+            sort: 'alpha'
+        }
+    },
     args: {
         name: 'multiselect',
-        size: 'm',
         disabled: false,
-        batchSize: 10,
-        maxItemCount: 10,
         showSearch: true,
         showSelectAll: true,
+        showExpandCollapse: true,
         error: false,
         errorMessage: 'Some error',
         label: '',
         placeholder: 'Placeholder',
-        showClearButton: true
+        showClearButton: true,
+        noResultsMessage: 'No results found.',
+        showNoResultsMessage: true,
+        searchPlaceholder: 'Search',
+        selectAllLabel: 'Select all',
+        expandLabel: 'Expand',
+        collapseLabel: 'Collapse',
+        ariaLabel: 'Multi-select dropdown',
+        ariaLabelledBy: '',
+        ariaDescribedBy: '',
+        ariaSearchLabel: 'Search options',
+        ariaClearLabel: 'Clear all selections',
+        ariaToggleLabel: 'Toggle dropdown',
+        ariaSelectAllLabel: 'Select all options',
+        ariaExpandAllLabel: 'Expand all categories',
+        ariaCollapseAllLabel: 'Collapse all categories'
     },
     argTypes: {
-        size: {
-            description: 'Size of the input field.',
-            options: {
-                'small (36px)': 's',
-                'medium (40px)': 'm',
-            },
-            control: {
-                type: 'radio',
-            },
-            table: {
-                category: 'ifx-multiselect props',
-                defaultValue: {
-                    summary: 'medium (40px)',
-                },
-                type: {
-                    summary: '36px | 40px',
-                },
-            },
-        },
+        // Function
         disabled: {
             description: 'Disable the input field.',
             options: [true, false],
             control: { type: 'boolean' },
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
                 defaultValue: {
                     summary: 'false',
                 },
@@ -104,43 +54,35 @@ export default {
             description: `For a <*form*> element, the name attribute is  used as a reference when the data is submitted.`,
             control: 'text',
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
+                defaultValue: {
+                    summary: 'undefined',
+                },
                 type: {
                     summary: 'string',
                 },
             },
         },
-        batchSize: {
-            description: 'Batch size used during lazy loading options.',
-            control: {
-                type: 'number',
-            },
+        showSearch: {
+            description: 'Show a search input.',
+            options: [true, false],
+            control: { type: 'boolean' },
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
                 defaultValue: {
-                    summary: '50',
+                    summary: 'true',
                 },
                 type: {
-                    summary: 'number',
+                    summary: 'boolean',
                 },
             },
         },
-        maxItemCount: {
-            control: { type: 'number' },
-            description: 'Number of maximum selectable items.',
-            table: {
-                category: 'ifx-multiselect props',
-                type: {
-                    summary: 'number'
-                }
-            }
-        },
-        showSearch: {
-            description: 'Show a search input.',
+        showSelectAll: {
+            description: 'Show a checkbox to select all options.',
             options: [true, false],
-            control: { type: 'radio' },
+            control: { type: 'boolean' },
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
                 defaultValue: {
                     summary: 'true',
                 },
@@ -149,12 +91,12 @@ export default {
                 },
             },
         },
-        showSelectAll: {
-            description: 'Show a checkbox to select all options.',
+        showExpandCollapse: {
+            description: 'Show expand/collapse controls for nested options.',
             options: [true, false],
-            control: { type: 'radio' },
+            control: { type: 'boolean' },
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
                 defaultValue: {
                     summary: 'true',
                 },
@@ -167,18 +109,35 @@ export default {
             description: 'Shows the clear icon button.',
             control: 'boolean',
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
                 defaultValue: {
-                    summary: true
-                }
+                    summary: 'true',
+                },
+                type: {
+                    summary: 'boolean',
+                },
             }
         },
+        showNoResultsMessage: {
+            description: 'Show/hide the no results message when search has no matches.',
+            options: [true, false],
+            control: { type: 'boolean' },
+            table: {
+                category: 'Function',
+                defaultValue: {
+                    summary: 'true',
+                },
+                type: {
+                    summary: 'boolean',
+                },
+            },
+        },
         error: {
             description: 'Show error state.',
             options: [true, false],
-            control: { type: 'radio' },
+            control: { type: 'boolean' },
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Function',
                 defaultValue: {
                     summary: 'false',
                 },
@@ -187,11 +146,38 @@ export default {
                 },
             },
         },
+        // Label
+        label: {
+            description: 'Label over the input field.',
+            control: 'text',
+            table: {
+                category: 'Label',
+                defaultValue: {
+                    summary: '""',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        placeholder: {
+            description: 'Label inside the input field.',
+            control: 'text',
+            table: {
+                category: 'Label',
+                defaultValue: {
+                    summary: '""',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
         errorMessage: {
             control: 'text',
             description: 'Error message to display.',
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Label',
                 defaultValue: {
                     summary: 'Error',
                 },
@@ -200,41 +186,195 @@ export default {
                 },
             },
         },
-        label: {
-            description: 'Label over the input field.',
+        noResultsMessage: {
+            description: 'Custom message to display when search has no results.',
             control: 'text',
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Label',
+                defaultValue: {
+                    summary: 'No results found.',
+                },
                 type: {
                     summary: 'string',
                 },
             },
         },
-        placeholder: {
-            description: 'Label inside the input field.',
+        searchPlaceholder: {
+            description: 'Placeholder text for the search input field.',
+            control: 'text',
+            table: {
+                category: 'Label',
+                defaultValue: {
+                    summary: 'Search',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        selectAllLabel: {
+            description: 'Label text for the select all checkbox.',
             control: 'text',
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Label',
+                defaultValue: {
+                    summary: 'Select all',
+                },
                 type: {
                     summary: 'string',
                 },
             },
         },
-        options: {
-            description: 'Takes an array of objects in the following format.',
+        expandLabel: {
+            description: 'Label text for the expand all control.',
+            control: 'text',
             table: {
-                category: 'ifx-multiselect props',
+                category: 'Label',
+                defaultValue: {
+                    summary: 'Expand',
+                },
                 type: {
-                    summary: 'Details',
-                    detail: `'Array<{ value: string, label: string, selected: boolean, children?: Array<{ value: string, label: string, selected: boolean }> }>'`,
+                    summary: 'string',
                 },
             },
         },
+        collapseLabel: {
+            description: 'Label text for the collapse all control.',
+            control: 'text',
+            table: {
+                category: 'Label',
+                defaultValue: {
+                    summary: 'Collapse',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        // ARIA Labels
+        ariaLabel: {
+            description: 'ARIA label for the multiselect component.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Multi-select dropdown',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaLabelledBy: {
+            description: 'ID of element that labels the multiselect.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: '""',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaDescribedBy: {
+            description: 'ID of element that describes the multiselect.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: '""',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaSearchLabel: {
+            description: 'ARIA label for the search input field.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Search options',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaClearLabel: {
+            description: 'ARIA label for the clear all button.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Clear all selections',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaToggleLabel: {
+            description: 'ARIA label for the dropdown toggle button.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Toggle dropdown',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaSelectAllLabel: {
+            description: 'ARIA label for the select all checkbox.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Select all options',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaExpandAllLabel: {
+            description: 'ARIA label for the expand all control.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Expand all categories',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaCollapseAllLabel: {
+            description: 'ARIA label for the collapse all control.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: 'Collapse all categories',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        // Custom Events
         ifxSelect: {
             action: 'ifxSelect',
             description: 'Custom event emitted when item is selected or unselected.',
             table: {
-                category: 'custom events',
+                category: 'Custom Events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
@@ -245,7 +385,7 @@ export default {
             action: 'ifxOpen',
             description: 'Custom event emitted when multiselect is opened.',
             table: {
-                category: 'custom events',
+                category: 'Custom Events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
@@ -254,21 +394,125 @@ export default {
         }
     },
 };
-const Template = args => {
-    const template = `<ifx-multiselect 
+const SlotBasedTemplate = args => {
+    const template = `<ifx-multiselect
   name='${args.name}'
-  options='${JSON.stringify(args.options)}' 
-  batch-size='${args.batchSize}'
-  size='${args.size}'
   disabled='${args.disabled}'
-  max-item-count='${args.maxItemCount}'
   error='${args.error}'
   error-message='${args.errorMessage}'
   label='${args.label}'
   placeholder='${args.placeholder}'
   show-search='${args.showSearch}'
   show-select-all='${args.showSelectAll}'
-  show-clear-button='${args.showClearButton}'>
+  show-expand-collapse='${args.showExpandCollapse}'
+  show-clear-button='${args.showClearButton}'
+  no-results-message='${args.noResultsMessage}'
+  show-no-results-message='${args.showNoResultsMessage}'
+  search-placeholder='${args.searchPlaceholder}'
+  select-all-label='${args.selectAllLabel}'
+  expand-label='${args.expandLabel}'
+  collapse-label='${args.collapseLabel}'
+  aria-label='${args.ariaLabel}'
+  aria-labelled-by='${args.ariaLabelledBy}'
+  aria-described-by='${args.ariaDescribedBy}'
+  aria-search-label='${args.ariaSearchLabel}'
+  aria-clear-label='${args.ariaClearLabel}'
+  aria-toggle-label='${args.ariaToggleLabel}'
+  aria-select-all-label='${args.ariaSelectAllLabel}'
+  aria-expand-all-label='${args.ariaExpandAllLabel}'
+  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
+
+  <ifx-multiselect-option value="category-a">
+    Category A - Main Section
+
+    <ifx-multiselect-option value="category-a-1" slot="children">
+      Category A.1 - First Subsection
+      <ifx-multiselect-option value="option-a-1-1" slot="children">Option A.1.1 - Basic Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-1-2" selected slot="children">Option A.1.2 - Preselected Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-1-3" slot="children">Option A.1.3 - Another Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+
+    <ifx-multiselect-option value="category-a-2" slot="children">
+      Category A.2 - Second Subsection
+      <ifx-multiselect-option value="option-a-2-1" slot="children">Option A.2.1 - Nested Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-2-2" slot="children">
+        Option A.2.2 - Deep Nested Parent
+        <ifx-multiselect-option value="option-a-2-2-1" slot="children">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-a-2-2-2" slot="children">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-a-2-2-3" slot="children">
+          Option A.2.2.3 - Even Deeper
+          <ifx-multiselect-option value="option-a-2-2-3-1" slot="children">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>
+          <ifx-multiselect-option value="option-a-2-2-3-2" slot="children">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>
+        </ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-2-3" slot="children">Option A.2.3 - Final Nested</ifx-multiselect-option>
+    </ifx-multiselect-option>
+
+    <ifx-multiselect-option value="option-a-3" slot="children">Option A.3 - Direct Child</ifx-multiselect-option>
+    <ifx-multiselect-option value="option-a-4" slot="children">Option A.4 - Another Direct Child</ifx-multiselect-option>
+  </ifx-multiselect-option>
+
+  <ifx-multiselect-option value="category-b">
+    Category B - Secondary Section
+
+    <ifx-multiselect-option value="category-b-1" slot="children">
+      Category B.1 - Mixed Content
+      <ifx-multiselect-option value="option-b-1-1" slot="children">Option B.1.1 - Standard Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="category-b-1-2" slot="children">
+        Category B.1.2 - Sub-Category
+        <ifx-multiselect-option value="option-b-1-2-1" slot="children">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-b-1-2-2" slot="children">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-b-1-2-3" slot="children">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="option-b-1-3" slot="children">Option B.1.3 - Standard Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+
+    <ifx-multiselect-option value="option-b-2" slot="children">Option B.2 - Standalone Item</ifx-multiselect-option>
+    <ifx-multiselect-option value="option-b-3" slot="children">Option B.3 - Standalone Item</ifx-multiselect-option>
+  </ifx-multiselect-option>
+
+  <ifx-multiselect-option value="category-c">
+    Category C - Complex Structure
+
+    <ifx-multiselect-option value="category-c-1" slot="children">
+      Category C.1 - Multi-Level Group
+      <ifx-multiselect-option value="category-c-1-1" slot="children">
+        Category C.1.1 - Sub-Group Alpha
+        <ifx-multiselect-option value="option-c-1-1-1" slot="children">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-c-1-1-2" slot="children">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="category-c-1-2" slot="children">
+        Category C.1.2 - Sub-Group Beta
+        <ifx-multiselect-option value="option-c-1-2-1" slot="children">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-c-1-2-2" slot="children">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-c-1-2-3" slot="children">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="option-c-1-3" slot="children">Option C.1.3 - Direct Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+
+    <ifx-multiselect-option value="category-c-2" slot="children">
+      Category C.2 - Another Group
+      <ifx-multiselect-option value="option-c-2-1" slot="children">Option C.2.1 - Group Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-c-2-2" slot="children">Option C.2.2 - Group Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+  </ifx-multiselect-option>
+
+  <ifx-multiselect-option value="option-d">Option D - Top-Level Standalone</ifx-multiselect-option>
+
+  <ifx-multiselect-option value="option-e">Option E - Top-Level Standalone</ifx-multiselect-option>
+
+  <ifx-multiselect-option value="category-f">
+    Category F - Final Section
+
+    <ifx-multiselect-option value="option-f-1" slot="children">Option F.1 - Simple Item</ifx-multiselect-option>
+    <ifx-multiselect-option value="option-f-2" slot="children">Option F.2 - Simple Item</ifx-multiselect-option>
+    <ifx-multiselect-option value="category-f-3" slot="children">
+      Category F.3 - Last Group
+      <ifx-multiselect-option value="option-f-3-1" slot="children">Option F.3.1 - Final Nested</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-f-3-2" slot="children">Option F.3.2 - Final Nested</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-f-3-3" slot="children">Option F.3.3 - Final Nested</ifx-multiselect-option>
+    </ifx-multiselect-option>
+  </ifx-multiselect-option>
 </ifx-multiselect>`;
     setTimeout(() => {
         document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));
@@ -276,14 +520,74 @@ const Template = args => {
     }, 0);
     return template;
 };
-export const Default = Template.bind({});
+export const Default = SlotBasedTemplate.bind({});
 Default.args = {
-    options: options,
+    label: 'Generic Multi-Level Selection',
+    placeholder: 'Select options...',
 };
-export const WithLazyLoading = Template.bind({});
-WithLazyLoading.args = {
-    options: longOptions,
-    batchSize: 5,
-    maxItemCount: undefined
+Default.parameters = {
+    docs: {
+        description: {
+            story: 'The multiselect component supports nested hierarchical options with search, select all, and expand/collapse functionality. Use slot-based syntax for defining options and their nested structure.'
+        }
+    }
+};
+const FlatTemplate = args => {
+    const template = `<ifx-multiselect
+  name='${args.name}'
+  disabled='${args.disabled}'
+  error='${args.error}'
+  error-message='${args.errorMessage}'
+  label='${args.label}'
+  placeholder='${args.placeholder}'
+  show-search='${args.showSearch}'
+  show-select-all='${args.showSelectAll}'
+  show-expand-collapse='${args.showExpandCollapse}'
+  show-clear-button='${args.showClearButton}'
+  no-results-message='${args.noResultsMessage}'
+  show-no-results-message='${args.showNoResultsMessage}'
+  search-placeholder='${args.searchPlaceholder}'
+  select-all-label='${args.selectAllLabel}'
+  expand-label='${args.expandLabel}'
+  collapse-label='${args.collapseLabel}'
+  aria-label='${args.ariaLabel}'
+  aria-labelled-by='${args.ariaLabelledBy}'
+  aria-described-by='${args.ariaDescribedBy}'
+  aria-search-label='${args.ariaSearchLabel}'
+  aria-clear-label='${args.ariaClearLabel}'
+  aria-toggle-label='${args.ariaToggleLabel}'
+  aria-select-all-label='${args.ariaSelectAllLabel}'
+  aria-expand-all-label='${args.ariaExpandAllLabel}'
+  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
+
+  <ifx-multiselect-option value="option-1">Option 1</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-2">Option 2</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-3">Option 3</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-4">Option 4</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-5">Option 5</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-6">Option 6</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-7">Option 7</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-8">Option 8</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-9">Option 9</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-10">Option 10</ifx-multiselect-option>
+</ifx-multiselect>`;
+    setTimeout(() => {
+        const multiselect = document.querySelectorAll('ifx-multiselect')[document.querySelectorAll('ifx-multiselect').length - 1];
+        multiselect.addEventListener('ifxSelect', action('ifxSelect'));
+        multiselect.addEventListener('ifxOpen', action('ifxOpen'));
+    }, 0);
+    return template;
+};
+export const SingleLevel = FlatTemplate.bind({});
+SingleLevel.args = {
+    label: 'Single Level Selection',
+    placeholder: 'Select options...',
+};
+SingleLevel.parameters = {
+    docs: {
+        description: {
+            story: 'A simple multiselect with single-level options - no nesting or hierarchical structure. Expand/Collapse controls are automatically hidden for single-level option lists.'
+        }
+    }
 };
 //# sourceMappingURL=multiselect.stories.js.map