@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/jsx/core/Popover/Popover.mocks.jsx

@@ -0,0 +1,114 @@
+import styled, { createGlobalStyle, css } from 'styled-components';
+import { createContext, useLayoutEffect, useMemo } from 'react';
+import { defaultThemeProp, Popover, useElement } from '@pega/cosmos-react-core';
+const PopoverMockContext = createContext({
+    arrow: false,
+    primaryPlacement: 'bottom',
+    secondaryPlacement: 'none',
+    contentSize: 1
+});
+const Target = styled.div ``;
+const PopoverMockHeader = styled.div ``;
+const PopoverMockContent = styled.div(() => {
+    return css `
+    overflow: auto;
+  `;
+});
+const PopoverMockFooter = styled.div ``;
+const MockContentBlock = styled.div(({ theme }) => {
+    return css `
+    min-width: ${theme.base['content-width'].md};
+    padding-block: ${theme.base.spacing};
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+
+    &:first-child {
+      padding-block-start: 0;
+    }
+
+    &:last-child {
+      border: none;
+      padding-block-end: 0;
+    }
+  `;
+});
+MockContentBlock.defaultProps = defaultThemeProp;
+const PopoverMock = styled(Popover)(({ theme }) => {
+    return css `
+    display: flex;
+    flex-direction: column;
+
+    ${PopoverMockHeader},
+    ${PopoverMockContent},
+    ${PopoverMockFooter} {
+      padding: calc(2 * ${theme.base.spacing});
+    }
+  `;
+});
+PopoverMock.defaultProps = defaultThemeProp;
+const GlobalStyle = createGlobalStyle(({ theme }) => {
+    return css `
+    :root {
+      &::before,
+      &::after {
+        position: fixed;
+        content: '';
+        background-color: purple;
+        display: block;
+      }
+
+      &::before {
+        left: 0;
+        right: 0;
+        top: calc(50% - 0.0625rem);
+        height: 0.125rem;
+      }
+
+      &::after {
+        top: 0;
+        bottom: 0;
+        left: calc(50% - 0.0625rem);
+        width: 0.125rem;
+      }
+    }
+
+    body {
+      width: calc(200% - 2rem);
+      height: calc(200% - 2rem);
+    }
+
+    ${Target} {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      inset: 100% auto auto 100%;
+      transform: translate(-2rem, -2rem);
+      background-color: ${theme.base.palette['foreground-color']};
+    }
+  `;
+});
+export const PlaceAndContainMock = ({ arrow, primaryPlacement, secondaryPlacement, contentSize }) => {
+    const [target, setTarget] = useElement(null);
+    useLayoutEffect(() => {
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        window.scrollTo(vw / 2 - 16, vh / 2 - 16);
+    }, []);
+    const mockContent = Array.from({ length: contentSize }, (_, i) => {
+        return <MockContentBlock key={i}>Content item {i + 1}</MockContentBlock>;
+    });
+    const ctxValue = useMemo(() => {
+        return { arrow, primaryPlacement, secondaryPlacement, contentSize };
+    }, [arrow, primaryPlacement, secondaryPlacement, contentSize]);
+    return (<>
+      <GlobalStyle />
+      <PopoverMockContext.Provider value={ctxValue}>
+        <Target ref={setTarget}/>
+        <PopoverMock arrow={arrow} target={target} placement={`${primaryPlacement}${secondaryPlacement && secondaryPlacement !== 'none' ? `-${secondaryPlacement}` : ''}`}>
+          <PopoverMockHeader>Header</PopoverMockHeader>
+          <PopoverMockContent>{mockContent}</PopoverMockContent>
+          <PopoverMockFooter>Footer</PopoverMockFooter>
+        </PopoverMock>
+      </PopoverMockContext.Provider>
+    </>);
+};
+//# sourceMappingURL=Popover.mocks.jsx.map

