@pega/cosmos-react-demos 7.11.3 → 7.11.4-10

package/jsx/core/DateTime/DateTimeDisplay.stories.jsx

@@ -1,54 +0,0 @@
-import { DateTimeDisplay, DurationDisplay } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/DateTime'
-};
-export const DurationDisplayDemo = (args) => {
-    return (<DurationDisplay value={args.value} significantUnits={args.significantUnits} unitDisplay={args.unitDisplay} maxPrecision={args.maxPrecision}/>);
-};
-DurationDisplayDemo.args = {
-    value: 462553844,
-    significantUnits: 5,
-    unitDisplay: undefined,
-    maxPrecision: undefined
-};
-DurationDisplayDemo.argTypes = {
-    value: { control: { type: 'number' } },
-    significantUnits: { options: [1, 2, 3, 4, 5], control: { type: 'select' } },
-    unitDisplay: { options: [undefined, 'narrow', 'short', 'long'], control: { type: 'select' } },
-    maxPrecision: {
-        options: [undefined, 'day', 'hour', 'minute', 'second', 'millisecond'],
-        control: { type: 'select' }
-    }
-};
-export const DateTimeDisplayDemo = (args) => {
-    return (<DateTimeDisplay value={args.value} variant={args.variant} format={args.format} clockFormat={args.clockFormat}/>);
-};
-DateTimeDisplayDemo.args = {
-    value: new Date(),
-    variant: 'date',
-    format: 'short',
-    clockFormat: undefined
-};
-DateTimeDisplayDemo.argTypes = {
-    value: { control: { type: 'date' } },
-    variant: {
-        options: [
-            'date',
-            'datetime',
-            'time',
-            'week',
-            'month',
-            'year',
-            'monthyear',
-            'quarteryear',
-            'relative'
-        ],
-        control: { type: 'select' }
-    },
-    format: { options: ['short', 'medium', 'long', 'numeric'], control: { type: 'select' } },
-    clockFormat: {
-        options: [undefined, 12, 24],
-        control: { type: 'inline-radio' }
-    }
-};
-//# sourceMappingURL=DateTimeDisplay.stories.jsx.map

