@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

@@ -1 +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"]}
+{"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 { useEffect, 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  usePrevious,\n  TimeRangeInputProps,\n  TimeRangeInput\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Input',\n  args: {\n    value: undefined,\n    status: undefined,\n    label: '',\n    labelHidden: false,\n    required: false,\n    disabled: false,\n    readOnly: false,\n    min: undefined,\n    max: undefined,\n    showAdditionalInfo: true,\n    mode: 'time'\n  },\n  argTypes: {\n    value: { control: { type: 'date' } },\n    status: {\n      options: [undefined, 'success', 'warning', 'error', 'pending'],\n      control: { type: 'select' }\n    },\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    showAdditionalInfo: { control: { type: 'boolean' } },\n    mode: { options: ['time', 'datetime'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface DateInputStoryProps extends DateInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface MonthInputStoryProps extends MonthInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface WeekInputStoryProps extends WeekInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface QuarterInputStoryProps extends QuarterInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface DayOfWeekInputStoryProps extends DayOfWeekInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface TimeInputStoryProps extends TimeInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface DateTimeInputStoryProps extends DateTimeInputProps {\n  showAdditionalInfo?: boolean;\n  showWeekNumber?: boolean;\n}\n\ninterface DateRangeInputStoryProps extends DateRangeInputProps {\n  showAdditionalInfo?: boolean;\n  showToAdditionalInfo?: boolean;\n  showFromAdditionalInfo?: boolean;\n}\n\ninterface DurationInputStoryProps extends DurationInputProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const DateInputDemo: Story<DateInputStoryProps> = (args: DateInputStoryProps) => {\n  const [value, setValue] = useState<DateInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DateInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nDateInputDemo.args = {\n  showWeekNumber: false,\n  label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: Story<MonthInputStoryProps> = (args: MonthInputStoryProps) => {\n  const [value, setValue] = useState<MonthInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <MonthInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nMonthInputDemo.args = {\n  label: 'Month input'\n};\n\nMonthInputDemo.argTypes = {\n  label: { control: { type: 'string' } }\n};\n\nexport const WeekInputDemo: Story<WeekInputStoryProps> = (args: WeekInputStoryProps) => {\n  const [value, setValue] = useState<WeekInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <WeekInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nWeekInputDemo.args = {\n  label: 'Week input'\n};\n\nWeekInputDemo.argTypes = {\n  label: { control: { type: 'string' } }\n};\n\nexport const QuarterInputDemo: Story<QuarterInputStoryProps> = (args: QuarterInputStoryProps) => {\n  const [value, setValue] = useState<QuarterInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <QuarterInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nQuarterInputDemo.args = {\n  label: 'Quarter input'\n};\n\nQuarterInputDemo.argTypes = {\n  label: { control: { type: 'string' } }\n};\n\nexport const DayOfWeekInputDemo: Story<DayOfWeekInputStoryProps & { min?: never; max?: never }> = (\n  args: DayOfWeekInputStoryProps\n) => {\n  const [value, setValue] = useState<DayOfWeekInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DayOfWeekInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onChange={setValue}\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<TimeInputStoryProps> = (args: TimeInputStoryProps) => {\n  const [value, setValue] = useState<TimeInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <TimeInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\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<DateTimeInputStoryProps> = (\n  args: DateTimeInputStoryProps\n) => {\n  const [value, setValue] = useState<DateTimeInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DateTimeInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\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      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\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<DateRangeInputStoryProps> = (\n  args: DateRangeInputStoryProps\n) => {\n  const [value, setValue] = useState<DateRangeInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DateRangeInput\n      toAdditionalInfo={\n        args.showToAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a to date'\n            }\n          : undefined\n      }\n      fromAdditionalInfo={\n        args.showFromAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a from date'\n            }\n          : undefined\n      }\n      value={value}\n      onChange={({ start, end }) => {\n        if (!start.state && !end.state)\n          setValue({ start: start.valueAsISOString, end: end.valueAsISOString });\n      }}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      label={args.label}\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  label: 'Dates of stay',\n  fromLabel: 'Check in',\n  toLabel: 'Check out',\n  showFromAdditionalInfo: true,\n  showToAdditionalInfo: true\n};\n\nDateRangeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { control: { type: 'text' } },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } },\n  showAdditionalInfo: { table: { disable: true } },\n  showFromAdditionalInfo: { control: { type: 'boolean' } },\n  showToAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const TimeRangeInputDemo: Story<TimeRangeInputProps> = (args: TimeRangeInputProps) => {\n  const [value, setValue] = useState(args.value);\n\n  const prevValue = usePrevious(args.value);\n\n  useEffect(() => {\n    if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {\n      setValue(args.value);\n    }\n  }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);\n  return (\n    <TimeRangeInput\n      value={value}\n      onChange={newState =>\n        setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp })\n      }\n      label={args.label}\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      mode={args.mode}\n      withSeconds={args.withSeconds}\n    />\n  );\n};\n\nTimeRangeInputDemo.args = {\n  fromLabel: 'Meeting start',\n  toLabel: 'Meeting end',\n  withSeconds: false\n};\n\nTimeRangeInputDemo.argTypes = {\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { control: { type: 'text' } },\n  label: { control: { type: 'text' } },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } },\n  withSeconds: { control: { type: 'boolean' } }\n};\n\nexport const DurationInputDemo: Story<DurationInputStoryProps & { min?: never; max?: never }> = (\n  args: DurationInputStoryProps\n) => {\n  const [value, setValue] = useState(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DurationInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a duration'\n            }\n          : undefined\n      }\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  // eslint-disable-next-line demo-patterns/literal-args\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

@@ -4,7 +4,7 @@ export default {
     title: 'Core/DateTime'
 };
 export const DurationDisplayDemo = (args) => {
-    return _jsx(DurationDisplay, { value: args.value, significantUnits: args.significantUnits }, void 0);
+    return _jsx(DurationDisplay, { value: args.value, significantUnits: args.significantUnits });
 };
 DurationDisplayDemo.args = {
     value: 462553844,
@@ -15,7 +15,7 @@ DurationDisplayDemo.argTypes = {
     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));
+    return (_jsx(DateTimeDisplay, { value: args.value, variant: args.variant, format: args.format, clockFormat: args.clockFormat }));
 };
 DateTimeDisplayDemo.args = {
     value: new Date(),

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

@@ -1 +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"]}
+{"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,GAAI,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,GAC7B,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.d.ts.map

@@ -1 +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"}
+{"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,CASjD,CAAC"}

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

@@ -7,7 +7,7 @@ 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));
+    return (_jsx(DatePicker, { selected: new Date(), showWeekNumber: args.showWeekNumber, mode: args.mode, min: minYear, max: maxYear }));
 };
 DatePickerDemo.args = {
     showWeekNumber: false,
@@ -22,7 +22,7 @@ DatePickerDemo.argTypes = {
     max: { control: { type: 'number' } }
 };
 export const TimePickerDemo = (args) => {
-    return (_jsx(TimePicker, { selected: new Date(), interval: args.interval, clockFormat: args.clockFormat }, void 0));
+    return (_jsx(TimePicker, { selected: new Date(), interval: args.interval, clockFormat: args.clockFormat, onSelect: () => { } }));
 };
 TimePickerDemo.args = {
     interval: 30,

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

@@ -1 +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"]}
+{"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,GACZ,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,IACT,QAAQ,EAAE,IAAI,IAAI,EAAE,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC3E,CAAC","sourcesContent":["import { 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\n      selected={new Date()}\n      interval={args.interval}\n      clockFormat={args.clockFormat}\n      onSelect={() => {}}\n    />\n  );\n};\n\nTimePickerDemo.args = {\n  interval: 30,\n  clockFormat: undefined\n};\n\nTimePickerDemo.argTypes = {\n  interval: { options: [undefined, 15, 30, 60], control: { type: 'select' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } }\n};\n"]}

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

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

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

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

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useState } from '@storybook/addons';
+import { Button, Card, CardContent, CardHeader, Dialog, Flex, Input, Option, Select, Status, SummaryItem, Text, useDialog } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Dialog',
+    component: Dialog
+};
+export const DialogDemo = () => {
+    const { target, events } = useDialog();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', ...events, children: "Open dialog" }), _jsx(Dialog, { heading: 'My dialog', target: target, children: "Hello Dialog" })] }));
+};
+export const FormDialogDemo = () => {
+    const editBadgeButton = useRef(null);
+    const editNameButton = useRef(null);
+    const timeoutRef = useRef();
+    const [info, setInfo] = useState({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });
+    const [name, setName] = useState(() => info.name);
+    const [badgeType, setBadgeType] = useState(() => info.badgeType);
+    const [badgeText, setBadgeText] = useState(() => info.badgeText);
+    const [dialogType, setDialogType] = useState('badge');
+    const { target, events, loading, setLoading } = useDialog();
+    const badgeTypes = ['info', 'pending', 'success', 'urgent', 'warn'];
+    const onOpen = (type) => {
+        setDialogType(type);
+    };
+    const onDialogSubmit = ({ close }) => {
+        setLoading(true);
+        timeoutRef.current = setTimeout(() => {
+            setInfo({ name, badgeText, badgeType });
+            setLoading(false);
+            close();
+            timeoutRef.current = undefined;
+        }, 1000);
+    };
+    const onDialogClose = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            setLoading(false);
+        }
+        setName(info.name);
+        setBadgeText(info.badgeText);
+        setBadgeType(info.badgeType);
+    };
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h1', children: "Edit these fields" }) }), _jsxs(CardContent, { children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SummaryItem, { primary: _jsx(Text, { variant: 'h6', children: "Badge" }), secondary: _jsx(Status, { variant: info.badgeType, children: info.badgeText }), actions: _jsx(Button, { variant: 'simple', ref: editBadgeButton, onClick: () => onOpen('badge'), ...events, children: "Edit" }) }), _jsx(SummaryItem, { primary: _jsx(Text, { variant: 'h6', children: "Name" }), secondary: _jsx(Text, { variant: 'primary', children: info.name }), actions: _jsx(Button, { variant: 'simple', ref: editNameButton, onClick: () => onOpen('name'), ...events, children: "Edit" }) })] }), _jsx(Dialog, { target: target, heading: `Edit ${dialogType}`, placement: 'bottom-end', onSubmit: onDialogSubmit, onClose: onDialogClose, loading: loading, children: _jsx(Flex, { container: { gap: 1, direction: 'column' }, children: dialogType === 'badge' ? (_jsxs(_Fragment, { children: [_jsx(Select, { label: 'Select a badge type', value: badgeType, onChange: e => setBadgeType(e.target.value), children: badgeTypes.map(type => (_jsx(Option, { children: type }, type))) }), _jsx(Input, { type: 'text', label: 'Badge text', value: badgeText, onChange: (e) => setBadgeText(e.target.value) })] })) : (_jsx(_Fragment, { children: _jsx(Input, { type: 'text', label: 'Text value', value: name, onChange: (e) => setName(e.target.value) }) })) }) })] })] }));
+};
+//# sourceMappingURL=Dialog.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/core/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, useRef } from 'react';\nimport { useState } from '@storybook/addons';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Dialog,\n  Flex,\n  Input,\n  Option,\n  Select,\n  StatusProps,\n  Status,\n  SummaryItem,\n  Text,\n  useDialog,\n  DialogProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Dialog',\n  component: Dialog\n} as Meta;\n\nexport const DialogDemo: Story = () => {\n  const { target, events } = useDialog();\n  return (\n    <>\n      <Button variant='secondary' {...events}>\n        Open dialog\n      </Button>\n      <Dialog heading='My dialog' target={target}>\n        Hello Dialog\n      </Dialog>\n    </>\n  );\n};\n\nexport const FormDialogDemo: Story = () => {\n  const editBadgeButton = useRef(null);\n  const editNameButton = useRef(null);\n  const timeoutRef = useRef<number>();\n  const [info, setInfo] = useState<{\n    name: string;\n    badgeType: StatusProps['variant'];\n    badgeText: string;\n  }>({ name: 'James Gregory', badgeType: 'info', badgeText: 'info' });\n  const [name, setName] = useState(() => info.name);\n  const [badgeType, setBadgeType] = useState<StatusProps['variant']>(() => info.badgeType);\n  const [badgeText, setBadgeText] = useState(() => info.badgeText);\n  const [dialogType, setDialogType] = useState<'badge' | 'name'>('badge');\n  const { target, events, loading, setLoading } = useDialog();\n\n  const badgeTypes: StatusProps['variant'][] = ['info', 'pending', 'success', 'urgent', 'warn'];\n\n  const onOpen = (type: 'badge' | 'name') => {\n    setDialogType(type);\n  };\n\n  const onDialogSubmit: DialogProps['onSubmit'] = ({ close }) => {\n    setLoading(true);\n    timeoutRef.current = setTimeout(() => {\n      setInfo({ name, badgeText, badgeType });\n      setLoading(false);\n      close();\n      timeoutRef.current = undefined;\n    }, 1000) as unknown as number;\n  };\n\n  const onDialogClose: DialogProps['onClose'] = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      setLoading(false);\n    }\n    setName(info.name);\n    setBadgeText(info.badgeText);\n    setBadgeType(info.badgeType);\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <Text variant='h1'>Edit these fields</Text>\n      </CardHeader>\n      <CardContent>\n        <Flex container={{ direction: 'column', gap: 1 }}>\n          <SummaryItem\n            primary={<Text variant='h6'>Badge</Text>}\n            secondary={<Status variant={info.badgeType}>{info.badgeText}</Status>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editBadgeButton}\n                onClick={() => onOpen('badge')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n          <SummaryItem\n            primary={<Text variant='h6'>Name</Text>}\n            secondary={<Text variant='primary'>{info.name}</Text>}\n            actions={\n              <Button\n                variant='simple'\n                ref={editNameButton}\n                onClick={() => onOpen('name')}\n                {...events}\n              >\n                Edit\n              </Button>\n            }\n          />\n        </Flex>\n        <Dialog\n          target={target}\n          heading={`Edit ${dialogType}`}\n          placement='bottom-end'\n          onSubmit={onDialogSubmit}\n          onClose={onDialogClose}\n          loading={loading}\n        >\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            {dialogType === 'badge' ? (\n              <>\n                <Select\n                  label='Select a badge type'\n                  value={badgeType}\n                  onChange={e => setBadgeType(e.target.value as StatusProps['variant'])}\n                >\n                  {badgeTypes.map(type => (\n                    <Option key={type}>{type}</Option>\n                  ))}\n                </Select>\n                <Input\n                  type='text'\n                  label='Badge text'\n                  value={badgeText}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setBadgeText(e.target.value)}\n                />\n              </>\n            ) : (\n              <>\n                <Input\n                  type='text'\n                  label='Text value'\n                  value={name}\n                  onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}\n                />\n              </>\n            )}\n          </Flex>\n        </Dialog>\n      </CardContent>\n    </Card>\n  );\n};\n"]}

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

