@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/core/ColorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  ColorPicker,\n  ColorPickerProps,\n  Flex,\n  Grid,\n  Text,\n  tryCatch,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor = () => {\n  const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n    const c = tryCatch(() => readableColor(color));\n    return css`\n      color: ${c};\n      background: ${color};\n    `;\n  });\n\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}
+{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, ColorPickerProps, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: Story = () => {\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}

package/lib/core/ColorPicker/ColorPicker.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledColorPane: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+}, never>;
+//# sourceMappingURL=ColorPicker.styles.d.ts.map

package/lib/core/ColorPicker/ColorPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;WAAuB,MAAM;SAMvD,CAAC"}

package/lib/core/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { tryCatch } from '@pega/cosmos-react-core';
+export const StyledColorPane = styled.div(({ color }) => {
+    const c = tryCatch(() => readableColor(color));
+    return css `
+    color: ${c};
+    background: ${color};
+  `;
+});
+//# sourceMappingURL=ColorPicker.styles.js.map

package/lib/core/ColorPicker/ColorPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,OAAO,GAAG,CAAA;aACC,CAAC;kBACI,KAAK;GACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n  const c = tryCatch(() => readableColor(color));\n  return css`\n    color: ${c};\n    background: ${color};\n  `;\n});\n"]}

package/lib/core/ComboBox/ComboBox.stories.js

