@pega/cosmos-react-demos 4.0.0-dev.1.2 → 4.0.0-dev.10.1

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner,\n  excludeStories: ['ConfigurableErrorBanner']\n} as Meta;\n\nexport const SuccessBanner: Story = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='success'\n          variant='success'\n          onDismiss={() => setShowBanner(false)}\n          heading='2 items uploaded successfully'\n          messages={['pega_data.json', 'business-earnings.xlsx']}\n        />\n      )}\n    </>\n  );\n};\n\nexport const ErrorBanner: Story = () => {\n  return (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      action={\n        <div>\n          <Button variant='link'>Try again</Button>\n        </div>\n      }\n      messages={['Your request failed to send!', 'Please review your request and try again']}\n    />\n  );\n};\n\nexport const WarningBanner: Story = () => {\n  return (\n    <Banner\n      id='warning'\n      variant='warning'\n      action={\n        <div>\n          <Button variant='link'>Why this matters</Button>\n        </div>\n      }\n      messages={['Your submission is missing some important documents.']}\n    />\n  );\n};\n\nexport const InfoBanner: Story = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='info'\n          variant='info'\n          onDismiss={() => setShowBanner(false)}\n          messages={[\n            'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n  args: ConfigurableErrorBannerProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          banner: {\n            urgent: {\n              background: args.background\n            }\n          }\n        }\n      }}\n    >\n      <Banner\n        id='error'\n        variant='urgent'\n        heading='Error'\n        action={\n          <div>\n            <Button variant='link'>Try again</Button>\n          </div>\n        }\n        messages={['Your request failed to send!', 'Please review your request and try again']}\n      />\n    </Configuration>\n  );\n};\n\nConfigurableErrorBanner.args = {\n  background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n  background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let heading = 'Wow, great job!';\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n    let bannerAction;\n\n    if (errorFields.length > 0) {\n      heading = \"I'm sorry you're having trouble\";\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n      bannerAction = (\n        <Link href='https://community.pega.com/support' target='_blank'>\n          Visit Pega support for assistance\n        </Link>\n      );\n    }\n\n    setBanner(\n      <Banner\n        {...{\n          heading,\n          variant,\n          messages,\n          id: 'formBanner',\n          action: bannerAction,\n          onDismiss() {\n            setBanner(false);\n          }\n        }}\n      />\n    );\n  }, []);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n    >\n      {fields.map((field: DemoFormField) => {\n        return (\n          <Input\n            key={field.name}\n            name={field.name}\n            label={field.label}\n            info={field.info}\n            value={field.value}\n            onChange={(e: InputEvent) => setField(e.target as any)}\n          />\n        );\n      })}\n    </Form>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='app-shell-banner-success'\n            heading='2 items uploaded successfully'\n            onDismiss={() => setHasBanner(false)}\n            variant='success'\n            messages={['pega_data.json', 'business-earnings.xlsx']}\n            action={\n              <Link target='_blank' href='https://www.pega.com'>\n                Link Here!\n              </Link>\n            }\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}
+{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useCallback, FormEvent, useReducer, useRef } from 'react';\n\nimport {\n  Banner,\n  BannerProps,\n  BannerMessage,\n  BannerHandleValue,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner,\n  excludeStories: ['ConfigurableErrorBanner']\n} as Meta;\n\ninterface BannerDemoProps extends Pick<BannerProps, 'variant'> {\n  count?: number;\n  descriptions?: boolean;\n  actions?: boolean;\n  disableFocusControl?: boolean;\n}\n\nexport const BannerDemo: Story<BannerDemoProps> = (args: BannerDemoProps) => {\n  const [show, setShow] = useState(true);\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const action: BannerMessage['action'] = args.actions\n    ? {\n        text: `Individual ${args.variant} action.`,\n        onClick: e => {\n          e.preventDefault();\n        },\n        href: 'https://pega.com'\n      }\n    : undefined;\n\n  const sliceMessages = (\n    messages: BannerProps['messages'],\n    count: number\n  ): [messages: BannerProps['messages'], count: number] => {\n    const currentMessages: BannerProps['messages'] = [];\n    let currentCount = 0;\n\n    messages.forEach(msg => {\n      if (currentCount < count) {\n        currentCount += 1;\n\n        if (typeof msg === 'string') {\n          currentMessages.push(msg);\n        } else if (!msg.items) {\n          currentMessages.push({ ...msg, action });\n        } else {\n          const [items, subCount] = sliceMessages(msg.items, count - currentCount);\n          currentCount += subCount;\n          currentMessages.push({\n            ...msg,\n            action,\n            items: items.length > 0 ? items : undefined\n          });\n        }\n      }\n    });\n\n    return [currentMessages, currentCount];\n  };\n\n  const [messagesToRender] = sliceMessages(\n    [\n      {\n        label: `Individual ${args.variant} label.`,\n        description: args.descriptions\n          ? '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.'\n          : undefined\n      },\n      {\n        label: `Individual ${args.variant} label.`,\n        description: args.descriptions ? `Individual ${args.variant} description.` : undefined\n      },\n      `Individual ${args.variant} label.`,\n      {\n        label: `Individual ${args.variant} label.`,\n        description: args.descriptions\n          ? '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.'\n          : undefined\n      },\n      {\n        label: `Grandparent ${args.variant} label.`,\n        items: [\n          {\n            label: `Parent ${args.variant} label.`,\n            items: [`Child ${args.variant} label.`]\n          }\n        ]\n      }\n    ],\n    args.count ?? Infinity\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {show ? (\n        <Banner\n          variant={args.variant}\n          messages={messagesToRender}\n          onDismiss={() => setShow(false)}\n          handle={bannerHandleRef}\n        />\n      ) : (\n        <Button onClick={() => setShow(true)}>Open banner</Button>\n      )}\n      {!args.disableFocusControl && (\n        <Button\n          onClick={() => bannerHandleRef.current?.focus()}\n          style={{ maxWidth: 'fit-content' }}\n        >\n          Focus\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nBannerDemo.args = {\n  variant: 'info',\n  count: 7,\n  descriptions: true,\n  actions: true\n};\n\nBannerDemo.argTypes = {\n  variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },\n  count: { control: { type: 'range', min: 1, max: 7 } },\n  descriptions: { control: { type: 'boolean' } },\n  actions: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n  args: ConfigurableErrorBannerProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          banner: {\n            urgent: {\n              background: args.background\n            }\n          }\n        }\n      }}\n    >\n      <Banner\n        variant='urgent'\n        messages={['Your request failed to send!', 'Please review your request and try again']}\n      />\n    </Configuration>\n  );\n};\n\nConfigurableErrorBanner.args = {\n  background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n  background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n\n    if (errorFields.length > 0) {\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n    }\n\n    setBanner(\n      <Banner\n        variant={variant}\n        messages={messages}\n        onDismiss={() => {\n          setBanner(false);\n        }}\n        handle={bannerHandleRef}\n      />\n    );\n  }, []);\n\n  useEffect(() => {\n    if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)\n      bannerHandleRef.current.focus();\n  }, [banner]);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n    >\n      {fields.map((field: DemoFormField) => {\n        return (\n          <Input\n            key={field.name}\n            name={field.name}\n            label={field.label}\n            info={field.info}\n            value={field.value}\n            onChange={(e: InputEvent) => setField(e.target as any)}\n          />\n        );\n      })}\n    </Form>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            onDismiss={() => setHasBanner(false)}\n            variant='success'\n            messages={[\n              'Uploaded pega_data.json successfully',\n              'Uploaded business-earnings.xlsx successfully'\n            ]}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { CurrencyDisplayProps, CurrencyInputProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-declare type CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {
+type CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {
     value?: number;
     onChange?: (value: string) => void;
     showAdditionalInfo?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EAClB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,aAAK,kBAAkB,GAAG,UAAU,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAiDhE,CAAC;AAyCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}
+{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EAClB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,KAAK,kBAAkB,GAAG,UAAU,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAiDhE,CAAC;AAyCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}

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

@@ -0,0 +1,26 @@
+/// <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;
+//# sourceMappingURL=Dialog.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAKL,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,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,gBAsIrB,CAAC"}

package/lib/core/Dialog/Dialog.mocks.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useState } from 'react';
+import { ComboBox, createUID, Flex, FormDialog, Input } from '@pega/cosmos-react-core';
+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);
+            }, 1000);
+        }
+        else if (progress === progressStates.submitting) {
+            timerId = window.setTimeout(() => {
+                setProgress(false);
+                dispatch({ name: nameField.value, category: categoryField.value });
+                onComplete();
+            }, 2000);
+        }
+        return () => {
+            window.clearTimeout(timerId);
+        };
+    }, [progress]);
+    return (_jsx(FormDialog, { target: target, heading: `${itemProp ? 'Edit' : 'Add'} item`, progress: progress, onCancel: {
+            handler: () => {
+                setProgress(false);
+                onComplete();
+            }
+        }, onSubmit: {
+            disabled: !!progress || [nameField, categoryField].some(field => !field.value || field.error),
+            handler: () => {
+                setProgress(progressStates.submitting);
+            }
+        }, children: (!progress || progress !== progressStates.loading) && (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Input, { required: true, 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 }), _jsx(ComboBox, { required: true, 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 })] })) }));
+};
+//# sourceMappingURL=Dialog.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.mocks.js","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useEffect, useReducer, useState } from 'react';\n\nimport {\n  ComboBox,\n  createUID,\n  Flex,\n  FormDialog,\n  FormDialogProps,\n  Input\n} from '@pega/cosmos-react-core';\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      }, 1000);\n    } else if (progress === progressStates.submitting) {\n      timerId = window.setTimeout(() => {\n        setProgress(false);\n        dispatch({ name: nameField.value!, category: categoryField.value! });\n        onComplete();\n      }, 2000);\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        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"]}

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DialogDemo: Story;
+export declare const InfoDialogDemo: Story;
 export declare const FormDialogDemo: Story;
 //# sourceMappingURL=Dialog.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAsB/C,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuH5B,CAAC"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAiB/C,wBAEU;AAGV,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KA0E5B,CAAC"}

