npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.21.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1465) hide show

package/jsx/core/Dialog/FormDialog.mocks.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { FormDialogProps } from '@pega/cosmos-react-core';
+export type MockCategory = `Category ${number}`;
+export interface MockItem {
+    readonly id: string;
+    name: string;
+    category: MockCategory;
+}
+export type MockReducerPayload = {
+    type: 'add';
+    item: Pick<MockItem, 'name' | 'category'>;
+} | {
+    type: 'edit';
+    item: MockItem;
+} | {
+    type: 'remove';
+    item: Pick<MockItem, 'id'>;
+};
+export interface MockItemDialogProps extends Pick<FormDialogProps, 'target'> {
+    item: MockItem | null;
+    dispatch: (fieldValues: Pick<MockItem, 'name' | 'category'>) => void;
+    onComplete: () => void;
+}
+export declare const useMockItems: () => [MockItem[], import("react").Dispatch<MockReducerPayload>];
+export declare const ItemDialog: ({ target, item: itemProp, dispatch, onComplete }: MockItemDialogProps) => JSX.Element;
+export declare const FormDialogMock: () => JSX.Element;
+//# sourceMappingURL=FormDialog.mocks.d.ts.map

package/jsx/core/Dialog/FormDialog.mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormDialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/FormDialog.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAKL,eAAe,EAKhB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,YAAY,GAAG,YAAY,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAC1B;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAC3C,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;CAChB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;CAC5B,CAAC;AAEN,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IAC1E,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;IACrE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AA8CD,eAAO,MAAM,YAAY,kEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,qDAKpB,mBAAmB,gBAuIrB,CAAC;AAEF,eAAO,MAAM,cAAc,mBA0E1B,CAAC"}

package/jsx/core/Dialog/FormDialog.mocks.jsx ADDED Viewed

@@ -0,0 +1,194 @@
+import { useEffect, useReducer, useState } from 'react';
+import { ComboBox, createUID, Flex, FormDialog, Input, SummaryList, Text } from '@pega/cosmos-react-core';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+const errorText = 'Cannot be blank';
+const categories = Array.from({ length: 5 }, (_, i) => `Category ${i + 1}`);
+const initialItems = Array.from({ length: 3 }, (_, i) => {
+    return {
+        id: createUID(),
+        name: `Editable item ${i + 1}`,
+        category: categories[i]
+    };
+});
+const itemReducer = (items, payload) => {
+    switch (payload.type) {
+        case 'add': {
+            return [...items, { ...payload.item, id: createUID() }];
+        }
+        case 'edit': {
+            return items.map(item => {
+                return item.id === payload.item.id
+                    ? { ...item, name: payload.item.name, category: payload.item.category }
+                    : item;
+            });
+        }
+        case 'remove': {
+            const itemIndex = items.findIndex(item => item.id === payload.item.id);
+            if (itemIndex === -1)
+                return items;
+            items.splice(itemIndex, 1);
+            return [...items];
+        }
+        default: {
+            return items;
+        }
+    }
+};
+const progressStates = {
+    loading: 'Loading...',
+    submitting: 'Submitting...'
+};
+export const useMockItems = () => {
+    return useReducer(itemReducer, undefined, () => initialItems);
+};
+export const ItemDialog = ({ target, item: itemProp, dispatch, onComplete }) => {
+    const [nameField, setNameField] = useState(() => {
+        return {
+            value: itemProp?.name ?? null,
+            error: null,
+            errorOnPriorBlur: false
+        };
+    });
+    const [categoryField, setCategoryField] = useState(() => {
+        return {
+            value: itemProp?.category ?? null,
+            error: null
+        };
+    });
+    const [progress, setProgress] = useState(progressStates.loading);
+    useEffect(() => {
+        let timerId;
+        if (progress === progressStates.loading) {
+            timerId = window.setTimeout(() => {
+                setProgress(false);
+            }, loadingTimeoutMS);
+        }
+        else if (progress === progressStates.submitting) {
+            timerId = window.setTimeout(() => {
+                setProgress(false);
+                dispatch({ name: nameField.value, category: categoryField.value });
+                onComplete();
+            }, loadingTimeoutMS);
+        }
+        return () => {
+            window.clearTimeout(timerId);
+        };
+    }, [progress]);
+    return (<FormDialog target={target} heading={`${itemProp ? 'Edit' : 'Add'} item`} progress={progress} onCancel={{
+            disabled: progress === progressStates.submitting,
+            handler: () => {
+                setProgress(false);
+                onComplete();
+            }
+        }} onSubmit={{
+            disabled: !!progress || [nameField, categoryField].some(field => !field.value || field.error),
+            handler: () => {
+                setProgress(progressStates.submitting);
+            }
+        }}>
+      {(!progress || progress !== progressStates.loading) && (<Flex container={{ direction: 'column', gap: 2 }}>
+          <Input required label='Name' value={nameField.value ?? ''} onChange={(e) => {
+                setNameField(cur => ({
+                    ...cur,
+                    value: e.target.value,
+                    error: !e.target.value && cur.errorOnPriorBlur ? errorText : null
+                }));
+            }} onBlur={(e) => {
+                if (!e.target.value) {
+                    setNameField(cur => ({
+                        ...cur,
+                        error: errorText,
+                        errorOnPriorBlur: true
+                    }));
+                }
+                else if (nameField.errorOnPriorBlur) {
+                    setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));
+                }
+            }} status={nameField.error ? 'error' : undefined} info={nameField.error}/>
+          <ComboBox required label='Category' selected={categoryField.value
+                ? {
+                    items: {
+                        id: categoryField.value,
+                        text: categoryField.value
+                    }
+                }
+                : undefined} menu={{
+                mode: 'single-select',
+                onItemClick: category => {
+                    setCategoryField({
+                        value: category,
+                        error: null
+                    });
+                },
+                items: categories.map(category => {
+                    return {
+                        id: category,
+                        primary: category,
+                        selected: category === categoryField.value
+                    };
+                })
+            }} onBlur={selected => {
+                if (!selected) {
+                    setCategoryField(cur => ({ ...cur, error: errorText }));
+                }
+            }} status={categoryField.error ? 'error' : undefined} info={categoryField.error}/>
+        </Flex>)}
+    </FormDialog>);
+};
+export const FormDialogMock = () => {
+    const [dialogTarget, setDialogTarget] = useState(null);
+    const [editItem, setEditItem] = useState(null);
+    const [items, dispatch] = useMockItems();
+    return (<>
+      <SummaryList name='Editable items' icon='list' count={items.length} actions={[
+            {
+                id: 'Add',
+                text: 'Add',
+                icon: 'plus',
+                onClick: (_, e) => {
+                    setDialogTarget(e.currentTarget);
+                }
+            }
+        ]} items={items.map(({ id, name, category }) => {
+            return {
+                id,
+                primary: name,
+                secondary: <Text variant='secondary'>{category}</Text>,
+                actions: [
+                    {
+                        id: 'Edit',
+                        text: 'Edit',
+                        icon: 'pencil',
+                        onClick: (_, e, menuButton) => {
+                            if (menuButton)
+                                setDialogTarget(menuButton);
+                            setEditItem({
+                                id,
+                                name,
+                                category
+                            });
+                        }
+                    },
+                    {
+                        id: 'Remove',
+                        text: 'Remove',
+                        icon: 'trash',
+                        onClick: () => {
+                            dispatch({ type: 'remove', item: { id } });
+                        }
+                    }
+                ]
+            };
+        })}/>
+      {dialogTarget && (<ItemDialog target={dialogTarget} item={editItem} dispatch={fields => {
+                dispatch(editItem
+                    ? { type: 'edit', item: { id: editItem.id, ...fields } }
+                    : { type: 'add', item: { ...fields } });
+            }} onComplete={() => {
+                setDialogTarget(null);
+                setEditItem(null);
+            }}/>)}
+    </>);
+};
+//# sourceMappingURL=FormDialog.mocks.jsx.map

