@pega/cosmos-react-demos 2.1.6 → 2.1.7

package/jsx/core/Currency/Currency.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Currency.stories.jsx","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<CurrencyInputProps> = (args: CurrencyInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <CurrencyInput\n      value={value}\n      onChange={inputValue => setValue(inputValue)}\n      onBlur={inputValue => setValue(inputValue)}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      formattingOptions={{\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: '12345.67',\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react';
+import { DateInputProps, DateTimeInputProps, DateRangeInputProps, DayOfWeekInputProps, DurationInputProps, MonthInputProps, QuarterInputProps, TimeInputProps, WeekInputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const DateInputDemo: Story<DateInputProps>;
+export declare const MonthInputDemo: Story<MonthInputProps>;
+export declare const WeekInputDemo: Story<WeekInputProps>;
+export declare const QuarterInputDemo: Story<QuarterInputProps>;
+export declare const DayOfWeekInputDemo: Story<DayOfWeekInputProps & {
+    min?: never;
+    max?: never;
+}>;
+export declare const TimeInputDemo: Story<TimeInputProps>;
+export declare const DateTimeInputDemo: Story<DateTimeInputProps>;
+export declare const DateRangeInputDemo: Story<DateRangeInputProps>;
+export declare const DurationInputDemo: Story<DurationInputProps & {
+    min?: never;
+    max?: never;
+}>;
+//# sourceMappingURL=DateTime.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;;AAEjC,wBAqBU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAe/C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAcjD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAMF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAcrD,CAAC;AAMF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAaxF,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAiB/C,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAkBvD,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAezD,CAAC;AAiBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAiBtF,CAAC"}

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

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/DateTime/Input',
+    args: {
+        status: undefined,
+        labelHidden: false,
+        required: false,
+        disabled: false,
+        readOnly: false,
+        min: undefined,
+        max: undefined
+    },
+    argTypes: {
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        label: { control: { type: 'text' } },
+        labelHidden: { control: { type: 'boolean' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } },
+        min: { control: { type: 'date' } },
+        max: { control: { type: 'date' } }
+    }
+};
+export const DateInputDemo = (args) => {
+    return (<DateInput value={new Date()} showWeekNumber={args.showWeekNumber} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+};
+DateInputDemo.args = {
+    showWeekNumber: false,
+    label: 'DateTime input'
+};
+DateInputDemo.argTypes = {
+    showWeekNumber: { control: { type: 'boolean' } }
+};
+export const MonthInputDemo = (args) => {
+    return (<MonthInput value={new Date()} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+};
+MonthInputDemo.args = {
+    label: 'Month input'
+};
+export const WeekInputDemo = (args) => {
+    return (<WeekInput value={new Date()} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+};
+WeekInputDemo.args = {
+    label: 'Week input'
+};
+export const QuarterInputDemo = (args) => {
+    return (<QuarterInput value={new Date()} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+};
+QuarterInputDemo.args = {
+    label: 'Quarter input'
+};
+export const DayOfWeekInputDemo = (args) => {
+    return (<DayOfWeekInput status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+DayOfWeekInputDemo.args = {
+    label: 'Day of the week input'
+};
+DayOfWeekInputDemo.argTypes = {
+    min: { table: { disable: true } },
+    max: { table: { disable: true } }
+};
+export const TimeInputDemo = (args) => {
+    return (<TimeInput value={new Date()} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+};
+TimeInputDemo.args = {
+    withSeconds: false,
+    clockFormat: undefined,
+    pickerInterval: 30,
+    label: 'Time input'
+};
+TimeInputDemo.argTypes = {
+    withSeconds: { control: { type: 'boolean' } },
+    clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },
+    pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
+};
+export const DateTimeInputDemo = (args) => {
+    return (<DateTimeInput value={new Date()} showWeekNumber={args.showWeekNumber} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+};
+DateTimeInputDemo.args = {
+    showWeekNumber: false,
+    withSeconds: false,
+    clockFormat: undefined,
+    pickerInterval: 30,
+    label: 'DateTime input'
+};
+DateTimeInputDemo.argTypes = {
+    showWeekNumber: { control: { type: 'boolean' } },
+    withSeconds: { control: { type: 'boolean' } },
+    clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },
+    pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
+};
+export const DateRangeInputDemo = (args) => {
+    return (<DateRangeInput fromValue={new Date()} toValue={new Date()} showWeekNumber={args.showWeekNumber} status={args.status} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+DateRangeInputDemo.args = {
+    showWeekNumber: false,
+    fromLabel: 'Check in',
+    toLabel: 'Check out'
+};
+DateRangeInputDemo.argTypes = {
+    showWeekNumber: { control: { type: 'boolean' } },
+    fromLabel: { control: { type: 'text' } },
+    toLabel: { control: { type: 'text' } },
+    label: { table: { disable: true } },
+    min: { table: { disable: true } },
+    max: { table: { disable: true } }
+};
+export const DurationInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    return (<DurationInput value={value} onChange={setValue} format={args.format} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+DurationInputDemo.args = {
+    value: 86400000,
+    format: Format.Seconds,
+    label: 'Duration input'
+};
+DurationInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
+    format: {
+        options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],
+        control: { type: 'select' }
+    },
+    min: { table: { disable: true } },
+    max: { table: { disable: true } }
+};
+//# sourceMappingURL=DateTime.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,SAAS,EAET,aAAa,EAEb,cAAc,EAEd,cAAc,EAEd,aAAa,EAEb,MAAM,EACN,UAAU,EAEV,YAAY,EAEZ,SAAS,EAET,SAAS,EAEV,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAClC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KACnC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,aAAa;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,IAAuB,EAAE,EAAE;IACpF,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,eAAe;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAA8D,CAC3F,IAAyB,EACzB,EAAE;IACF,OAAO,CACL,CAAC,cAAc,CACb,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACjC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,EAAE;IAClB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAClF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAA8B,CAAC,IAAwB,EAAE,EAAE;IACvF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,EAAE;IAClB,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAClF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,OAAO,CACL,CAAC,cAAc,CACb,SAAS,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACtB,OAAO,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACpB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,cAAc,EAAE,KAAK;IACrB,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACjC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAA6D,CACzF,IAAwB,EACxB,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,MAAM,CAAC,OAAO;IACtB,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC;QACtF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACjC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAClC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  DateInput,\n  DateInputProps,\n  DateTimeInput,\n  DateTimeInputProps,\n  DateRangeInput,\n  DateRangeInputProps,\n  DayOfWeekInput,\n  DayOfWeekInputProps,\n  DurationInput,\n  DurationInputProps,\n  Format,\n  MonthInput,\n  MonthInputProps,\n  QuarterInput,\n  QuarterInputProps,\n  TimeInput,\n  TimeInputProps,\n  WeekInput,\n  WeekInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Input',\n  args: {\n    status: undefined,\n    labelHidden: false,\n    required: false,\n    disabled: false,\n    readOnly: false,\n    min: undefined,\n    max: undefined\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    min: { control: { type: 'date' } },\n    max: { control: { type: 'date' } }\n  }\n} as Meta;\n\nexport const DateInputDemo: Story<DateInputProps> = (args: DateInputProps) => {\n  return (\n    <DateInput\n      value={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nDateInputDemo.args = {\n  showWeekNumber: false,\n  label: 'DateTime input'\n};\n\nDateInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: Story<MonthInputProps> = (args: MonthInputProps) => {\n  return (\n    <MonthInput\n      value={new Date()}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nMonthInputDemo.args = {\n  label: 'Month input'\n};\n\nexport const WeekInputDemo: Story<WeekInputProps> = (args: WeekInputProps) => {\n  return (\n    <WeekInput\n      value={new Date()}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nWeekInputDemo.args = {\n  label: 'Week input'\n};\n\nexport const QuarterInputDemo: Story<QuarterInputProps> = (args: QuarterInputProps) => {\n  return (\n    <QuarterInput\n      value={new Date()}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nQuarterInputDemo.args = {\n  label: 'Quarter input'\n};\n\nexport const DayOfWeekInputDemo: Story<DayOfWeekInputProps & { min?: never; max?: never }> = (\n  args: DayOfWeekInputProps\n) => {\n  return (\n    <DayOfWeekInput\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDayOfWeekInputDemo.args = {\n  label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: Story<TimeInputProps> = (args: TimeInputProps) => {\n  return (\n    <TimeInput\n      value={new Date()}\n      withSeconds={args.withSeconds}\n      clockFormat={args.clockFormat}\n      pickerInterval={args.pickerInterval}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nTimeInputDemo.args = {\n  withSeconds: false,\n  clockFormat: undefined,\n  pickerInterval: 30,\n  label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n  withSeconds: { control: { type: 'boolean' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n  pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: Story<DateTimeInputProps> = (args: DateTimeInputProps) => {\n  return (\n    <DateTimeInput\n      value={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      withSeconds={args.withSeconds}\n      clockFormat={args.clockFormat}\n      pickerInterval={args.pickerInterval}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nDateTimeInputDemo.args = {\n  showWeekNumber: false,\n  withSeconds: false,\n  clockFormat: undefined,\n  pickerInterval: 30,\n  label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  withSeconds: { control: { type: 'boolean' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n  pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: Story<DateRangeInputProps> = (args: DateRangeInputProps) => {\n  return (\n    <DateRangeInput\n      fromValue={new Date()}\n      toValue={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      fromLabel={args.fromLabel}\n      toLabel={args.toLabel}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDateRangeInputDemo.args = {\n  showWeekNumber: false,\n  fromLabel: 'Check in',\n  toLabel: 'Check out'\n};\n\nDateRangeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { control: { type: 'text' } },\n  label: { table: { disable: true } },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n\nexport const DurationInputDemo: Story<DurationInputProps & { min?: never; max?: never }> = (\n  args: DurationInputProps\n) => {\n  const [value, setValue] = useState(args.value);\n  return (\n    <DurationInput\n      value={value}\n      onChange={setValue}\n      format={args.format}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDurationInputDemo.args = {\n  value: 86400000,\n  format: Format.Seconds,\n  label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  format: {\n    options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n    control: { type: 'select' }\n  },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n"]}

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

@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/react';
+import { DateTimeDisplayProps, DurationDisplayProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const DurationDisplayDemo: Story<DurationDisplayProps>;
+export declare const DateTimeDisplayDemo: Story<DateTimeDisplayProps>;
+//# sourceMappingURL=DateTimeDisplay.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,oBAAoB,EAEpB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAEjC,wBAEU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAE3D,CAAC;AAYF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAS3D,CAAC"}

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

@@ -0,0 +1,47 @@
+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}/>;
+};
+DurationDisplayDemo.args = {
+    value: 462553844,
+    significantUnits: 4
+};
+DurationDisplayDemo.argTypes = {
+    value: { control: { type: 'number' } },
+    significantUnits: { options: [1, 2, 3, 4], 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', '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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EAEf,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAG,CAAC;AACzF,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,gBAAgB,EAAE,CAAC;CACpB,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,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,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,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,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 { Meta, Story } from '@storybook/react';\n\nimport {\n  DateTimeDisplay,\n  DateTimeDisplayProps,\n  DurationDisplay,\n  DurationDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime'\n} as Meta;\n\nexport const DurationDisplayDemo: Story<DurationDisplayProps> = (args: DurationDisplayProps) => {\n  return <DurationDisplay value={args.value} significantUnits={args.significantUnits} />;\n};\n\nDurationDisplayDemo.args = {\n  value: 462553844,\n  significantUnits: 4\n};\n\nDurationDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  significantUnits: { options: [1, 2, 3, 4], control: { type: 'select' } }\n};\n\nexport const DateTimeDisplayDemo: Story<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', '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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAc,eAAe,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnG,wBAEU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAcjD,CAAC;AAgBF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAIjD,CAAC"}

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

@@ -0,0 +1,34 @@
+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'], 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}/>);
+};
+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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,sBAAsB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,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,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChE,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,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,CAC7F,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 { Meta, Story } from '@storybook/react';\n\nimport { DatePicker, DatePickerProps, TimePicker, TimePickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Picker'\n} as Meta;\n\nexport const DatePickerDemo: Story<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'], control: { type: 'select' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } }\n};\n\nexport const TimePickerDemo: Story<TimePickerProps> = (args: TimePickerProps) => {\n  return (\n    <TimePicker selected={new Date()} interval={args.interval} clockFormat={args.clockFormat} />\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/Drawer/Drawer.stories.d.ts

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

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

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

package/jsx/core/Drawer/Drawer.stories.jsx

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

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

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

package/jsx/core/Drawer/Drawer.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledDrawerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Drawer.styles.d.ts.map

package/jsx/core/Drawer/Drawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yGAS9B,CAAC"}

package/jsx/core/Drawer/Drawer.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledDrawerContent = styled.div(props => {
+    const { theme: { base } } = props;
+    return css `
+    height: 100%;
+    background-color: ${base.palette['primary-background']};
+  `;
+});
+StyledDrawerContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Drawer.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACpD,MAAM,EACJ,KAAK,EAAE,EAAE,IAAI,EAAE,EAChB,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;wBAEY,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GACvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledDrawerContent = styled.div(props => {\n  const {\n    theme: { base }\n  } = props;\n\n  return css`\n    height: 100%;\n    background-color: ${base.palette['primary-background']};\n  `;\n});\n\nStyledDrawerContent.defaultProps = defaultThemeProp;\n"]}

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

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

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

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

package/jsx/core/Email/EmailDisplay.stories.jsx

@@ -0,0 +1,19 @@
+import { EmailDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Email',
+    component: EmailDisplay
+};
+export const EmailDisplayDemo = (args) => {
+    return <EmailDisplay value={args.value} displayText={args.displayText} variant={args.variant}/>;
+};
+EmailDisplayDemo.args = {
+    value: 'email@example.com',
+    displayText: 'Example Email',
+    variant: 'link'
+};
+EmailDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    displayText: { control: { type: 'text' } },
+    variant: { options: ['link', 'text'], control: { type: 'select' } }
+};
+//# sourceMappingURL=EmailDisplay.stories.jsx.map

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

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

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

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

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

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

package/jsx/core/EmojiPicker/EmojiPicker.stories.jsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/EmojiPicker',
+    component: EmojiPicker,
+    args: {
+        showFooter: false,
+        emojiSize: 24,
+        perLine: 9
+    },
+    argTypes: {
+        showFooter: { control: { type: 'boolean' } },
+        emojiSize: { control: { type: 'number' } },
+        perLine: { control: { type: 'number' } }
+    }
+};
+export const EmojiPickerDemo = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (<Flex container={{ direction: 'column' }}>
+      <Input value={value}/>
+      <EmojiPicker showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>
+    </Flex>);
+};
+export const EmojiPickerExcludeDemo = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (<Flex container={{ direction: 'column' }}>
+      <Input value={value}/>
+      <EmojiPicker exclude={['recent', 'people', 'foods', 'activity', 'flags']} showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>
+    </Flex>);
+};
+export const CustomEmojiSet = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (<EmojiContext.Provider value={{
+            set: 'google',
+            spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
+        }}>
+      <Flex container={{ direction: 'column' }}>
+        <Input value={value}/>
+        <EmojiPicker showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>
+      </Flex>
+    </EmojiContext.Provider>);
+};
+//# sourceMappingURL=EmojiPicker.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { BaseEmoji } from 'emoji-mart';\n\nimport { EmojiPicker, EmojiContext, EmojiPickerProps, Flex, Input } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/EmojiPicker',\n  component: EmojiPicker,\n  args: {\n    showFooter: false,\n    emojiSize: 24,\n    perLine: 9\n  },\n  argTypes: {\n    showFooter: { control: { type: 'boolean' } },\n    emojiSize: { control: { type: 'number' } },\n    perLine: { control: { type: 'number' } }\n  }\n} as Meta;\n\nexport const EmojiPickerDemo: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n  const [value, setValue] = useState<string>('');\n\n  const onEmojiSelect = (emoji: BaseEmoji) => {\n    setValue(curr => `${curr}${emoji.native}`);\n  };\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <Input value={value} />\n      <EmojiPicker\n        showFooter={args.showFooter}\n        emojiSize={args.emojiSize}\n        perLine={args.perLine}\n        onSelect={onEmojiSelect}\n      />\n    </Flex>\n  );\n};\n\nexport const EmojiPickerExcludeDemo: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n  const [value, setValue] = useState<string>('');\n\n  const onEmojiSelect = (emoji: BaseEmoji) => {\n    setValue(curr => `${curr}${emoji.native}`);\n  };\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <Input value={value} />\n      <EmojiPicker\n        exclude={['recent', 'people', 'foods', 'activity', 'flags']}\n        showFooter={args.showFooter}\n        emojiSize={args.emojiSize}\n        perLine={args.perLine}\n        onSelect={onEmojiSelect}\n      />\n    </Flex>\n  );\n};\n\nexport const CustomEmojiSet: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n  const [value, setValue] = useState<string>('');\n\n  const onEmojiSelect = (emoji: BaseEmoji) => {\n    setValue(curr => `${curr}${emoji.native}`);\n  };\n\n  return (\n    <EmojiContext.Provider\n      value={{\n        set: 'google',\n        spriteSrcResolver: () =>\n          'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'\n      }}\n    >\n      <Flex container={{ direction: 'column' }}>\n        <Input value={value} />\n        <EmojiPicker\n          showFooter={args.showFooter}\n          emojiSize={args.emojiSize}\n          perLine={args.perLine}\n          onSelect={onEmojiSelect}\n        />\n      </Flex>\n    </EmojiContext.Provider>\n  );\n};\n"]}

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

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