package/jsx/core/Popover/Popover.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Popover/Popover.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { createGlobalStyle, css } from 'styled-components';\nimport { createContext, useLayoutEffect, useMemo } from 'react';\n\nimport { defaultThemeProp, Popover, PopoverProps, useElement } from '@pega/cosmos-react-core';\n\nexport interface PlaceAndContainMockProps extends Pick<PopoverProps, 'arrow'> {\n  primaryPlacement: 'bottom' | 'top' | 'left' | 'right' | 'none';\n  secondaryPlacement: 'start' | 'end' | 'none';\n  contentSize: number;\n}\n\nconst PopoverMockContext = createContext<PlaceAndContainMockProps>({\n  arrow: false,\n  primaryPlacement: 'bottom',\n  secondaryPlacement: 'none',\n  contentSize: 1\n});\n\nconst Target = styled.div``;\n\nconst PopoverMockHeader = styled.div``;\n\nconst PopoverMockContent = styled.div(() => {\n  return css`\n    overflow: auto;\n  `;\n});\n\nconst PopoverMockFooter = styled.div``;\n\nconst MockContentBlock = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].md};\n    padding-block: ${theme.base.spacing};\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n\n    &:first-child {\n      padding-block-start: 0;\n    }\n\n    &:last-child {\n      border: none;\n      padding-block-end: 0;\n    }\n  `;\n});\n\nMockContentBlock.defaultProps = defaultThemeProp;\n\nconst PopoverMock = styled(Popover)(({ theme }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n\n    ${PopoverMockHeader},\n    ${PopoverMockContent},\n    ${PopoverMockFooter} {\n      padding: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nPopoverMock.defaultProps = defaultThemeProp;\n\nconst GlobalStyle = createGlobalStyle(({ theme }) => {\n  return css`\n    :root {\n      &::before,\n      &::after {\n        position: fixed;\n        content: '';\n        background-color: purple;\n        display: block;\n      }\n\n      &::before {\n        left: 0;\n        right: 0;\n        top: calc(50% - 0.0625rem);\n        height: 0.125rem;\n      }\n\n      &::after {\n        top: 0;\n        bottom: 0;\n        left: calc(50% - 0.0625rem);\n        width: 0.125rem;\n      }\n    }\n\n    body {\n      width: calc(200% - 2rem);\n      height: calc(200% - 2rem);\n    }\n\n    ${Target} {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n      inset: 100% auto auto 100%;\n      transform: translate(-2rem, -2rem);\n      background-color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nexport const PlaceAndContainMock = ({\n  arrow,\n  primaryPlacement,\n  secondaryPlacement,\n  contentSize\n}: PlaceAndContainMockProps) => {\n  const [target, setTarget] = useElement<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const vw = document.documentElement.clientWidth;\n    const vh = document.documentElement.clientHeight;\n\n    window.scrollTo(vw / 2 - 16, vh / 2 - 16);\n  }, []);\n\n  const mockContent = Array.from({ length: contentSize }, (_, i) => {\n    return <MockContentBlock key={i}>Content item {i + 1}</MockContentBlock>;\n  });\n\n  const ctxValue = useMemo(() => {\n    return { arrow, primaryPlacement, secondaryPlacement, contentSize };\n  }, [arrow, primaryPlacement, secondaryPlacement, contentSize]);\n\n  return (\n    <>\n      <GlobalStyle />\n      <PopoverMockContext.Provider value={ctxValue}>\n        <Target ref={setTarget} />\n        <PopoverMock\n          arrow={arrow}\n          target={target}\n          placement={`${primaryPlacement}${\n            secondaryPlacement && secondaryPlacement !== 'none' ? `-${secondaryPlacement}` : ''\n          }`}\n        >\n          <PopoverMockHeader>Header</PopoverMockHeader>\n          <PopoverMockContent>{mockContent}</PopoverMockContent>\n          <PopoverMockFooter>Footer</PopoverMockFooter>\n        </PopoverMock>\n      </PopoverMockContext.Provider>\n    </>\n  );\n};\n"]}

