@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"Configuration.stories.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme,\n  Flex,\n  Checkbox,\n  RadioButton,\n  DateInput,\n  SearchInput,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from '../Form/Form.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration,\n  includeStories: ['ThemedForm', 'ThemingHierarchy', 'OverridableActionMenu']\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nconst buttonStyles = {\n  width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n  font-weight: bold;\n`;\n\nconst FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n\nexport const ThemingHierarchy = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\nexport const OverridableActionMenu = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n\ninterface ConfigurableBaseThemeProps {\n  interactive?: string;\n}\n\nexport const ConfigurableBaseTheme: Story<ConfigurableBaseThemeProps> = (\n  args: ConfigurableBaseThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        base: {\n          palette: {\n            interactive: args.interactive\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableBaseTheme.args = {\n  interactive: '#681fc3'\n};\n\nConfigurableBaseTheme.argTypes = {\n  interactive: { control: { type: 'color' } }\n};\n\ninterface ConfigurableComponentThemeProps {\n  buttonColor?: string;\n  checkedBackgroundColor?: string;\n}\n\nexport const ConfigurableComponentTheme: Story<ConfigurableComponentThemeProps> = (\n  args: ConfigurableComponentThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            color: args.buttonColor\n          },\n          'radio-check': {\n            ':checked': {\n              'background-color': args.checkedBackgroundColor\n            }\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableComponentTheme.args = {\n  buttonColor: '#681fc3',\n  checkedBackgroundColor: '#20aa50'\n};\n\nConfigurableComponentTheme.argTypes = {\n  buttonColor: { control: { type: 'color' } },\n  checkedBackgroundColor: { control: { type: 'color' } }\n};\n\ninterface ConfigurableLocaleProps {\n  locale?: string;\n}\n\nexport const ConfigurableLocale: Story<ConfigurableLocaleProps> = (\n  args: ConfigurableLocaleProps\n) => {\n  return (\n    <Configuration locale={args.locale}>\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <DateInput label='Date Input with locale support' value={new Date()} />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableLocale.args = {\n  locale: 'en-US'\n};\n\nConfigurableLocale.argTypes = {\n  locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTranslationsProps {\n  placeholderTranslation?: string;\n}\n\nexport const ConfigurableTranslations: Story<ConfigurableTranslationsProps> = (\n  args: ConfigurableTranslationsProps\n) => {\n  const spanishTranslation = {\n    search_placeholder_default: args.placeholderTranslation\n  };\n\n  return (\n    <Flex container={{ gap: 4 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h4'>Default</Text>\n        <SearchInput />\n      </Flex>\n\n      <Configuration translations={spanishTranslation}>\n        <Flex container={{ direction: 'column' }}>\n          <Text variant='h4'>Translated</Text>\n          <SearchInput />\n        </Flex>\n      </Configuration>\n    </Flex>\n  );\n};\n\nConfigurableTranslations.args = {\n  placeholderTranslation: 'Buscar...'\n};\n\nConfigurableTranslations.argTypes = {\n  placeholderTranslation: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Configuration.stories.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme,\n  Flex,\n  Checkbox,\n  RadioButton,\n  DateInput,\n  SearchInput,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from '../Form/Form.mocks';\n\nimport { buttonStyles, StyledFieldset } from './Configuration.styles';\nimport { FlipFlop } from './Configuration.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration,\n  includeStories: ['ThemedForm', 'ThemingHierarchy', 'OverridableActionMenu']\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nexport const ThemingHierarchy: Story = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\nexport const OverridableActionMenu: Story = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n\ninterface ConfigurableBaseThemeProps {\n  interactive?: string;\n}\n\nexport const ConfigurableBaseTheme: Story<ConfigurableBaseThemeProps> = (\n  args: ConfigurableBaseThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        base: {\n          palette: {\n            interactive: args.interactive\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableBaseTheme.args = {\n  interactive: '#681fc3'\n};\n\nConfigurableBaseTheme.argTypes = {\n  interactive: { control: { type: 'color' } }\n};\n\ninterface ConfigurableComponentThemeProps {\n  buttonColor?: string;\n  checkedBackgroundColor?: string;\n}\n\nexport const ConfigurableComponentTheme: Story<ConfigurableComponentThemeProps> = (\n  args: ConfigurableComponentThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            color: args.buttonColor\n          },\n          'radio-check': {\n            ':checked': {\n              'background-color': args.checkedBackgroundColor\n            }\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableComponentTheme.args = {\n  buttonColor: '#681fc3',\n  checkedBackgroundColor: '#20aa50'\n};\n\nConfigurableComponentTheme.argTypes = {\n  buttonColor: { control: { type: 'color' } },\n  checkedBackgroundColor: { control: { type: 'color' } }\n};\n\ninterface ConfigurableLocaleProps {\n  locale?: string;\n}\n\nexport const ConfigurableLocale: Story<ConfigurableLocaleProps> = (\n  args: ConfigurableLocaleProps\n) => {\n  return (\n    <Configuration locale={args.locale}>\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <DateInput label='Date Input with locale support' value={new Date()} />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableLocale.args = {\n  locale: 'en-US'\n};\n\nConfigurableLocale.argTypes = {\n  locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTranslationsProps {\n  placeholderTranslation?: string;\n}\n\nexport const ConfigurableTranslations: Story<ConfigurableTranslationsProps> = (\n  args: ConfigurableTranslationsProps\n) => {\n  const spanishTranslation = {\n    search_placeholder_default: args.placeholderTranslation\n  };\n\n  return (\n    <Flex container={{ gap: 4 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h4'>Default</Text>\n        <SearchInput />\n      </Flex>\n\n      <Configuration translations={spanishTranslation}>\n        <Flex container={{ direction: 'column' }}>\n          <Text variant='h4'>Translated</Text>\n          <SearchInput />\n        </Flex>\n      </Configuration>\n    </Flex>\n  );\n};\n\nConfigurableTranslations.args = {\n  placeholderTranslation: 'Buscar...'\n};\n\nConfigurableTranslations.argTypes = {\n  placeholderTranslation: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Configuration/Configuration.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const buttonStyles: {
+    width: string;
+};
+export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
+export declare const BoldSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Configuration.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;CAExB,CAAC;AAEF,eAAO,MAAM,cAAc,8GAG1B,CAAC;AAEF,eAAO,MAAM,QAAQ,0GAEpB,CAAC"}