package/jsx/core/Dialog/FormDialog.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormDialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/FormDialog.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAU,EAEV,KAAK,EACL,WAAW,EAEX,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AA8B9D,MAAM,SAAS,GAAG,iBAAiB,CAAC;AAEpC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAgB,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAE1F,MAAM,YAAY,GAAe,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAClE,OAAO;QACL,EAAE,EAAE,SAAS,EAAE;QACf,IAAI,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE;QAC9B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;KACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,OAA2B,EAAE,EAAE;IACrE,QAAQ,OAAO,CAAC,IAAI,EAAE;QACpB,KAAK,KAAK,CAAC,CAAC;YACV,OAAO,CAAC,GAAG,KAAK,EAAE,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;SACzD;QAED,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBACtB,OAAO,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,EAAE;oBAChC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;oBACvE,CAAC,CAAC,IAAI,CAAC;YACX,CAAC,CAAC,CAAC;SACJ;QAED,KAAK,QAAQ,CAAC,CAAC;YACb,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACvE,IAAI,SAAS,KAAK,CAAC,CAAC;gBAAE,OAAO,KAAK,CAAC;YACnC,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;YAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC;SACnB;QAED,OAAO,CAAC,CAAC;YACP,OAAO,KAAK,CAAC;SACd;KACF;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG;IACrB,OAAO,EAAE,YAAY;IACrB,UAAU,EAAE,eAAe;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;AAChE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,UAAU,EACU,EAAE,EAAE;IACxB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAIvC,GAAG,EAAE;QACN,OAAO;YACL,KAAK,EAAE,QAAQ,EAAE,IAAI,IAAI,IAAI;YAC7B,KAAK,EAAE,IAAI;YACX,gBAAgB,EAAE,KAAK;SACxB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAG/C,GAAG,EAAE;QACN,OAAO;YACL,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI;YACjC,KAAK,EAAE,IAAI;SACZ,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAEtC,cAAc,CAAC,OAAO,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAe,CAAC;QAEpB,IAAI,QAAQ,KAAK,cAAc,CAAC,OAAO,EAAE;YACvC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC,EAAE,gBAAgB,CAAC,CAAC;SACtB;aAAM,IAAI,QAAQ,KAAK,cAAc,CAAC,UAAU,EAAE;YACjD,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;gBACnB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,KAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,KAAM,EAAE,CAAC,CAAC;gBACrE,UAAU,EAAE,CAAC;YACf,CAAC,EAAE,gBAAgB,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,CAAC,UAAU,CACT,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAC7C,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,QAAQ,CAAC,CAAC;YACR,QAAQ,EAAE,QAAQ,KAAK,cAAc,CAAC,UAAU;YAChD,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;gBACnB,UAAU,EAAE,CAAC;YACf,CAAC;SACF,CAAC,CACF,QAAQ,CAAC,CAAC;YACR,QAAQ,EACN,CAAC,CAAC,QAAQ,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC;YACrF,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;YACzC,CAAC;SACF,CAAC,CAEF;MAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ,KAAK,cAAc,CAAC,OAAO,CAAC,IAAI,CACrD,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;UAAA,CAAC,KAAK,CACJ,QAAQ,CACR,KAAK,CAAC,MAAM,CACZ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAC7B,QAAQ,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;gBAC7C,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;oBACnB,GAAG,GAAG;oBACN,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;oBACrB,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;iBAClE,CAAC,CAAC,CAAC;YACN,CAAC,CAAC,CACF,MAAM,CAAC,CAAC,CAAC,CAA+B,EAAE,EAAE;gBAC1C,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;oBACnB,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;wBACnB,GAAG,GAAG;wBACN,KAAK,EAAE,SAAS;wBAChB,gBAAgB,EAAE,IAAI;qBACvB,CAAC,CAAC,CAAC;iBACL;qBAAM,IAAI,SAAS,CAAC,gBAAgB,EAAE;oBACrC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;iBAC5D;YACH,CAAC,CAAC,CACF,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9C,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,EAExB;UAAA,CAAC,QAAQ,CACP,QAAQ,CACR,KAAK,CAAC,UAAU,CAChB,QAAQ,CAAC,CACP,aAAa,CAAC,KAAK;gBACjB,CAAC,CAAC;oBACE,KAAK,EAAE;wBACL,EAAE,EAAE,aAAa,CAAC,KAAK;wBACvB,IAAI,EAAE,aAAa,CAAC,KAAK;qBAC1B;iBACF;gBACH,CAAC,CAAC,SAAS,CACd,CACD,IAAI,CAAC,CAAC;gBACJ,IAAI,EAAE,eAAe;gBACrB,WAAW,EAAE,QAAQ,CAAC,EAAE;oBACtB,gBAAgB,CAAC;wBACf,KAAK,EAAE,QAAwB;wBAC/B,KAAK,EAAE,IAAI;qBACZ,CAAC,CAAC;gBACL,CAAC;gBACD,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;oBAC/B,OAAO;wBACL,EAAE,EAAE,QAAQ;wBACZ,OAAO,EAAE,QAAQ;wBACjB,QAAQ,EAAE,QAAQ,KAAK,aAAa,CAAC,KAAK;qBAC3C,CAAC;gBACJ,CAAC,CAAC;aACH,CAAC,CACF,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE;gBACjB,IAAI,CAAC,QAAQ,EAAE;oBACb,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;iBACzD;YACH,CAAC,CAAC,CACF,MAAM,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAClD,IAAI,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAE9B;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAuC,IAAI,CAAC,CAAC;IAC7F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,EAAE,CAAC;IAEzC,OAAO,CACL,EACE;MAAA,CAAC,WAAW,CACV,IAAI,CAAC,gBAAgB,CACrB,IAAI,CAAC,MAAM,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACpB,OAAO,CAAC,CAAC;YACP;gBACE,EAAE,EAAE,KAAK;gBACT,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;oBAChB,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;gBACnC,CAAC;aACF;SACF,CAAC,CACF,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,CAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC3D,OAAO;gBACL,EAAE;gBACF,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;gBACtD,OAAO,EAAE;oBACP;wBACE,EAAE,EAAE,MAAM;wBACV,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE;4BAC5B,IAAI,UAAU;gCAAE,eAAe,CAAC,UAAU,CAAC,CAAC;4BAE5C,WAAW,CAAC;gCACV,EAAE;gCACF,IAAI;gCACJ,QAAQ;6BACT,CAAC,CAAC;wBACL,CAAC;qBACF;oBACD;wBACE,EAAE,EAAE,QAAQ;wBACZ,IAAI,EAAE,QAAQ;wBACd,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE,GAAG,EAAE;4BACZ,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;wBAC7C,CAAC;qBACF;iBACF;aACF,CAAC;QACJ,CAAC,CAAC,CAAC,EAGL;;MAAA,CAAC,YAAY,IAAI,CACf,CAAC,UAAU,CACT,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,IAAI,CAAC,CAAC,QAAQ,CAAC,CAEf,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE;gBACjB,QAAQ,CACN,QAAQ;oBACN,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,GAAG,MAAM,EAAE,EAAE;oBACxD,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAG,MAAM,EAAE,EAAE,CACzC,CAAC;YACJ,CAAC,CAAC,CACF,UAAU,CAAC,CAAC,GAAG,EAAE;gBACf,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC,CAAC,EACF,CACH,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ChangeEvent, FocusEvent, useEffect, useReducer, useState } from 'react';\n\nimport {\n ComboBox,\n createUID,\n Flex,\n FormDialog,\n FormDialogProps,\n Input,\n SummaryList,\n SummaryListItem,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nexport type MockCategory = `Category ${number}`;\n\nexport interface MockItem {\n readonly id: string;\n name: string;\n category: MockCategory;\n}\n\nexport type MockReducerPayload =\n | {\n type: 'add';\n item: Pick<MockItem, 'name' | 'category'>;\n }\n | {\n type: 'edit';\n item: MockItem;\n }\n | {\n type: 'remove';\n item: Pick<MockItem, 'id'>;\n };\n\nexport interface MockItemDialogProps extends Pick<FormDialogProps, 'target'> {\n item: MockItem | null;\n dispatch: (fieldValues: Pick<MockItem, 'name' | 'category'>) => void;\n onComplete: () => void;\n}\n\nconst errorText = 'Cannot be blank';\n\nconst categories = Array.from({ length: 5 }, (_, i): MockCategory => `Category ${i + 1}`);\n\nconst initialItems: MockItem[] = Array.from({ length: 3 }, (_, i) => {\n return {\n id: createUID(),\n name: `Editable item ${i + 1}`,\n category: categories[i]\n };\n});\n\nconst itemReducer = (items: MockItem[], payload: MockReducerPayload) => {\n switch (payload.type) {\n case 'add': {\n return [...items, { ...payload.item, id: createUID() }];\n }\n\n case 'edit': {\n return items.map(item => {\n return item.id === payload.item.id\n ? { ...item, name: payload.item.name, category: payload.item.category }\n : item;\n });\n }\n\n case 'remove': {\n const itemIndex = items.findIndex(item => item.id === payload.item.id);\n if (itemIndex === -1) return items;\n items.splice(itemIndex, 1);\n return [...items];\n }\n\n default: {\n return items;\n }\n }\n};\n\nconst progressStates = {\n loading: 'Loading...',\n submitting: 'Submitting...'\n} as const;\n\nexport const useMockItems = () => {\n return useReducer(itemReducer, undefined, () => initialItems);\n};\n\nexport const ItemDialog = ({\n target,\n item: itemProp,\n dispatch,\n onComplete\n}: MockItemDialogProps) => {\n const [nameField, setNameField] = useState<{\n value: string | null;\n error: typeof errorText | null;\n errorOnPriorBlur: boolean;\n }>(() => {\n return {\n value: itemProp?.name ?? null,\n error: null,\n errorOnPriorBlur: false\n };\n });\n\n const [categoryField, setCategoryField] = useState<{\n value: MockCategory | null;\n error: typeof errorText | null;\n }>(() => {\n return {\n value: itemProp?.category ?? null,\n error: null\n };\n });\n\n const [progress, setProgress] = useState<\n (typeof progressStates)[keyof typeof progressStates] | false\n >(progressStates.loading);\n\n useEffect(() => {\n let timerId: number;\n\n if (progress === progressStates.loading) {\n timerId = window.setTimeout(() => {\n setProgress(false);\n }, loadingTimeoutMS);\n } else if (progress === progressStates.submitting) {\n timerId = window.setTimeout(() => {\n setProgress(false);\n dispatch({ name: nameField.value!, category: categoryField.value! });\n onComplete();\n }, loadingTimeoutMS);\n }\n\n return () => {\n window.clearTimeout(timerId);\n };\n }, [progress]);\n\n return (\n <FormDialog\n target={target}\n heading={`${itemProp ? 'Edit' : 'Add'} item`}\n progress={progress}\n onCancel={{\n disabled: progress === progressStates.submitting,\n handler: () => {\n setProgress(false);\n onComplete();\n }\n }}\n onSubmit={{\n disabled:\n !!progress || [nameField, categoryField].some(field => !field.value || field.error),\n handler: () => {\n setProgress(progressStates.submitting);\n }\n }}\n >\n {(!progress || progress !== progressStates.loading) && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Input\n required\n label='Name'\n value={nameField.value ?? ''}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setNameField(cur => ({\n ...cur,\n value: e.target.value,\n error: !e.target.value && cur.errorOnPriorBlur ? errorText : null\n }));\n }}\n onBlur={(e: FocusEvent<HTMLInputElement>) => {\n if (!e.target.value) {\n setNameField(cur => ({\n ...cur,\n error: errorText,\n errorOnPriorBlur: true\n }));\n } else if (nameField.errorOnPriorBlur) {\n setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));\n }\n }}\n status={nameField.error ? 'error' : undefined}\n info={nameField.error}\n />\n <ComboBox\n required\n label='Category'\n selected={\n categoryField.value\n ? {\n items: {\n id: categoryField.value,\n text: categoryField.value\n }\n }\n : undefined\n }\n menu={{\n mode: 'single-select',\n onItemClick: category => {\n setCategoryField({\n value: category as MockCategory,\n error: null\n });\n },\n items: categories.map(category => {\n return {\n id: category,\n primary: category,\n selected: category === categoryField.value\n };\n })\n }}\n onBlur={selected => {\n if (!selected) {\n setCategoryField(cur => ({ ...cur, error: errorText }));\n }\n }}\n status={categoryField.error ? 'error' : undefined}\n info={categoryField.error}\n />\n </Flex>\n )}\n </FormDialog>\n );\n};\n\nexport const FormDialogMock = () => {\n const [dialogTarget, setDialogTarget] = useState<MockItemDialogProps['target'] | null>(null);\n const [editItem, setEditItem] = useState<MockItem | null>(null);\n const [items, dispatch] = useMockItems();\n\n return (\n <>\n <SummaryList\n name='Editable items'\n icon='list'\n count={items.length}\n actions={[\n {\n id: 'Add',\n text: 'Add',\n icon: 'plus',\n onClick: (_, e) => {\n setDialogTarget(e.currentTarget);\n }\n }\n ]}\n items={items.map<SummaryListItem>(({ id, name, category }) => {\n return {\n id,\n primary: name,\n secondary: <Text variant='secondary'>{category}</Text>,\n actions: [\n {\n id: 'Edit',\n text: 'Edit',\n icon: 'pencil',\n onClick: (_, e, menuButton) => {\n if (menuButton) setDialogTarget(menuButton);\n\n setEditItem({\n id,\n name,\n category\n });\n }\n },\n {\n id: 'Remove',\n text: 'Remove',\n icon: 'trash',\n onClick: () => {\n dispatch({ type: 'remove', item: { id } });\n }\n }\n ]\n };\n })}\n />\n\n {dialogTarget && (\n <ItemDialog\n target={dialogTarget}\n item={editItem}\n // Wrap dispatch so the dialog can only affect the item it creates or updates.\n dispatch={fields => {\n dispatch(\n editItem\n ? { type: 'edit', item: { id: editItem.id, ...fields } }\n : { type: 'add', item: { ...fields } }\n );\n }}\n onComplete={() => {\n setDialogTarget(null);\n setEditItem(null);\n }}\n />\n )}\n </>\n );\n};\n"]}

package/jsx/core/Dialog/InfoDialog.mocks.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InfoDialogMock: () => JSX.Element;
+export declare const InfoDialogProgressMock: () => JSX.Element;
+//# sourceMappingURL=InfoDialog.mocks.d.ts.map

package/jsx/core/Dialog/InfoDialog.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"InfoDialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/InfoDialog.mocks.tsx"],"names":[],"mappings":";AAsBA,eAAO,MAAM,cAAc,mBAqB1B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAmDlC,CAAC"}

package/jsx/core/Dialog/InfoDialog.mocks.jsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useElement, useAfterInitialEffect } from '@pega/cosmos-react-core/lib/hooks';
+import { Avatar, Button, Flex, InfoDialog, Text } from '@pega/cosmos-react-core';
+import { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+const mockContent = (<Flex container={{ direction: 'column', gap: 2 }}>
+    <Text as='p'>
+      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>
+    <FieldValueListDemo name='Demo field' value='demo value'/>
+  </Flex>);
+export const InfoDialogMock = () => {
+    const [target, setTarget] = useElement(null);
+    return (<>
+      <Button variant='secondary' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
+        Open dialog
+      </Button>
+      {target ? (<InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>
+          {mockContent}
+        </InfoDialog>) : null}
+    </>);
+};
+export const InfoDialogProgressMock = () => {
+    const [target, setTarget] = useElement(null);
+    const [heading, setHeading] = useState();
+    const [content, setContent] = useState(null);
+    useAfterInitialEffect(() => {
+        if (!target) {
+            setHeading(undefined);
+            setContent(null);
+            return;
+        }
+        const timeout = window.setTimeout(() => {
+            setHeading({
+                primary: 'Primary heading',
+                secondary: 'Secondary info',
+                visual: <Avatar name='Info Dialog'/>
+            });
+            setContent(mockContent);
+        }, loadingTimeoutMS);
+        return () => {
+            window.clearTimeout(timeout);
+        };
+    }, [target]);
+    return (<>
+      <Button variant='secondary' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
+        Open dialog
+      </Button>
+      {target && (<InfoDialog heading={heading} target={target} onDismiss={() => setTarget(null)} progress={!content}>
+          {content}
+        </InfoDialog>)}
+    </>);
+};
+//# sourceMappingURL=InfoDialog.mocks.jsx.map

package/jsx/core/Dialog/InfoDialog.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"InfoDialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/InfoDialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\n\nimport { useElement, useAfterInitialEffect } from '@pega/cosmos-react-core/lib/hooks';\nimport { Avatar, Button, Flex, InfoDialog, Text } from '@pega/cosmos-react-core';\nimport { InfoDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nimport { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nconst mockContent = (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Text as='p'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </Text>\n <FieldValueListDemo name='Demo field' value='demo value' />\n </Flex>\n);\n\nexport const InfoDialogMock = () => {\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n return (\n <>\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n }}\n >\n Open dialog\n </Button>\n\n {target ? (\n <InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>\n {mockContent}\n </InfoDialog>\n ) : null}\n </>\n );\n};\n\nexport const InfoDialogProgressMock = () => {\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [heading, setHeading] = useState<InfoDialogProps['heading']>();\n const [content, setContent] = useState<InfoDialogProps['children']>(null);\n\n useAfterInitialEffect(() => {\n if (!target) {\n setHeading(undefined);\n setContent(null);\n return;\n }\n\n // Mocking a network request to fetch data\n const timeout = window.setTimeout(() => {\n setHeading({\n primary: 'Primary heading',\n secondary: 'Secondary info',\n visual: <Avatar name='Info Dialog' />\n });\n\n setContent(mockContent);\n }, loadingTimeoutMS);\n\n return () => {\n window.clearTimeout(timeout);\n };\n }, [target]);\n\n return (\n <>\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n }}\n >\n Open dialog\n </Button>\n\n {target && (\n <InfoDialog\n heading={heading}\n target={target}\n onDismiss={() => setTarget(null)}\n progress={!content}\n >\n {content}\n </InfoDialog>\n )}\n </>\n );\n};\n"]}