package/jsx/core/Popover/Popover.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryFn } from '@storybook/react';
+import type { PopoverProps } from '@pega/cosmos-react-core';
+import type { PlaceAndContainMockProps } from './Popover.mocks';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const PopoverDemo: StoryFn<Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>>;
+export declare const PopoverGroups: StoryFn;
+export declare const PlaceAndContain: StoryFn<PlaceAndContainMockProps & {
+    placement?: never;
+    showDelay?: never;
+    hideDelay?: never;
+}>;
+//# sourceMappingURL=Popover.stories.d.ts.map

package/jsx/core/Popover/Popover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AActD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;;AAEhE,wBAkCU;AAEV,eAAO,MAAM,WAAW,EAAE,OAAO,CAC/B,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAqFtE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAmF3B,CAAC;AASF,eAAO,MAAM,eAAe,EAAE,OAAO,CACnC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,CAGvF,CAAC"}

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

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import { Button, Card, CardContent, Flex, Link, Popover, Text, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { PlaceAndContainMock } from './Popover.mocks';
+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 PopoverDemo = (args) => {
+    const [mountHoverPopover, setMountHoverPopover] = useState(false);
+    const setHoverPopoverEl = useElement()[1];
+    const [textEl, setTextEl] = useElement();
+    const [mountClickPopover, setMountClickPopover] = useState(false);
+    const setClickPopoverEl = useElement()[1];
+    const [buttonEl, setButtonEl] = useElement();
+    const toggleHoverPopover = ({ type, key }) => {
+        if (type === 'keydown') {
+            if (key === 'Escape')
+                setMountHoverPopover(false);
+            return;
+        }
+        setMountHoverPopover(type === 'mouseover' || type === 'focus');
+    };
+    const hoverMountingHandlers = {
+        onMouseOver: toggleHoverPopover,
+        onMouseOut: toggleHoverPopover,
+        onKeyDown: toggleHoverPopover,
+        onFocus: toggleHoverPopover,
+        onBlur: toggleHoverPopover
+    };
+    const toggleClickPopover = ({ type, key }) => {
+        if (type === 'keydown') {
+            if (key === 'Escape')
+                setMountClickPopover(false);
+            return;
+        }
+        setMountClickPopover(type === 'click' || type === 'focus');
+    };
+    const clickMountingHandlers = {
+        onClick: toggleClickPopover,
+        onKeyDown: toggleClickPopover,
+        onFocus: toggleClickPopover,
+        onBlur: toggleClickPopover
+    };
+    return (<Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>
+      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>
+        Hover Over Me
+      </Text>
+      <Popover ref={setHoverPopoverEl} show={mountHoverPopover} target={textEl} portal arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...hoverMountingHandlers}>
+        <Card>
+          <CardContent>
+            <Text>This Popover appears on hover!</Text>
+          </CardContent>
+        </Card>
+      </Popover>
+      <Button ref={setButtonEl} {...clickMountingHandlers}>
+        Click Me
+      </Button>
+      <Popover ref={setClickPopoverEl} show={mountClickPopover} target={buttonEl} portal arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...clickMountingHandlers}>
+        <Card>
+          <CardContent>
+            <Text>This Popover appears on click!</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>
+      <div>
+        <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>
+      </div>
+      <Text variant='h2'>groupId: tooltip</Text>
+      <div>
+        <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>
+      </div>
+      <Text variant='h2'>No groupId</Text>
+      <div>
+        <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>
+      </div>
+    </Flex>);
+};
+PopoverGroups.argTypes = {
+    arrow: { table: { disable: true } },
+    showDelay: { table: { disable: true } },
+    hideDelay: { table: { disable: true } },
+    placement: { table: { disable: true } }
+};
+export const PlaceAndContain = (args) => {
+    return <PlaceAndContainMock {...args}/>;
+};
+PlaceAndContain.args = {
+    arrow: false,
+    primaryPlacement: 'bottom',
+    secondaryPlacement: 'none',
+    contentSize: 15
+};
+PlaceAndContain.argTypes = {
+    arrow: { control: { type: 'boolean' } },
+    primaryPlacement: {
+        control: { type: 'select' },
+        options: ['bottom', 'top', 'left', 'right', 'none']
+    },
+    secondaryPlacement: {
+        control: { type: 'select' },
+        options: ['none', 'start', 'end']
+    },
+    contentSize: {
+        control: { type: 'range', min: 1, max: 30, step: 1 }
+    },
+    placement: { table: { disable: true } },
+    showDelay: { table: { disable: true } },
+    hideDelay: { table: { disable: true } }
+};
+//# sourceMappingURL=Popover.stories.jsx.map