package/jsx/core/DateTime/DateTimeDisplay.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateTimeDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,eAAe;IACb,KAAK,EAAE,eAAe;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC/F,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CACxC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAChC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,gBAAgB,EAAE,CAAC;IACnB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,gBAAgB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7F,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC;QACtE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC/F,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,MAAM;YACN,UAAU;YACV,MAAM;YACN,MAAM;YACN,OAAO;YACP,MAAM;YACN,WAAW;YACX,aAAa;YACb,UAAU;SACX;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxF,WAAW,EAAE;QACX,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC;QAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;KAClC;CACF,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { DateTimeDisplay, DurationDisplay } from '@pega/cosmos-react-core';\nimport type { DateTimeDisplayProps, DurationDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime'\n} as Meta;\n\nexport const DurationDisplayDemo: StoryFn<DurationDisplayProps> = (args: DurationDisplayProps) => {\n  return (\n    <DurationDisplay\n      value={args.value}\n      significantUnits={args.significantUnits}\n      unitDisplay={args.unitDisplay}\n      maxPrecision={args.maxPrecision}\n    />\n  );\n};\n\nDurationDisplayDemo.args = {\n  value: 462553844,\n  significantUnits: 5,\n  unitDisplay: undefined,\n  maxPrecision: undefined\n};\n\nDurationDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  significantUnits: { options: [1, 2, 3, 4, 5], control: { type: 'select' } },\n  unitDisplay: { options: [undefined, 'narrow', 'short', 'long'], control: { type: 'select' } },\n  maxPrecision: {\n    options: [undefined, 'day', 'hour', 'minute', 'second', 'millisecond'],\n    control: { type: 'select' }\n  }\n};\n\nexport const DateTimeDisplayDemo: StoryFn<DateTimeDisplayProps> = (args: DateTimeDisplayProps) => {\n  return (\n    <DateTimeDisplay\n      value={args.value}\n      variant={args.variant}\n      format={args.format}\n      clockFormat={args.clockFormat}\n    />\n  );\n};\n\nDateTimeDisplayDemo.args = {\n  value: new Date(),\n  variant: 'date',\n  format: 'short',\n  clockFormat: undefined\n};\n\nDateTimeDisplayDemo.argTypes = {\n  value: { control: { type: 'date' } },\n  variant: {\n    options: [\n      'date',\n      'datetime',\n      'time',\n      'week',\n      'month',\n      'year',\n      'monthyear',\n      'quarteryear',\n      'relative'\n    ],\n    control: { type: 'select' }\n  },\n  format: { options: ['short', 'medium', 'long', 'numeric'], control: { type: 'select' } },\n  clockFormat: {\n    options: [undefined, 12, 24],\n    control: { type: 'inline-radio' }\n  }\n};\n"]}

package/jsx/core/DateTime/DateTimePicker.stories.d.ts

@@ -1,7 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { DatePickerProps, TimePickerProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").ReactRenderer, import("@storybook/csf").Args>;
-export default _default;
-export declare const DatePickerDemo: StoryFn<DatePickerProps>;
-export declare const TimePickerDemo: StoryFn<TimePickerProps>;
-//# sourceMappingURL=DateTimePicker.stories.d.ts.map

package/jsx/core/DateTime/DateTimePicker.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateTimePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAEU;AAEV,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAcnD,CAAC;AAgBF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CASnD,CAAC"}

package/jsx/core/DateTime/DateTimePicker.stories.jsx

@@ -1,34 +0,0 @@
-import { DatePicker, TimePicker } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/DateTime/Picker'
-};
-export const DatePickerDemo = (args) => {
-    const currentYear = new Date().getFullYear();
-    const minYear = new Date(currentYear - args.min, 0, 1);
-    const maxYear = new Date(currentYear + args.max, 11, 31);
-    return (<DatePicker selected={new Date()} showWeekNumber={args.showWeekNumber} mode={args.mode} min={minYear} max={maxYear}/>);
-};
-DatePickerDemo.args = {
-    showWeekNumber: false,
-    mode: 'date',
-    min: 10,
-    max: 10
-};
-DatePickerDemo.argTypes = {
-    showWeekNumber: { control: { type: 'boolean' } },
-    mode: { options: ['date', 'week', 'datetime'], control: { type: 'select' } },
-    min: { control: { type: 'number' } },
-    max: { control: { type: 'number' } }
-};
-export const TimePickerDemo = (args) => {
-    return (<TimePicker selected={new Date()} interval={args.interval} clockFormat={args.clockFormat} onSelect={() => { }}/>);
-};
-TimePickerDemo.args = {
-    interval: 30,
-    clockFormat: undefined
-};
-TimePickerDemo.argTypes = {
-    interval: { options: [undefined, 15, 30, 60], control: { type: 'select' } },
-    clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } }
-};
-//# sourceMappingURL=DateTimePicker.stories.jsx.map