@@ -79,7 +79,7 @@ export const FilterableSingleSelect = (args) => {
             onItemClick: selectItem,
             accent: filterRegex,
             emptyText: 'No items'
-        } }, void 0));
+        } }));
 };
 FilterableSingleSelect.args = {
     label: 'ComboBox Single Autocomplete'
@@ -135,7 +135,7 @@ export const NonFilterableSingleSelect = (args) => {
             onItemClick: selectItem,
             loading: isLoading,
             loadMore: hasMore ? loadMore : undefined
-        } }, void 0));
+        } }));
 };
 NonFilterableSingleSelect.args = {
     label: 'ComboBox Single Select',
@@ -182,7 +182,7 @@ export const FilterableMultiSelect = (args) => {
             onItemClick: toggleItem,
             accent: filterRegex,
             emptyText: 'No items'
-        } }, void 0));
+        } }));
 };
 FilterableMultiSelect.args = {
     label: 'ComboBox Multi Autocomplete'
@@ -214,7 +214,7 @@ export const NonFilterableMultiSelect = (args) => {
         }, menu: {
             items: itemsToRender,
             onItemClick: toggleItem
-        } }, void 0));
+        } }));
 };
 NonFilterableMultiSelect.args = {
     label: 'ComboBox Multi Select',
@@ -262,7 +262,7 @@ export const FilterableMultiSelectSelectableParent = (args) => {
             onItemClick: toggleItem,
             accent: filterRegex,
             emptyText: 'No items'
-        } }, void 0));
+        } }));
 };
 FilterableMultiSelectSelectableParent.args = {
     label: 'ComboBox Multi Selectable Parent'
@@ -368,7 +368,7 @@ export const FilterableMultiSelectLazyChildren = (args) => {
             loadMore: hasMore ? loadMore : undefined,
             accent: filterRegex,
             emptyText: 'No items'
-        } }, void 0));
+        } }));
 };
 FilterableMultiSelectLazyChildren.args = {
     label: 'ComboBox Multi Lazy Children'

package/lib/core/ComboBox/ComboBox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.stories.js","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, useCallback, useMemo, useState, useEffect } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  MenuItemProps,\n  MenuProps,\n  menuHelpers\n} from '@pega/cosmos-react-core';\n\nimport { getFilterRegex, list, tree } from './ComboBox.mocks';\n\nexport default {\n  title: 'Core/ComboBox',\n  component: ComboBox,\n  args: {\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface ComboBoxStoryProps {\n  label?: ComboBoxProps['label'];\n  labelHidden?: ComboBoxProps['labelHidden'];\n  info?: ComboBoxProps['info'];\n  placeholder?: ComboBoxProps['placeholder'];\n  status?: ComboBoxProps['status'];\n  required?: ComboBoxProps['required'];\n  disabled?: ComboBoxProps['disabled'];\n  readOnly?: ComboBoxProps['readOnly'];\n}\n/*\n  _____ _ _ _                 _     _        ____  _             _        ____       _           _\n |  ___(_) | |_ ___ _ __ __ _| |__ | | ___  / ___|(_)_ __   __ _| | ___  / ___|  ___| | ___  ___| |_\n | |_  | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ \\___ \\| | '_ \\ / _` | |/ _ \\ \\___ \\ / _ \\ |/ _ \\/ __| __|\n |  _| | | | ||  __/ | | (_| | |_) | |  __/  ___) | | | | | (_| | |  __/  ___) |  __/ |  __/ (__| |_\n |_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___| |____/|_|_| |_|\\__, |_|\\___| |____/ \\___|_|\\___|\\___|\\__|\n                                                           |___/\n*/\nexport const FilterableSingleSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(tree);\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n  const [filterValue, setFilterValue] = useState('');\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setFilterValue('');\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const clearSelection = () => {\n    setItems(cur =>\n      menuHelpers.mapTree(cur, item => {\n        return {\n          ...item,\n          selected: false\n        };\n      })\n    );\n  };\n\n  return (\n    <ComboBox\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      mode='single-select'\n      selected={\n        selected\n          ? {\n              items: {\n                id: selected.id,\n                text: selected.primary\n              }\n            }\n          : undefined\n      }\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        if (!e.target.value) clearSelection();\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: selectItem,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableSingleSelect.args = {\n  label: 'ComboBox Single Autocomplete'\n};\n\n/*\n  ____  _             _        ____       _           _\n / ___|(_)_ __   __ _| | ___  / ___|  ___| | ___  ___| |_\n \\___ \\| | '_ \\ / _` | |/ _ \\ \\___ \\ / _ \\ |/ _ \\/ __| __|\n  ___) | | | | | (_| | |  __/  ___) |  __/ |  __/ (__| |_\n |____/|_|_| |_|\\__, |_|\\___| |____/ \\___|_|\\___|\\___|\\__|\n                |___/\n*/\nexport const NonFilterableSingleSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const pageSize = 10;\n\n  const [items, setItems] = useState<MenuProps['items']>((): MenuProps['items'] => {\n    return menuHelpers.mapTree(tree.slice(0, pageSize), item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  });\n\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const loadMore = useCallback(\n    (expandedItemId?: MenuItemProps['id']) => {\n      if (!isLoading && !expandedItemId) {\n        setIsLoading(true);\n        setTimeout(() => {\n          setIsLoading(false);\n          setItems(prevItems => {\n            const newItems = menuHelpers.mapTree(\n              tree.slice(prevItems.length, prevItems.length + pageSize),\n              item => ({\n                ...item,\n                selected: item.items ? undefined : !!item.selected\n              })\n            );\n\n            if (newItems.length === 0) setHasMore(false);\n\n            return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n          });\n        }, 2000);\n      }\n    },\n    [items, isLoading]\n  );\n\n  return (\n    <ComboBox\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={\n        selected\n          ? {\n              items: {\n                id: selected.id,\n                text: selected.primary\n              }\n            }\n          : undefined\n      }\n      menu={{\n        items,\n        onItemClick: selectItem,\n        loading: isLoading,\n        loadMore: hasMore ? loadMore : undefined\n      }}\n    />\n  );\n};\n\nNonFilterableSingleSelect.args = {\n  label: 'ComboBox Single Select',\n  info: 'Click on dropdown button to expand the Popover',\n  placeholder: '-Choose option-'\n};\n\n/*\n  _____ _ _ _                 _     _        __  __       _ _   _      ____       _           _\n |  ___(_) | |_ ___ _ __ __ _| |__ | | ___  |  \\/  |_   _| | |_(_)    / ___|  ___| | ___  ___| |_\n | |_  | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ | |\\/| | | | | | __| |____\\___ \\ / _ \\ |/ _ \\/ __| __|\n |  _| | | | ||  __/ | | (_| | |_) | |  __/ | |  | | |_| | | |_| |_____|__) |  __/ |  __/ (__| |_\n |_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___| |_|  |_|\\__,_|_|\\__|_|    |____/ \\___|_|\\___|\\___|\\__|\n*/\nexport const FilterableMultiSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(tree);\n  const [filterValue, setFilterValue] = useState('');\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableMultiSelect.args = {\n  label: 'ComboBox Multi Autocomplete'\n};\n\n/*\n  __  __       _ _   _      ____       _           _\n |  \\/  |_   _| | |_(_)    / ___|  ___| | ___  ___| |_\n | |\\/| | | | | | __| |____\\___ \\ / _ \\ |/ _ \\/ __| __|\n | |  | | |_| | | |_| |_____|__) |  __/ |  __/ (__| |_\n |_|  |_|\\__,_|_|\\__|_|    |____/ \\___|_|\\___|\\___|\\__|\n*/\nexport const NonFilterableMultiSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(\n    menuHelpers.mapTree(list, item => ({ id: item.id, primary: item.primary }))\n  );\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [items]);\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem\n      }}\n    />\n  );\n};\n\nNonFilterableMultiSelect.args = {\n  label: 'ComboBox Multi Select',\n  info: 'Click on dropdown button to expand the Popover',\n  placeholder: '-Choose options-'\n};\n\n/*\n______ _ _ _                 _     _     ___  ___      _ _   _        _____      _           _        _     _     ______                    _\n|  ___(_) | |               | |   | |    |  \\/  |     | | | (_)      /  ___|    | |         | |      | |   | |    | ___ \\                  | |\n| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______\\ `--.  ___| | ___  ___| |_ __ _| |__ | | ___| |_/ /_ _ _ __ ___ _ __ | |_\n|  _| | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ |\\/| | | | | | __| |______|`--. \\/ _ \\ |/ _ \\/ __| __/ _` | '_ \\| |/ _ \\  __/ _` | '__/ _ \\ '_ \\| __|\n| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      /\\__/ /  __/ |  __/ (__| || (_| | |_) | |  __/ | | (_| | | |  __/ | | | |_\n\\_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___\\_|  |_/\\__,_|_|\\__|_|      \\____/ \\___|_|\\___|\\___|\\__\\__,_|_.__/|_|\\___\\_|  \\__,_|_|  \\___|_| |_|\\__|\n*/\nexport const FilterableMultiSelectSelectableParent: Story<ComboBoxStoryProps> = (\n  args: ComboBoxStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(tree);\n  const [filterValue, setFilterValue] = useState('');\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableMultiSelectSelectableParent.args = {\n  label: 'ComboBox Multi Selectable Parent'\n};\n\n/**\n______ _ _ _                 _     _     ___  ___      _ _   _        _                     _____ _     _ _     _\n|  ___(_) | |               | |   | |    |  \\/  |     | | | (_)      | |                   /  __ \\ |   (_) |   | |\n| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______| |     __ _ _____   _| /  \\/ |__  _| | __| |_ __ ___ _ __\n|  _| | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ |\\/| | | | | | __| |______| |    / _` |_  / | | | |   | '_ \\| | |/ _` | '__/ _ \\ '_ \\\n| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      | |___| (_| |/ /| |_| | \\__/\\ | | | | | (_| | | |  __/ | | |\n\\_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___\\_|  |_/\\__,_|_|\\__|_|      \\_____/\\__,_/___|\\__, |\\____/_| |_|_|_|\\__,_|_|  \\___|_| |_|\n                                                                                       __/ |\n                                                                                      |___/\n */\nexport const FilterableMultiSelectLazyChildren: Story<ComboBoxStoryProps> = (\n  args: ComboBoxStoryProps\n) => {\n  const rootItemId = '01';\n  const lazyItems = useMemo(() => {\n    return [\n      { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },\n      { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },\n      { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] },\n      { id: '01-4', primary: 'Shaun McMinneman', secondary: ['Leads', 'Engineer'] },\n      { id: '01-5', primary: 'Hank Fitzgerald', secondary: ['Leads', 'Engineer'] },\n      { id: '01-6', primary: 'Mindy Stark', secondary: ['Leads', 'Engineer'] },\n      { id: '01-7', primary: 'Shane Howard', secondary: ['Leads', 'Engineer'] },\n      { id: '01-8', primary: 'Raul Singh', secondary: ['Leads', 'Engineer'] }\n    ];\n  }, []);\n\n  const [items, setItems] = useState<MenuProps['items']>([\n    {\n      id: rootItemId,\n      primary: 'Group',\n      secondary: ['Leads', 'Engineer'],\n      items: []\n    }\n  ]);\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(() => {\n          const previousNestedLength = menuHelpers.getItem(items, rootItemId)?.items?.length || 0;\n          const newItems = lazyItems.slice(previousNestedLength, previousNestedLength + 3);\n\n          if (newItems.length === 0) setHasMore(false);\n\n          return menuHelpers.appendTo(items, newItems, rootItemId);\n        });\n      }, 2000);\n    }\n  }, [items, loading]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  useEffect(() => {\n    if (hasMore) {\n      loadMore();\n    }\n  }, [hasMore]);\n\n  const onItemExpand = useCallback(() => {\n    // You wouldn't do this here in production, but in this story we know the menu 'hasMore'\n    // un-rendered items every time it expands.\n    setHasMore(true);\n  }, []);\n\n  const onItemCollapse = useCallback(() => {\n    setHasMore(false);\n    setLoading(false);\n    // You wouldn't do this in production. We are re-slicing the lazy children in this story to avoid\n    // having to refresh to view the lazy loading behavior again.\n    setItems(cur => [{ ...cur[0], items: [] }]);\n  }, []);\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem,\n        onItemExpand,\n        onItemCollapse,\n        loading,\n        loadMore: hasMore ? loadMore : undefined,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableMultiSelectLazyChildren.args = {\n  label: 'ComboBox Multi Lazy Children'\n};\n"]}
+{"version":3,"file":"ComboBox.stories.js","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,OAAO,EACL,QAAQ,EAIR,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAYV;;;;;;;EAOE;AACF,MAAM,CAAC,MAAM,sBAAsB,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAC5F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAuB,EAAE,EAAE;QACzD,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,QAAQ,CAAC,GAAG,CAAC,EAAE,CACb,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE;YAC9B,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,KAAK;aAChB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,eAAe,EACpB,QAAQ,EACN,QAAQ;YACN,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,EAAE,EAAE,QAAQ,CAAC,EAAE;oBACf,IAAI,EAAE,QAAQ,CAAC,OAAO;iBACvB;aACF;YACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;gBAAE,cAAc,EAAE,CAAC;YACtC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,UAAU;YACvB,MAAM,EAAE,WAAW;YACnB,SAAS,EAAE,UAAU;SACtB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,KAAK,EAAE,8BAA8B;CACtC,CAAC;AAEF;;;;;;;EAOE;AACF,MAAM,CAAC,MAAM,yBAAyB,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAC/F,MAAM,QAAQ,GAAG,EAAE,CAAC;IAEpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,GAAuB,EAAE;QAC9E,OAAO,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC3D,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3E,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAuB,EAAE,EAAE;QACzD,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,cAAoC,EAAE,EAAE;QACvC,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE;YACjC,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAClC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,EACzD,IAAI,CAAC,EAAE,CAAC,CAAC;wBACP,GAAG,IAAI;wBACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;qBACnD,CAAC,CACH,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;wBAAE,UAAU,CAAC,KAAK,CAAC,CAAC;oBAE7C,OAAO,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC;gBACnE,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EACD,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EACN,QAAQ;YACN,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,EAAE,EAAE,QAAQ,CAAC,EAAE;oBACf,IAAI,EAAE,QAAQ,CAAC,OAAO;iBACvB;aACF;YACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE;YACJ,KAAK;YACL,WAAW,EAAE,UAAU;YACvB,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SACzC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,yBAAyB,CAAC,IAAI,GAAG;IAC/B,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,gDAAgD;IACtD,WAAW,EAAE,iBAAiB;CAC/B,CAAC;AAEF;;;;;;EAME;AACF,MAAM,CAAC,MAAM,qBAAqB,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;YACR,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,UAAU;SACrB,EACD,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,UAAU;YACvB,MAAM,EAAE,WAAW;YACnB,SAAS,EAAE,UAAU;SACtB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF;;;;;;EAME;AACF,MAAM,CAAC,MAAM,wBAAwB,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAC5E,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACzC,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;YACR,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,UAAU;SACrB,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,UAAU;SACxB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,wBAAwB,CAAC,IAAI,GAAG;IAC9B,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,gDAAgD;IACtD,WAAW,EAAE,kBAAkB;CAChC,CAAC;AAEF;;;;;;;EAOE;AACF,MAAM,CAAC,MAAM,qCAAqC,GAA8B,CAC9E,IAAwB,EACxB,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;YACR,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,UAAU;SACrB,EACD,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,UAAU;YACvB,MAAM,EAAE,WAAW;YACnB,SAAS,EAAE,UAAU;SACtB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,qCAAqC,CAAC,IAAI,GAAG;IAC3C,KAAK,EAAE,kCAAkC;CAC1C,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAA8B,CAC1E,IAAwB,EACxB,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,CAAC;IACxB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YAC1E,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACzE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACzE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YAC7E,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YAC5E,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACxE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACzE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;SACxE,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACrD;YACE,EAAE,EAAE,UAAU;YACd,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;YAChC,KAAK,EAAE,EAAE;SACV;KACF,CAAC,CAAC;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,GAAG,EAAE;oBACZ,MAAM,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC;oBACxF,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,oBAAoB,EAAE,oBAAoB,GAAG,CAAC,CAAC,CAAC;oBAEjF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;wBAAE,UAAU,CAAC,KAAK,CAAC,CAAC;oBAE7C,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;gBAC3D,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE;YACX,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,wFAAwF;QACxF,2CAA2C;QAC3C,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,iGAAiG;QACjG,6DAA6D;QAC7D,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;YACR,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,UAAU;SACrB,EACD,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC7C,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,UAAU;YACvB,YAAY;YACZ,cAAc;YACd,OAAO;YACP,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YACxC,MAAM,EAAE,WAAW;YACnB,SAAS,EAAE,UAAU;SACtB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iCAAiC,CAAC,IAAI,GAAG;IACvC,KAAK,EAAE,8BAA8B;CACtC,CAAC","sourcesContent":["import { ChangeEvent, useCallback, useMemo, useState, useEffect } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  MenuItemProps,\n  MenuProps,\n  menuHelpers\n} from '@pega/cosmos-react-core';\n\nimport { getFilterRegex, list, tree } from './ComboBox.mocks';\n\nexport default {\n  title: 'Core/ComboBox',\n  component: ComboBox,\n  args: {\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface ComboBoxStoryProps {\n  label?: ComboBoxProps['label'];\n  labelHidden?: ComboBoxProps['labelHidden'];\n  info?: ComboBoxProps['info'];\n  placeholder?: ComboBoxProps['placeholder'];\n  status?: ComboBoxProps['status'];\n  required?: ComboBoxProps['required'];\n  disabled?: ComboBoxProps['disabled'];\n  readOnly?: ComboBoxProps['readOnly'];\n}\n/*\n  _____ _ _ _                 _     _        ____  _             _        ____       _           _\n |  ___(_) | |_ ___ _ __ __ _| |__ | | ___  / ___|(_)_ __   __ _| | ___  / ___|  ___| | ___  ___| |_\n | |_  | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ \\___ \\| | '_ \\ / _` | |/ _ \\ \\___ \\ / _ \\ |/ _ \\/ __| __|\n |  _| | | | ||  __/ | | (_| | |_) | |  __/  ___) | | | | | (_| | |  __/  ___) |  __/ |  __/ (__| |_\n |_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___| |____/|_|_| |_|\\__, |_|\\___| |____/ \\___|_|\\___|\\___|\\__|\n                                                           |___/\n*/\nexport const FilterableSingleSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(tree);\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n  const [filterValue, setFilterValue] = useState('');\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setFilterValue('');\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const clearSelection = () => {\n    setItems(cur =>\n      menuHelpers.mapTree(cur, item => {\n        return {\n          ...item,\n          selected: false\n        };\n      })\n    );\n  };\n\n  return (\n    <ComboBox\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      mode='single-select'\n      selected={\n        selected\n          ? {\n              items: {\n                id: selected.id,\n                text: selected.primary\n              }\n            }\n          : undefined\n      }\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        if (!e.target.value) clearSelection();\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: selectItem,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableSingleSelect.args = {\n  label: 'ComboBox Single Autocomplete'\n};\n\n/*\n  ____  _             _        ____       _           _\n / ___|(_)_ __   __ _| | ___  / ___|  ___| | ___  ___| |_\n \\___ \\| | '_ \\ / _` | |/ _ \\ \\___ \\ / _ \\ |/ _ \\/ __| __|\n  ___) | | | | | (_| | |  __/  ___) |  __/ |  __/ (__| |_\n |____/|_|_| |_|\\__, |_|\\___| |____/ \\___|_|\\___|\\___|\\__|\n                |___/\n*/\nexport const NonFilterableSingleSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const pageSize = 10;\n\n  const [items, setItems] = useState<MenuProps['items']>((): MenuProps['items'] => {\n    return menuHelpers.mapTree(tree.slice(0, pageSize), item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  });\n\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n\n  const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);\n\n  const selectItem = useCallback((id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const loadMore = useCallback(\n    (expandedItemId?: MenuItemProps['id']) => {\n      if (!isLoading && !expandedItemId) {\n        setIsLoading(true);\n        setTimeout(() => {\n          setIsLoading(false);\n          setItems(prevItems => {\n            const newItems = menuHelpers.mapTree(\n              tree.slice(prevItems.length, prevItems.length + pageSize),\n              item => ({\n                ...item,\n                selected: item.items ? undefined : !!item.selected\n              })\n            );\n\n            if (newItems.length === 0) setHasMore(false);\n\n            return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n          });\n        }, 2000);\n      }\n    },\n    [items, isLoading]\n  );\n\n  return (\n    <ComboBox\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={\n        selected\n          ? {\n              items: {\n                id: selected.id,\n                text: selected.primary\n              }\n            }\n          : undefined\n      }\n      menu={{\n        items,\n        onItemClick: selectItem,\n        loading: isLoading,\n        loadMore: hasMore ? loadMore : undefined\n      }}\n    />\n  );\n};\n\nNonFilterableSingleSelect.args = {\n  label: 'ComboBox Single Select',\n  info: 'Click on dropdown button to expand the Popover',\n  placeholder: '-Choose option-'\n};\n\n/*\n  _____ _ _ _                 _     _        __  __       _ _   _      ____       _           _\n |  ___(_) | |_ ___ _ __ __ _| |__ | | ___  |  \\/  |_   _| | |_(_)    / ___|  ___| | ___  ___| |_\n | |_  | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ | |\\/| | | | | | __| |____\\___ \\ / _ \\ |/ _ \\/ __| __|\n |  _| | | | ||  __/ | | (_| | |_) | |  __/ | |  | | |_| | | |_| |_____|__) |  __/ |  __/ (__| |_\n |_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___| |_|  |_|\\__,_|_|\\__|_|    |____/ \\___|_|\\___|\\___|\\__|\n*/\nexport const FilterableMultiSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(tree);\n  const [filterValue, setFilterValue] = useState('');\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableMultiSelect.args = {\n  label: 'ComboBox Multi Autocomplete'\n};\n\n/*\n  __  __       _ _   _      ____       _           _\n |  \\/  |_   _| | |_(_)    / ___|  ___| | ___  ___| |_\n | |\\/| | | | | | __| |____\\___ \\ / _ \\ |/ _ \\/ __| __|\n | |  | | |_| | | |_| |_____|__) |  __/ |  __/ (__| |_\n |_|  |_|\\__,_|_|\\__|_|    |____/ \\___|_|\\___|\\___|\\__|\n*/\nexport const NonFilterableMultiSelect: Story<ComboBoxStoryProps> = (args: ComboBoxStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(\n    menuHelpers.mapTree(list, item => ({ id: item.id, primary: item.primary }))\n  );\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [items]);\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem\n      }}\n    />\n  );\n};\n\nNonFilterableMultiSelect.args = {\n  label: 'ComboBox Multi Select',\n  info: 'Click on dropdown button to expand the Popover',\n  placeholder: '-Choose options-'\n};\n\n/*\n______ _ _ _                 _     _     ___  ___      _ _   _        _____      _           _        _     _     ______                    _\n|  ___(_) | |               | |   | |    |  \\/  |     | | | (_)      /  ___|    | |         | |      | |   | |    | ___ \\                  | |\n| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______\\ `--.  ___| | ___  ___| |_ __ _| |__ | | ___| |_/ /_ _ _ __ ___ _ __ | |_\n|  _| | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ |\\/| | | | | | __| |______|`--. \\/ _ \\ |/ _ \\/ __| __/ _` | '_ \\| |/ _ \\  __/ _` | '__/ _ \\ '_ \\| __|\n| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      /\\__/ /  __/ |  __/ (__| || (_| | |_) | |  __/ | | (_| | | |  __/ | | | |_\n\\_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___\\_|  |_/\\__,_|_|\\__|_|      \\____/ \\___|_|\\___|\\___|\\__\\__,_|_.__/|_|\\___\\_|  \\__,_|_|  \\___|_| |_|\\__|\n*/\nexport const FilterableMultiSelectSelectableParent: Story<ComboBoxStoryProps> = (\n  args: ComboBoxStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(tree);\n  const [filterValue, setFilterValue] = useState('');\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableMultiSelectSelectableParent.args = {\n  label: 'ComboBox Multi Selectable Parent'\n};\n\n/**\n______ _ _ _                 _     _     ___  ___      _ _   _        _                     _____ _     _ _     _\n|  ___(_) | |               | |   | |    |  \\/  |     | | | (_)      | |                   /  __ \\ |   (_) |   | |\n| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______| |     __ _ _____   _| /  \\/ |__  _| | __| |_ __ ___ _ __\n|  _| | | | __/ _ \\ '__/ _` | '_ \\| |/ _ \\ |\\/| | | | | | __| |______| |    / _` |_  / | | | |   | '_ \\| | |/ _` | '__/ _ \\ '_ \\\n| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      | |___| (_| |/ /| |_| | \\__/\\ | | | | | (_| | | |  __/ | | |\n\\_|   |_|_|\\__\\___|_|  \\__,_|_.__/|_|\\___\\_|  |_/\\__,_|_|\\__|_|      \\_____/\\__,_/___|\\__, |\\____/_| |_|_|_|\\__,_|_|  \\___|_| |_|\n                                                                                       __/ |\n                                                                                      |___/\n */\nexport const FilterableMultiSelectLazyChildren: Story<ComboBoxStoryProps> = (\n  args: ComboBoxStoryProps\n) => {\n  const rootItemId = '01';\n  const lazyItems = useMemo(() => {\n    return [\n      { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },\n      { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },\n      { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] },\n      { id: '01-4', primary: 'Shaun McMinneman', secondary: ['Leads', 'Engineer'] },\n      { id: '01-5', primary: 'Hank Fitzgerald', secondary: ['Leads', 'Engineer'] },\n      { id: '01-6', primary: 'Mindy Stark', secondary: ['Leads', 'Engineer'] },\n      { id: '01-7', primary: 'Shane Howard', secondary: ['Leads', 'Engineer'] },\n      { id: '01-8', primary: 'Raul Singh', secondary: ['Leads', 'Engineer'] }\n    ];\n  }, []);\n\n  const [items, setItems] = useState<MenuProps['items']>([\n    {\n      id: rootItemId,\n      primary: 'Group',\n      secondary: ['Leads', 'Engineer'],\n      items: []\n    }\n  ]);\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n\n  const selected = useMemo(() => {\n    return menuHelpers.getSelected(items).map(item => ({ text: item.primary, id: item.id }));\n  }, [items]);\n\n  const filterRegex = useMemo(() => getFilterRegex(filterValue), [filterValue]);\n\n  const itemsToRender = useMemo(() => {\n    const newItems = filterValue\n      ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n          return filterRegex.test(primary);\n        })\n      : items;\n\n    return menuHelpers.mapTree(newItems, item => ({\n      ...item,\n      selected: item.items ? undefined : !!item.selected\n    }));\n  }, [filterValue, items]);\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(() => {\n          const previousNestedLength = menuHelpers.getItem(items, rootItemId)?.items?.length || 0;\n          const newItems = lazyItems.slice(previousNestedLength, previousNestedLength + 3);\n\n          if (newItems.length === 0) setHasMore(false);\n\n          return menuHelpers.appendTo(items, newItems, rootItemId);\n        });\n      }, 2000);\n    }\n  }, [items, loading]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  useEffect(() => {\n    if (hasMore) {\n      loadMore();\n    }\n  }, [hasMore]);\n\n  const onItemExpand = useCallback(() => {\n    // You wouldn't do this here in production, but in this story we know the menu 'hasMore'\n    // un-rendered items every time it expands.\n    setHasMore(true);\n  }, []);\n\n  const onItemCollapse = useCallback(() => {\n    setHasMore(false);\n    setLoading(false);\n    // You wouldn't do this in production. We are re-slicing the lazy children in this story to avoid\n    // having to refresh to view the lazy loading behavior again.\n    setItems(cur => [{ ...cur[0], items: [] }]);\n  }, []);\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      selected={{\n        items: selected,\n        onRemove: toggleItem\n      }}\n      value={filterValue}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: toggleItem,\n        onItemExpand,\n        onItemCollapse,\n        loading,\n        loadMore: hasMore ? loadMore : undefined,\n        accent: filterRegex,\n        emptyText: 'No items'\n      }}\n    />\n  );\n};\n\nFilterableMultiSelectLazyChildren.args = {\n  label: 'ComboBox Multi Lazy Children'\n};\n"]}

package/lib/core/CompositeInput/CompositeInput.mocks.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const FormRenderer: ({ firstName, onFirstNameChange, lastName, onLastNameChange }: {
+    firstName: string;
+    onFirstNameChange: Dispatch<SetStateAction<string>>;
+    lastName: string;
+    onLastNameChange: Dispatch<SetStateAction<string>>;
+}) => JSX.Element;
+//# sourceMappingURL=CompositeInput.mocks.d.ts.map

package/lib/core/CompositeInput/CompositeInput.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9D,eAAO,MAAM,YAAY;eAMZ,MAAM;uBACE,SAAS,eAAe,MAAM,CAAC,CAAC;cACzC,MAAM;sBACE,SAAS,eAAe,MAAM,CAAC,CAAC;iBAgBnD,CAAC"}

package/lib/core/CompositeInput/CompositeInput.mocks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Input } from '@pega/cosmos-react-core';
+export const FormRenderer = ({ firstName, onFirstNameChange, lastName, onLastNameChange }) => {
+    return (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Input, { label: 'First name', value: firstName, onChange: (e) => onFirstNameChange(e.target.value) }), _jsx(Input, { label: 'Last name', value: lastName, onChange: (e) => onLastNameChange(e.target.value) })] }));
+};
+//# sourceMappingURL=CompositeInput.mocks.js.map