package/jsx/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":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGtD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,QAAQ;KACpB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACvC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,QAAQ;gBACR,cAAc;gBACd,YAAY;gBACZ,KAAK;gBACL,WAAW;gBACX,SAAS;gBACT,MAAM;gBACN,YAAY;gBACZ,UAAU;gBACV,OAAO;gBACP,aAAa;gBACb,WAAW;gBACX,MAAM;gBACN,YAAY;gBACZ,UAAU;aACX;YACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAEpB,CAAC,IAA2E,EAAE,EAAE;IAClF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAG,UAAU,EAAkB,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAkB,CAAC;IAEzD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAG,UAAU,EAAkB,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEhE,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAiC,EAAE,EAAE;QAC1E,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,GAAG,KAAK,QAAQ;gBAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAClD,OAAO;SACR;QACD,oBAAoB,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC;IACjE,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B,WAAW,EAAE,kBAAkB;QAC/B,UAAU,EAAE,kBAAkB;QAC9B,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,kBAAkB;QAC3B,MAAM,EAAE,kBAAkB;KAC3B,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAiC,EAAE,EAAE;QAC1E,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,GAAG,KAAK,QAAQ;gBAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAClD,OAAO;SACR;QACD,oBAAoB,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,kBAAkB;QAC3B,MAAM,EAAE,kBAAkB;KAC3B,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAC3E;MAAA,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,qBAAqB,CAAC,CAC3D;;MACF,EAAE,IAAI,CACN;MAAA,CAAC,OAAO,CACN,GAAG,CAAC,CAAC,iBAAiB,CAAC,CACvB,IAAI,CAAC,CAAC,iBAAiB,CAAC,CACxB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,MAAM,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,IAAI,qBAAqB,CAAC,CAE1B;QAAA,CAAC,IAAI,CACH;UAAA,CAAC,WAAW,CACV;YAAA,CAAC,IAAI,CAAC,8BAA8B,EAAE,IAAI,CAC5C;UAAA,EAAE,WAAW,CACf;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,OAAO,CACT;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAClD;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,OAAO,CACN,GAAG,CAAC,CAAC,iBAAiB,CAAC,CACvB,IAAI,CAAC,CAAC,iBAAiB,CAAC,CACxB,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,MAAM,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,IAAI,qBAAqB,CAAC,CAE1B;QAAA,CAAC,IAAI,CACH;UAAA,CAAC,WAAW,CACV;YAAA,CAAC,IAAI,CAAC,8BAA8B,EAAE,IAAI,CAC5C;UAAA,EAAE,WAAW,CACf;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,OAAO,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAY,GAAG,EAAE;IACzC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACpF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACtF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEpF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACpF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACtF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEpF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,IAAI,CAC9C;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAC5C;;QACF,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAC5C;;QACF,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAC5C;;QACF,EAAE,IAAI,CACR;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CACzC;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAClE;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,eAAe,CACrD;;QACF,EAAE,OAAO,CACT;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,sBAAsB,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CACpE;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,gBAAgB,CACvD;;QACF,EAAE,OAAO,CACT;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAClE;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,eAAe,CACrD;;QACF,EAAE,OAAO,CACX;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACnC;MAAA,CAAC,GAAG,CACF;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CACpF;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAC1D;UAAA,CAAC,IAAI,CACH;YAAA,CAAC,WAAW,CACV;cAAA,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACxB;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CACtF;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAC5D;UAAA,CAAC,IAAI,CACH;YAAA,CAAC,WAAW,CACV;cAAA,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACxB;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CACpF;;QACF,EAAE,MAAM,CACR;QAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAC1D;UAAA,CAAC,IAAI,CACH;YAAA,CAAC,WAAW,CACV;cAAA,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACxB;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,OAAO,CACX;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAExB,CAAC,IAA8B,EAAE,EAAE;IACrC,OAAO,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC,EAAG,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,KAAK;IACZ,gBAAgB,EAAE,QAAQ;IAC1B,kBAAkB,EAAE,MAAM;IAC1B,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,gBAAgB,EAAE;QAChB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;KACpD;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;KAClC;IACD,WAAW,EAAE;QACX,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;KACrD;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACxC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  Link,\n  Popover,\n  Text,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport { PlaceAndContainMock } from './Popover.mocks';\nimport type { PlaceAndContainMockProps } from './Popover.mocks';\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 PopoverDemo: StoryFn<\n  Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>\n> = (args: Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>) => {\n  const [mountHoverPopover, setMountHoverPopover] = useState(false);\n  const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n  const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n  const [mountClickPopover, setMountClickPopover] = useState(false);\n  const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n  const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountHoverPopover(false);\n      return;\n    }\n    setMountHoverPopover(type === 'mouseover' || type === 'focus');\n  };\n\n  const hoverMountingHandlers = {\n    onMouseOver: toggleHoverPopover,\n    onMouseOut: toggleHoverPopover,\n    onKeyDown: toggleHoverPopover,\n    onFocus: toggleHoverPopover,\n    onBlur: toggleHoverPopover\n  };\n\n  const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountClickPopover(false);\n      return;\n    }\n    setMountClickPopover(type === 'click' || type === 'focus');\n  };\n\n  const clickMountingHandlers = {\n    onClick: toggleClickPopover,\n    onKeyDown: toggleClickPopover,\n    onFocus: toggleClickPopover,\n    onBlur: toggleClickPopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n        Hover Over Me\n      </Text>\n      <Popover\n        ref={setHoverPopoverEl}\n        show={mountHoverPopover}\n        target={textEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...hoverMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n      <Button ref={setButtonEl} {...clickMountingHandlers}>\n        Click Me\n      </Button>\n      <Popover\n        ref={setClickPopoverEl}\n        show={mountClickPopover}\n        target={buttonEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...clickMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on click!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const PopoverGroups: StoryFn = () => {\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      <div>\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      </div>\n      <Text variant='h2'>groupId: tooltip</Text>\n      <div>\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      </div>\n      <Text variant='h2'>No groupId</Text>\n      <div>\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      </div>\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\nexport const PlaceAndContain: StoryFn<\n  PlaceAndContainMockProps & { placement?: never; showDelay?: never; hideDelay?: never }\n> = (args: PlaceAndContainMockProps) => {\n  return <PlaceAndContainMock {...args} />;\n};\n\nPlaceAndContain.args = {\n  arrow: false,\n  primaryPlacement: 'bottom',\n  secondaryPlacement: 'none',\n  contentSize: 15\n};\n\nPlaceAndContain.argTypes = {\n  arrow: { control: { type: 'boolean' } },\n  primaryPlacement: {\n    control: { type: 'select' },\n    options: ['bottom', 'top', 'left', 'right', 'none']\n  },\n  secondaryPlacement: {\n    control: { type: 'select' },\n    options: ['none', 'start', 'end']\n  },\n  contentSize: {\n    control: { type: 'range', min: 1, max: 30, step: 1 }\n  },\n  placement: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } }\n};\n"]}

