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

package/jsx/core/Icon/Icon.styles.js

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
+export const StyledIconList = styled.ul `
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  height: 100%;
+
+  ${StyledEmptyState} {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const StyledIconListItem = styled.li(({ theme }) => css `
+      padding: calc(2 * ${theme.base.spacing});
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      width: 20%;
+    `);
+StyledIconListItem.defaultProps = defaultThemeProp;
+export const StyledProgressContainer = styled.li `
+  position: relative;
+  height: 2.8rem;
+  width: 100%;
+`;
+//# sourceMappingURL=Icon.styles.js.map

package/jsx/core/Icon/Icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.js","sourceRoot":"","sources":["../../../src/core/Icon/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE7E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;IAMnC,gBAAgB;;;;CAInB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;uCACL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAEnE,CACJ,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI/C,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';\n\nexport const StyledIconList = styled.ul`\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  height: 100%;\n\n  ${StyledEmptyState} {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const StyledIconListItem = styled.li(\n  ({ theme }) =>\n    css`\n      padding: calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      width: 20%;\n    `\n);\n\nStyledIconListItem.defaultProps = defaultThemeProp;\n\nexport const StyledProgressContainer = styled.li`\n  position: relative;\n  height: 2.8rem;\n  width: 100%;\n`;\n"]}

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

@@ -0,0 +1,6 @@
+import type { StoryFn } from '@storybook/react';
+import type { IconPickerProps } 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;
+export declare const IconPickerDemo: StoryFn<IconPickerProps>;
+//# sourceMappingURL=IconPicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAyBU;AAEV,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAmBnD,CAAC"}

package/jsx/core/IconPicker/IconPicker.stories.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { IconPicker, icons } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/IconPicker',
+    component: IconPicker,
+    args: {
+        defaultSelection: 'pegasus',
+        label: 'IconPicker input',
+        labelHidden: false,
+        info: 'Type in or click to expand the Popover',
+        placeholder: '',
+        status: undefined,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        defaultSelection: { options: icons, control: { type: 'select', icons: true } },
+        label: { control: { type: 'text' } },
+        labelHidden: { control: { type: 'boolean' } },
+        info: { control: { type: 'text', label: 'Helper text' } },
+        placeholder: { control: { type: 'text' } },
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const IconPickerDemo = (args) => {
+    const [iconValue, setIconValue] = useState(args.defaultSelection);
+    return (<IconPicker defaultSelection={iconValue} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} onSelect={(icon) => {
+            setIconValue(icon);
+        }}/>);
+};
+//# sourceMappingURL=IconPicker.stories.jsx.map

package/jsx/core/IconPicker/IconPicker.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG5D,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAC9E,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;QACzD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAChF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAElE,OAAO,CACL,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAC5B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { IconPicker, icons } from '@pega/cosmos-react-core';\nimport type { IconPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { options: icons, control: { type: 'select', icons: true } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text', label: 'Helper text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const IconPickerDemo: StoryFn<IconPickerProps> = (args: IconPickerProps) => {\n  const [iconValue, setIconValue] = useState(args.defaultSelection);\n\n  return (\n    <IconPicker\n      defaultSelection={iconValue}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      onSelect={(icon: string) => {\n        setIconValue(icon);\n      }}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,5 @@
+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;
+export declare const ImageDemo: StoryFn;
+//# sourceMappingURL=Image.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAItD,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,OAIvB,CAAC"}

package/jsx/core/Image/Image.stories.jsx

@@ -0,0 +1,9 @@
+import { Image } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Image',
+    component: Image
+};
+export const ImageDemo = () => {
+    return (<Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega'/>);
+};
+//# sourceMappingURL=Image.stories.jsx.map

package/jsx/core/Image/Image.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.jsx","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAY,GAAG,EAAE;IACrC,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,uEAAuE,CAAC,GAAG,CAAC,MAAM,EAAG,CACjG,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Image } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Image',\n  component: Image\n} as Meta;\n\nexport const ImageDemo: StoryFn = () => {\n  return (\n    <Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega' />\n  );\n};\n"]}

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

@@ -0,0 +1,20 @@
+import type { StoryFn } from '@storybook/react';
+import type { InputProps } 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 InputStoryProps extends InputProps {
+    showAction: boolean;
+    showAdditionalInfo?: boolean;
+}
+export declare const InputDemo: StoryFn<InputStoryProps>;
+interface ConfigurableInputProps {
+    height?: string;
+    padding?: string;
+    errorStatusColor?: string;
+    successStatusColor?: string;
+    warningStatusColor?: string;
+    status?: InputProps['status'];
+}
+export declare const ConfigurableInput: StoryFn<ConfigurableInputProps>;
+export declare const InputWithSuggestion: StoryFn<InputStoryProps>;
+//# sourceMappingURL=Input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAoB,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5E,wBAIU;AAEV,UAAU,eAAgB,SAAQ,UAAU;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,eAAe,CAkC9C,CAAC;AAoCF,UAAU,sBAAsB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAiC7D,CAAC;AAoBF,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,eAAe,CA4DxD,CAAC"}

package/jsx/core/Input/Input.stories.jsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from 'react';
+import { Configuration, Input } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Input',
+    component: Input,
+    excludeStories: ['ConfigurableInput']
+};
+export const InputDemo = (args) => {
+    return (<Input additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} id='input-demo' type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
+            ? [
+                {
+                    id: 'config',
+                    text: 'Configure',
+                    icon: 'gear'
+                }
+            ]
+            : undefined}/>);
+};
+InputDemo.args = {
+    type: 'text',
+    showAction: false,
+    showAdditionalInfo: false,
+    label: 'Input',
+    labelHidden: false,
+    info: 'Enter some value',
+    placeholder: 'Enter your input',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+InputDemo.argTypes = {
+    type: {
+        options: ['text', 'password', 'email', 'url'],
+        control: { type: 'select' }
+    },
+    showAdditionalInfo: { control: { type: 'boolean' } },
+    showAction: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text', label: 'Helper text' } },
+    placeholder: { control: { type: 'text' } },
+    status: {
+        options: [undefined, 'success', 'warning', 'error', 'pending'],
+        control: { type: 'select' }
+    },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const ConfigurableInput = (args) => {
+    return (<Configuration theme={{
+            components: {
+                input: {
+                    height: args.height,
+                    padding: args.padding
+                },
+                'form-field': {
+                    error: {
+                        'status-color': args.errorStatusColor
+                    },
+                    success: {
+                        'status-color': args.successStatusColor
+                    },
+                    warning: {
+                        'status-color': args.warningStatusColor
+                    }
+                }
+            }
+        }}>
+      <Input status={args.status} label='Input' placeholder='Enter your input' info='Enter some value'/>
+    </Configuration>);
+};
+ConfigurableInput.args = {
+    height: '2rem',
+    padding: '0.5rem',
+    errorStatusColor: '#d91c29',
+    successStatusColor: '#20aa50',
+    warningStatusColor: '#fd6000',
+    status: undefined
+};
+ConfigurableInput.argTypes = {
+    height: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } },
+    errorStatusColor: { control: { type: 'color' } },
+    successStatusColor: { control: { type: 'color' } },
+    warningStatusColor: { control: { type: 'color' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
+};
+export const InputWithSuggestion = (args) => {
+    const [status, setStatus] = useState(undefined);
+    const [inputValue, setInputValue] = useState('');
+    const timerRef = useRef();
+    const timer = () => {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            setInputValue('AI suggestion value');
+            setStatus('pending');
+        }, 3000);
+    };
+    useEffect(() => {
+        timer();
+        return () => {
+            window.clearTimeout(timerRef.current);
+        };
+    }, []);
+    return (<Input id='input-demo' value={inputValue} type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
+            ? [
+                {
+                    id: 'config',
+                    text: 'Configure',
+                    icon: 'gear'
+                }
+            ]
+            : undefined} onChange={(e) => {
+            setInputValue(e.target.value);
+            setStatus(undefined);
+            timer();
+        }} onResolveSuggestion={accepted => {
+            if (accepted) {
+                setStatus('success');
+            }
+            else {
+                setStatus(undefined);
+                setInputValue('');
+            }
+            timer();
+        }}/>);
+};
+InputWithSuggestion.args = {
+    type: 'text',
+    showAction: false,
+    label: 'Input',
+    labelHidden: false,
+    info: 'Enter some value',
+    placeholder: 'Enter your input',
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+InputWithSuggestion.argTypes = {
+    type: {
+        options: ['text', 'password', 'email', 'url'],
+        control: { type: 'select' }
+    },
+    showAction: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text', label: 'Helper text' } },
+    placeholder: { control: { type: 'text' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Input.stories.jsx.map

package/jsx/core/Input/Input.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Configuration, Input } from '@pega/cosmos-react-core';\nimport type { FormControlProps, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input,\n  excludeStories: ['ConfigurableInput']\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const InputDemo: StoryFn<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      id='input-demo'\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  showAdditionalInfo: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAdditionalInfo: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text', label: 'Helper text' } },\n  placeholder: { control: { type: 'text' } },\n  status: {\n    options: [undefined, 'success', 'warning', 'error', 'pending'],\n    control: { type: 'select' }\n  },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableInputProps {\n  height?: string;\n  padding?: string;\n  errorStatusColor?: string;\n  successStatusColor?: string;\n  warningStatusColor?: string;\n  status?: InputProps['status'];\n}\n\nexport const ConfigurableInput: StoryFn<ConfigurableInputProps> = (\n  args: ConfigurableInputProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          input: {\n            height: args.height,\n            padding: args.padding\n          },\n          'form-field': {\n            error: {\n              'status-color': args.errorStatusColor\n            },\n            success: {\n              'status-color': args.successStatusColor\n            },\n            warning: {\n              'status-color': args.warningStatusColor\n            }\n          }\n        }\n      }}\n    >\n      <Input\n        status={args.status}\n        label='Input'\n        placeholder='Enter your input'\n        info='Enter some value'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableInput.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  errorStatusColor: '#d91c29',\n  successStatusColor: '#20aa50',\n  warningStatusColor: '#fd6000',\n  status: undefined\n};\n\nConfigurableInput.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  errorStatusColor: { control: { type: 'color' } },\n  successStatusColor: { control: { type: 'color' } },\n  warningStatusColor: { control: { type: 'color' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n\nexport const InputWithSuggestion: StoryFn<InputStoryProps> = (args: InputStoryProps) => {\n  const [status, setStatus] = useState<FormControlProps['status']>(undefined);\n  const [inputValue, setInputValue] = useState('');\n  const timerRef = useRef<number>();\n\n  const timer = () => {\n    window.clearTimeout(timerRef.current);\n    timerRef.current = window.setTimeout(() => {\n      setInputValue('AI suggestion value');\n      setStatus('pending');\n    }, 3000);\n  };\n\n  useEffect(() => {\n    timer();\n    return () => {\n      window.clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <Input\n      id='input-demo'\n      value={inputValue}\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setInputValue(e.target.value);\n        setStatus(undefined);\n        timer();\n      }}\n      onResolveSuggestion={accepted => {\n        if (accepted) {\n          setStatus('success');\n        } else {\n          setStatus(undefined);\n          setInputValue('');\n        }\n        timer();\n      }}\n    />\n  );\n};\n\nInputWithSuggestion.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputWithSuggestion.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text', label: 'Helper text' } },\n  placeholder: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,10 @@
+import type { StoryFn } from '@storybook/react';
+import type { LabelProps } 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;
+export declare const LabelDemo: StoryFn<LabelProps>;
+interface ConfigurableLabelProps {
+    fontSize?: string;
+}
+export declare const ConfigurableLabel: StoryFn<ConfigurableLabelProps>;
+//# sourceMappingURL=Label.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE1D,wBAIU;AAEV,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,UAAU,CAEzC,CAAC;AAUF,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAgB7D,CAAC"}

package/jsx/core/Label/Label.stories.jsx

@@ -0,0 +1,33 @@
+import { Configuration, Label } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Label',
+    component: Label,
+    excludeStories: ['ConfigurableLabel']
+};
+export const LabelDemo = (args) => {
+    return <Label labelHidden={args.labelHidden}>Label</Label>;
+};
+LabelDemo.args = {
+    labelHidden: false
+};
+LabelDemo.argTypes = {
+    labelHidden: { control: { type: 'boolean' } }
+};
+export const ConfigurableLabel = (args) => {
+    return (<Configuration theme={{
+            components: {
+                label: {
+                    'font-size': args.fontSize
+                }
+            }
+        }}>
+      <Label>Label</Label>
+    </Configuration>);
+};
+ConfigurableLabel.args = {
+    fontSize: 'xs'
+};
+ConfigurableLabel.argTypes = {
+    fontSize: { options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'], control: { type: 'select' } }
+};
+//# sourceMappingURL=Label.stories.jsx.map

package/jsx/core/Label/Label.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.jsx","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG/D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC,mBAAmB,CAAC;CAC9B,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,IAAgB,EAAE,EAAE;IACjE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAMF,MAAM,CAAC,MAAM,iBAAiB,GAAoC,CAChE,IAA4B,EAC5B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;iBAC3B;aACF;SACF,CAAC,CAEF;MAAA,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CACrB;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9F,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Configuration, Label } from '@pega/cosmos-react-core';\nimport type { LabelProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Label',\n  component: Label,\n  excludeStories: ['ConfigurableLabel']\n} as Meta;\n\nexport const LabelDemo: StoryFn<LabelProps> = (args: LabelProps) => {\n  return <Label labelHidden={args.labelHidden}>Label</Label>;\n};\n\nLabelDemo.args = {\n  labelHidden: false\n};\n\nLabelDemo.argTypes = {\n  labelHidden: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableLabelProps {\n  fontSize?: string;\n}\n\nexport const ConfigurableLabel: StoryFn<ConfigurableLabelProps> = (\n  args: ConfigurableLabelProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          label: {\n            'font-size': args.fontSize\n          }\n        }\n      }}\n    >\n      <Label>Label</Label>\n    </Configuration>\n  );\n};\n\nConfigurableLabel.args = {\n  fontSize: 'xs'\n};\n\nConfigurableLabel.argTypes = {\n  fontSize: { options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'], control: { type: 'select' } }\n};\n"]}

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

@@ -0,0 +1,15 @@
+export declare const mockAPIImageResources: {
+    id: string;
+    name: string;
+    description: string;
+    mime_type: string;
+    media_url: string;
+}[];
+export declare const mockBadImageResource: {
+    id: string;
+    name: string;
+    description: string;
+    mime_type: string;
+    media_url: string;
+};
+//# sourceMappingURL=Lightbox.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;;;GAyDjC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;CAMhC,CAAC"}

package/jsx/core/Lightbox/Lightbox.mocks.js

@@ -0,0 +1,59 @@
+export const mockAPIImageResources = [
+    {
+        id: 'photo-1497752531616-c3afd9760a11',
+        name: 'Image 1',
+        description: 'Descriptive text about Image 1',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+        id: 'photo-1470093851219-69951fcbb533',
+        name: 'Image 2',
+        description: 'Descriptive text about Image 2',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+        id: 'photo-1447684808650-354ae64db5b8',
+        name: 'Image 3',
+        description: 'Descriptive text about Image 3',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'
+    },
+    {
+        id: 'photo-1425082661705-1834bfd09dca',
+        name: 'Image 4',
+        description: 'Descriptive text about Image 4',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'
+    },
+    {
+        id: 'photo-1494256997604-768d1f608cac',
+        name: 'Image 5',
+        description: 'Descriptive text about Image 5',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'
+    },
+    {
+        id: 'photo-1500694216671-a4e54fc4b513',
+        name: 'Image 6',
+        description: 'Descriptive text about Image 6',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'
+    },
+    {
+        id: 'photo-1638292597251-6fe6b2ba50f9',
+        name: 'Image 7',
+        description: 'Descriptive text about Image 7',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+    }
+];
+export const mockBadImageResource = {
+    id: 'error',
+    name: 'Some image',
+    description: 'Descriptive text about Some image',
+    mime_type: 'image/avif',
+    media_url: ''
+};
+//# sourceMappingURL=Lightbox.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.mocks.js","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,wIAAwI;KAC3I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,wIAAwI;KAC3I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,wIAAwI;KAC3I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,wIAAwI;KAC3I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,wIAAwI;KAC3I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,wIAAwI;KAC3I;IACD;QACE,EAAE,EAAE,kCAAkC;QACtC,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,gCAAgC;QAC7C,SAAS,EAAE,YAAY;QACvB,SAAS,EACP,gKAAgK;KACnK;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,YAAY;IAClB,WAAW,EAAE,mCAAmC;IAChD,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,EAAE;CACd,CAAC","sourcesContent":["export const mockAPIImageResources = [\n  {\n    id: 'photo-1497752531616-c3afd9760a11',\n    name: 'Image 1',\n    description: 'Descriptive text about Image 1',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n  },\n  {\n    id: 'photo-1470093851219-69951fcbb533',\n    name: 'Image 2',\n    description: 'Descriptive text about Image 2',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n  },\n  {\n    id: 'photo-1447684808650-354ae64db5b8',\n    name: 'Image 3',\n    description: 'Descriptive text about Image 3',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'\n  },\n  {\n    id: 'photo-1425082661705-1834bfd09dca',\n    name: 'Image 4',\n    description: 'Descriptive text about Image 4',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'\n  },\n  {\n    id: 'photo-1494256997604-768d1f608cac',\n    name: 'Image 5',\n    description: 'Descriptive text about Image 5',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'\n  },\n  {\n    id: 'photo-1500694216671-a4e54fc4b513',\n    name: 'Image 6',\n    description: 'Descriptive text about Image 6',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'\n  },\n  {\n    id: 'photo-1638292597251-6fe6b2ba50f9',\n    name: 'Image 7',\n    description: 'Descriptive text about Image 7',\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'\n  }\n];\n\nexport const mockBadImageResource = {\n  id: 'error',\n  name: 'Some image',\n  description: 'Descriptive text about Some image',\n  mime_type: 'image/avif',\n  media_url: ''\n};\n"]}

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

@@ -0,0 +1,10 @@
+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 LightboxStoryProps {
+    limit?: number;
+    cycle?: boolean;
+    error?: boolean;
+}
+export declare const LightboxDemo: StoryFn<LightboxStoryProps>;
+//# sourceMappingURL=Lightbox.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAGU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAqDpD,CAAC"}

package/jsx/core/Lightbox/Lightbox.stories.jsx

@@ -0,0 +1,55 @@
+import { useRef, useState } from 'react';
+import { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';
+import { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';
+export default {
+    title: 'Core/Lightbox',
+    component: Lightbox
+};
+export const LightboxDemo = (args) => {
+    const demoButtonRef = useRef(null);
+    const [images, setImages] = useState(null);
+    const onClick = () => {
+        setImages((args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(({ id, name, description, mime_type, media_url }) => {
+            return {
+                id,
+                name,
+                description,
+                src: media_url,
+                metadata: [
+                    mime_type.split('/').pop(),
+                    <DateTimeDisplay value={new Date()} variant='date'/>
+                ]
+            };
+        }));
+    };
+    const onItemDownload = async (id) => {
+        const a = document.createElement('a');
+        a.href = await fetch(id)
+            .then(response => response.blob())
+            .then(blob => URL.createObjectURL(blob));
+        a.download = images?.find(image => image.id === id)?.name ?? id;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    };
+    return (<>
+      <Button ref={demoButtonRef} onClick={onClick}>
+        Open Lightbox
+      </Button>
+      {images && (<Lightbox items={images} cycle={args.cycle || undefined} onAfterClose={() => {
+                setImages(null);
+                demoButtonRef.current?.focus();
+            }} onItemDownload={onItemDownload}/>)}
+    </>);
+};
+LightboxDemo.args = {
+    limit: 7,
+    cycle: false,
+    error: false
+};
+LightboxDemo.argTypes = {
+    limit: { control: { type: 'number' } },
+    cycle: { control: { type: 'boolean' } },
+    error: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Lightbox.stories.jsx.map

package/jsx/core/Lightbox/Lightbox.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, DateTimeDisplay, Lightbox, LightboxItem } from '@pega/cosmos-react-core';\nimport type { LightboxProps } from '@pega/cosmos-react-core';\n\nimport { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\ninterface LightboxStoryProps {\n  limit?: number;\n  cycle?: boolean;\n  error?: boolean;\n}\n\nexport const LightboxDemo: StoryFn<LightboxStoryProps> = (args: LightboxStoryProps) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick}>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={args.cycle || undefined}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nLightboxDemo.args = {\n  limit: 7,\n  cycle: false,\n  error: false\n};\n\nLightboxDemo.argTypes = {\n  limit: { control: { type: 'number' } },\n  cycle: { control: { type: 'boolean' } },\n  error: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,13 @@
+import type { StoryFn } from '@storybook/react';
+import type { LinkProps } 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 LinkStoryArgs extends Pick<LinkProps, 'variant'> {
+}
+interface PreviewableLinkStoryArgs extends LinkStoryArgs, Pick<LinkProps, 'onPreview'> {
+}
+export declare const LinkDemo: StoryFn<LinkStoryArgs>;
+export declare const ExternalLinkDemo: StoryFn<LinkStoryArgs>;
+export declare const PreviewableLink: StoryFn<PreviewableLinkStoryArgs>;
+export declare const MultiplePreviewableLinks: StoryFn<PreviewableLinkStoryArgs>;
+//# sourceMappingURL=Link.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKzD,wBAYU;AAEV,UAAU,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;CAAG;AAC7D,UAAU,wBAAyB,SAAQ,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;CAAG;AAEzF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,aAAa,CAM3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,aAAa,CAMnD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,wBAAwB,CAa7D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,wBAAwB,CAuBtE,CAAC"}

package/jsx/core/Link/Link.stories.jsx

@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions';
+import { registerIcon, Flex, Link } from '@pega/cosmos-react-core';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+registerIcon(plusIcon);
+export default {
+    title: 'Core/Link',
+    component: Link,
+    args: {
+        variant: 'link'
+    },
+    argTypes: {
+        variant: {
+            options: ['link', 'primary', 'secondary', 'simple', 'text'],
+            control: { type: 'select' }
+        }
+    }
+};
+export const LinkDemo = (args) => {
+    return (<Link href='/' variant={args.variant}>
+      Link text
+    </Link>);
+};
+export const ExternalLinkDemo = (args) => {
+    return (<Link href='http://www.pega.com' variant={args.variant}>
+      Visit Pega!
+    </Link>);
+};
+export const PreviewableLink = (args) => {
+    return (<Link href='#ID-123456' variant={args.variant} previewable onPreview={args.onPreview || action('Preview activated')}>
+      ID-123456
+    </Link>);
+};
+export const MultiplePreviewableLinks = (args) => {
+    return (<Flex container={{ gap: 2 }}>
+      <Link href='#ID-123456' variant={args.variant} previewable onPreview={args.onPreview || action('Preview activated')}>
+        ID-123456
+      </Link>
+      <Link href='#ID-ABCDEF' variant={args.variant} previewable onPreview={args.onPreview || action('Preview activated')}>
+        ID-ABCDEF
+      </Link>
+    </Flex>);
+};
+//# sourceMappingURL=Link.stories.jsx.map