package/lib/core/CompositeInput/CompositeInput.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.mocks.js","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAMjB,EAAE,EAAE;IACH,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,KAAK,IACJ,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACjF,EACF,KAAC,KAAK,IACJ,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAChF,IACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ChangeEvent, Dispatch, SetStateAction } from 'react';\n\nimport { Flex, Input } from '@pega/cosmos-react-core';\n\nexport const FormRenderer = ({\n  firstName,\n  onFirstNameChange,\n  lastName,\n  onLastNameChange\n}: {\n  firstName: string;\n  onFirstNameChange: Dispatch<SetStateAction<string>>;\n  lastName: string;\n  onLastNameChange: Dispatch<SetStateAction<string>>;\n}) => {\n  return (\n    <Flex container={{ gap: 1 }}>\n      <Input\n        label='First name'\n        value={firstName}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => onFirstNameChange(e.target.value)}\n      />\n      <Input\n        label='Last name'\n        value={lastName}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => onLastNameChange(e.target.value)}\n      />\n    </Flex>\n  );\n};\n"]}

package/lib/core/CompositeInput/CompositeInput.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import type { CompositeInputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CompositeInputDemo: Story<CompositeInputProps>;
+//# sourceMappingURL=CompositeInput.stories.d.ts.map

package/lib/core/CompositeInput/CompositeInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAGU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CA+BzD,CAAC"}

package/lib/core/CompositeInput/CompositeInput.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CompositeInput } from '@pega/cosmos-react-core';
+import { FormRenderer } from './CompositeInput.mocks';
+export default {
+    title: 'Core/CompositeInput',
+    component: CompositeInput
+};
+export const CompositeInputDemo = (args) => {
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [value, setValue] = useState('');
+    return (_jsx(CompositeInput, { ...args, value: value, dialog: {
+            renderer: FormRenderer,
+            rendererProps: {
+                firstName,
+                onFirstNameChange: setFirstName,
+                lastName,
+                onLastNameChange: setLastName
+            },
+            onApply: ({ close }) => {
+                setValue([firstName, lastName].join(' '));
+                close();
+            },
+            onCancel: ({ close }) => {
+                const [first, last] = value.split(' ');
+                setFirstName(first);
+                setLastName(last);
+                close();
+            }
+        }, onClear: () => setValue('') }));
+};
+CompositeInputDemo.args = {
+    label: 'Full name',
+    labelHidden: false,
+    info: 'Put your full name',
+    status: undefined,
+    required: false,
+    disabled: false,
+    placeholder: ''
+};
+CompositeInputDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    placeholder: { control: { type: 'text' } }
+};
+//# sourceMappingURL=CompositeInput.stories.js.map