package/jsx/core/Progress/Progress.mocks.d.ts

@@ -0,0 +1,2 @@
+export declare const loadingTimeoutMS = 2000;
+//# sourceMappingURL=Progress.mocks.d.ts.map

package/jsx/core/Progress/Progress.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,OAAO,CAAC"}

package/jsx/core/Progress/Progress.mocks.js

@@ -0,0 +1,2 @@
+export const loadingTimeoutMS = 2000;
+//# sourceMappingURL=Progress.mocks.js.map

package/jsx/core/Progress/Progress.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.mocks.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC","sourcesContent":["export const loadingTimeoutMS = 2000;\n"]}

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

@@ -0,0 +1,16 @@
+import type { StoryFn } from '@storybook/react';
+import type { ProgressProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface ProgressDemoProps extends ProgressProps {
+    announce?: boolean;
+    determinate?: boolean;
+    focusOnVisible?: boolean;
+    cycleProp?: 'none' | 'value' | 'message' | 'visible';
+}
+export declare const ProgressDemo: StoryFn<ProgressDemoProps>;
+interface ConfigurableProgressProps extends ProgressProps {
+    progressColor?: string;
+}
+export declare const ConfigurableProgress: StoryFn<ConfigurableProgressProps>;
+//# sourceMappingURL=Progress.stories.d.ts.map

package/jsx/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":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAK7D,wBA0BU;AAEV,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAqFnD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CAkBnE,CAAC"}

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

