@pega/cosmos-react-demos 2.0.0

package/lib/core/Popover/Popover.stories.jsx

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import { Button, Card, CardContent, Flex, Link, Popover, Text, Tooltip, useElement } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Popover',
+    component: Popover,
+    args: {
+        arrow: false,
+        showDelay: 'none',
+        hideDelay: 'none',
+        placement: 'bottom'
+    },
+    argTypes: {
+        arrow: { control: { type: 'boolean' } },
+        showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
+        hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
+        placement: {
+            options: [
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'top',
+                'top-start',
+                'top-end',
+                'left',
+                'left-start',
+                'left-end',
+                'right',
+                'right-start',
+                'right-end',
+                'auto',
+                'auto-start',
+                'auto-end'
+            ],
+            control: { type: 'select' }
+        }
+    }
+};
+export const HoverPopover = (args) => {
+    const [mountPopover, setMountPopover] = useState(false);
+    const setPopoverEl = useElement()[1];
+    const [textEl, setTextEl] = useElement();
+    const togglePopover = ({ type, key }) => {
+        if (type === 'keydown') {
+            if (key === 'Escape')
+                setMountPopover(false);
+            return;
+        }
+        setMountPopover(type === 'mouseover' || type === 'focus');
+    };
+    const mountingHandlers = {
+        onMouseOver: togglePopover,
+        onMouseOut: togglePopover,
+        onFocus: togglePopover,
+        onBlur: togglePopover
+    };
+    return (<Flex container={{ justify: 'center', pad: 4 }}>
+      <Text ref={setTextEl} variant='h1' {...mountingHandlers}>
+        Hover Over Me
+      </Text>
+      <Popover ref={setPopoverEl} show={mountPopover} target={textEl} arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...mountingHandlers}>
+        <Card>
+          <CardContent>
+            <Text>This Popover appears on hover!</Text>
+          </CardContent>
+        </Card>
+      </Popover>
+    </Flex>);
+};
+export const ClickPopover = (args) => {
+    const [mountPopover, setMountPopover] = useState(false);
+    const setPopoverEl = useElement()[1];
+    const [buttonEl, setButtonEl] = useElement();
+    const togglePopover = ({ type, key }) => {
+        if (type === 'keydown') {
+            if (key === 'Escape')
+                setMountPopover(false);
+            return;
+        }
+        setMountPopover(type === 'click' || type === 'focus');
+    };
+    const mountingHandlers = {
+        onClick: togglePopover,
+        onFocus: togglePopover,
+        onBlur: togglePopover
+    };
+    return (<Flex container={{ justify: 'center', pad: 4 }}>
+      <Button ref={setButtonEl} {...mountingHandlers}>
+        Click Me
+      </Button>
+      <Popover ref={setPopoverEl} show={mountPopover} target={buttonEl} arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...mountingHandlers}>
+        <Card>
+          <CardContent>
+            <Text>This Popover appears on hover!</Text>
+          </CardContent>
+        </Card>
+      </Popover>
+    </Flex>);
+};
+export const PopoverGroups = () => {
+    const [firstTooltipButton, setFirstTooltipButton] = useElement();
+    const [secondTooltipButton, setSecondTooltipButton] = useElement();
+    const [thirdTooltipButton, setThirdTooltipButton] = useElement();
+    const [firstPopoverButton, setFirstPopoverButton] = useElement();
+    const [secondPopoverButton, setSecondPopoverButton] = useElement();
+    const [thirdPopoverButton, setThirdPopoverButton] = useElement();
+    const [showFirstPopover, setShowFirstPopover] = useState(false);
+    const [showSecondPopover, setShowSecondPopover] = useState(false);
+    const [showThirdPopover, setShowThirdPopover] = useState(false);
+    return (<Flex container={{ direction: 'column', gap: 4 }}>
+      <Text variant='h2'>groupId: link_preview</Text>
+      <Flex>
+        <Link href='http://www.google.com' previewable>
+          Previewable Link
+        </Link>
+        <Link href='http://www.google.com' previewable>
+          Previewable Link
+        </Link>
+        <Link href='http://www.google.com' previewable>
+          Previewable Link
+        </Link>
+      </Flex>
+      <Text variant='h2'>groupId: tooltip</Text>
+      <Flex>
+        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>
+          Hover me
+        </Button>
+        <Tooltip target={firstTooltipButton} id='first-tooltip'>
+          This is a tooltip for the first button.
+        </Tooltip>
+        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>
+          Hover me
+        </Button>
+        <Tooltip target={secondTooltipButton} id='second-tooltip'>
+          This is a tooltip for the second button.
+        </Tooltip>
+        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>
+          Hover me
+        </Button>
+        <Tooltip target={thirdTooltipButton} id='third-tooltip'>
+          This is a tooltip for the third button.
+        </Tooltip>
+      </Flex>
+      <Text variant='h2'>No groupId</Text>
+      <Flex>
+        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>
+          Click me
+        </Button>
+        <Popover show={showFirstPopover} target={firstPopoverButton}>
+          <Card>
+            <CardContent>
+              <Text>Popover #1</Text>
+            </CardContent>
+          </Card>
+        </Popover>
+        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>
+          Click me
+        </Button>
+        <Popover show={showSecondPopover} target={secondPopoverButton}>
+          <Card>
+            <CardContent>
+              <Text>Popover #2</Text>
+            </CardContent>
+          </Card>
+        </Popover>
+        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>
+          Click me
+        </Button>
+        <Popover show={showThirdPopover} target={thirdPopoverButton}>
+          <Card>
+            <CardContent>
+              <Text>Popover #3</Text>
+            </CardContent>
+          </Card>
+        </Popover>
+      </Flex>
+    </Flex>);
+};
+PopoverGroups.argTypes = {
+    arrow: { table: { disable: true } },
+    showDelay: { table: { disable: true } },
+    hideDelay: { table: { disable: true } },
+    placement: { table: { disable: true } }
+};
+//# sourceMappingURL=Popover.stories.jsx.map