package/lib/core/CompositeInput/CompositeInput.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.stories.js","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE;YACN,QAAQ,EAAE,YAAY;YACtB,aAAa,EAAE;gBACb,SAAS;gBACT,iBAAiB,EAAE,YAAY;gBAC/B,QAAQ;gBACR,gBAAgB,EAAE,WAAW;aAC9B;YACD,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACrB,QAAQ,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC1C,KAAK,EAAE,CAAC;YACV,CAAC;YACD,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACtB,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACvC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,KAAK,EAAE,CAAC;YACV,CAAC;SACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { CompositeInput } from '@pega/cosmos-react-core';\nimport type { CompositeInputProps } from '@pega/cosmos-react-core';\n\nimport { FormRenderer } from './CompositeInput.mocks';\n\nexport default {\n  title: 'Core/CompositeInput',\n  component: CompositeInput\n} as Meta;\n\nexport const CompositeInputDemo: Story<CompositeInputProps> = (args: CompositeInputProps) => {\n  const [firstName, setFirstName] = useState('');\n  const [lastName, setLastName] = useState('');\n  const [value, setValue] = useState('');\n\n  return (\n    <CompositeInput\n      {...args}\n      value={value}\n      dialog={{\n        renderer: FormRenderer,\n        rendererProps: {\n          firstName,\n          onFirstNameChange: setFirstName,\n          lastName,\n          onLastNameChange: setLastName\n        },\n        onApply: ({ close }) => {\n          setValue([firstName, lastName].join(' '));\n          close();\n        },\n        onCancel: ({ close }) => {\n          const [first, last] = value.split(' ');\n          setFirstName(first);\n          setLastName(last);\n          close();\n        }\n      }}\n      onClear={() => setValue('')}\n    />\n  );\n};\n\nCompositeInputDemo.args = {\n  label: 'Full name',\n  labelHidden: false,\n  info: 'Put your full name',\n  status: undefined,\n  required: false,\n  disabled: false,\n  placeholder: ''\n};\n\nCompositeInputDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  placeholder: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Configuration/Configuration.mocks.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const FlipFlop: ({ flipFlop, first, second }: {
+    flipFlop: boolean;
+    first: string;
+    second: string;
+}) => JSX.Element;
+//# sourceMappingURL=Configuration.mocks.d.ts.map