@@ -0,0 +1,124 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';
+import { StyledDemoWrap } from './Progress.styles';
+import { loadingTimeoutMS } from './Progress.mocks';
+export default {
+    title: 'Core/Progress',
+    component: Progress,
+    excludeStories: ['ConfigurableProgress'],
+    args: {
+        variant: 'ring',
+        placement: 'local',
+        message: '',
+        determinate: false,
+        value: 67,
+        focusOnVisible: false,
+        visible: true,
+        announce: false,
+        cycleProp: 'none'
+    },
+    argTypes: {
+        variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },
+        placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },
+        message: { control: { type: 'text' } },
+        focusOnVisible: { control: { type: 'boolean' } },
+        determinate: { control: { type: 'boolean' } },
+        value: { control: { type: 'number' } },
+        visible: { control: { type: 'boolean' } },
+        announce: { control: { type: 'boolean' } },
+        cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }
+    }
+};
+export const ProgressDemo = (args) => {
+    const cycling = args.cycleProp !== 'none';
+    const [visible, setVisible] = useState(args.visible);
+    const [value, setValue] = useState(args.value ?? 0);
+    const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];
+    const [messageIndex, setMessageIndex] = useState(0);
+    const message = useMemo(() => {
+        if (args.cycleProp === 'message') {
+            return messages[messageIndex];
+        }
+        return args.message;
+    }, [args.cycleProp, args.message, messageIndex]);
+    useEffect(() => {
+        if (args.cycleProp !== 'value') {
+            setValue(args.value ?? 0);
+        }
+    }, [args.cycleProp, args.value]);
+    useEffect(() => {
+        if (args.cycleProp !== 'visible') {
+            setVisible(args.visible);
+        }
+    }, [args.cycleProp, args.visible]);
+    useEffect(() => {
+        if (args.cycleProp === 'none')
+            return;
+        const timeout = setTimeout(() => {
+            switch (args.cycleProp) {
+                case 'message': {
+                    if (messageIndex < messages.length - 1)
+                        setMessageIndex(messageIndex + 1);
+                    else
+                        setMessageIndex(0);
+                    break;
+                }
+                case 'value': {
+                    if (value < 100)
+                        setValue(Math.min(value + 10, 100));
+                    else
+                        setValue(0);
+                    break;
+                }
+                case 'visible': {
+                    setVisible(!visible);
+                    break;
+                }
+                default:
+                    break;
+            }
+        }, loadingTimeoutMS);
+        if (!cycling) {
+            clearTimeout(timeout);
+        }
+        return () => clearTimeout(timeout);
+    }, [args.cycleProp, message, visible, value, cycling]);
+    return (<Flex container={{ direction: 'column', gap: 1 }}>
+      <Text variant='h1'>Demo Content</Text>
+
+      <StyledDemoWrap>
+        {['block', 'local'].includes(args.placement || '') && (<Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </Text>)}
+        {args.placement === 'inline' && <Text>Progress demo </Text>}
+        <Progress variant={args.variant} placement={args.placement} message={message} value={args.determinate || args.cycleProp === 'value' ? value : undefined} visible={visible} focusOnVisible={args.focusOnVisible} liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}/>
+      </StyledDemoWrap>
+    </Flex>);
+};
+export const ConfigurableProgress = (args) => {
+    return (<Configuration theme={{
+            components: {
+                progress: {
+                    'progress-color': args.progressColor
+                }
+            }
+        }}>
+      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>
+        <Progress variant={args.variant} placement='local' message='Loading' visible/>
+      </Flex>
+    </Configuration>);
+};
+ConfigurableProgress.args = {
+    progressColor: '#076bc9'
+};
+ConfigurableProgress.argTypes = {
+    progressColor: { control: { type: 'color' } },
+    placement: { table: { disable: true } },
+    message: { table: { disable: true } }
+};
+//# sourceMappingURL=Progress.stories.jsx.map