package/jsx/core/Drawer/Drawer.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { Meta, Story } from '@storybook/react';
-import { DrawerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { DrawerProps } 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 ContainedDrawer: Story<DrawerProps>;
-export declare const ViewportDrawer: Story<DrawerProps>;
+export declare const ContainedDrawer: StoryFn<DrawerProps>;
+export declare const ViewportDrawer: StoryFn<DrawerProps>;
 //# sourceMappingURL=Drawer.stories.d.ts.map

package/jsx/core/Drawer/Drawer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAG/C~~,OAAO,~~EAAwB~~,WAAW,~~EAAwB~~,MAAM,yBAAyB,CAAC;;~~AAIlG~~,wBAWU;AAEV,eAAO,MAAM,eAAe,EAAE,~~KAAK~~,CAAC,WAAW,~~CAuD9C~~,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,~~KAAK~~,CAAC,WAAW,~~CAuD7C~~,CAAC"}
1	+ {"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAI3D,wBAWU;AAEV,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,WAAW,CAuDhD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,WAAW,CAuD/C,CAAC"}

package/jsx/core/Drawer/Drawer.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,~~EAAe~~,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;~~AAElG~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE;QACJ,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,OAAO;KACzB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACvF,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KAC/C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,~~GAAuB~~,CAAC,IAAiB,EAAE,EAAE;~~IACvE~~,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,MAAM,GAAG,CACb,CAAC,MAAM,CACL,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,cAAc,CACd,YAAY,CAAC,CAAC,GAAG,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC,CACF,QAAQ,CAAC,UAAU,CACnB,IAAI,CAAC,MAAM,CACX,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,eAAe,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAEtC;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,mBAAmB,CAAC,CACxB,SAAS,CAAC,CAAC;YACT,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,QAAQ;YACjB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP,CAAC,CAEF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CACzC;QAAA,CAAC,IAAI,CACH;;;QAEF,EAAE,IAAI,CACN;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM,CAC7D;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;YACrE,eAAe,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAC3D,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;SACrB,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CACrD;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,~~GAAuB~~,CAAC,IAAiB,EAAE,EAAE;~~IACtE~~,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,MAAM,GAAG,CACb,CAAC,MAAM,CACL,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,YAAY,CAAC,CAAC,GAAG,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC,CACF,QAAQ,CAAC,OAAO,CAChB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,eAAe,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CACtC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAEpB;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,mBAAmB,CAAC,CACxB,SAAS,CAAC,CAAC;YACT,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,QAAQ;YACjB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP,CAAC,CAEF;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CACzC;QAAA,CAAC,IAAI,CACH;;;QAEF,EAAE,IAAI,CACN;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM,CAC7D;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;YACrE,eAAe,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAC3D,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;SACrB,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CACrD;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACzC,CAAC","sourcesContent":["import { Meta, ~~Story~~ } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, Card, Drawer, ~~DrawerProps,~~ Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledDrawerContent } from './Drawer.styles';\n\nexport default {\n title: 'Core/Drawer',\n component: Drawer,\n args: {\n placement: 'right',\n transitionSpeed: '0.25s'\n },\n argTypes: {\n placement: { options: ['top', 'right', 'bottom', 'left'], control: { type: 'select' } },\n transitionSpeed: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const ContainedDrawer: ~~Story~~<DrawerProps> = (args: DrawerProps) => {\n const [open, setOpen] = useState(false);\n const theme = useTheme();\n\n const drawer = (\n <Drawer\n open={open}\n nullWhenClosed\n onOuterClick={() => {\n setOpen(false);\n }}\n position='absolute'\n size='100%'\n placement={args.placement}\n transitionSpeed={args.transitionSpeed}\n >\n <Flex\n as={StyledDrawerContent}\n container={{\n direction: 'column',\n justify: 'center',\n alignItems: 'center',\n gap: 2,\n pad: 4\n }}\n >\n <Text variant='h1'>This is a Drawer</Text>\n <Text>\n You can close this Drawer by clicking anywhere in the area outside of it, or by clicking\n the Button below.\n </Text>\n <Button onClick={() => setOpen(false)}>Close Drawer</Button>\n </Flex>\n </Drawer>\n );\n\n return (\n <Card\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '20rem',\n width: '100%',\n border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,\n backgroundColor: `${theme.base.colors.blue['extra-light']}`,\n justifyContent: 'center',\n alignItems: 'center'\n }}\n >\n <Button variant='primary' onClick={() => setOpen(true)}>\n Open Drawer\n </Button>\n {drawer}\n </Card>\n );\n};\n\nexport const ViewportDrawer: ~~Story~~<DrawerProps> = (args: DrawerProps) => {\n const [open, setOpen] = useState(false);\n const theme = useTheme();\n\n const drawer = (\n <Drawer\n open={open}\n onOuterClick={() => {\n setOpen(false);\n }}\n position='fixed'\n size={args.size}\n placement={args.placement}\n transitionSpeed={args.transitionSpeed}\n shadow={args.shadow}\n >\n <Flex\n as={StyledDrawerContent}\n container={{\n direction: 'column',\n justify: 'center',\n alignItems: 'center',\n gap: 2,\n pad: 4\n }}\n >\n <Text variant='h1'>This is a Drawer</Text>\n <Text>\n You can close this Drawer by clicking anywhere in the area outside of it, or by clicking\n the Button below.\n </Text>\n <Button onClick={() => setOpen(false)}>Close Drawer</Button>\n </Flex>\n </Drawer>\n );\n\n return (\n <Card\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '20rem',\n width: '100%',\n border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,\n backgroundColor: `${theme.base.colors.blue['extra-light']}`,\n justifyContent: 'center',\n alignItems: 'center'\n }}\n >\n <Button variant='primary' onClick={() => setOpen(true)}>\n Open Drawer\n </Button>\n {drawer}\n </Card>\n );\n};\n\nViewportDrawer.args = {\n size: '30rem',\n shadow: false\n};\n\nViewportDrawer.argTypes = {\n size: { control: { type: 'text' } },\n shadow: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Drawer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, Card, Drawer, Flex, Text, useTheme } from '@pega/cosmos-react-core';\nimport type { DrawerProps } from '@pega/cosmos-react-core';\n\nimport { StyledDrawerContent } from './Drawer.styles';\n\nexport default {\n title: 'Core/Drawer',\n component: Drawer,\n args: {\n placement: 'right',\n transitionSpeed: '0.25s'\n },\n argTypes: {\n placement: { options: ['top', 'right', 'bottom', 'left'], control: { type: 'select' } },\n transitionSpeed: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const ContainedDrawer: StoryFn<DrawerProps> = (args: DrawerProps) => {\n const [open, setOpen] = useState(false);\n const theme = useTheme();\n\n const drawer = (\n <Drawer\n open={open}\n nullWhenClosed\n onOuterClick={() => {\n setOpen(false);\n }}\n position='absolute'\n size='100%'\n placement={args.placement}\n transitionSpeed={args.transitionSpeed}\n >\n <Flex\n as={StyledDrawerContent}\n container={{\n direction: 'column',\n justify: 'center',\n alignItems: 'center',\n gap: 2,\n pad: 4\n }}\n >\n <Text variant='h1'>This is a Drawer</Text>\n <Text>\n You can close this Drawer by clicking anywhere in the area outside of it, or by clicking\n the Button below.\n </Text>\n <Button onClick={() => setOpen(false)}>Close Drawer</Button>\n </Flex>\n </Drawer>\n );\n\n return (\n <Card\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '20rem',\n width: '100%',\n border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,\n backgroundColor: `${theme.base.colors.blue['extra-light']}`,\n justifyContent: 'center',\n alignItems: 'center'\n }}\n >\n <Button variant='primary' onClick={() => setOpen(true)}>\n Open Drawer\n </Button>\n {drawer}\n </Card>\n );\n};\n\nexport const ViewportDrawer: StoryFn<DrawerProps> = (args: DrawerProps) => {\n const [open, setOpen] = useState(false);\n const theme = useTheme();\n\n const drawer = (\n <Drawer\n open={open}\n onOuterClick={() => {\n setOpen(false);\n }}\n position='fixed'\n size={args.size}\n placement={args.placement}\n transitionSpeed={args.transitionSpeed}\n shadow={args.shadow}\n >\n <Flex\n as={StyledDrawerContent}\n container={{\n direction: 'column',\n justify: 'center',\n alignItems: 'center',\n gap: 2,\n pad: 4\n }}\n >\n <Text variant='h1'>This is a Drawer</Text>\n <Text>\n You can close this Drawer by clicking anywhere in the area outside of it, or by clicking\n the Button below.\n </Text>\n <Button onClick={() => setOpen(false)}>Close Drawer</Button>\n </Flex>\n </Drawer>\n );\n\n return (\n <Card\n style={{\n position: 'relative',\n overflow: 'hidden',\n height: '20rem',\n width: '100%',\n border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,\n backgroundColor: `${theme.base.colors.blue['extra-light']}`,\n justifyContent: 'center',\n alignItems: 'center'\n }}\n >\n <Button variant='primary' onClick={() => setOpen(true)}>\n Open Drawer\n </Button>\n {drawer}\n </Card>\n );\n};\n\nViewportDrawer.args = {\n size: '30rem',\n shadow: false\n};\n\nViewportDrawer.argTypes = {\n size: { control: { type: 'text' } },\n shadow: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/Email/EmailDisplay.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { EmailDisplayProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { EmailDisplayProps } 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 EmailDisplayDemo: Story<EmailDisplayProps>;
+export declare const EmailDisplayDemo: StoryFn<EmailDisplayProps>;
 //# sourceMappingURL=EmailDisplay.stories.d.ts.map

package/jsx/core/Email/EmailDisplay.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Email/EmailDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAE/C~~,OAAO,~~EAAgB~~,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;~~AAE1E~~,wBAGU;AAEV,eAAO,MAAM,gBAAgB,EAAE,~~KAAK~~,CAAC,iBAAiB,~~CAErD~~,CAAC"}
1	+ {"version":3,"file":"EmailDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Email/EmailDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAEjE,wBAGU;AAEV,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,iBAAiB,CAEvD,CAAC"}

package/jsx/core/Email/EmailDisplay.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/Email/EmailDisplay.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,~~EAAqB~~,MAAM,yBAAyB,CAAC;~~AAE1E~~,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,~~GAA6B~~,CAAC,IAAuB,EAAE,EAAE;~~IACpF~~,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import { Meta, ~~Story~~ } from '@storybook/react';\n\nimport { EmailDisplay, EmailDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Email',\n component: EmailDisplay\n} as Meta;\n\nexport const EmailDisplayDemo: ~~Story~~<EmailDisplayProps> = (args: EmailDisplayProps) => {\n return <EmailDisplay value={args.value} displayText={args.displayText} variant={args.variant} />;\n};\n\nEmailDisplayDemo.args = {\n value: 'email@example.com',\n displayText: 'Example Email',\n variant: 'link'\n};\n\nEmailDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n displayText: { control: { type: 'text' } },\n variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}
1	+ {"version":3,"file":"EmailDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/Email/EmailDisplay.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,IAAuB,EAAE,EAAE;IACtF,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { EmailDisplay } from '@pega/cosmos-react-core';\nimport type { EmailDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Email',\n component: EmailDisplay\n} as Meta;\n\nexport const EmailDisplayDemo: StoryFn<EmailDisplayProps> = (args: EmailDisplayProps) => {\n return <EmailDisplay value={args.value} displayText={args.displayText} variant={args.variant} />;\n};\n\nEmailDisplayDemo.args = {\n value: 'email@example.com',\n displayText: 'Example Email',\n variant: 'link'\n};\n\nEmailDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n displayText: { control: { type: 'text' } },\n variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}

package/jsx/core/EmojiPicker/EmojiPicker.stories.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { Meta, Story } from '@storybook/react';
-import { EmojiPickerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { EmojiPickerProps } 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 EmojiPickerDemo: Story<EmojiPickerProps>;
-export declare const EmojiPickerExcludeDemo: Story<EmojiPickerProps>;
-export declare const CustomEmojiSet: Story<EmojiPickerProps>;
+export declare const EmojiPickerDemo: StoryFn<EmojiPickerProps>;
+export declare const EmojiPickerExcludeDemo: StoryFn<EmojiPickerProps>;
+export declare const CustomEmojiSet: StoryFn<EmojiPickerProps>;
 //# sourceMappingURL=EmojiPicker.stories.d.ts.map

package/jsx/core/EmojiPicker/EmojiPicker.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAI/C~~,OAAO,~~EAA6B~~,gBAAgB,~~EAAe~~,MAAM,yBAAyB,CAAC;;~~AAEnG~~,wBAaU;AAEV,eAAO,MAAM,eAAe,EAAE,~~KAAK~~,CAAC,gBAAgB,~~CAkBnD~~,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,~~KAAK~~,CAAC,gBAAgB,~~CAmB1D~~,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,~~KAAK~~,CAAC,gBAAgB,~~CA0BlD~~,CAAC"}
1	+ {"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEhE,wBAaU;AAEV,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,gBAAgB,CAkBrD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,gBAAgB,CAmB5D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,gBAAgB,CA8BpD,CAAC"}

package/jsx/core/EmojiPicker/EmojiPicker.stories.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/EmojiPicker',
@@ -39,10 +39,11 @@ export const CustomEmojiSet = (args) => {
     const onEmojiSelect = (emoji) => {
         setValue(curr => `${curr}${emoji.native}`);
     };
-    return (<EmojiContext.Provider value={{
-            set: 'google',
-            spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
-        }}>
+    const ctx = useMemo(() => ({
+        set: 'google',
+        spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
+    }), []);
+    return (<EmojiContext.Provider value={ctx}>
       <Flex container={{ direction: 'column' }}>
         <Input value={value}/>
         <EmojiPicker showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>

package/jsx/core/EmojiPicker/EmojiPicker.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAGjC~~,OAAO,EAAE,WAAW,EAAE,YAAY,~~EAAoB~~,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;~~AAEnG~~,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KACzC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,~~GAA4B~~,CAAC,IAAsB,EAAE,EAAE;~~IACjF~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EACpB;MAAA,CAAC,WAAW,CACV,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,aAAa,CAAC,EAE5B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,~~GAA4B~~,CAAC,IAAsB,EAAE,EAAE;~~IACxF~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EACpB;MAAA,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAC5D,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,aAAa,CAAC,EAE5B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,~~GAA4B~~,CAAC,IAAsB,EAAE,EAAE;~~IAChF~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,~~OAAO~~,~~CACL~~,~~CAAC~~,~~YAAY~~,~~CAAC~~,~~QAAQ~~,~~CACpB~~,~~KAAK~~,CAAC~~,CAAC~~;~~YACL~~,GAAG,EAAE,QAAQ;~~YACb~~,iBAAiB,EAAE,GAAG,EAAE,CACtB,gFAAgF;~~SACnF~~,CAAC,~~CAEF~~;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EACpB;QAAA,CAAC,WAAW,CACV,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,aAAa,CAAC,EAE5B;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, ~~Story~~ } from '@storybook/react';\nimport { useState } from 'react';\nimport { BaseEmoji } from 'emoji-mart';\n\nimport { EmojiPicker, EmojiContext, ~~EmojiPickerProps,~~ Flex, Input } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/EmojiPicker',\n component: EmojiPicker,\n args: {\n showFooter: false,\n emojiSize: 24,\n perLine: 9\n },\n argTypes: {\n showFooter: { control: { type: 'boolean' } },\n emojiSize: { control: { type: 'number' } },\n perLine: { control: { type: 'number' } }\n }\n} as Meta;\n\nexport const EmojiPickerDemo: ~~Story~~<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const EmojiPickerExcludeDemo: ~~Story~~<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n exclude={['recent', 'people', 'foods', 'activity', 'flags']}\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const CustomEmojiSet: ~~Story~~<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n ~~return~~ (\n ~~<EmojiContext.Provider\~~n ~~value=~~{{\n set: 'google',\n spriteSrcResolver: () =>\n 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'\n }}\n >\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n </EmojiContext.Provider>\n );\n};\n"]}
1	+ {"version":3,"file":"EmojiPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport type { BaseEmoji } from 'emoji-mart';\n\nimport { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';\nimport type { EmojiPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/EmojiPicker',\n component: EmojiPicker,\n args: {\n showFooter: false,\n emojiSize: 24,\n perLine: 9\n },\n argTypes: {\n showFooter: { control: { type: 'boolean' } },\n emojiSize: { control: { type: 'number' } },\n perLine: { control: { type: 'number' } }\n }\n} as Meta;\n\nexport const EmojiPickerDemo: StoryFn<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const EmojiPickerExcludeDemo: StoryFn<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n exclude={['recent', 'people', 'foods', 'activity', 'flags']}\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const CustomEmojiSet: StoryFn<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n const ctx = useMemo(\n () =>\n ({\n set: 'google',\n spriteSrcResolver: () =>\n 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'\n } as const),\n []\n );\n\n return (\n <EmojiContext.Provider value={ctx}>\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n </EmojiContext.Provider>\n );\n};\n"]}

package/jsx/core/EmptyState/EmptyState.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { EmptyStateProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { EmptyStateProps } 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 EmptyStateDemo: Story<EmptyStateProps>;
+export declare const EmptyStateDemo: StoryFn<EmptyStateProps>;
 //# sourceMappingURL=EmptyState.stories.d.ts.map

package/jsx/core/EmptyState/EmptyState.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAE/C~~,OAAO,~~EAAc~~,eAAe,EAAE,MAAM,yBAAyB,CAAC;;~~AAEtE~~,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,~~KAAK~~,CAAC,eAAe,~~CAEjD~~,CAAC"}
1	+ {"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAEnD,CAAC"}

package/jsx/core/EmptyState/EmptyState.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,~~EAAmB~~,MAAM,yBAAyB,CAAC;~~AAEtE~~,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,~~GAA2B~~,CAAC,IAAqB,EAAE,EAAE;~~IAC9E~~,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,CAAC;AAC/C,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,UAAU;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, ~~Story~~ } from '@storybook/react';\n\nimport { EmptyState, EmptyStateProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/EmptyState',\n component: EmptyState,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const EmptyStateDemo: ~~Story~~<EmptyStateProps> = (args: EmptyStateProps) => {\n return <EmptyState message={args.message} />;\n};\n\nEmptyStateDemo.args = {\n message: 'No items'\n};\n\nEmptyStateDemo.argTypes = {\n message: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"EmptyState.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAChF,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,CAAC;AAC/C,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,UAAU;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { EmptyState } from '@pega/cosmos-react-core';\nimport type { EmptyStateProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/EmptyState',\n component: EmptyState,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const EmptyStateDemo: StoryFn<EmptyStateProps> = (args: EmptyStateProps) => {\n return <EmptyState message={args.message} />;\n};\n\nEmptyStateDemo.args = {\n message: 'No items'\n};\n\nEmptyStateDemo.argTypes = {\n message: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/ErrorState/ErrorState.stories.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Meta, Story } from '@storybook/react';
-import { ErrorStateProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { ErrorStateProps } 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 ErrorStateStoryProps extends ErrorStateProps {
     displayRetry?: boolean;
 }
-export declare const ErrorStateDemo: Story<ErrorStateStoryProps>;
+export declare const ErrorStateDemo: StoryFn<ErrorStateStoryProps>;
 //# sourceMappingURL=ErrorState.stories.d.ts.map

package/jsx/core/ErrorState/ErrorState.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorState.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ErrorState/ErrorState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAE/C~~,OAAO,~~EAAc~~,eAAe,EAAE,MAAM,yBAAyB,CAAC;;~~AAEtE~~,wBAMU;AAEV,UAAU,oBAAqB,SAAQ,eAAe;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,~~KAAK~~,CAAC,oBAAoB,~~CAEtD~~,CAAC"}
1	+ {"version":3,"file":"ErrorState.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ErrorState/ErrorState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAMU;AAEV,UAAU,oBAAqB,SAAQ,eAAe;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,oBAAoB,CAExD,CAAC"}

package/jsx/core/ErrorState/ErrorState.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorState.stories.jsx","sourceRoot":"","sources":["../../../src/core/ErrorState/ErrorState.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,~~EAAmB~~,MAAM,yBAAyB,CAAC;~~AAEtE~~,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,cAAc,~~GAAgC~~,CAAC,IAA0B,EAAE,EAAE;~~IACxF~~,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAG,CAAC;AAClG,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import { Meta, ~~Story~~ } from '@storybook/react';\n\nimport { ErrorState, ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/ErrorState',\n component: ErrorState,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\ninterface ErrorStateStoryProps extends ErrorStateProps {\n displayRetry?: boolean;\n}\n\nexport const ErrorStateDemo: ~~Story~~<ErrorStateStoryProps> = (args: ErrorStateStoryProps) => {\n return <ErrorState message={args.message} onRetry={args.displayRetry ? () => {} : undefined} />;\n};\n\nErrorStateDemo.args = {\n message: 'Unknown error',\n displayRetry: false\n};\n\nErrorStateDemo.argTypes = {\n message: { control: { type: 'text' } },\n displayRetry: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"ErrorState.stories.jsx","sourceRoot":"","sources":["../../../src/core/ErrorState/ErrorState.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC1F,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAG,CAAC;AAClG,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { ErrorState } from '@pega/cosmos-react-core';\nimport type { ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/ErrorState',\n component: ErrorState,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\ninterface ErrorStateStoryProps extends ErrorStateProps {\n displayRetry?: boolean;\n}\n\nexport const ErrorStateDemo: StoryFn<ErrorStateStoryProps> = (args: ErrorStateStoryProps) => {\n return <ErrorState message={args.message} onRetry={args.displayRetry ? () => {} : undefined} />;\n};\n\nErrorStateDemo.args = {\n message: 'Unknown error',\n displayRetry: false\n};\n\nErrorStateDemo.argTypes = {\n message: { control: { type: 'text' } },\n displayRetry: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/ExpandCollapse/ExpandCollapse.stories.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { Meta, Story } from '@storybook/react';
-import { ExpandCollapseProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { ExpandCollapseProps } 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 VerticalExpandCollapse: Story<ExpandCollapseProps>;
-export declare const HorizontalExpandCollapse: Story<ExpandCollapseProps>;
+export declare const VerticalExpandCollapse: StoryFn<ExpandCollapseProps>;
+export declare const HorizontalExpandCollapse: StoryFn<ExpandCollapseProps>;
 //# sourceMappingURL=ExpandCollapse.stories.d.ts.map

package/jsx/core/ExpandCollapse/ExpandCollapse.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAG/C~~,OAAO,~~EAA0B~~,mBAAmB,~~EAAc~~,MAAM,yBAAyB,CAAC;;~~AAIlG~~,wBAaU;AAEV,eAAO,MAAM,sBAAsB,EAAE,~~KAAK~~,CAAC,mBAAmB,~~CAoC7D~~,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,~~KAAK~~,CAAC,mBAAmB,~~CAyC/D~~,CAAC"}
1	+ {"version":3,"file":"ExpandCollapse.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAaU;AAEV,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,mBAAmB,CAoC/D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,mBAAmB,CA2CjE,CAAC"}