package/lib/core/Configuration/Configuration.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,QAAQ;cAKT,OAAO;WACV,MAAM;YACL,MAAM;iBAWf,CAAC"}

package/lib/core/Configuration/Configuration.mocks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BoldSpan } from './Configuration.styles';
+export const FlipFlop = ({ flipFlop, first, second }) => {
+    return flipFlop ? (_jsxs(_Fragment, { children: [_jsx(BoldSpan, { children: first }), "\u00A0\u2192 ", second] })) : (_jsxs(_Fragment, { children: [first, " \u2190\u00A0", _jsx(BoldSpan, { children: second })] }));
+};
+//# sourceMappingURL=Configuration.mocks.js.map

package/lib/core/Configuration/Configuration.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.mocks.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EAKP,EAAE,EAAE;IACH,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,8BACE,KAAC,QAAQ,cAAE,KAAK,GAAY,mBAAS,MAAM,IAC1C,CACJ,CAAC,CAAC,CAAC,CACF,8BACG,KAAK,mBAAS,KAAC,QAAQ,cAAE,MAAM,GAAY,IAC3C,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BoldSpan } from './Configuration.styles';\n\nexport const FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n"]}

package/lib/core/Configuration/Configuration.stories.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const ThemedForm: Story<{
     theme: 'default' | 'theme1';
 }>;