package/lib/core/Dialog/Dialog.stories.js

@@ -1,47 +1,71 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useState } from '@storybook/addons';
-import { Button, Card, CardContent, CardHeader, Dialog, Flex, Input, Option, Select, Status, SummaryItem, Text, useDialog } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Flex, Text, useElement, InfoDialog, SummaryList } from '@pega/cosmos-react-core';
+import { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';
+import { ItemDialog, useMockItems } from './Dialog.mocks';
 export default {
-    title: 'Core/Dialog',
-    component: Dialog
+    title: 'Core/Dialog'
 };
-export const DialogDemo = () => {
-    const { target, events } = useDialog();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', ...events, children: "Open dialog" }), _jsx(Dialog, { heading: 'My dialog', target: target, children: "Hello Dialog" })] }));
+// InfoDialogDemo
+export const InfoDialogDemo = () => {
+    const [target, setTarget] = useElement(null);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: (e) => {
+                    setTarget(e.currentTarget);
+                }, children: "Open dialog" }), target && (_jsx(InfoDialog, { heading: 'General information', target: target, onDismiss: () => setTarget(null), children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Text, { as: 'p', children: "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." }), _jsx(FieldValueListDemo, { name: 'Demo field', value: 'demo value' })] }) }))] }));
 };
+// FormDialogDemo
 export const FormDialogDemo = () => {
-    const editBadgeButton = useRef(null);
-    const editNameButton = useRef(null);
-    const timeoutRef = useRef();
-    const [info, setInfo] = useState({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });
-    const [name, setName] = useState(() => info.name);
-    const [badgeType, setBadgeType] = useState(() => info.badgeType);
-    const [badgeText, setBadgeText] = useState(() => info.badgeText);
-    const [dialogType, setDialogType] = useState('badge');
-    const { target, events, loading, setLoading } = useDialog();
-    const badgeTypes = ['info', 'pending', 'success', 'urgent', 'warn'];
-    const onOpen = (type) => {
-        setDialogType(type);
-    };
-    const onDialogSubmit = ({ close }) => {
-        setLoading(true);
-        timeoutRef.current = setTimeout(() => {
-            setInfo({ name, badgeText, badgeType });
-            setLoading(false);
-            close();
-            timeoutRef.current = undefined;
-        }, 1000);
-    };
-    const onDialogClose = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            setLoading(false);
-        }
-        setName(info.name);
-        setBadgeText(info.badgeText);
-        setBadgeType(info.badgeType);
-    };
-    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h1', children: "Edit these fields" }) }), _jsxs(CardContent, { children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SummaryItem, { primary: _jsx(Text, { variant: 'h6', children: "Badge" }), secondary: _jsx(Status, { variant: info.badgeType, children: info.badgeText }), actions: _jsx(Button, { variant: 'simple', ref: editBadgeButton, onClick: () => onOpen('badge'), ...events, children: "Edit" }) }), _jsx(SummaryItem, { primary: _jsx(Text, { variant: 'h6', children: "Name" }), secondary: _jsx(Text, { variant: 'primary', children: info.name }), actions: _jsx(Button, { variant: 'simple', ref: editNameButton, onClick: () => onOpen('name'), ...events, children: "Edit" }) })] }), _jsx(Dialog, { target: target, heading: `Edit ${dialogType}`, placement: 'bottom-end', onSubmit: onDialogSubmit, onClose: onDialogClose, loading: loading, children: _jsx(Flex, { container: { gap: 1, direction: 'column' }, children: dialogType === 'badge' ? (_jsxs(_Fragment, { children: [_jsx(Select, { label: 'Select a badge type', value: badgeType, onChange: e => setBadgeType(e.target.value), children: badgeTypes.map(type => (_jsx(Option, { children: type }, type))) }), _jsx(Input, { type: 'text', label: 'Badge text', value: badgeText, onChange: (e) => setBadgeText(e.target.value) })] })) : (_jsx(_Fragment, { children: _jsx(Input, { type: 'text', label: 'Text value', value: name, onChange: (e) => setName(e.target.value) }) })) }) })] })] }));
+    const [dialogTarget, setDialogTarget] = useState(null);
+    const [editItem, setEditItem] = useState(null);
+    const [items, dispatch] = useMockItems();
+    return (_jsxs(_Fragment, { children: [_jsx(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: _jsx(Text, { variant: 'secondary', children: category }),
+                        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 && (_jsx(ItemDialog, { target: dialogTarget, item: editItem, 
+                // Wrap dispatch so the dialog can only affect the item it creates or updates.
+                dispatch: fields => {
+                    dispatch(editItem
+                        ? { type: 'edit', item: { id: editItem.id, ...fields } }
+                        : { type: 'add', item: { ...fields } });
+                }, onComplete: () => {
+                    setDialogTarget(null);
+                    setEditItem(null);
+                } }))] }));
 };
 //# sourceMappingURL=Dialog.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, useRef } from 'react';\nimport { useState } from '@storybook/addons';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Dialog,\n  Flex,\n  Input,\n  Option,\n  Select,\n  StatusProps,\n  Status,\n  SummaryItem,\n  Text,\n  useDialog,\n  DialogProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Dialog',\n  component: Dialog\n} as Meta;\n\nexport const DialogDemo: Story = () => {\n  const { target, events } = useDialog();\n  return (\n    <>\n      <Button variant='secondary' {...events}>\n        Open dialog\n      </Button>\n      <Dialog heading='My dialog' target={target}>\n        Hello Dialog\n      </Dialog>\n    </>\n  );\n};\n\nexport const FormDialogDemo: Story = () => {\n  const editBadgeButton = useRef(null);\n  const editNameButton = useRef(null);\n  const timeoutRef = useRef<number>();\n  const [info, setInfo] = useState<{\n    name: string;\n    badgeType: StatusProps['variant'];\n    badgeText: string;\n  }>({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });\n  const [name, setName] = useState(() => info.name);\n  const [badgeType, setBadgeType] = useState<StatusProps['variant']>(() => info.badgeType);\n  const [badgeText, setBadgeText] = useState(() => info.badgeText);\n  const [dialogType, setDialogType] = useState<'badge' | 'name'>('badge');\n  const { target, events, loading, setLoading } = useDialog();\n\n  const badgeTypes: StatusProps['variant'][] = ['info', 'pending', 'success', 'urgent', 'warn'];\n\n  const onOpen = (type: 'badge' | 'name') => {\n    setDialogType(type);\n  };\n\n  const onDialogSubmit: DialogProps['onSubmit'] = ({ close }) => {\n    setLoading(true);\n    timeoutRef.current = setTimeout(() => {\n      setInfo({ name, badgeText, badgeType });\n      setLoading(false);\n      close();\n      timeoutRef.current = undefined;\n    }, 1000) as unknown as number;\n  };\n\n  const onDialogClose: DialogProps['onClose'] = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      setLoading(false);\n    }\n    setName(info.name);\n    setBadgeText(info.badgeText);\n    setBadgeType(info.badgeType);\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <Text variant='h1'>Edit these fields</Text>\n      </CardHeader>\n      <CardContent>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          <SummaryItem\n            primary={<Text variant='h6'>Badge</Text>}\n            secondary={<Status variant={info.badgeType}>{info.badgeText}</Status>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editBadgeButton}\n                onClick={() => onOpen('badge')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n          <SummaryItem\n            primary={<Text variant='h6'>Name</Text>}\n            secondary={<Text variant='primary'>{info.name}</Text>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editNameButton}\n                onClick={() => onOpen('name')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n        </Flex>\n        <Dialog\n          target={target}\n          heading={`Edit ${dialogType}`}\n          placement='bottom-end'\n          onSubmit={onDialogSubmit}\n          onClose={onDialogClose}\n          loading={loading}\n        >\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            {dialogType === 'badge' ? (\n              <>\n                <Select\n                  label='Select a badge type'\n                  value={badgeType}\n                  onChange={e => setBadgeType(e.target.value as StatusProps['variant'])}\n                >\n                  {badgeTypes.map(type => (\n                    <Option key={type}>{type}</Option>\n                  ))}\n                </Select>\n                <Input\n                  type='text'\n                  label='Badge text'\n                  value={badgeText}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setBadgeText(e.target.value)}\n                />\n              </>\n            ) : (\n              <>\n                <Input\n                  type='text'\n                  label='Text value'\n                  value={name}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}\n                />\n              </>\n            )}\n          </Flex>\n        </Dialog>\n      </CardContent>\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Text,\n  useElement,\n  InfoDialog,\n  SummaryList,\n  SummaryListItem\n} from '@pega/cosmos-react-core';\n\nimport { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';\n\nimport { ItemDialog, MockItem, MockItemDialogProps, useMockItems } from './Dialog.mocks';\n\nexport default {\n  title: 'Core/Dialog'\n} as Meta;\n\n// InfoDialogDemo\nexport const InfoDialogDemo: Story = () => {\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          <Flex container={{ direction: 'column', gap: 2 }}>\n            <Text as='p'>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </Text>\n            <FieldValueListDemo name='Demo field' value='demo value' />\n          </Flex>\n        </InfoDialog>\n      )}\n    </>\n  );\n};\n\n// FormDialogDemo\nexport const FormDialogDemo: Story = () => {\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/lib/core/FieldGroup/FieldGroupList.mocks.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
