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

package/lib/components/CompositeInput/CompositeInput.styles.js

@@ -0,0 +1,57 @@
+import styled, { css } from 'styled-components';
+import { StyledButton } from '../Button';
+import { defaultThemeProp } from '../../theme';
+import StyledInput from '../Input/Input.styles';
+import { StyledIcon } from '../Icon';
+export const StyledInputButton = styled(StyledInput) `
+  padding-inline-end: 2rem;
+  background-color: inherit;
+  color: currentColor;
+  outline: none;
+  border: 0;
+  caret-color: transparent;
+  cursor: pointer;
+  width: 100%;
+
+  & + div {
+    position: absolute;
+    inset-block: 0.0625rem;
+    inset-inline: calc(100% - 2rem) 0;
+    ${StyledButton} ${StyledIcon} {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+`;
+export const StyledInputContainer = styled.div `
+  position: relative;
+`;
+export const StyledCompositeInput = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'hit-area': hitArea }, components: { 'form-control': formControl, input } } }) => {
+    return css `
+      height: ${input.height};
+      min-height: ${hitArea['mouse-min']};
+
+      @media (pointer: coarse) {
+        min-height: ${hitArea['finger-min']};
+      }
+
+      &:focus-within {
+        border-color: ${formControl[':focus']['border-color']};
+        box-shadow: ${formControl[':focus']['box-shadow']};
+      }
+
+      &:hover:not([readonly]):not([disabled]):focus-within {
+        border-color: transparent;
+      }
+
+      & > ${StyledButton} {
+        border-start-start-radius: 0;
+        border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});
+        border-end-start-radius: 0;
+        border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});
+      }
+    `;
+});
+StyledCompositeInput.defaultProps = defaultThemeProp;
+export default StyledCompositeInput;
+//# sourceMappingURL=CompositeInput.styles.js.map

package/lib/components/CompositeInput/CompositeInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.styles.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;;;;;;;;MAc9C,YAAY,IAAI,UAAU;;;;;CAK/B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAC5D,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,EACnD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gBACE,KAAK,CAAC,MAAM;oBACR,OAAO,CAAC,WAAW,CAAC;;;sBAGlB,OAAO,CAAC,YAAY,CAAC;;;;wBAInB,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;sBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;YAO7C,YAAY;;wCAEgB,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;sCAEhD,YAAY,MAAM,WAAW,CAAC,eAAe,CAAC;;KAE/E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { defaultThemeProp } from '../../theme';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledIcon } from '../Icon';\n\nexport const StyledInputButton = styled(StyledInput)`\n  padding-inline-end: 2rem;\n  background-color: inherit;\n  color: currentColor;\n  outline: none;\n  border: 0;\n  caret-color: transparent;\n  cursor: pointer;\n  width: 100%;\n\n  & + div {\n    position: absolute;\n    inset-block: 0.0625rem;\n    inset-inline: calc(100% - 2rem) 0;\n    ${StyledButton} ${StyledIcon} {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n`;\n\nexport const StyledInputContainer = styled.div`\n  position: relative;\n`;\n\nexport const StyledCompositeInput = styled.div(\n  ({\n    theme: {\n      base: { 'border-radius': borderRadius, 'hit-area': hitArea },\n      components: { 'form-control': formControl, input }\n    }\n  }) => {\n    return css`\n      height: ${input.height};\n      min-height: ${hitArea['mouse-min']};\n\n      @media (pointer: coarse) {\n        min-height: ${hitArea['finger-min']};\n      }\n\n      &:focus-within {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n\n      &:hover:not([readonly]):not([disabled]):focus-within {\n        border-color: transparent;\n      }\n\n      & > ${StyledButton} {\n        border-start-start-radius: 0;\n        border-start-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n        border-end-start-radius: 0;\n        border-end-end-radius: calc(${borderRadius} * ${formControl['border-radius']});\n      }\n    `;\n  }\n);\n\nStyledCompositeInput.defaultProps = defaultThemeProp;\n\nexport default StyledCompositeInput;\n"]}

