@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/core/DateTime/DateTime.stories.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(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 }, void 0));
+};
+DateInputDemo.args = {
+    showWeekNumber: false,
+    label: 'DateTime input'
+};
+DateInputDemo.argTypes = {
+    showWeekNumber: { control: { type: 'boolean' } }
+};
+export const MonthInputDemo = (args) => {
+    return (_jsx(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 }, void 0));
+};
+MonthInputDemo.args = {
+    label: 'Month input'
+};
+export const WeekInputDemo = (args) => {
+    return (_jsx(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 }, void 0));
+};
+WeekInputDemo.args = {
+    label: 'Week input'
+};
+export const QuarterInputDemo = (args) => {
+    return (_jsx(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 }, void 0));
+};
+QuarterInputDemo.args = {
+    label: 'Quarter input'
+};
+export const DayOfWeekInputDemo = (args) => {
+    return (_jsx(DayOfWeekInput, { status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+};
+DayOfWeekInputDemo.args = {
+    label: 'Day of the week input'
+};
+DayOfWeekInputDemo.argTypes = {
+    min: { table: { disable: true } },
+    max: { table: { disable: true } }
+};
+export const TimeInputDemo = (args) => {
+    return (_jsx(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 }, void 0));
+};
+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 (_jsx(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 }, void 0));
+};
+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 (_jsx(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 }, void 0));
+};
+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 (_jsx(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 }, void 0));
+};
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"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","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/lib/core/DateTime/DateTimeDisplay.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateTimeDisplay, DurationDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/DateTime'
+};
+export const DurationDisplayDemo = (args) => {
+    return _jsx(DurationDisplay, { value: args.value, significantUnits: args.significantUnits }, void 0);
+};
+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 (_jsx(DateTimeDisplay, { value: args.value, variant: args.variant, format: args.format, clockFormat: args.clockFormat }, void 0));
+};
+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.js.map

package/lib/core/DateTime/DateTimeDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeDisplay.stories.js","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,KAAC,eAAe,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,WAAI,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,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,WAC7B,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/lib/core/DateTime/DateTimePicker.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(DatePicker, { selected: new Date(), showWeekNumber: args.showWeekNumber, mode: args.mode, min: minYear, max: maxYear }, void 0));
+};
+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 (_jsx(TimePicker, { selected: new Date(), interval: args.interval, clockFormat: args.clockFormat }, void 0));
+};
+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.js.map

package/lib/core/DateTime/DateTimePicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.stories.js","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,KAAC,UAAU,IACT,QAAQ,EAAE,IAAI,IAAI,EAAE,EACpB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,WACZ,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,KAAC,UAAU,IAAC,QAAQ,EAAE,IAAI,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,WAAI,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/lib/core/Drawer/Drawer.stories.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = (_jsx(Drawer, { open: open, nullWhenClosed: true, onOuterClick: () => {
+            setOpen(false);
+        }, position: 'absolute', size: '100%', placement: args.placement, transitionSpeed: args.transitionSpeed, children: _jsxs(Flex, { as: StyledDrawerContent, container: {
+                direction: 'column',
+                justify: 'center',
+                alignItems: 'center',
+                gap: 2,
+                pad: 4
+            }, children: [_jsx(Text, { variant: 'h1', children: "This is a Drawer" }, void 0), _jsx(Text, { children: "You can close this Drawer by clicking anywhere in the area outside of it, or by clicking the Button below." }, void 0), _jsx(Button, { onClick: () => setOpen(false), children: "Close Drawer" }, void 0)] }, void 0) }, void 0));
+    return (_jsxs(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'
+        }, children: [_jsx(Button, { variant: 'primary', onClick: () => setOpen(true), children: "Open Drawer" }, void 0), drawer] }, void 0));
+};
+export const ViewportDrawer = (args) => {
+    const [open, setOpen] = useState(false);
+    const theme = useTheme();
+    const drawer = (_jsx(Drawer, { open: open, onOuterClick: () => {
+            setOpen(false);
+        }, position: 'fixed', size: args.size, placement: args.placement, transitionSpeed: args.transitionSpeed, shadow: args.shadow, children: _jsxs(Flex, { as: StyledDrawerContent, container: {
+                direction: 'column',
+                justify: 'center',
+                alignItems: 'center',
+                gap: 2,
+                pad: 4
+            }, children: [_jsx(Text, { variant: 'h1', children: "This is a Drawer" }, void 0), _jsx(Text, { children: "You can close this Drawer by clicking anywhere in the area outside of it, or by clicking the Button below." }, void 0), _jsx(Button, { onClick: () => setOpen(false), children: "Close Drawer" }, void 0)] }, void 0) }, void 0));
+    return (_jsxs(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'
+        }, children: [_jsx(Button, { variant: 'primary', onClick: () => setOpen(true), children: "Open Drawer" }, void 0), drawer] }, void 0));
+};
+ViewportDrawer.args = {
+    size: '30rem',
+    shadow: false
+};
+ViewportDrawer.argTypes = {
+    size: { control: { type: 'text' } },
+    shadow: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Drawer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","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/lib/core/Email/EmailDisplay.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Email',
+    component: EmailDisplay
+};
+export const EmailDisplayDemo = (args) => {
+    return _jsx(EmailDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }, void 0);
+};
+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.js.map