@@ -25,7 +25,7 @@ export const ContainedDrawer = (args) => {
                 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));
+            }, children: [_jsx(Text, { variant: 'h1', children: "This is a Drawer" }), _jsx(Text, { children: "You can close this Drawer by clicking anywhere in the area outside of it, or by clicking the Button below." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close Drawer" })] }) }));
     return (_jsxs(Card, { style: {
             position: 'relative',
             overflow: 'hidden',
@@ -35,7 +35,7 @@ export const ContainedDrawer = (args) => {
             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));
+        }, children: [_jsx(Button, { variant: 'primary', onClick: () => setOpen(true), children: "Open Drawer" }), drawer] }));
 };
 export const ViewportDrawer = (args) => {
     const [open, setOpen] = useState(false);
@@ -48,7 +48,7 @@ export const ViewportDrawer = (args) => {
                 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));
+            }, children: [_jsx(Text, { variant: 'h1', children: "This is a Drawer" }), _jsx(Text, { children: "You can close this Drawer by clicking anywhere in the area outside of it, or by clicking the Button below." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close Drawer" })] }) }));
     return (_jsxs(Card, { style: {
             position: 'relative',
             overflow: 'hidden',
@@ -58,7 +58,7 @@ export const ViewportDrawer = (args) => {
             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));
+        }, children: [_jsx(Button, { variant: 'primary', onClick: () => setOpen(true), children: "Open Drawer" }), drawer] }));
 };
 ViewportDrawer.args = {
     size: '30rem',

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

@@ -1 +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"]}
+{"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

@@ -5,7 +5,7 @@ export default {
     component: EmailDisplay
 };
 export const EmailDisplayDemo = (args) => {
-    return _jsx(EmailDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }, void 0);
+    return _jsx(EmailDisplay, { value: args.value, displayText: args.displayText, variant: args.variant });
 };
 EmailDisplayDemo.args = {
     value: 'email@example.com',

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

@@ -1 +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"]}
+{"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,GAAI,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

@@ -20,14 +20,14 @@ export const EmojiPickerDemo = (args) => {
     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));
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }), _jsx(EmojiPicker, { showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect })] }));
 };
 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));
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }), _jsx(EmojiPicker, { exclude: ['recent', 'people', 'foods', 'activity', 'flags'], showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect })] }));
 };
 export const CustomEmojiSet = (args) => {
     const [value, setValue] = useState('');
@@ -37,6 +37,6 @@ export const CustomEmojiSet = (args) => {
     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));