package/lib/components/CompositeInput/CompositeInput.types.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType, Ref } from 'react';
+import { BaseProps, DeferInfer, NoChildrenProp } from '../../types';
+import { FormControlProps } from '../FormControl';
+export interface CompositeInputProps<P extends object = object> extends BaseProps, NoChildrenProp {
+    /**
+     * Sets DOM id for the control and associates label element via 'for' attribute.
+     * If an id is not pass, a random id will be generated for any render.
+     */
+    id?: FormControlProps['id'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Pass a string or a fragment with an Icon and string. */
+    label?: FormControlProps['label'];
+    /** Visually hides the label region. */
+    labelHidden?: FormControlProps['labelHidden'];
+    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */
+    info?: FormControlProps['info'];
+    /** Indicate if the field is required. The browser defaults to false. */
+    required?: FormControlProps['required'];
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Callback when clear button is clicked. */
+    onClear: () => void;
+    /** String representation of the complex value. */
+    value?: string;
+    /** Text visible when on value has been set. */
+    placeholder?: FormControlProps['placeholder'];
+    /** Value form options. */
+    dialog: {
+        /**
+         * A component to render the main portion of the form.
+         */
+        renderer: ComponentType<P>;
+        /**
+         * A props object that will be passed to the form renderer.
+         */
+        rendererProps?: DeferInfer<P>;
+        /** Callback when cancel button is clicked. */
+        onCancel: ({ close }: {
+            close: () => void;
+        }) => void;
+        /** Callback when apply button is clicked. */
+        onApply: ({ close }: {
+            close: () => void;
+        }) => void;
+    };
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=CompositeInput.types.d.ts.map

package/lib/components/CompositeInput/CompositeInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS,EAAE,cAAc;IAC/F;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,0BAA0B;IAC1B,MAAM,EAAE;QACN;;WAEG;QACH,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;QAC9B,8CAA8C;QAC9C,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QACrD,6CAA6C;QAC7C,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/CompositeInput/CompositeInput.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CompositeInput.types.js.map

package/lib/components/CompositeInput/CompositeInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.types.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/CompositeInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, Ref } from 'react';\n\nimport { BaseProps, DeferInfer, NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport interface CompositeInputProps<P extends object = object> extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Callback when clear button is clicked. */\n  onClear: () => void;\n  /** String representation of the complex value. */\n  value?: string;\n  /** Text visible when on value has been set. */\n  placeholder?: FormControlProps['placeholder'];\n  /** Value form options. */\n  dialog: {\n    /**\n     * A component to render the main portion of the form.\n     */\n    renderer: ComponentType<P>;\n    /**\n     * A props object that will be passed to the form renderer.\n     */\n    rendererProps?: DeferInfer<P>;\n    /** Callback when cancel button is clicked. */\n    onCancel: ({ close }: { close: () => void }) => void;\n    /** Callback when apply button is clicked. */\n    onApply: ({ close }: { close: () => void }) => void;\n  };\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CompositeInput/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CompositeInput } from './CompositeInput';
+export { CompositeInputProps } from './CompositeInput.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CompositeInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CompositeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/CompositeInput/index.js

@@ -0,0 +1,2 @@
+export { default as CompositeInput } from './CompositeInput';
+//# sourceMappingURL=index.js.map

package/lib/components/CompositeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CompositeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default as CompositeInput } from './CompositeInput';\nexport { CompositeInputProps } from './CompositeInput.types';\n"]}

package/lib/components/Configuration/Configuration.d.ts

@@ -1,16 +1,13 @@
 import { FunctionComponent, ComponentType, ReactNode, Context } from 'react';