package/lib/core/Configuration/Configuration.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+export const buttonStyles = {
+    width: '100%'
+};
+export const StyledFieldset = styled.fieldset `
+  padding: 1rem 5%;
+  margin: 1rem 0;
+`;
+export const BoldSpan = styled.span `
+  font-weight: bold;
+`;
+//# sourceMappingURL=Configuration.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.styles.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;CAElC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const buttonStyles = {\n  width: '100%'\n};\n\nexport const StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nexport const BoldSpan = styled.span`\n  font-weight: bold;\n`;\n"]}

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

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/react';
+import type { ObfuscationMode, CreditCardDisplayProps, CreditCardInputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface CreditCardDemoProps {
+    value?: CreditCardDisplayProps['value'];
+    obfuscation?: ObfuscationMode;
+}
+export declare const CreditCardDisplayDemo: Story<CreditCardDemoProps>;
+export declare const CreditCardInputDemo: Story<CreditCardInputProps>;
+//# sourceMappingURL=CreditCard.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAGjC,wBAEU;AAEV,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,mBAAmB,CAE5D,CAAC;AAYF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAS3D,CAAC"}

package/lib/core/CreditCard/CreditCard.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { CreditCardDisplay, CreditCardInput } from '@pega/cosmos-react-core';
+import { usePrevious } from '@pega/cosmos-react-core/lib/hooks';
+export default {
+    title: 'Core/CreditCard'
+};
+export const CreditCardDisplayDemo = (args) => (_jsx(CreditCardDisplay, { value: args.value, formattingOptions: { obfuscation: args.obfuscation } }));
+CreditCardDisplayDemo.args = {
+    value: undefined,
+    obfuscation: 'none'
+};
+CreditCardDisplayDemo.argTypes = {
+    value: { type: 'string' },
+    obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }
+};
+export const CreditCardInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return _jsx(CreditCardInput, { ...args, value: value, onChange: setValue });
+};
+CreditCardInputDemo.args = {
+    value: undefined,
+    label: 'Credit card number',
+    labelHidden: false,
+    info: 'Enter your credit card number',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+CreditCardInputDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CreditCard.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.stories.js","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAM7E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,eAAe;IACb,KAAK,EAAE,iBAAiB;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,qBAAqB,GAA+B,CAAC,IAAyB,EAAE,EAAE,CAAC,CAC9F,KAAC,iBAAiB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,GAAI,CAC/F,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE;CACzF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,KAAC,eAAe,OAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput } from '@pega/cosmos-react-core';\nimport type {\n  ObfuscationMode,\n  CreditCardDisplayProps,\n  CreditCardInputProps\n} from '@pega/cosmos-react-core';\nimport { usePrevious } from '@pega/cosmos-react-core/lib/hooks';\n\nexport default {\n  title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n  value?: CreditCardDisplayProps['value'];\n  obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: Story<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n  <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n  value: undefined,\n  obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n  value: { type: 'string' },\n  obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\nexport const CreditCardInputDemo: Story<CreditCardInputProps> = (args: CreditCardInputProps) => {\n  const [value, setValue] = useState<string | undefined>(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 <CreditCardInput {...args} value={value} onChange={setValue} />;\n};\n\nCreditCardInputDemo.args = {\n  value: undefined,\n  label: 'Credit card number',\n  labelHidden: false,\n  info: 'Enter your credit card number',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCreditCardInputDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -2,10 +2,13 @@ import { Meta, Story } from '@storybook/react';
 import { CurrencyDisplayProps, CurrencyInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const CurrencyInputDemo: Story<CurrencyInputProps>;
+export declare const CurrencyInputDemo: Story<Partial<CurrencyInputProps>>;
 interface CurrencyDisplayStoryProps extends CurrencyDisplayProps {
-    showGroupSeparators: boolean;
-    showDecimal: boolean;
+    groupSeparators: boolean;
+    fractionDigits: number;
+    currency: 'symbol' | 'code' | 'name';
+    negative: 'minus-sign' | 'parentheses';
+    notation: 'standard' | 'compact';
 }
 export declare const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps>;
 //# sourceMappingURL=Currency.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAsBvD,CAAC;AAmCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAchE,CAAC"}
+{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAwChE,CAAC;AAqCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}

package/lib/core/Currency/Currency.stories.js

@@ -1,15 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { CurrencyDisplay, CurrencyInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { CurrencyDisplay, CurrencyInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Currency',
     component: CurrencyInput
 };
 export const CurrencyInputDemo = (args) => {
-    const [value, setValue] = useState();
-    return (_jsx(CurrencyInput, { value: value, onChange: inputValue => setValue(inputValue), onBlur: inputValue => setValue(inputValue), currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const [value, setValue] = useState(args.value ? args.value.toString() : undefined);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value ? args.value.toString() : undefined);
+    }, [prev, args.value]);
+    return (_jsx(CurrencyInput, { ...args, value: value, onChange: inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }, onBlur: inputValue => {
+            args.onBlur?.(inputValue);
+        }, onFocus: inputValue => {
+            args.onFocus?.(inputValue);
+        }, currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 CurrencyInputDemo.args = {
+    value: undefined,
     currencyISOCode: 'USD',
     alwaysShowISOCode: false,
     showDecimal: true,
@@ -24,8 +37,9 @@ CurrencyInputDemo.args = {
     readOnly: false
 };
 CurrencyInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
     currencyISOCode: {
-        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
         control: { type: 'select' }
     },
     alwaysShowISOCode: { control: { type: 'boolean' } },
@@ -41,26 +55,44 @@ CurrencyInputDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const CurrencyDisplayDemo = (args) => {
-    return (_jsx(CurrencyDisplay, { value: args.value, currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, formattingOptions: {
-            showGroupSeparators: args.showGroupSeparators,
-            showDecimal: args.showDecimal
-        } }, void 0));
+    return (_jsx(CurrencyDisplay, { value: args.value, currencyISOCode: args.currencyISOCode, formattingOptions: {
+            fractionDigits: args.fractionDigits,
+            groupSeparators: args.groupSeparators,
+            currency: args.currency,
+            negative: args.negative,
+            notation: args.notation
+        } }));
 };
 CurrencyDisplayDemo.args = {
-    value: '12345.67',
+    value: undefined,
     currencyISOCode: 'USD',
-    alwaysShowISOCode: false,
-    showGroupSeparators: true,
-    showDecimal: true
+    groupSeparators: true,
+    fractionDigits: undefined,
+    currency: 'symbol',
+    negative: 'minus-sign',
+    notation: 'standard'
 };
 CurrencyDisplayDemo.argTypes = {
-    value: { control: { type: 'text' } },
+    value: { control: { type: 'number' } },
     currencyISOCode: {
-        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
         control: { type: 'select' }
     },
-    alwaysShowISOCode: { control: { type: 'boolean' } },
-    showGroupSeparators: { control: { type: 'boolean' } },
-    showDecimal: { control: { type: 'boolean' } }
+    groupSeparators: { control: { type: 'boolean' } },
+    fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
+    negative: {
+        control: {
+            type: 'inline-radio'
+        },
+        options: ['minus-sign', 'parentheses']
+    },
+    currency: {
+        control: { type: 'select' },
+        options: ['symbol', 'code', 'name']
+    },
+    notation: {
+        control: { type: 'inline-radio' },
+        options: ['standard', 'compact']
+    }
 };
 //# sourceMappingURL=Currency.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<CurrencyInputProps> = (args: CurrencyInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <CurrencyInput\n      value={value}\n      onChange={inputValue => setValue(inputValue)}\n      onBlur={inputValue => setValue(inputValue)}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      formattingOptions={{\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: '12345.67',\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<Partial<CurrencyInputProps>> = (\n  args: Partial<CurrencyInputProps>\n) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value ? args.value.toString() : undefined\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n  }, [prev, args.value]);\n\n  return (\n    <CurrencyInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  groupSeparators: boolean;\n  fractionDigits: number;\n  currency: 'symbol' | 'code' | 'name';\n  negative: 'minus-sign' | 'parentheses';\n  notation: 'standard' | 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        currency: args.currency,\n        negative: args.negative,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  groupSeparators: true,\n  fractionDigits: undefined,\n  currency: 'symbol',\n  negative: 'minus-sign',\n  notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  groupSeparators: { control: { type: 'boolean' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  negative: {\n    control: {\n      type: 'inline-radio'\n    },\n    options: ['minus-sign', 'parentheses']\n  },\n  currency: {\n    control: { type: 'select' },\n    options: ['symbol', 'code', 'name']\n  },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}

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

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

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/DateTime/Input',
     args: {
         status: undefined,
+        label: '',
         labelHidden: false,
         required: false,
         disabled: false,
@@ -24,35 +25,77 @@ export default {
     }
 };
 export const DateInputDemo = (args) => {
-    return (_jsx(DateInput, { value: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DateInput, { value: value, showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 DateInputDemo.args = {
     showWeekNumber: false,
-    label: 'DateTime input'
+    label: 'Date input'
 };
 DateInputDemo.argTypes = {
     showWeekNumber: { control: { type: 'boolean' } }
 };
 export const MonthInputDemo = (args) => {
-    return (_jsx(MonthInput, { value: new Date(), status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(MonthInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 MonthInputDemo.args = {
     label: 'Month input'
 };
 export const WeekInputDemo = (args) => {
-    return (_jsx(WeekInput, { value: new Date(), status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(WeekInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 WeekInputDemo.args = {
     label: 'Week input'
 };
 export const QuarterInputDemo = (args) => {
-    return (_jsx(QuarterInput, { value: new Date(), status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(QuarterInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 QuarterInputDemo.args = {
     label: 'Quarter input'
 };
 export const DayOfWeekInputDemo = (args) => {
-    return (_jsx(DayOfWeekInput, { status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DayOfWeekInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, onChange: setValue }));
 };
 DayOfWeekInputDemo.args = {
     label: 'Day of the week input'
@@ -62,7 +105,16 @@ DayOfWeekInputDemo.argTypes = {
     max: { table: { disable: true } }
 };
 export const TimeInputDemo = (args) => {
-    return (_jsx(TimeInput, { value: new Date(), withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(TimeInput, { value: value, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 TimeInputDemo.args = {
     withSeconds: false,
@@ -76,7 +128,16 @@ TimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateTimeInputDemo = (args) => {
-    return (_jsx(DateTimeInput, { value: new Date(), showWeekNumber: args.showWeekNumber, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max }, void 0));
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DateTimeInput, { value: value, showWeekNumber: args.showWeekNumber, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        } }));
 };
 DateTimeInputDemo.args = {
     showWeekNumber: false,
@@ -92,7 +153,7 @@ DateTimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateRangeInputDemo = (args) => {
-    return (_jsx(DateRangeInput, { fromValue: new Date(), toValue: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    return (_jsx(DateRangeInput, { fromValue: new Date(), toValue: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 DateRangeInputDemo.args = {
     showWeekNumber: false,
@@ -109,10 +170,16 @@ DateRangeInputDemo.argTypes = {
 };
 export const DurationInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
-    return (_jsx(DurationInput, { value: value, onChange: setValue, format: args.format, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (_jsx(DurationInput, { value: value, onChange: setValue, format: args.format, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 DurationInputDemo.args = {
     value: 86400000,
+    // eslint-disable-next-line demo-patterns/literal-args
     format: Format.Seconds,
     label: 'Duration input'
 };

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