+        }, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Input, { value: value }), _jsx(EmojiPicker, { showFooter: args.showFooter, emojiSize: args.emojiSize, perLine: args.perLine, onSelect: onEmojiSelect })] }) }));
 };
 //# sourceMappingURL=EmojiPicker.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.stories.js","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"]}
+{"version":3,"file":"EmojiPicker.stories.js","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/lib/core/EmptyState/EmptyState.stories.js

@@ -8,7 +8,7 @@ export default {
     }
 };
 export const EmptyStateDemo = (args) => {
-    return _jsx(EmptyState, { message: args.message }, void 0);
+    return _jsx(EmptyState, { message: args.message });
 };
 EmptyStateDemo.args = {
     message: 'No items'

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

@@ -1 +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"]}
+{"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,GAAI,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

@@ -8,7 +8,7 @@ export default {
     }
 };
 export const ErrorStateDemo = (args) => {
-    return _jsx(ErrorState, { message: args.message, onRetry: args.displayRetry ? () => { } : undefined }, void 0);
+    return _jsx(ErrorState, { message: args.message, onRetry: args.displayRetry ? () => { } : undefined });
 };
 ErrorStateDemo.args = {
     message: 'Unknown error',

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

@@ -1 +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"]}
+{"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,GAAI,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

@@ -18,11 +18,11 @@ export default {
 };
 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));
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(StyledRegion, { children: _jsx(Button, { onClick: () => setCollapsed(curState => !curState), children: collapsed ? 'Expand' : 'Collapse ' }) }), _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." }) }) }), _jsx(StyledRegion, { children: _jsx(Text, { children: "This content is outside of the ExpandCollapse and so it will always be visible." }) })] }));
 };
 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));