package/lib/core/Popover/Popover.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.jsx","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  Link,\n  Popover,\n  PopoverProps,\n  Text,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Popover',\n  component: Popover,\n  args: {\n    arrow: false,\n    showDelay: 'none',\n    hideDelay: 'none',\n    placement: 'bottom'\n  },\n  argTypes: {\n    arrow: { control: { type: 'boolean' } },\n    showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    placement: {\n      options: [\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'top',\n        'top-start',\n        'top-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n        'auto',\n        'auto-start',\n        'auto-end'\n      ],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const HoverPopover: Story<PopoverProps> = (args: PopoverProps) => {\n  const [mountPopover, setMountPopover] = useState(false);\n  const setPopoverEl = useElement<HTMLDivElement>()[1];\n  const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n  const togglePopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountPopover(false);\n      return;\n    }\n    setMountPopover(type === 'mouseover' || type === 'focus');\n  };\n\n  const mountingHandlers = {\n    onMouseOver: togglePopover,\n    onMouseOut: togglePopover,\n    onFocus: togglePopover,\n    onBlur: togglePopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4 }}>\n      <Text ref={setTextEl} variant='h1' {...mountingHandlers}>\n        Hover Over Me\n      </Text>\n      <Popover\n        ref={setPopoverEl}\n        show={mountPopover}\n        target={textEl}\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...mountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const ClickPopover: Story<PopoverProps> = (args: PopoverProps) => {\n  const [mountPopover, setMountPopover] = useState(false);\n  const setPopoverEl = useElement<HTMLDivElement>()[1];\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n  const togglePopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountPopover(false);\n      return;\n    }\n    setMountPopover(type === 'click' || type === 'focus');\n  };\n\n  const mountingHandlers = {\n    onClick: togglePopover,\n    onFocus: togglePopover,\n    onBlur: togglePopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4 }}>\n      <Button ref={setButtonEl} {...mountingHandlers}>\n        Click Me\n      </Button>\n      <Popover\n        ref={setPopoverEl}\n        show={mountPopover}\n        target={buttonEl}\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...mountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const PopoverGroups: Story = () => {\n  const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n  const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n  const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n  const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n  const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n  const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n  const [showFirstPopover, setShowFirstPopover] = useState(false);\n  const [showSecondPopover, setShowSecondPopover] = useState(false);\n  const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 4 }}>\n      <Text variant='h2'>groupId: link_preview</Text>\n      <Flex>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n      </Flex>\n      <Text variant='h2'>groupId: tooltip</Text>\n      <Flex>\n        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={firstTooltipButton} id='first-tooltip'>\n          This is a tooltip for the first button.\n        </Tooltip>\n        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={secondTooltipButton} id='second-tooltip'>\n          This is a tooltip for the second button.\n        </Tooltip>\n        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n          This is a tooltip for the third button.\n        </Tooltip>\n      </Flex>\n      <Text variant='h2'>No groupId</Text>\n      <Flex>\n        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showFirstPopover} target={firstPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #1</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showSecondPopover} target={secondPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #2</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showThirdPopover} target={thirdPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #3</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n      </Flex>\n    </Flex>\n  );\n};\n\nPopoverGroups.argTypes = {\n  arrow: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } },\n  placement: { table: { disable: true } }\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA0B,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAItF,wBAaU;AAEV,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,aAAa,CA+BtD,CAAC;AAMF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAgCpD,CAAC"}

package/lib/core/Progress/Progress.stories.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { Button, Flex, Progress, Text } from '@pega/cosmos-react-core';
+import { StyledDemoWrap } from './Progress.styles';
+export default {
+    title: 'Core/Progress',
+    component: Progress,
+    args: {
+        variant: 'ring',
+        placement: 'local',
+        message: ''
+    },
+    argTypes: {
+        variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },
+        placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },
+        message: { control: { type: 'text' } }
+    }
+};
+export const IndeterminateProgress = (args) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+    useEffect(() => {
+        if (args.placement === 'global') {
+            setLoading(false);
+        }
+        else {
+            setLoading(true);
+        }
+    }, [args.placement]);
+    return (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>
+      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}
+      {args.placement === 'inline' && <Text>Progress demo</Text>}
+      <Progress variant={args.variant} placement={args.placement} message={args.message} visible={loading}/>
+    </Flex>);
+};
+IndeterminateProgress.args = {
+    message: 'Loading'
+};
+export const DeterminateProgress = (args) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+    useEffect(() => {
+        if (args.placement === 'global') {
+            setLoading(false);
+        }
+        else {
+            setLoading(true);
+        }
+    }, [args.placement]);
+    return (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>
+      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}
+      {args.placement === 'inline' && <Text>Progress demo</Text>}
+      <Progress value={args.value} variant={args.variant} placement={args.placement} message={args.message || `${args.value}%`} visible={loading}/>
+    </Flex>);
+};
+DeterminateProgress.args = {
+    value: 67
+};
+DeterminateProgress.argTypes = {
+    value: { control: { type: 'number' } }
+};
+//# sourceMappingURL=Progress.stories.jsx.map