package/lib/core/Email/EmailDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailDisplay.stories.js","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,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,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/lib/core/EmojiPicker/EmojiPicker.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }, void 0), _jsx(EmojiPicker, { showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect }, void 0)] }, void 0));
+};
+export const EmojiPickerExcludeDemo = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }, void 0), _jsx(EmojiPicker, { exclude: ['recent', 'people', 'foods', 'activity', 'flags'], showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect }, void 0)] }, void 0));
+};
+export const CustomEmojiSet = (args) => {
+    const [value, setValue] = useState('');
+    const onEmojiSelect = (emoji) => {
+        setValue(curr => `${curr}${emoji.native}`);
+    };
+    return (_jsx(EmojiContext.Provider, { value: {
+            set: 'google',
+            spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
+        }, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }, void 0), _jsx(EmojiPicker, { showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect }, void 0)] }, void 0) }, void 0));
+};
+//# sourceMappingURL=EmojiPicker.stories.js.map

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

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

package/lib/core/EmptyState/EmptyState.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/EmptyState',
+    component: EmptyState,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const EmptyStateDemo = (args) => {
+    return _jsx(EmptyState, { message: args.message }, void 0);
+};
+EmptyStateDemo.args = {
+    message: 'No items'
+};
+EmptyStateDemo.argTypes = {
+    message: { control: { type: 'text' } }
+};
+//# sourceMappingURL=EmptyState.stories.js.map

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

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