-export declare const ThemingHierarchy: () => JSX.Element;
-export declare const OverridableActionMenu: () => JSX.Element;
+export declare const ThemingHierarchy: Story;
+export declare const OverridableActionMenu: Story;
 interface ConfigurableBaseThemeProps {
     interactive?: string;
 }

package/lib/core/Configuration/Configuration.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAoB/C,wBAIU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AA2CF,eAAO,MAAM,gBAAgB,mBAyE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAWjC,CAAC;AAEF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAsBnE,CAAC;AAUF,UAAU,+BAA+B;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,+BAA+B,CA2B7E,CAAC;AAYF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAU7D,CAAC;AAUF,UAAU,6BAA6B;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,6BAA6B,CAsBzE,CAAC"}
+{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAsB/C,wBAIU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAyE9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC;AAEF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAsBnE,CAAC;AAUF,UAAU,+BAA+B;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,+BAA+B,CA2B7E,CAAC;AAYF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAU7D,CAAC;AAUF,UAAU,6BAA6B;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,6BAA6B,CAsBzE,CAAC"}

package/lib/core/Configuration/Configuration.stories.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import styled from 'styled-components';
 import { Button, Configuration, MenuButton, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
 import { FormContent } from '../Form/Form.mocks';
+import { buttonStyles, StyledFieldset } from './Configuration.styles';
+import { FlipFlop } from './Configuration.mocks';
 export default {
     title: 'Core/Configuration',
     component: Configuration,
@@ -31,7 +32,7 @@ export const ThemedForm = (args) => {
             }
         }
     };
-    return (_jsx(Configuration, { theme: themes[args.theme], children: _jsx(FormContent, { cols: 1, showActions: false }, void 0) }, void 0));
+    return (_jsx(Configuration, { theme: themes[args.theme], children: _jsx(FormContent, { cols: 1, showActions: false }) }));
 };
 ThemedForm.args = {
     theme: 'default'
@@ -39,39 +40,26 @@ ThemedForm.args = {
 ThemedForm.argTypes = {
     theme: { options: ['default', 'theme1'], control: { type: 'select' } }
 };
-const buttonStyles = {
-    width: '100%'
-};
-const StyledFieldset = styled.fieldset `
-  padding: 1rem 5%;
-  margin: 1rem 0;
-`;
-const BoldSpan = styled.span `
-  font-weight: bold;
-`;
-const FlipFlop = ({ flipFlop, first, second }) => {
-    return flipFlop ? (_jsxs(_Fragment, { children: [_jsx(BoldSpan, { children: first }, void 0), "\u00A0\u2192 ", second] }, void 0)) : (_jsxs(_Fragment, { children: [first, " \u2190\u00A0", _jsx(BoldSpan, { children: second }, void 0)] }, void 0));
-};
 export const ThemingHierarchy = () => {
     const [redOrOrange, setRedOrOrange] = useState(true);
     const [greenOrPurple, setGreenOrPurple] = useState(true);
-    return (_jsxs(StyledFieldset, { style: { margin: 0, textAlign: 'center' }, children: [_jsx("legend", { children: "Initial Theme" }, void 0), _jsx(Button, { style: buttonStyles, variant: 'primary', children: "Base interactive" }, void 0), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Override Interactive to" }, void 0), _jsxs(Configuration, { theme: {
+    return (_jsxs(StyledFieldset, { style: { margin: 0, textAlign: 'center' }, children: [_jsx("legend", { children: "Initial Theme" }), _jsx(Button, { style: buttonStyles, variant: 'primary', children: "Base interactive" }), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Override Interactive to" }), _jsxs(Configuration, { theme: {
                             base: {
                                 palette: {
                                     interactive: redOrOrange ? 'red' : 'darkorange'
                                 }
                             }
-                        }, children: [_jsx(Button, { style: buttonStyles, variant: 'primary', onClick: () => setRedOrOrange(val => !val), children: _jsx(FlipFlop, { flipFlop: redOrOrange, first: 'Red', second: 'Orange' }, void 0) }, void 0), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Override Button Primary BG to" }, void 0), _jsxs(Configuration, { theme: {
+                        }, children: [_jsx(Button, { style: buttonStyles, variant: 'primary', onClick: () => setRedOrOrange(val => !val), children: _jsx(FlipFlop, { flipFlop: redOrOrange, first: 'Red', second: 'Orange' }) }), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Override Button Primary BG to" }), _jsxs(Configuration, { theme: {
                                             components: {
                                                 button: { color: greenOrPurple ? 'green' : 'purple' }
                                             }
-                                        }, children: [_jsx(Button, { style: buttonStyles, variant: 'primary', onClick: () => setGreenOrPurple(val => !val), children: _jsx(FlipFlop, { flipFlop: greenOrPurple, first: 'Green', second: 'Purple' }, void 0) }, void 0), _jsx(Button, { style: { ...buttonStyles, marginTop: '1rem' }, variant: 'secondary', children: "Secondary still inherits interactive" }, void 0), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Reset Button BG" }, void 0), _jsxs(Configuration, { theme: {
+                                        }, children: [_jsx(Button, { style: buttonStyles, variant: 'primary', onClick: () => setGreenOrPurple(val => !val), children: _jsx(FlipFlop, { flipFlop: greenOrPurple, first: 'Green', second: 'Purple' }) }), _jsx(Button, { style: { ...buttonStyles, marginTop: '1rem' }, variant: 'secondary', children: "Secondary still inherits interactive" }), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Reset Button BG" }), _jsxs(Configuration, { theme: {
                                                             components: { button: { color: resetToInitial } }
-                                                        }, children: [_jsx(Button, { style: buttonStyles, variant: 'primary', children: "Inherited from interactive" }, void 0), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Reset Interactive" }, void 0), _jsx(Configuration, { theme: { base: { palette: { interactive: resetToInitial } } }, children: _jsx(Button, { style: buttonStyles, variant: 'primary', children: "Inherited from base" }, void 0) }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0));
+                                                        }, children: [_jsx(Button, { style: buttonStyles, variant: 'primary', children: "Inherited from interactive" }), _jsxs(StyledFieldset, { children: [_jsx("legend", { children: "Reset Interactive" }), _jsx(Configuration, { theme: { base: { palette: { interactive: resetToInitial } } }, children: _jsx(Button, { style: buttonStyles, variant: 'primary', children: "Inherited from base" }) })] })] })] })] })] })] })] })] }));
 };
 export const OverridableActionMenu = () => {
     const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => { } }];