package/jsx/core/DateTime/DateTimePicker.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateTimePicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGjE,eAAe;IACb,KAAK,EAAE,sBAAsB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAChF,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,GAAc,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,GAAc,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACrB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,GAAG,CAAC,CAAC,OAAO,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,KAAK;IACrB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;CACR,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5E,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAChF,OAAO,CACL,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACrB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC3E,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { DatePicker, TimePicker } from '@pega/cosmos-react-core';\nimport type { DatePickerProps, TimePickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Picker'\n} as Meta;\n\nexport const DatePickerDemo: StoryFn<DatePickerProps> = (args: DatePickerProps) => {\n  const currentYear = new Date().getFullYear();\n  const minYear = new Date(currentYear - (args.min as number), 0, 1);\n  const maxYear = new Date(currentYear + (args.max as number), 11, 31);\n\n  return (\n    <DatePicker\n      selected={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      mode={args.mode}\n      min={minYear}\n      max={maxYear}\n    />\n  );\n};\n\nDatePickerDemo.args = {\n  showWeekNumber: false,\n  mode: 'date',\n  min: 10,\n  max: 10\n};\n\nDatePickerDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  mode: { options: ['date', 'week', 'datetime'], control: { type: 'select' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } }\n};\n\nexport const TimePickerDemo: StoryFn<TimePickerProps> = (args: TimePickerProps) => {\n  return (\n    <TimePicker\n      selected={new Date()}\n      interval={args.interval}\n      clockFormat={args.clockFormat}\n      onSelect={() => {}}\n    />\n  );\n};\n\nTimePickerDemo.args = {\n  interval: 30,\n  clockFormat: undefined\n};\n\nTimePickerDemo.argTypes = {\n  interval: { options: [undefined, 15, 30, 60], control: { type: 'select' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } }\n};\n"]}

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

@@ -1,7 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").ReactRenderer, import("@storybook/csf").Args>;
-export default _default;
-export declare const InfoDialogDemo: StoryFn;
-export declare const InfoDialogProgressDemo: StoryFn;
-export declare const FormDialogDemo: StoryFn;
-//# sourceMappingURL=Dialog.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAKtD,wBAEU;AAEV,eAAO,MAAM,cAAc,EAAE,OAE5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAEpC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAE5B,CAAC"}

package/jsx/core/Dialog/Dialog.stories.jsx

@@ -1,15 +0,0 @@
-import { InfoDialogMock, InfoDialogProgressMock } from './InfoDialog.mocks';
-import { FormDialogMock } from './FormDialog.mocks';
-export default {
-    title: 'Core/Dialog'
-};
-export const InfoDialogDemo = () => {
-    return <InfoDialogMock />;
-};
-export const InfoDialogProgressDemo = () => {
-    return <InfoDialogProgressMock />;
-};
-export const FormDialogDemo = () => {
-    return <FormDialogMock />;
-};
-//# sourceMappingURL=Dialog.stories.jsx.map

package/jsx/core/Dialog/Dialog.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.stories.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,eAAe;IACb,KAAK,EAAE,aAAa;CACb,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAAY,GAAG,EAAE;IAC1C,OAAO,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAY,GAAG,EAAE;IAClD,OAAO,CAAC,sBAAsB,CAAC,AAAD,EAAG,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAY,GAAG,EAAE;IAC1C,OAAO,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { InfoDialogMock, InfoDialogProgressMock } from './InfoDialog.mocks';\nimport { FormDialogMock } from './FormDialog.mocks';\n\nexport default {\n  title: 'Core/Dialog'\n} as Meta;\n\nexport const InfoDialogDemo: StoryFn = () => {\n  return <InfoDialogMock />;\n};\n\nexport const InfoDialogProgressDemo: StoryFn = () => {\n  return <InfoDialogProgressMock />;\n};\n\nexport const FormDialogDemo: StoryFn = () => {\n  return <FormDialogMock />;\n};\n"]}

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

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import type { 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) => import("react").JSX.Element;
-export declare const FormDialogMock: () => import("react").JSX.Element;
-//# sourceMappingURL=FormDialog.mocks.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormDialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/FormDialog.mocks.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,yBAAyB,CAAC;AAIhF,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,gCAuIrB,CAAC;AAEF,eAAO,MAAM,cAAc,mCA0E1B,CAAC"}

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

@@ -1,194 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"FormDialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/FormDialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useReducer, useState } from 'react';\nimport type { ChangeEvent, FocusEvent } from 'react';\n\nimport {\n  ComboBox,\n  createUID,\n  Flex,\n  FormDialog,\n  Input,\n  SummaryList,\n  Text\n} from '@pega/cosmos-react-core';\nimport type { FormDialogProps, SummaryListItem } 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

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

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

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

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

@@ -1,64 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"InfoDialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/InfoDialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { 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 type { 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

@@ -1,7 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { DrawerProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").ReactRenderer, import("@storybook/csf").Args>;
-export default _default;
-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

@@ -1 +0,0 @@
-{"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

@@ -1,98 +0,0 @@
-import { useState } from 'react';
-import { Button, Card, Drawer, Flex, Text, useTheme } from '@pega/cosmos-react-core';
-import { StyledDrawerContent } from './Drawer.styles';
-export default {
-    title: 'Core/Drawer',
-    component: Drawer,
-    args: {
-        placement: 'right',
-        transitionSpeed: '0.25s'
-    },
-    argTypes: {
-        placement: { options: ['top', 'right', 'bottom', 'left'], control: { type: 'select' } },
-        transitionSpeed: { control: { type: 'text' } }
-    }
-};
-export const ContainedDrawer = (args) => {
-    const [open, setOpen] = useState(false);
-    const theme = useTheme();
-    const drawer = (<Drawer open={open} nullWhenClosed onOuterClick={() => {
-            setOpen(false);
-        }} position='absolute' size='100%' placement={args.placement} transitionSpeed={args.transitionSpeed}>
-      <Flex as={StyledDrawerContent} container={{
-            direction: 'column',
-            justify: 'center',
-            alignItems: 'center',
-            gap: 2,
-            pad: 4
-        }}>
-        <Text variant='h1'>This is a Drawer</Text>
-        <Text>
-          You can close this Drawer by clicking anywhere in the area outside of it, or by clicking
-          the Button below.
-        </Text>
-        <Button onClick={() => setOpen(false)}>Close Drawer</Button>
-      </Flex>
-    </Drawer>);
-    return (<Card style={{
-            position: 'relative',
-            overflow: 'hidden',
-            height: '20rem',
-            width: '100%',
-            border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,
-            backgroundColor: `${theme.base.colors.blue['extra-light']}`,
-            justifyContent: 'center',
-            alignItems: 'center'
-        }}>
-      <Button variant='primary' onClick={() => setOpen(true)}>
-        Open Drawer
-      </Button>
-      {drawer}
-    </Card>);
-};
-export const ViewportDrawer = (args) => {
-    const [open, setOpen] = useState(false);
-    const theme = useTheme();
-    const drawer = (<Drawer open={open} onOuterClick={() => {
-            setOpen(false);
-        }} position='fixed' size={args.size} placement={args.placement} transitionSpeed={args.transitionSpeed} shadow={args.shadow}>
-      <Flex as={StyledDrawerContent} container={{
-            direction: 'column',
-            justify: 'center',
-            alignItems: 'center',
-            gap: 2,
-            pad: 4
-        }}>
-        <Text variant='h1'>This is a Drawer</Text>
-        <Text>
-          You can close this Drawer by clicking anywhere in the area outside of it, or by clicking
-          the Button below.
-        </Text>
-        <Button onClick={() => setOpen(false)}>Close Drawer</Button>
-      </Flex>
-    </Drawer>);
-    return (<Card style={{
-            position: 'relative',
-            overflow: 'hidden',
-            height: '20rem',
-            width: '100%',
-            border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,
-            backgroundColor: `${theme.base.colors.blue['extra-light']}`,
-            justifyContent: 'center',
-            alignItems: 'center'
-        }}>
-      <Button variant='primary' onClick={() => setOpen(true)}>
-        Open Drawer
-      </Button>
-      {drawer}
-    </Card>);
-};
-ViewportDrawer.args = {
-    size: '30rem',
-    shadow: false
-};
-ViewportDrawer.argTypes = {
-    size: { control: { type: 'text' } },
-    shadow: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=Drawer.stories.jsx.map