package/lib/core/ErrorState/ErrorState.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorState } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/ErrorState',
+    component: ErrorState,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const ErrorStateDemo = (args) => {
+    return _jsx(ErrorState, { message: args.message, onRetry: args.displayRetry ? () => { } : undefined }, void 0);
+};
+ErrorStateDemo.args = {
+    message: 'Unknown error',
+    displayRetry: false
+};
+ErrorStateDemo.argTypes = {
+    message: { control: { type: 'text' } },
+    displayRetry: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=ErrorState.stories.js.map

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

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

package/lib/core/ExpandCollapse/ExpandCollapse.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, ExpandCollapse, Flex, Text } from '@pega/cosmos-react-core';
+import { StyledRegion } from './ExpandCollapse.styles';
+export default {
+    title: 'Core/ExpandCollapse',
+    component: ExpandCollapse,
+    args: {
+        min: '',
+        max: '',
+        transitionSpeed: '0.25s'
+    },
+    argTypes: {
+        min: { control: { type: 'text' } },
+        max: { control: { type: 'text' } },
+        transitionSpeed: { control: { type: 'text' } }
+    }
+};
+export const VerticalExpandCollapse = (args) => {
+    const [collapsed, setCollapsed] = useState(true);
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(StyledRegion, { children: _jsx(Button, { onClick: () => setCollapsed(curState => !curState), children: collapsed ? 'Expand' : 'Collapse ' }, void 0) }, void 0), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, min: args.min, max: args.max, transitionSpeed: args.transitionSpeed, nullWhenCollapsed: true, children: _jsx(StyledRegion, { innerRegion: true, children: _jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 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." }, void 0) }, void 0) }, void 0), _jsx(StyledRegion, { children: _jsx(Text, { children: "This content is outside of the ExpandCollapse and so it will always be visible." }, void 0) }, void 0)] }, void 0));
+};
+export const HorizontalExpandCollapse = (args) => {
+    const [collapsed, setCollapsed] = useState(true);
+    const [showText, setShowText] = useState(false);
+    return (_jsxs(Flex, { container: true, children: [_jsx(StyledRegion, { children: _jsx(Button, { onClick: () => setCollapsed(curState => !curState), children: collapsed ? 'Expand' : 'Collapse ' }, void 0) }, void 0), _jsx(ExpandCollapse, { dimension: 'width', collapsed: collapsed, min: args.min, max: args.max, transitionSpeed: args.transitionSpeed, nullWhenCollapsed: true, onAfterExpand: () => setShowText(true), onBeforeCollapse: () => setShowText(false), children: _jsx(StyledRegion, { innerRegion: true, children: showText && (_jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 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." }, void 0)) }, void 0) }, void 0), _jsx(StyledRegion, { children: _jsx(Text, { children: "This content is outside of the ExpandCollapse and so it will always be visible." }, void 0) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=ExpandCollapse.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.stories.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAuB,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;QACP,eAAe,EAAE,OAAO;KACzB;IACD,QAAQ,EAAE;QACR,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAClC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAClC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KAC/C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC9F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvD,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,WAC5B,WACI,EAEf,KAAC,cAAc,IACb,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,kBAEjB,KAAC,YAAY,IAAC,WAAW,kBACvB,KAAC,IAAI,2dAOE,WACM,WACA,EAEjB,KAAC,YAAY,cACX,KAAC,IAAI,0GAAuF,WAC/E,YACV,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAChG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvD,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,WAC5B,WACI,EAEf,KAAC,cAAc,IACb,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,QACjB,aAAa,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACtC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAE1C,KAAC,YAAY,IAAC,WAAW,kBACtB,QAAQ,IAAI,CACX,KAAC,IAAI,2dAOE,CACR,WACY,WACA,EAEjB,KAAC,YAAY,cACX,KAAC,IAAI,0GAAuF,WAC/E,YACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, ExpandCollapse, ExpandCollapseProps, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { StyledRegion } from './ExpandCollapse.styles';\n\nexport default {\n  title: 'Core/ExpandCollapse',\n  component: ExpandCollapse,\n  args: {\n    min: '',\n    max: '',\n    transitionSpeed: '0.25s'\n  },\n  argTypes: {\n    min: { control: { type: 'text' } },\n    max: { control: { type: 'text' } },\n    transitionSpeed: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const VerticalExpandCollapse: Story<ExpandCollapseProps> = (args: ExpandCollapseProps) => {\n  const [collapsed, setCollapsed] = useState(true);\n\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <StyledRegion>\n        <Button onClick={() => setCollapsed(curState => !curState)}>\n          {collapsed ? 'Expand' : 'Collapse '}\n        </Button>\n      </StyledRegion>\n\n      <ExpandCollapse\n        dimension='height'\n        collapsed={collapsed}\n        min={args.min}\n        max={args.max}\n        transitionSpeed={args.transitionSpeed}\n        nullWhenCollapsed\n      >\n        <StyledRegion innerRegion>\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n            incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n            mollit anim id est laborum.\n          </Text>\n        </StyledRegion>\n      </ExpandCollapse>\n\n      <StyledRegion>\n        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>\n      </StyledRegion>\n    </Flex>\n  );\n};\n\nexport const HorizontalExpandCollapse: Story<ExpandCollapseProps> = (args: ExpandCollapseProps) => {\n  const [collapsed, setCollapsed] = useState(true);\n  const [showText, setShowText] = useState(false);\n\n  return (\n    <Flex container>\n      <StyledRegion>\n        <Button onClick={() => setCollapsed(curState => !curState)}>\n          {collapsed ? 'Expand' : 'Collapse '}\n        </Button>\n      </StyledRegion>\n\n      <ExpandCollapse\n        dimension='width'\n        collapsed={collapsed}\n        min={args.min}\n        max={args.max}\n        transitionSpeed={args.transitionSpeed}\n        nullWhenCollapsed\n        onAfterExpand={() => setShowText(true)}\n        onBeforeCollapse={() => setShowText(false)}\n      >\n        <StyledRegion innerRegion>\n          {showText && (\n            <Text>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n              incididunt ut ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </Text>\n          )}\n        </StyledRegion>\n      </ExpandCollapse>\n\n      <StyledRegion>\n        <Text>This content is outside of the ExpandCollapse and so it will always be visible.</Text>\n      </StyledRegion>\n    </Flex>\n  );\n};\n"]}

package/lib/core/ExpandCollapse/ExpandCollapse.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;SASvB,CAAC"}
+{"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;SAcvB,CAAC"}

package/lib/core/ExpandCollapse/ExpandCollapse.styles.js

@@ -6,6 +6,11 @@ export const StyledRegion = styled.div(({ innerRegion, theme }) => {
     padding: calc(4 * ${theme.base.spacing});
     display: flex;
     justify-content: center;
+
+    button {
+      height: max-content;
+      align-self: center;
+    }
   `;
 });
 StyledRegion.defaultProps = defaultThemeProp;

package/lib/core/ExpandCollapse/ExpandCollapse.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.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,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n  return css`\n    background-color: ${theme.base.palette[\n      innerRegion ? 'primary-background' : 'secondary-background'\n    ]};\n    padding: calc(4 * ${theme.base.spacing});\n    display: flex;\n    justify-content: center;\n  `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.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,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;GAQvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n  return css`\n    background-color: ${theme.base.palette[\n      innerRegion ? 'primary-background' : 'secondary-background'\n    ]};\n    padding: calc(4 * ${theme.base.spacing});\n    display: flex;\n    justify-content: center;\n\n    button {\n      height: max-content;\n      align-self: center;\n    }\n  `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}

package/lib/core/FieldGroup/FieldGroup.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateInput, FieldGroup, Grid, Input, Select, Option, TextArea } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/FieldGroup',
+    component: FieldGroup
+};
+export const FieldGroupDemo = (args) => {
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, collapsible: args.firstGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }, void 0), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }, void 0), _jsx(Option, { value: 'B', children: "Option 1B" }, void 0)] }, void 0), _jsx(DateInput, { label: 'Date 1' }, void 0), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }, void 0) }, void 0), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }, void 0), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' }, void 0)] }, void 0) }, void 0), _jsx(FieldGroup, { name: args.secondGroupName, collapsible: args.secondGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }, void 0), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }, void 0), _jsx(Option, { value: 'B', children: "Option 2B" }, void 0)] }, void 0), _jsx(DateInput, { label: 'Date 2' }, void 0), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }, void 0) }, void 0), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }, void 0), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' }, void 0)] }, void 0) }, void 0)] }, void 0));
+};
+FieldGroupDemo.args = {
+    firstGroupName: 'Field group 1',
+    firstGroupCollapsible: true,
+    secondGroupName: 'Field group 2',
+    secondGroupCollapsible: true
+};
+FieldGroupDemo.argTypes = {
+    firstGroupName: { control: { type: 'text' } },
+    firstGroupCollapsible: { control: { type: 'boolean' } },
+    secondGroupName: { control: { type: 'text' } },
+    secondGroupCollapsible: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=FieldGroup.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateInput,\n  FieldGroup,\n  Grid,\n  Input,\n  Select,\n  Option,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldGroup',\n  component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n  firstGroupName: string;\n  firstGroupCollapsible: boolean;\n  secondGroupName: string;\n  secondGroupCollapsible: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n  return (\n    <Grid container={{ rowGap: 1 }}>\n      <FieldGroup name={args.firstGroupName} collapsible={args.firstGroupCollapsible}>\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 1' />\n          <Select label='Select 1'>\n            <Option value='A'>Option 1A</Option>\n            <Option value='B'>Option 1B</Option>\n          </Select>\n          <DateInput label='Date 1' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 1' />\n          </Grid>\n          <Input required type='text' label='Required 1' />\n          <Input disabled type='text' label='Disabled 1' />\n        </Grid>\n      </FieldGroup>\n      <FieldGroup name={args.secondGroupName} collapsible={args.secondGroupCollapsible}>\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 2' />\n          <Select label='Select 2'>\n            <Option value='A'>Option 2A</Option>\n            <Option value='B'>Option 2B</Option>\n          </Select>\n          <DateInput label='Date 2' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 2' />\n          </Grid>\n          <Input required type='text' label='Required 2' />\n          <Input disabled type='text' label='Disabled 2' />\n        </Grid>\n      </FieldGroup>\n    </Grid>\n  );\n};\n\nFieldGroupDemo.args = {\n  firstGroupName: 'Field group 1',\n  firstGroupCollapsible: true,\n  secondGroupName: 'Field group 2',\n  secondGroupCollapsible: true\n};\n\nFieldGroupDemo.argTypes = {\n  firstGroupName: { control: { type: 'text' } },\n  firstGroupCollapsible: { control: { type: 'boolean' } },\n  secondGroupName: { control: { type: 'text' } },\n  secondGroupCollapsible: { control: { type: 'boolean' } }\n};\n"]}