-declare type FieldGroupReducerPayload = {
+type FieldGroupReducerPayload = {
     action: 'add';
 } | {
     action: 'delete';

package/lib/core/FieldGroup/FieldGroupList.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,aAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}
+{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAeU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,cAAc,CASvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAeU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,cAAc,CASvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAqD5E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}

package/lib/core/Form/Form.stories.js

@@ -34,8 +34,8 @@ export const SimpleFormDemo = (args) => {
     const [inputValue, setInputValue] = useState('');
     const [success, setSuccess] = useState('');
     const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => setInputValue(''), children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }));
-    const successBanner = (_jsx(Banner, { id: 'success', variant: 'success', heading: 'Success', messages: ['Form submitted', `Input value: ${success}`] }));
-    const errorBanner = (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: ['All required fields in the form must be completed.'] }));
+    const successBanner = (_jsx(Banner, { variant: 'success', messages: ['Form submitted', `Input value: ${success}`] }));
+    const errorBanner = (_jsx(Banner, { variant: 'urgent', messages: ['All required fields in the form must be completed.'] }));
     const banner = success ? successBanner : errorBanner;
     return (_jsx(Form, { banners: args.withBanners ? banner : undefined, actions: actions, heading: args.heading, description: args.description, onSubmit: (e) => {
             e.preventDefault();

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n  Banner,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  FormField,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent, ReadOnlyFormContent } from './Form.mocks';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  excludeStories: ['ConfigurableForm'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const ReadOnlyOneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return (\n    <ReadOnlyFormContent\n      cols={1}\n      heading={args.heading}\n      description={args.description}\n      showActions\n    />\n  );\n};\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner\n      id='success'\n      variant='success'\n      heading='Success'\n      messages={['Form submitted', `Input value: ${success}`]}\n    />\n  );\n\n  const errorBanner = (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      messages={['All required fields in the form must be completed.']}\n    />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: number;\n  hoverBorderColor?: string;\n  focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'form-control': {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            ':hover': {\n              'border-color': args.hoverBorderColor\n            },\n            ':focus': {\n              'border-color': args.focusBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <FormContent cols={2} showActions />\n    </Configuration>\n  );\n};\n\nConfigurableForm.args = {\n  foregroundColor: '#054a8a',\n  backgroundColor: '#e2f1ff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: 0.5,\n  hoverBorderColor: '#3f3f3f',\n  focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  hoverBorderColor: { control: { type: 'color' } },\n  focusBorderColor: { control: { type: 'color' } },\n  heading: { table: { disable: true } },\n  description: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n  Banner,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  FormField,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent, ReadOnlyFormContent } from './Form.mocks';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  excludeStories: ['ConfigurableForm'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const ReadOnlyOneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return (\n    <ReadOnlyFormContent\n      cols={1}\n      heading={args.heading}\n      description={args.description}\n      showActions\n    />\n  );\n};\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner variant='success' messages={['Form submitted', `Input value: ${success}`]} />\n  );\n\n  const errorBanner = (\n    <Banner variant='urgent' messages={['All required fields in the form must be completed.']} />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: number;\n  hoverBorderColor?: string;\n  focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'form-control': {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            ':hover': {\n              'border-color': args.hoverBorderColor\n            },\n            ':focus': {\n              'border-color': args.focusBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <FormContent cols={2} showActions />\n    </Configuration>\n  );\n};\n\nConfigurableForm.args = {\n  foregroundColor: '#054a8a',\n  backgroundColor: '#e2f1ff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: 0.5,\n  hoverBorderColor: '#3f3f3f',\n  focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  hoverBorderColor: { control: { type: 'color' } },\n  focusBorderColor: { control: { type: 'color' } },\n  heading: { table: { disable: true } },\n  description: { table: { disable: true } }\n};\n"]}

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

@@ -2,8 +2,12 @@ import { Meta, Story } from '@storybook/react';
 import { LinkProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const LinkDemo: Story<LinkProps>;
-export declare const LinkWithIconDemo: Story;
-export declare const PreviewableLink: Story<LinkProps>;
-export declare const MultiplePreviewableLinks: Story<LinkProps>;
+interface LinkStoryArgs extends Pick<LinkProps, 'variant'> {
+}
+interface PreviewableLinkStoryArgs extends LinkStoryArgs, Pick<LinkProps, 'onPreview'> {
+}
+export declare const LinkDemo: Story<LinkStoryArgs>;
+export declare const ExternalLinkDemo: Story<LinkStoryArgs>;
+export declare const PreviewableLink: Story<PreviewableLinkStoryArgs>;
+export declare const MultiplePreviewableLinks: Story<PreviewableLinkStoryArgs>;
 //# sourceMappingURL=Link.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAY5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAuBrD,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA4B,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAK9E,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,KAAK,CAAC,aAAa,CAMzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAMjD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,wBAAwB,CAa3D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,CAuBpE,CAAC"}