package/jsx/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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;IACxC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,KAAK;QAClB,KAAK,EAAE,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC3F,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACtC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,EAAE;KAC7F;CACM,CAAC;AASV,MAAM,CAAC,MAAM,YAAY,GAA+B,CAAC,IAAuB,EAAE,EAAE;IAClF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,eAAe,EAAE,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAChC,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAChC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM;YAAE,OAAO;QAEtC,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,QAAQ,IAAI,CAAC,SAAS,EAAE;gBACtB,KAAK,SAAS,CAAC,CAAC;oBACd,IAAI,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;wBAAE,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;;wBACrE,eAAe,CAAC,CAAC,CAAC,CAAC;oBACxB,MAAM;iBACP;gBACD,KAAK,OAAO,CAAC,CAAC;oBACZ,IAAI,KAAK,GAAG,GAAG;wBAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;;wBAChD,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACjB,MAAM;iBACP;gBACD,KAAK,SAAS,CAAC,CAAC;oBACd,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;oBACrB,MAAM;iBACP;gBACD;oBACE,MAAM;aACT;QACH,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAErB,IAAI,CAAC,OAAO,EAAE;YACZ,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAErC;;MAAA,CAAC,cAAc,CACb;QAAA,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,IAAI,CACpD,CAAC,IAAI,CACH;;;;;;;UAMF,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAC3D;QAAA,CAAC,QAAQ,CACP,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1E,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,UAAU,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAExE;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,oBAAoB,GAAuC,CACtE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,gBAAgB,EAAE,IAAI,CAAC,aAAa;iBACrC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAC/E;QAAA,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAC9E;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';\nimport type { ProgressProps } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\nimport { loadingTimeoutMS } from './Progress.mocks';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  excludeStories: ['ConfigurableProgress'],\n  args: {\n    variant: 'ring',\n    placement: 'local',\n    message: '',\n    determinate: false,\n    value: 67,\n    focusOnVisible: false,\n    visible: true,\n    announce: false,\n    cycleProp: 'none'\n  },\n  argTypes: {\n    variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n    placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },\n    message: { control: { type: 'text' } },\n    focusOnVisible: { control: { type: 'boolean' } },\n    determinate: { control: { type: 'boolean' } },\n    value: { control: { type: 'number' } },\n    visible: { control: { type: 'boolean' } },\n    announce: { control: { type: 'boolean' } },\n    cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }\n  }\n} as Meta;\n\ninterface ProgressDemoProps extends ProgressProps {\n  announce?: boolean;\n  determinate?: boolean;\n  focusOnVisible?: boolean;\n  cycleProp?: 'none' | 'value' | 'message' | 'visible';\n}\n\nexport const ProgressDemo: StoryFn<ProgressDemoProps> = (args: ProgressDemoProps) => {\n  const cycling = args.cycleProp !== 'none';\n  const [visible, setVisible] = useState(args.visible);\n  const [value, setValue] = useState(args.value ?? 0);\n  const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];\n  const [messageIndex, setMessageIndex] = useState(0);\n  const message = useMemo(() => {\n    if (args.cycleProp === 'message') {\n      return messages[messageIndex];\n    }\n\n    return args.message;\n  }, [args.cycleProp, args.message, messageIndex]);\n\n  useEffect(() => {\n    if (args.cycleProp !== 'value') {\n      setValue(args.value ?? 0);\n    }\n  }, [args.cycleProp, args.value]);\n\n  useEffect(() => {\n    if (args.cycleProp !== 'visible') {\n      setVisible(args.visible);\n    }\n  }, [args.cycleProp, args.visible]);\n\n  useEffect(() => {\n    if (args.cycleProp === 'none') return;\n\n    const timeout = setTimeout(() => {\n      switch (args.cycleProp) {\n        case 'message': {\n          if (messageIndex < messages.length - 1) setMessageIndex(messageIndex + 1);\n          else setMessageIndex(0);\n          break;\n        }\n        case 'value': {\n          if (value < 100) setValue(Math.min(value + 10, 100));\n          else setValue(0);\n          break;\n        }\n        case 'visible': {\n          setVisible(!visible);\n          break;\n        }\n        default:\n          break;\n      }\n    }, loadingTimeoutMS);\n\n    if (!cycling) {\n      clearTimeout(timeout);\n    }\n\n    return () => clearTimeout(timeout);\n  }, [args.cycleProp, message, visible, value, cycling]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }}>\n      <Text variant='h1'>Demo Content</Text>\n\n      <StyledDemoWrap>\n        {['block', 'local'].includes(args.placement || '') && (\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n            mollit anim id est laborum.\n          </Text>\n        )}\n        {args.placement === 'inline' && <Text>Progress demo </Text>}\n        <Progress\n          variant={args.variant}\n          placement={args.placement}\n          message={message}\n          value={args.determinate || args.cycleProp === 'value' ? value : undefined}\n          visible={visible}\n          focusOnVisible={args.focusOnVisible}\n          liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}\n        />\n      </StyledDemoWrap>\n    </Flex>\n  );\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n  progressColor?: string;\n}\n\nexport const ConfigurableProgress: StoryFn<ConfigurableProgressProps> = (\n  args: ConfigurableProgressProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          progress: {\n            'progress-color': args.progressColor\n          }\n        }\n      }}\n    >\n      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n        <Progress variant={args.variant} placement='local' message='Loading' visible />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableProgress.args = {\n  progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n  progressColor: { control: { type: 'color' } },\n  placement: { table: { disable: true } },\n  message: { table: { disable: true } }\n};\n"]}