+    return (_jsxs(Flex, { container: true, children: [_jsx(StyledRegion, { children: _jsx(Button, { onClick: () => setCollapsed(curState => !curState), children: collapsed ? 'Expand' : 'Collapse ' }) }), _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." })) }) }), _jsx(StyledRegion, { children: _jsx(Text, { children: "This content is outside of the ExpandCollapse and so it will always be visible." }) })] }));
 };
 //# sourceMappingURL=ExpandCollapse.stories.js.map

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

@@ -1 +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"]}
+{"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,GAC5B,GACI,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,mdAOE,GACM,GACA,EAEjB,KAAC,YAAY,cACX,KAAC,IAAI,kGAAuF,GAC/E,IACV,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,GAC5B,GACI,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,mdAOE,CACR,GACY,GACA,EAEjB,KAAC,YAAY,cACX,KAAC,IAAI,kGAAuF,GAC/E,IACV,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/FieldGroup/FieldGroup.stories.d.ts

@@ -2,10 +2,14 @@ import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface FieldGroupStoryProps {
-    firstGroupName: string;
-    firstGroupCollapsible: boolean;
-    secondGroupName: string;
-    secondGroupCollapsible: boolean;
+    firstGroupName?: string;
+    firstGroupCollapsible?: boolean;
+    firstGroupDescription?: string;
+    showFirstAdditionalInfo?: boolean;
+    secondGroupName?: string;
+    secondGroupCollapsible?: boolean;
+    secondGroupDescription?: string;
+    showSecondAdditionalInfo?: boolean;
 }
 export declare const FieldGroupDemo: Story<FieldGroupStoryProps>;
 //# sourceMappingURL=FieldGroup.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAmCtD,CAAC"}
+{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAqDtD,CAAC"}