-import { ThemeMachine, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
+import { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
 import { Translation, TranslationPack } from '../../i18n';
 import { FileInputProps } from '../File';
+import '../../init';
 export interface ConfigurationProps {
     /**
      * Any components or nodes that should be impacted by the settings applied by this Configuration component.
      */
     children: ReactNode;
-    /**
-     * Context to read previous configuration values from.
-     */
-    context?: Context<ConfigurationContextValue>;
     /**
      * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).
      */
@@ -50,27 +47,31 @@ export interface ConfigurationProps {
      * @default false
      */
     renderNativeControls?: boolean;
+    /**
+     * String to identify this configuration instance.
+     */
+    id?: string;
 }
-declare const initializedKey: unique symbol;
 export interface ConfigurationContextValue {
-    [initializedKey]: boolean;
     locale: string;
     direction: ConfigurationProps['direction'];
     translations: TranslationPack;
-    themeMachine: ThemeMachine<DefaultThemeDefinition>;
+    themeMachine: ThemeMachineLike<DefaultThemeDefinition>;
     styleSheetTarget?: HTMLElement;
     portalTarget?: Element;
     overrideMap: NonNullable<ConfigurationProps['overrideMap']>;
     renderNativeControls: boolean;
+    initialized: boolean;
 }
 export declare const ConfigurationContext: Context<ConfigurationContextValue>;
-declare const metaKey: unique symbol;
-interface CosmosMetadata {
+interface CosmosInstance {
     version: string;
+    configs: symbol[];
 }
-declare global {
-    interface Window {
-        [metaKey]: CosmosMetadata[];
+declare module '../../init' {
+    interface CosmosGlobals {
+        instances?: CosmosInstance[];
+        configurationContext?: Context<ConfigurationContextValue>;
     }
 }
 declare const Configuration: FunctionComponent<ConfigurationProps>;

package/lib/components/Configuration/Configuration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,aAAa,EACb,SAAS,EAIT,OAAO,EACR,MAAM,OAAO,CAAC;AAKf,OAAO,EACL,YAAY,EAEZ,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KAC3C,CAAC;IACF;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,cAAc,eAAkE,CAAC;AAEvF,MAAM,WAAW,yBAAyB;IACxC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAKD,eAAO,MAAM,oBAAoB,oCAU/B,CAAC;AAEH,QAAA,MAAM,OAAO,eAAiD,CAAC;AAE/D,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,CAAC,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;KAC7B;CACF;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiExD,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,aAAa,EACb,SAAS,EAIT,OAAO,EACR,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,gBAAgB,EAEhB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KAC3C,CAAC;IACF;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,oBAAoB,EAAE,OAAO,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,oCAU/B,CAAC;AAEH,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAOD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;QAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;KAC3D;CACF;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAgFxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Configuration/Configuration.js

@@ -6,11 +6,10 @@ import { GlobalStyle } from '../../styles';
 import { ThemeMachine, BaseThemeMachine } from '../../theme';
 import { createTranslationPack, DefaultTranslation, direction as directionOfLocale } from '../../i18n';
 import { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';
-const initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');
-const defaultProps = {};
+import pkg from '../../../package.json';
+import '../../init';
 const defaultLocale = navigatorIsAvailable ? navigator.language : 'en';
 export const ConfigurationContext = createContext({
-    [initializedKey]: false,
     locale: defaultLocale,
     direction: directionOfLocale(defaultLocale),
     translations: DefaultTranslation,
@@ -18,17 +17,23 @@ export const ConfigurationContext = createContext({
     styleSheetTarget: documentIsAvailable ? document.head : undefined,
     portalTarget: documentIsAvailable ? document.body : undefined,
     overrideMap: {},
-    renderNativeControls: false
+    renderNativeControls: false,
+    initialized: false
 });
-const metaKey = Symbol.for('@pega/cosmos-react-core.metadata');
+const instance = {
+    version: pkg.version,
+    configs: []
+};
 if (windowIsAvailable) {
-    if (!window[metaKey]) {
-        window[metaKey] = [];
+    if (!window.cosmos.instances) {
+        window.cosmos.instances = [];
     }
-    window[metaKey].push({ version: '3.0.0-dev.2.1' });
+    window.cosmos.instances.push(instance);
 }
-const Configuration = ({ context = ConfigurationContext, children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls }) => {
-    const ctx = useContext(context);
+const Configuration = ({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls, id }) => {
+    const ctx = useContext(windowIsAvailable
+        ? window.cosmos.configurationContext ?? ConfigurationContext
+        : ConfigurationContext);
     const themeMachine = theme
         ? new ThemeMachine({ theme, parent: ctx.themeMachine })
         : ctx.themeMachine;
@@ -37,22 +42,28 @@ const Configuration = ({ context = ConfigurationContext, children, locale, direc
     useEffect(() => {
         setMounted(true);
     }, []);
-    const wrappedChildren = ctx[initializedKey] ? (children) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target: styleSheetTarget ?? ctx.styleSheetTarget, children: _jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
+    useEffect(() => {
+        const sym = Symbol(id);
+        instance.configs.push(sym);
+        return () => {
+            instance.configs = instance.configs.filter(item => item !== sym);
+        };
+    }, [id]);
+    const wrappedChildren = ctx.initialized ? (children) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target: styleSheetTarget ?? ctx.styleSheetTarget, children: _jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
                     mounted &&
                     documentIsAvailable &&
-                    createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap' }, void 0), document.head), _jsx(GlobalStyle, {}, void 0), children] }, void 0) }, void 0));
+                    createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap', "data-cosmos-global-style": true }), styleSheetTarget ?? ctx.styleSheetTarget ?? document.head), _jsx(GlobalStyle, {}), children] }) }));
     return (_jsx(ConfigurationContext.Provider, { value: {
             locale: locale ?? ctx.locale,
             direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),
             translations,
             themeMachine,
-            [initializedKey]: true,
             styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,
             portalTarget: portalTarget ?? ctx.portalTarget,
             overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,
-            renderNativeControls: renderNativeControls ?? ctx.renderNativeControls
-        }, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: wrappedChildren }, void 0) }, void 0));
+            renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
+            initialized: true
+        }, children: _jsx(ThemeProvider, { theme: themeMachine.theme, children: wrappedChildren }) }));
 };
-Configuration.defaultProps = defaultProps;
 export default Configuration;
 //# sourceMappingURL=Configuration.js.map

package/lib/components/Configuration/Configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  useMemo,\n  useState,\n  useEffect,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n  ThemeMachine,\n  BaseThemeMachine,\n  DefaultSettableTheme,\n  DefaultThemeDefinition\n} from '../../theme';\nimport {\n  createTranslationPack,\n  Translation,\n  TranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n  /**\n   * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n   */\n  children: ReactNode;\n  /**\n   * Context to read previous configuration values from.\n   */\n  context?: Context<ConfigurationContextValue>;\n  /**\n   * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n   */\n  locale?: string;\n  /**\n   * Override rendering direction of the document. Direction will be based on the locale if now provided.\n   */\n  direction?: 'ltr' | 'rtl';\n  /**\n   * Object with (partial) translations.\n   */\n  translations?: Translation;\n  /**\n   * Theme object used to override any or all Cosmos theme properties.\n   */\n  theme?: DefaultSettableTheme;\n  /**\n   * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n   */\n  disableDefaultFontLoading?: boolean;\n  /**\n   * Target element for loading styles related to `styled-components`.\n   */\n  styleSheetTarget?: HTMLElement;\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   */\n  portalTarget?: Element;\n  /**\n   * Override map to replace Cosmos components.\n   */\n  overrideMap?: {\n    FileInput?: ComponentType<FileInputProps>;\n  };\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n  [initializedKey]: boolean;\n  locale: string;\n  direction: ConfigurationProps['direction'];\n  translations: TranslationPack;\n  themeMachine: ThemeMachine<DefaultThemeDefinition>;\n  styleSheetTarget?: HTMLElement;\n  portalTarget?: Element;\n  overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n  renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  [initializedKey]: false,\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  overrideMap: {},\n  renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [metaKey]: CosmosMetadata[];\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window[metaKey]) {\n    window[metaKey] = [];\n  }\n\n  window[metaKey].push({ version: '3.0.0-dev.2.1' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  context = ConfigurationContext,\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheetTarget,\n  portalTarget,\n  overrideMap,\n  renderNativeControls\n}: ConfigurationProps) => {\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const wrappedChildren = ctx[initializedKey] ? (\n    children\n  ) : (\n    <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n      <>\n        {!disableDefaultFontLoading &&\n          mounted &&\n          documentIsAvailable &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n            />,\n            document.head\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    </StyleSheetManager>\n  );\n  return (\n    <ConfigurationContext.Provider\n      value={{\n        locale: locale ?? ctx.locale,\n        direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n        translations,\n        themeMachine,\n        [initializedKey]: true,\n        styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n        portalTarget: portalTarget ?? ctx.portalTarget,\n        overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n        renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n      }}\n    >\n      <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n    </ConfigurationContext.Provider>\n  );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}
+{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  FunctionComponent,\n  ComponentType,\n  ReactNode,\n  useMemo,\n  useState,\n  useEffect,\n  Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n  ThemeMachine,\n  ThemeMachineLike,\n  BaseThemeMachine,\n  DefaultSettableTheme,\n  DefaultThemeDefinition\n} from '../../theme';\nimport {\n  createTranslationPack,\n  Translation,\n  TranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport '../../init';\n\nexport interface ConfigurationProps {\n  /**\n   * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n   */\n  children: ReactNode;\n  /**\n   * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n   */\n  locale?: string;\n  /**\n   * Override rendering direction of the document. Direction will be based on the locale if now provided.\n   */\n  direction?: 'ltr' | 'rtl';\n  /**\n   * Object with (partial) translations.\n   */\n  translations?: Translation;\n  /**\n   * Theme object used to override any or all Cosmos theme properties.\n   */\n  theme?: DefaultSettableTheme;\n  /**\n   * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n   */\n  disableDefaultFontLoading?: boolean;\n  /**\n   * Target element for loading styles related to `styled-components`.\n   */\n  styleSheetTarget?: HTMLElement;\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   */\n  portalTarget?: Element;\n  /**\n   * Override map to replace Cosmos components.\n   */\n  overrideMap?: {\n    FileInput?: ComponentType<FileInputProps>;\n  };\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n  /**\n   * String to identify this configuration instance.\n   */\n  id?: string;\n}\n\nexport interface ConfigurationContextValue {\n  locale: string;\n  direction: ConfigurationProps['direction'];\n  translations: TranslationPack;\n  themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n  styleSheetTarget?: HTMLElement;\n  portalTarget?: Element;\n  overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n  renderNativeControls: boolean;\n  initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  overrideMap: {},\n  renderNativeControls: false,\n  initialized: false\n});\n\ninterface CosmosInstance {\n  version: string;\n  configs: symbol[];\n}\n\nconst instance: CosmosInstance = {\n  version: pkg.version,\n  configs: []\n};\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    instances?: CosmosInstance[];\n    configurationContext?: Context<ConfigurationContextValue>;\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window.cosmos.instances) {\n    window.cosmos.instances = [];\n  }\n\n  window.cosmos.instances.push(instance);\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheetTarget,\n  portalTarget,\n  overrideMap,\n  renderNativeControls,\n  id\n}: ConfigurationProps) => {\n  const ctx = useContext(\n    windowIsAvailable\n      ? window.cosmos.configurationContext ?? ConfigurationContext\n      : ConfigurationContext\n  );\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    const sym = Symbol(id);\n    instance.configs.push(sym);\n\n    return () => {\n      instance.configs = instance.configs.filter(item => item !== sym);\n    };\n  }, [id]);\n\n  const wrappedChildren = ctx.initialized ? (\n    children\n  ) : (\n    <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n      <>\n        {!disableDefaultFontLoading &&\n          mounted &&\n          documentIsAvailable &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n              data-cosmos-global-style\n            />,\n            styleSheetTarget ?? ctx.styleSheetTarget ?? document.head\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    </StyleSheetManager>\n  );\n\n  return (\n    <ConfigurationContext.Provider\n      value={{\n        locale: locale ?? ctx.locale,\n        direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n        translations,\n        themeMachine,\n        styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n        portalTarget: portalTarget ?? ctx.portalTarget,\n        overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n        renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n        initialized: true\n      }}\n    >\n      <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n    </ConfigurationContext.Provider>\n  );\n};\n\nexport default Configuration;\n"]}

package/lib/components/CreditCard/CreditCard.types.d.ts

@@ -0,0 +1,66 @@
+import { Ref } from 'react';
+import { BaseProps, NoChildrenProp } from '../../types';
+import { FormControlProps } from '../FormControl';
+export declare type ObfuscationMode = 'none' | 'partial' | 'full';
+export interface FormattingOptions {
+    obfuscation?: ObfuscationMode;
+}
+export interface CreditCardDisplayProps extends BaseProps, NoChildrenProp {
+    /** Number value. */
+    value?: string;
+    /** Options to define formatting. */
+    formattingOptions?: {
+        /**
+         * Defines if the obfuscation (replacing digits with bullets) should be applied.
+         * This is only visual obfuscation, the real one should be applied on the server side.
+         * Characters that are going to be obfuscated may be random characters or even missing.
+         * @default 'none'
+         */
+        obfuscation?: ObfuscationMode;
+    };
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLSpanElement>;
+}
+export interface CreditCardInputProps extends BaseProps, NoChildrenProp {
+    /**
+     * Sets DOM id for the control and associates label element via 'for' attribute.
+     * If an id is not pass, a random id will be generated for any render.
+     */
+    id?: FormControlProps['id'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Pass a string or a fragment with an Icon and string. */
+    label?: FormControlProps['label'];
+    /**
+     * Visually hides the label region.
+     * @default false
+     */
+    labelHidden?: FormControlProps['labelHidden'];
+    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */
+    info?: FormControlProps['info'];
+    /** Indicate if the field is required. The browser defaults to false. */
+    required?: FormControlProps['required'];
+    /** Placeholder text. The browser defaults to an empty string. */
+    placeholder?: string;
+    /** Disable the control. The browser defaults to false. */
+    disabled?: FormControlProps['disabled'];
+    /** Makes the component non editable and non clickable. The browser defaults to false. */
+    readOnly?: FormControlProps['readOnly'];
+    /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
+    name?: FormControlProps['name'];
+    /**
+     * CurrencyInput input value.
+     * Requires an onChange handler to update value.
+     * @default ''
+     */
+    value?: string;
+    /** Callback fired when input value changes. */
+    onChange: (value?: string) => void;
+    /** Callback fired when the component loses focus. */
+    onFocus?: (value?: string) => void;
+    /** Callback fired when the component loses focus. */
+    onBlur?: (value?: string) => void;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLInputElement>;
+}
+//# sourceMappingURL=CreditCard.types.d.ts.map

package/lib/components/CreditCard/CreditCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/CreditCard/CreditCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,oBAAY,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,cAAc;IACvE,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,iBAAiB,CAAC,EAAE;QAClB;;;;;WAKG;QACH,WAAW,CAAC,EAAE,eAAe,CAAC;KAC/B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qDAAqD;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

package/lib/components/CreditCard/CreditCard.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CreditCard.types.js.map

package/lib/components/CreditCard/CreditCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.types.js","sourceRoot":"","sources":["../../../src/components/CreditCard/CreditCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport type ObfuscationMode = 'none' | 'partial' | 'full';\n\nexport interface FormattingOptions {\n  obfuscation?: ObfuscationMode;\n}\n\nexport interface CreditCardDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value. */\n  value?: string;\n  /** Options to define formatting. */\n  formattingOptions?: {\n    /**\n     * Defines if the obfuscation (replacing digits with bullets) should be applied.\n     * This is only visual obfuscation, the real one should be applied on the server side.\n     * Characters that are going to be obfuscated may be random characters or even missing.\n     * @default 'none'\n     */\n    obfuscation?: ObfuscationMode;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport interface CreditCardInputProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   * @default ''\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value?: string) => void;\n  /** Callback fired when the component loses focus. */\n  onFocus?: (value?: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value?: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n"]}

package/lib/components/CreditCard/CreditCardDisplay.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../types';
+import { CreditCardDisplayProps } from './CreditCard.types';
+declare const CreditCardDisplay: FunctionComponent<CreditCardDisplayProps & ForwardProps>;
+export default CreditCardDisplay;
+//# sourceMappingURL=CreditCardDisplay.d.ts.map

package/lib/components/CreditCard/CreditCardDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/CreditCard/CreditCardDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAG5D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAyB/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/CreditCard/CreditCardDisplay.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { formatCreditCard } from './utils';
+const CreditCardDisplay = forwardRef(({ value, formattingOptions = {}, ...restProps }, ref) => {
+    const formatted = value ? formatCreditCard(value, formattingOptions) : undefined;
+    return (_jsx("span", { ref: ref, ...restProps, children: formatted ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": 'true', children: formatted }), _jsx(VisuallyHiddenText, { children: formatted
+                        .replace(/\s+/g, '.')
+                        .replace(/([0-9•]\.?)/g, digit => `${digit} `)
+                        .trim() })] })) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
+});
+export default CreditCardDisplay;
+//# sourceMappingURL=CreditCardDisplay.js.map

package/lib/components/CreditCard/CreditCardDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardDisplay.js","sourceRoot":"","sources":["../../../src/components/CreditCard/CreditCardDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAGvE,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CACE,EAAE,KAAK,EAAE,iBAAiB,GAAG,EAAE,EAAE,GAAG,SAAS,EAA2C,EACxF,GAAkC,EAClC,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjF,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,SAAS,CAAC,CAAC,CAAC,CACX,8BACE,8BAAkB,MAAM,YAAE,SAAS,GAAQ,EAC3C,KAAC,kBAAkB,cAChB,SAAS;yBACP,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;yBACpB,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC;yBAC7C,IAAI,EAAE,GACU,IACpB,CACJ,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { CreditCardDisplayProps } from './CreditCard.types';\nimport { formatCreditCard } from './utils';\n\nconst CreditCardDisplay: FunctionComponent<CreditCardDisplayProps & ForwardProps> = forwardRef(\n  (\n    { value, formattingOptions = {}, ...restProps }: PropsWithoutRef<CreditCardDisplayProps>,\n    ref: CreditCardDisplayProps['ref']\n  ) => {\n    const formatted = value ? formatCreditCard(value, formattingOptions) : undefined;\n\n    return (\n      <span ref={ref} {...restProps}>\n        {formatted ? (\n          <>\n            <span aria-hidden='true'>{formatted}</span>\n            <VisuallyHiddenText>\n              {formatted\n                .replace(/\\s+/g, '.')\n                .replace(/([0-9•]\\.?)/g, digit => `${digit} `)\n                .trim()}\n            </VisuallyHiddenText>\n          </>\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </span>\n    );\n  }\n);\n\nexport default CreditCardDisplay;\n"]}

package/lib/components/CreditCard/CreditCardInput.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '../../types';
+import { CreditCardInputProps } from './CreditCard.types';
+declare const CreditCardInput: FunctionComponent<CreditCardInputProps & ForwardProps>;
+export default CreditCardInput;
+//# sourceMappingURL=CreditCardInput.d.ts.map

package/lib/components/CreditCard/CreditCardInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardInput.d.ts","sourceRoot":"","sources":["../../../src/components/CreditCard/CreditCardInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG1D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA2D3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/CreditCard/CreditCardInput.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import creditCardType from 'credit-card-type';
+import Input from '../Input';
+import { useConsolidatedRef, useInputFormatter } from '../../hooks';
+import { formatCreditCard, isPossibleCardNumber } from './utils';
+const CreditCardInput = forwardRef(({ value = '', onChange, onBlur, onFocus, ...restProps }, ref) => {
+    const onInputKeyDown = (e) => {
+        if (value && !isPossibleCardNumber(value) && Number.isFinite(Number.parseInt(e.key, 10))) {
+            e.target.value = '';
+        }
+    };
+    const onInputChange = (e) => {
+        onChange(e.target.value ? e.target.value.replace(/\D+/g, '') : undefined);
+    };
+    const onInputBlur = (e) => {
+        const inputValue = e.target.value;
+        onBlur?.(inputValue ? inputValue.replace(/\D+/g, '') : undefined);
+    };
+    const onInputFocus = (e) => {
+        const inputValue = e.target.value;
+        onFocus?.(inputValue ? inputValue.replace(/\D+/g, '') : undefined);
+    };
+    const onPaste = (e) => {
+        const text = e.clipboardData.getData('text').replace(/\D+/g, '');
+        const [{ lengths: [inferredLength] = [] } = {}] = creditCardType(text);
+        if (text.length > inferredLength) {
+            onChange(Number(text).toString());
+            e.preventDefault();
+        }
+    };
+    const maxLength = value ? Math.max(...(creditCardType(value)[0]?.lengths || [16])) : undefined;
+    const obfuscation = /\D/.test(value) ? 'partial' : 'none';
+    const inputRef = useConsolidatedRef(ref);
+    const formatted = useInputFormatter(inputRef, value, (input) => formatCreditCard(input.replace(/\D+/g, ''), { obfuscation }));
+    return (_jsx(Input, { ...restProps, inputMode: 'numeric', ref: inputRef, value: formatted, onChange: onInputChange, onBlur: onInputBlur, onFocus: onInputFocus, onPaste: onPaste, onKeyDown: onInputKeyDown, maxLength: maxLength, autocomplete: 'cc-number' }));
+});
+export default CreditCardInput;
+//# sourceMappingURL=CreditCardInput.js.map

package/lib/components/CreditCard/CreditCardInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardInput.js","sourceRoot":"","sources":["../../../src/components/CreditCard/CreditCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  ClipboardEvent,\n  KeyboardEvent\n} from 'react';\nimport creditCardType from 'credit-card-type';\n\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConsolidatedRef, useInputFormatter } from '../../hooks';\n\nimport { CreditCardInputProps } from './CreditCard.types';\nimport { formatCreditCard, isPossibleCardNumber } from './utils';\n\nconst CreditCardInput: FunctionComponent<CreditCardInputProps & ForwardProps> = forwardRef(\n  (\n    { value = '', onChange, onBlur, onFocus, ...restProps }: PropsWithoutRef<CreditCardInputProps>,\n    ref: CreditCardInputProps['ref']\n  ) => {\n    const onInputKeyDown = (e: KeyboardEvent) => {\n      if (value && !isPossibleCardNumber(value) && Number.isFinite(Number.parseInt(e.key, 10))) {\n        (e.target as HTMLInputElement).value = '';\n      }\n    };\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange(e.target.value ? e.target.value.replace(/\\D+/g, '') : undefined);\n    };\n\n    const onInputBlur = (e: FocusEvent) => {\n      const inputValue = (e.target as HTMLInputElement).value;\n      onBlur?.(inputValue ? inputValue.replace(/\\D+/g, '') : undefined);\n    };\n\n    const onInputFocus = (e: FocusEvent) => {\n      const inputValue = (e.target as HTMLInputElement).value;\n      onFocus?.(inputValue ? inputValue.replace(/\\D+/g, '') : undefined);\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      const text = e.clipboardData.getData('text').replace(/\\D+/g, '');\n      const [{ lengths: [inferredLength] = [] } = {}] = creditCardType(text);\n      if (text.length > inferredLength) {\n        onChange(Number(text).toString());\n        e.preventDefault();\n      }\n    };\n\n    const maxLength = value ? Math.max(...(creditCardType(value)[0]?.lengths || [16])) : undefined;\n\n    const obfuscation = /\\D/.test(value) ? 'partial' : 'none';\n\n    const inputRef = useConsolidatedRef(ref);\n    const formatted = useInputFormatter(inputRef, value, (input: string) =>\n      formatCreditCard(input.replace(/\\D+/g, ''), { obfuscation })\n    );\n\n    return (\n      <Input\n        {...restProps}\n        inputMode='numeric'\n        ref={inputRef}\n        value={formatted}\n        onChange={onInputChange}\n        onBlur={onInputBlur}\n        onFocus={onInputFocus}\n        onPaste={onPaste}\n        onKeyDown={onInputKeyDown}\n        maxLength={maxLength}\n        autocomplete='cc-number'\n      />\n    );\n  }\n);\n\nexport default CreditCardInput;\n"]}