package/lib/core/Progress/Progress.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.jsx","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Button, Flex, Progress, ProgressProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  args: {\n    variant: 'ring',\n    placement: 'local',\n    message: ''\n  },\n  argTypes: {\n    variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n    placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n    message: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nIndeterminateProgress.args = {\n  message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        value={args.value}\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message || `${args.value}%`}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nDeterminateProgress.args = {\n  value: 67\n};\n\nDeterminateProgress.argTypes = {\n  value: { control: { type: 'number' } }\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,yGAQzB,CAAC"}

package/lib/core/Progress/Progress.styles.js

@@ -0,0 +1,13 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledDemoWrap = styled.div(({ theme }) => {
+    return css `
+    position: relative;
+    width: 50vw;
+    height: 15vh;
+    background: ${theme.base.palette['primary-background']};
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
+  `;
+});
+StyledDemoWrap.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Progress.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;;;kBAIM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;8BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledDemoWrap = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    width: 50vw;\n    height: 15vh;\n    background: ${theme.base.palette['primary-background']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n  `;\n});\n\nStyledDemoWrap.defaultProps = defaultThemeProp;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAe,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEvE,wBAiBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,eAAe,CAUrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC"}

package/lib/core/RadioButton/RadioButton.stories.jsx

@@ -0,0 +1,26 @@
+import { RadioButton } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/RadioButton',
+    component: RadioButton,
+    args: {
+        status: undefined,
+        label: 'Choose me',
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        label: { control: { type: 'text' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const DefaultRadioButton = (args) => {
+    return (<RadioButton status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+export const RadioButtonCard = (args) => {
+    return (<RadioButton variant='card' status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+//# sourceMappingURL=RadioButton.stories.jsx.map

package/lib/core/RadioButton/RadioButton.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.stories.jsx","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,yBAAyB,CAAC;AAEvE,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,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;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAClF,OAAO,CACL,CAAC,WAAW,CACV,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,MAAM,CACd,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/RadioButton',\n  component: RadioButton,\n  args: {\n    status: undefined,\n    label: 'Choose me',\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAErB,MAAM,yBAAyB,CAAC;;AAIjC,wBAmBU;AAEV,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAkB5D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAsE5D,CAAC"}

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.jsx

@@ -0,0 +1,62 @@
+import { FieldGroup, FieldValueList, Flex, RadioButton, RadioButtonGroup, Text } from '@pega/cosmos-react-core';
+import { Paragraph, StyledImage } from './RadioButtonGroup.styles';
+export default {
+    title: 'Core/RadioButtonGroup',
+    component: RadioButtonGroup,
+    args: {
+        labelHidden: false,
+        inline: false,
+        autoStack: true,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        labelHidden: { control: { type: 'boolean' } },
+        inline: { control: { type: 'boolean' } },
+        autoStack: { control: { type: 'boolean' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const RadioButtonGroupDemo = (args) => {
+    return (<RadioButtonGroup label='What do you want to eat?' name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+      <RadioButton label='Banana' id='Banana' defaultChecked/>
+      <RadioButton label='Apple' id='Apple'/>
+      <RadioButton label='Mango' id='Mango'/>
+      <RadioButton label='Orange' id='Orange'/>
+    </RadioButtonGroup>);
+};
+export const RadioButtonCardGroup = (args) => {
+    return (<RadioButtonGroup variant='card' label='Which visuals appear satisfying?' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+      <RadioButton label={<Flex container={{ direction: 'column', gap: 1 }}>
+            <Text variant='h4'>A paragraph</Text>
+            <Paragraph>
+              This is a paragraph of text. It is meant to appear visually satisfying amongst the
+              other options in this group.
+            </Paragraph>
+          </Flex>} id='paragraph' defaultChecked/>
+      <RadioButton label={<Flex container={{ direction: 'column', gap: 1 }}>
+            <Text variant='h4'>Space</Text>
+            <StyledImage src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale' alt='space'/>
+          </Flex>} id='space-photo'/>
+      <RadioButton label={<Flex container={{ gap: 1, alignItems: 'start' }}>
+            <StyledImage src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale' alt='space'/>
+            <Flex container={{ direction: 'column', gap: 1 }}>
+              <Text variant='h4'>Space</Text>
+              <Paragraph>
+                Space is the final frontier. There is so much to discover within Cosmos!
+              </Paragraph>
+            </Flex>
+          </Flex>} id='cosmos'/>
+      <RadioButton label={<FieldGroup name='Gold service plan'>
+            <FieldValueList fields={[
+                { id: 'service', name: 'Service length', value: '1 year' },
+                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
+                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
+            ]}/>
+          </FieldGroup>} id='phone-plan'/>
+    </RadioButtonGroup>);
+};
+//# sourceMappingURL=RadioButtonGroup.stories.jsx.map

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldGroup,\n  FieldValueList,\n  Flex,\n  RadioButton,\n  RadioButtonGroup,\n  RadioCheckGroupProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n  title: 'Core/RadioButtonGroup',\n  component: RadioButtonGroup,\n  args: {\n    labelHidden: false,\n    inline: false,\n    autoStack: true,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    labelHidden: { control: { type: 'boolean' } },\n    inline: { control: { type: 'boolean' } },\n    autoStack: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const RadioButtonGroupDemo: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <RadioButtonGroup\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton label='Banana' id='Banana' defaultChecked />\n      <RadioButton label='Apple' id='Apple' />\n      <RadioButton label='Mango' id='Mango' />\n      <RadioButton label='Orange' id='Orange' />\n    </RadioButtonGroup>\n  );\n};\n\nexport const RadioButtonCardGroup: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <RadioButtonGroup\n      variant='card'\n      label='Which visuals appear satisfying?'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>A paragraph</Text>\n            <Paragraph>\n              This is a paragraph of text. It is meant to appear visually satisfying amongst the\n              other options in this group.\n            </Paragraph>\n          </Flex>\n        }\n        id='paragraph'\n        defaultChecked\n      />\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>Space</Text>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n          </Flex>\n        }\n        id='space-photo'\n      />\n      <RadioButton\n        label={\n          <Flex container={{ gap: 1, alignItems: 'start' }}>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n            <Flex container={{ direction: 'column', gap: 1 }}>\n              <Text variant='h4'>Space</Text>\n              <Paragraph>\n                Space is the final frontier. There is so much to discover within Cosmos!\n              </Paragraph>\n            </Flex>\n          </Flex>\n        }\n        id='cosmos'\n      />\n      <RadioButton\n        label={\n          <FieldGroup name='Gold service plan'>\n            <FieldValueList\n              fields={[\n                { id: 'service', name: 'Service length', value: '1 year' },\n                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n              ]}\n            />\n          </FieldGroup>\n        }\n        id='phone-plan'\n      />\n    </RadioButtonGroup>\n  );\n};\n"]}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Paragraph: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ImageProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=RadioButtonGroup.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.styles.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,SAAS,mOAErB,CAAC;AAEF,eAAO,MAAM,WAAW,oOAEvB,CAAC"}

package/lib/core/RadioButtonGroup/RadioButtonGroup.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Image, Text } from '@pega/cosmos-react-core';
+export const Paragraph = styled(Text) `
+  width: 30ch;
+`;
+export const StyledImage = styled(Image) `
+  max-width: 6rem;
+`;
+//# sourceMappingURL=RadioButtonGroup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.styles.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEpC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;CAEvC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Image, Text } from '@pega/cosmos-react-core';\n\nexport const Paragraph = styled(Text)`\n  width: 30ch;\n`;\n\nexport const StyledImage = styled(Image)`\n  max-width: 6rem;\n`;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAUzC,CAAC"}

package/lib/core/Rating/Rating.stories.jsx

@@ -0,0 +1,21 @@
+import { Rating } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Rating',
+    component: Rating
+};
+export const RatingDemo = (args) => {
+    return (<Rating {...args} maxRating={args.maxRating} value={args.value} metaInfo={args.metaInfo} aria-label={args['aria-label']}/>);
+};
+RatingDemo.args = {
+    maxRating: 5,
+    value: 3.6,
+    metaInfo: '52 reviews',
+    'aria-label': '3.6 out of 5 stars based on 52 reviews'
+};
+RatingDemo.argTypes = {
+    maxRating: { control: { type: 'number' } },
+    value: { control: { type: 'number' } },
+    metaInfo: { control: { type: 'text' } },
+    'aria-label': { control: { type: 'text' } }
+};
+//# sourceMappingURL=Rating.stories.jsx.map

package/lib/core/Rating/Rating.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.stories.jsx","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAuB,CAAC,IAAiB,EAAE,EAAE;IAClE,OAAO,CACL,CAAC,MAAM,CACL,IAAI,IAAI,CAAC,CACT,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAC/B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,YAAY,EAAE,wCAAwC;CACvD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Rating',\n  component: Rating\n} as Meta;\n\nexport const RatingDemo: Story<RatingProps> = (args: RatingProps) => {\n  return (\n    <Rating\n      {...args}\n      maxRating={args.maxRating}\n      value={args.value}\n      metaInfo={args.metaInfo}\n      aria-label={args['aria-label']}\n    />\n  );\n};\n\nRatingDemo.args = {\n  maxRating: 5,\n  value: 3.6,\n  metaInfo: '52 reviews',\n  'aria-label': '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n  maxRating: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  metaInfo: { control: { type: 'text' } },\n  'aria-label': { control: { type: 'text' } }\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAExE,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC"}

package/lib/core/SearchInput/SearchInput.stories.jsx

@@ -0,0 +1,15 @@
+import { SearchInput } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/SearchInput',
+    component: SearchInput
+};
+export const SearchInputDemo = (args) => {
+    return <SearchInput {...args} placeholder={args.placeholder}/>;
+};
+SearchInputDemo.args = {
+    placeholder: 'Search…'
+};
+SearchInputDemo.argTypes = {
+    placeholder: { control: { type: 'text' } }
+};
+//# sourceMappingURL=SearchInput.stories.jsx.map

package/lib/core/SearchInput/SearchInput.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import { SelectProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface SelectStoryProps extends SelectProps {
+    showAction: boolean;
+}
+export declare const SelectDemo: Story<SelectStoryProps>;
+//# sourceMappingURL=Select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAU,MAAM,yBAAyB,CAAC;;AAEtE,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CA6B9C,CAAC"}