-    return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Cosmos MenuButton', menu: { items: sharedActions } }, void 0), _jsx(Configuration, { overrideMap: {}, children: _jsx(MenuButton, { text: 'Mock PIMC MenuButton', menu: { items: sharedActions } }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Cosmos MenuButton', menu: { items: sharedActions } }), _jsx(Configuration, { overrideMap: {}, children: _jsx(MenuButton, { text: 'Mock PIMC MenuButton', menu: { items: sharedActions } }) })] }));
 };
 export const ConfigurableBaseTheme = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -80,7 +68,7 @@ export const ConfigurableBaseTheme = (args) => {
                     interactive: args.interactive
                 }
             }
-        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }, void 0), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }, void 0) }, void 0), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true }, void 0)] }, void 0) }, void 0));
+        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }) }), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true })] }) }));
 };
 ConfigurableBaseTheme.args = {
     interactive: '#681fc3'
@@ -100,7 +88,7 @@ export const ConfigurableComponentTheme = (args) => {
                     }
                 }
             }
-        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }, void 0), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }, void 0) }, void 0), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true }, void 0)] }, void 0) }, void 0));
+        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }) }), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true })] }) }));
 };
 ConfigurableComponentTheme.args = {
     buttonColor: '#681fc3',
@@ -111,7 +99,7 @@ ConfigurableComponentTheme.argTypes = {
     checkedBackgroundColor: { control: { type: 'color' } }
 };
 export const ConfigurableLocale = (args) => {
-    return (_jsx(Configuration, { locale: args.locale, children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: _jsx(DateInput, { label: 'Date Input with locale support', value: new Date() }, void 0) }, void 0) }, void 0));
+    return (_jsx(Configuration, { locale: args.locale, children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: _jsx(DateInput, { label: 'Date Input with locale support', value: new Date() }) }) }));
 };
 ConfigurableLocale.args = {
     locale: 'en-US'
@@ -123,7 +111,7 @@ export const ConfigurableTranslations = (args) => {
     const spanishTranslation = {
         search_placeholder_default: args.placeholderTranslation
     };
-    return (_jsxs(Flex, { container: { gap: 4 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Default" }, void 0), _jsx(SearchInput, {}, void 0)] }, void 0), _jsx(Configuration, { translations: spanishTranslation, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Translated" }, void 0), _jsx(SearchInput, {}, void 0)] }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { gap: 4 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Default" }), _jsx(SearchInput, {})] }), _jsx(Configuration, { translations: spanishTranslation, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Translated" }), _jsx(SearchInput, {})] }) })] }));
 };
 ConfigurableTranslations.args = {
     placeholderTranslation: 'Buscar...'