package/lib/components/CreditCard/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CreditCardDisplay } from './CreditCardDisplay';
+export { default as CreditCardInput } from './CreditCardInput';
+export type { CreditCardDisplayProps, CreditCardInputProps, ObfuscationMode } from './CreditCard.types';
+export { formatCreditCard, isValidCreditCard } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CreditCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CreditCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EACV,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/CreditCard/index.js

@@ -0,0 +1,4 @@
+export { default as CreditCardDisplay } from './CreditCardDisplay';
+export { default as CreditCardInput } from './CreditCardInput';
+export { formatCreditCard, isValidCreditCard } from './utils';
+//# sourceMappingURL=index.js.map

package/lib/components/CreditCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CreditCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAM/D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as CreditCardDisplay } from './CreditCardDisplay';\nexport { default as CreditCardInput } from './CreditCardInput';\nexport type {\n  CreditCardDisplayProps,\n  CreditCardInputProps,\n  ObfuscationMode\n} from './CreditCard.types';\nexport { formatCreditCard, isValidCreditCard } from './utils';\n"]}

package/lib/components/CreditCard/utils.d.ts

@@ -0,0 +1,14 @@
+import type { FormattingOptions } from './CreditCard.types';
+/**
+ * Returns a formatted and obfuscated on demand partial credit card number.
+ * @param value starting, partial number.
+ * @param formattingOptions additional formatting options
+ */
+export declare const formatCreditCard: (value: string, { obfuscation }?: FormattingOptions) => string;
+/** Returns maximum total length of formatted credit card of given type including gaps. */
+export declare const creditCardTotalLength: (cardType: string) => number;
+/** Returns true if given first numbers match a pattern of any card, false otherwise.  */
+export declare const isPossibleCardNumber: (cardNumber: string) => boolean;
+/** Returns true if given card number is valid (matches the pattern and length of a card type), false otherwise. */
+export declare const isValidCreditCard: (cardNumber: number) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/CreditCard/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CreditCard/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAe5D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,UACpB,MAAM,oBACa,iBAAiB,KAC1C,MAaF,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB,aAAc,MAAM,KAAG,MAGxD,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,oBAAoB,eAAgB,MAAM,KAAG,OAEzD,CAAC;AAEF,mHAAmH;AACnH,eAAO,MAAM,iBAAiB,eAAgB,MAAM,KAAG,OAKtD,CAAC"}