package/jsx/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/jsx/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,yGASzB,CAAC"}

package/jsx/core/Progress/Progress.styles.js

@@ -0,0 +1,14 @@
+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;
+    min-height: 15vh;
+    background: ${theme.base.palette['primary-background']};
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledDemoWrap.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Progress.styles.js.map

package/jsx/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;wBACvC,KAAK,CAAC,IAAI,CAAC,OAAO;GACvC,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    min-height: 15vh;\n    background: ${theme.base.palette['primary-background']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledDemoWrap.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/QRCode/QRCode.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface QRCodeDemoProps {
+    value: string;
+    label: string;
+}
+export declare const QRCodeDemo: StoryFn<QRCodeDemoProps>;
+//# sourceMappingURL=QRCode.stories.d.ts.map

package/jsx/core/QRCode/QRCode.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.stories.d.ts","sourceRoot":"","sources":["../../../src/core/QRCode/QRCode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAItD,wBAWU;AAEV,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,eAAe,CAE/C,CAAC"}

package/jsx/core/QRCode/QRCode.stories.jsx

@@ -0,0 +1,17 @@
+import { QRCode } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/QRCode',
+    component: QRCode,
+    args: {
+        value: 'QRCode Demo',
+        label: 'QRCode'
+    },
+    argTypes: {
+        value: { type: 'string' },
+        label: { type: 'string' }
+    }
+};
+export const QRCodeDemo = (args) => {
+    return <QRCode value={args.value} label={args.label}/>;
+};
+//# sourceMappingURL=QRCode.stories.jsx.map