npm - @dnb/eufemia - Versions diffs - 10.7.0 → 10.9.0 - Mend

@dnb/eufemia 10.7.0 → 10.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1468) hide show

package/extensions/forms/types.d.ts CHANGED Viewed

@@ -1,11 +1,104 @@
-interface IOptions {
+import { JSONSchema7 } from 'json-schema';
+import { SpacingProps } from '../../components/space/types';
+interface IFormErrorOptions {
     validationRule?: string | string[];
 }
+/**
+ * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling
+ */
 export declare class FormError extends Error {
     /**
      * What validation rule did the error occur based on? (i.e: minLength, required or maximum)
      */
     validationRule?: string | string[];
-    constructor(message: string, options?: IOptions);
+    constructor(message: string, options?: IFormErrorOptions);
+}
+export declare const pickSpacingProps: <Props extends SpacingProps>(props: Props) => SpacingProps;
+export declare const omitSpacingProps: <Props extends SpacingProps>(props: Props) => Omit<Props, "space" | keyof import("../../components/space/types").SpacingElementProps>;
+interface DefaultErrorMessages {
+    required?: string;
+}
+export interface DataValueReadProps<Value = unknown> {
+    /** JSON Pointer for where the data for this field is located in the source dataset */
+    path?: string;
+    /** JSON Pointer for where the data for this field is located in the source iterate loop element */
+    elementPath?: string;
+    value?: Value;
+}
+export declare function pickDataValueReadProps<Props extends DataValueReadProps>(props: Props): DataValueReadProps;
+export declare function omitDataValueReadProps<Props extends DataValueReadProps>(props: Props): Omit<DataValueReadProps, keyof DataValueReadProps>;
+export interface DataValueWriteProps<Value = unknown, EmptyValue = undefined | string | number> {
+    emptyValue?: EmptyValue;
+    onFocus?: (value: Value | EmptyValue) => void;
+    onBlur?: (value: Value | EmptyValue) => void;
+    onChange?: (value: Value | EmptyValue) => void;
+}
+export declare function pickDataValueWriteProps<Props extends DataValueWriteProps>(props: Props): DataValueWriteProps;
+export declare function omitDataValueWriteProps<Props extends DataValueWriteProps>(props: Props): Omit<DataValueWriteProps, keyof DataValueWriteProps>;
+export type DataValueReadWriteProps<Value = unknown, EmptyValue = undefined | string | number> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>;
+export declare function pickDataValueReadWriteProps<Props extends DataValueReadWriteProps>(props: Props): DataValueReadWriteProps;
+export declare function omitDataValueReadWriteProps<Props extends DataValueReadWriteProps>(props: Props): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps>;
+export type ComponentProps = SpacingProps & {
+    className?: string;
+};
+export type DataValueReadComponentProps<Value = unknown> = ComponentProps & DataValueReadProps<Value>;
+export type DataValueReadWriteComponentProps<Value = unknown, EmptyValue = undefined | string | number> = ComponentProps & DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>;
+export interface FieldProps<Value = unknown, EmptyValue = undefined | string | number, ErrorMessages extends {
+    required?: string;
+} = DefaultErrorMessages> extends DataValueReadWriteComponentProps<Value, EmptyValue> {
+    /** ID added to the actual field component, and linked to the label via for-attribute */
+    id?: string;
+    layout?: 'horizontal' | 'vertical';
+    /** Main label text */
+    label?: string;
+    /** A more discreet text displayed beside the label (i.e for "(optional)") */
+    labelDescription?: string;
+    /** Secondary information displayed at the end of the label line (i.e character counter) */
+    labelSecondary?: string;
+    /** Text showing in place of the value if no value is given */
+    placeholder?: string;
+    info?: Error | FormError | string;
+    warning?: Error | FormError | string;
+    error?: Error | FormError;
+    disabled?: boolean;
+    required?: boolean;
+    schema?: JSONSchema7;
+    validator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
+    onBlurValidator?: (value: Value | EmptyValue) => Error | undefined | Promise<Error | undefined>;
+    /**
+     * Should error messages based on validation be shown initially (from given value-prop or source data)
+     * before the user interacts with the field?
+     * @default false
+     * */
+    validateInitially?: boolean;
+    /**
+     * Should error messages be shown when touching (like focusing a field and blurring) without having changed
+     * the value? So the user did not introduce a new error, but it was invalid based on validation initially.
+     */
+    validateUnchanged?: boolean;
+    /** Should validation be done while writing, not just when blurring the field? */
+    continuousValidation?: boolean;
+    errorMessages?: ErrorMessages;
+    toInput?: (external: Value | undefined) => any;
+    fromInput?: (...args: any[]) => Value | undefined;
+}
+export interface FieldHelpProps {
+    help?: {
+        title?: string;
+        contents?: string;
+    };
+}
+export interface ValueProps<Value> extends DataValueReadComponentProps<Value> {
+    label?: string;
+    /** Should the component render if the value is empty? */
+    showEmpty?: boolean;
+    /** Text showing in place of the value if no value is given. */
+    placeholder?: string;
+    /** JSON Pointer for where the data for this field is located in the source iterate loop element */
+    elementPath?: string;
+    /** For showing the value inline (not as a block element) */
+    inline?: boolean;
+    /** Prepare value for display (regardless of source like props or data context) */
+    prepare?: (external: Value | undefined) => string;
 }
 export {};

package/extensions/forms/types.js CHANGED Viewed

@@ -1,4 +1,6 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["space", "top", "bottom", "left", "right"];
 export class FormError extends Error {
   constructor(message, options) {
     super(message);
@@ -8,4 +10,62 @@ export class FormError extends Error {
     }
   }
 }
+export const pickSpacingProps = props => {
+  return {
+    space: props === null || props === void 0 ? void 0 : props.space,
+    top: props === null || props === void 0 ? void 0 : props.top,
+    bottom: props === null || props === void 0 ? void 0 : props.bottom,
+    left: props === null || props === void 0 ? void 0 : props.left,
+    right: props === null || props === void 0 ? void 0 : props.right
+  };
+};
+export const omitSpacingProps = props => {
+  const {
+      space,
+      top,
+      bottom,
+      left,
+      right
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return restProps;
+};
+const dataValueReadProps = ['path', 'elementPath', 'value'];
+export function pickDataValueReadProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(_ref => {
+    let [key] = _ref;
+    return dataValueReadProps.includes(key);
+  }));
+}
+export function omitDataValueReadProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(_ref2 => {
+    let [key] = _ref2;
+    return !dataValueReadProps.includes(key);
+  }));
+}
+const dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange'];
+export function pickDataValueWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(_ref3 => {
+    let [key] = _ref3;
+    return dataValueWriteProps.includes(key);
+  }));
+}
+export function omitDataValueWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(_ref4 => {
+    let [key] = _ref4;
+    return !dataValueWriteProps.includes(key);
+  }));
+}
+export function pickDataValueReadWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(_ref5 => {
+    let [key] = _ref5;
+    return dataValueReadProps.includes(key) || dataValueWriteProps.includes(key);
+  }));
+}
+export function omitDataValueReadWriteProps(props) {
+  return Object.fromEntries(Object.entries(props ?? {}).filter(_ref6 => {
+    let [key] = _ref6;
+    return !dataValueReadProps.includes(key) && !dataValueWriteProps.includes(key);
+  }));
+}
 //# sourceMappingURL=types.js.map

package/extensions/forms/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["interface IOptions {\n validationRule?: string \| string[]\n}\n\nexport class FormError extends Error {\n /*\n What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n */\n validationRule?: string \| string[]\n\n constructor(message: string, options?: IOptions) {\n super(message)\n\n if (options) {\n this.validationRule = options.validationRule\n }\n }\n}\n"],"mappings":";AAIA,OAAO,MAAMA,SAAS,SAASC,KAAK,CAAC;EAMnCC,WAAWA,CAACC,OAAe,EAAEC,OAAkB,EAAE;IAC/C,KAAK,CAACD,OAAO,CAAC;IAAAE,eAAA;IAEd,IAAID,OAAO,EAAE;MACX,IAAI,CAACE,cAAc,GAAGF,OAAO,CAACE,cAAc;IAC9C;EACF;AACF"}
1	+ {"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","validationRule","pickSpacingProps","props","space","top","bottom","left","right","omitSpacingProps","restProps","_objectWithoutProperties","_excluded","dataValueReadProps","pickDataValueReadProps","Object","fromEntries","entries","filter","_ref","key","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { SpacingProps } from '../../components/space/types'\n\ninterface IFormErrorOptions {\n validationRule?: string \| string[]\n}\n\n/*\n Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n /\nexport class FormError extends Error {\n /\n What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n /\n validationRule?: string \| string[]\n\n constructor(message: string, options?: IFormErrorOptions) {\n super(message)\n\n if (options) {\n this.validationRule = options.validationRule\n }\n }\n}\n\n// Spacing\n\nexport const pickSpacingProps = <Props extends SpacingProps>(\n props: Props\n): SpacingProps => {\n return {\n space: props?.space,\n top: props?.top,\n bottom: props?.bottom,\n left: props?.left,\n right: props?.right,\n }\n}\n\nexport const omitSpacingProps = <Props extends SpacingProps>(\n props: Props\n): Omit<Props, keyof SpacingProps> => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { space, top, bottom, left, right, ...restProps } = props\n return restProps\n}\n\n// Data value\n\ninterface DefaultErrorMessages {\n required?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n /* JSON Pointer for where the data for this field is located in the source dataset /\n path?: string\n /* JSON Pointer for where the data for this field is located in the source iterate loop element /\n elementPath?: string\n value?: Value\n}\n\nconst dataValueReadProps = ['path', 'elementPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n props: Props\n): DataValueReadProps {\n return Object.fromEntries(\n Object.entries(props ?? {}).filter(([key]) =>\n dataValueReadProps.includes(key)\n )\n )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n return Object.fromEntries(\n Object.entries(props ?? {}).filter(\n ([key]) => !dataValueReadProps.includes(key)\n )\n )\n}\n\nexport interface DataValueWriteProps<\n Value = unknown,\n EmptyValue = undefined \| string \| number,\n> {\n emptyValue?: EmptyValue\n onFocus?: (value: Value \| EmptyValue) => void\n onBlur?: (value: Value \| EmptyValue) => void\n onChange?: (value: Value \| EmptyValue) => void\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n props: Props\n): DataValueWriteProps {\n return Object.fromEntries(\n Object.entries(props ?? {}).filter(([key]) =>\n dataValueWriteProps.includes(key)\n )\n )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n return Object.fromEntries(\n Object.entries(props ?? {}).filter(\n ([key]) => !dataValueWriteProps.includes(key)\n )\n )\n}\n\nexport type DataValueReadWriteProps<\n Value = unknown,\n EmptyValue = undefined \| string \| number,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n return Object.fromEntries(\n Object.entries(props ?? {}).filter(\n ([key]) =>\n dataValueReadProps.includes(key) \|\|\n dataValueWriteProps.includes(key)\n )\n )\n}\n\nexport function omitDataValueReadWriteProps<\n Props extends DataValueReadWriteProps,\n>(\n props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n return Object.fromEntries(\n Object.entries(props ?? {}).filter(\n ([key]) =>\n !dataValueReadProps.includes(key) &&\n !dataValueWriteProps.includes(key)\n )\n )\n}\n\nexport type ComponentProps = SpacingProps & {\n className?: string\n}\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n Value = unknown,\n EmptyValue = undefined \| string \| number,\n> = ComponentProps &\n DataValueReadProps<Value> &\n DataValueWriteProps<Value, EmptyValue>\n\nexport interface FieldProps<\n Value = unknown,\n EmptyValue = undefined \| string \| number,\n ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue> {\n /* ID added to the actual field component, and linked to the label via for-attribute /\n id?: string\n layout?: 'horizontal' \| 'vertical'\n /* Main label text /\n label?: string\n /* A more discreet text displayed beside the label (i.e for \"(optional)\") /\n labelDescription?: string\n /* Secondary information displayed at the end of the label line (i.e character counter) /\n labelSecondary?: string\n /* Text showing in place of the value if no value is given /\n placeholder?: string\n info?: Error \| FormError \| string\n warning?: Error \| FormError \| string\n error?: Error \| FormError\n disabled?: boolean\n // Validation\n required?: boolean\n schema?: JSONSchema7\n validator?: (\n value: Value \| EmptyValue\n ) => Error \| undefined \| Promise<Error \| undefined>\n onBlurValidator?: (\n value: Value \| EmptyValue\n ) => Error \| undefined \| Promise<Error \| undefined>\n /\n Should error messages based on validation be shown initially (from given value-prop or source data)\n * before the user interacts with the field?\n * @default false\n * /\n validateInitially?: boolean\n /\n Should error messages be shown when touching (like focusing a field and blurring) without having changed\n * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n /\n validateUnchanged?: boolean\n /* Should validation be done while writing, not just when blurring the field? /\n continuousValidation?: boolean\n errorMessages?: ErrorMessages\n // Derivatives\n toInput?: (external: Value \| undefined) => any\n fromInput?: (...args: any[]) => Value \| undefined\n}\n\nexport interface FieldHelpProps {\n help?: {\n title?: string\n contents?: string\n }\n}\n\nexport interface ValueProps<Value>\n extends DataValueReadComponentProps<Value> {\n label?: string\n /* Should the component render if the value is empty? /\n showEmpty?: boolean\n /* Text showing in place of the value if no value is given. /\n placeholder?: string\n /* JSON Pointer for where the data for this field is located in the source iterate loop element /\n elementPath?: string\n /* For showing the value inline (not as a block element) /\n inline?: boolean\n // Derivatives\n /* Prepare value for display (regardless of source like props or data context) */\n prepare?: (external: Value \| undefined) => string\n}\n"],"mappings":"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"}

package/extensions/forms/utils/TestElement/style/dnb-test-element.css CHANGED Viewed

@@ -1,6 +1,6 @@
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }

package/extensions/forms/utils/TestElement/style/dnb-test-element.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-forms-test-element{border:1px dashed grey;border-radius~~:6px~~;color:#909090;padding~~:4px~~ ~~8px~~}
1	+ .dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}

package/extensions/forms/utils/TestElement/style/dnb-test-element.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }

package/extensions/forms/utils/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 export * from './numbers';
-export * from './components';
 export { default as TestElement } from './TestElement/TestElement';

package/extensions/forms/utils/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
 export * from './numbers';
-export * from './components';
 export { default as TestElement } from './TestElement/TestElement';
 //# sourceMappingURL=index.js.map

package/extensions/forms/utils/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["default","TestElement"],"sources":["../../../../../src/extensions/forms/utils/index.ts"],"sourcesContent":["export * from './numbers'\nexport * from './components'\nexport { default as TestElement } from './TestElement/TestElement'\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,~~cAAc,cAAc;AAC5B,~~SAASA,OAAO,IAAIC,WAAW,QAAQ,2BAA2B"}
1	+ {"version":3,"file":"index.js","names":["default","TestElement"],"sources":["../../../../../src/extensions/forms/utils/index.ts"],"sourcesContent":["export * from './numbers'\nexport { default as TestElement } from './TestElement/TestElement'\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,SAASA,OAAO,IAAIC,WAAW,QAAQ,2BAA2B"}

package/extensions/forms/utils/useWasChanged.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+/**
+ *
+ * Shallow object comparison to easily find out what props of an object was changed since the last render
+ */
+export default function useWasChanged<Subject extends object>(subject: Subject, title?: string, debug?: boolean): void;

package/extensions/forms/utils/useWasChanged.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+export default function useWasChanged(subject, title, debug) {
+  const previous = useRef(subject);
+  if (!previous.current && !subject) {
+    console.log('useWasChanged() - No subject was provided, while previous render had a subject. Was the whole object deleted?');
+  }
+  const {
+    changed,
+    unchanged
+  } = [...Object.entries(subject), ...Object.entries(previous.current ?? {}).filter(_ref => {
+    let [key] = _ref;
+    return subject[key] === undefined;
+  })].reduce((_ref2, _ref3) => {
+    var _previous$current;
+    let {
+      changed,
+      unchanged
+    } = _ref2;
+    let [key, value] = _ref3;
+    if (((_previous$current = previous.current) === null || _previous$current === void 0 ? void 0 : _previous$current[key]) !== (subject === null || subject === void 0 ? void 0 : subject[key])) {
+      return {
+        changed: changed.concat(key),
+        unchanged
+      };
+    } else {
+      return {
+        changed,
+        unchanged: unchanged.concat(key)
+      };
+    }
+  }, {
+    changed: [],
+    unchanged: []
+  });
+  if (changed.length === 0 && !debug) {
+    return;
+  }
+  console.groupCollapsed(`${title ?? 'object'} -- ${changed.length} members was changed`);
+  Object.values(changed).map(key => {
+    if (debug) {
+      var _previous$current2;
+      console.groupCollapsed(`CHANGED: ${key}`);
+      console.log('PREVIOUS: ', (_previous$current2 = previous.current) === null || _previous$current2 === void 0 ? void 0 : _previous$current2[key]);
+      console.log('CURRENT: ', subject === null || subject === void 0 ? void 0 : subject[key]);
+      console.groupEnd();
+    } else {
+      console.log(`CHANGED: ${key}`);
+    }
+  });
+  Object.values(unchanged).map(key => {
+    console.log(`UNCHANGED: ${key}`);
+  });
+  previous.current = subject;
+  console.groupEnd();
+}
+//# sourceMappingURL=useWasChanged.js.map

package/extensions/forms/utils/useWasChanged.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useWasChanged.js","names":["useRef","useWasChanged","subject","title","debug","previous","current","console","log","changed","unchanged","Object","entries","filter","_ref","key","undefined","reduce","_ref2","_ref3","_previous$current","value","concat","length","groupCollapsed","values","map","_previous$current2","groupEnd"],"sources":["../../../../../src/extensions/forms/utils/useWasChanged.ts"],"sourcesContent":["import { useRef } from 'react'\n\n/**\n *\n * Shallow object comparison to easily find out what props of an object was changed since the last render\n */\nexport default function useWasChanged<Subject extends object>(\n subject: Subject,\n title?: string,\n debug?: boolean\n): void {\n const previous = useRef<Subject>(subject)\n if (!previous.current && !subject) {\n console.log(\n 'useWasChanged() - No subject was provided, while previous render had a subject. Was the whole object deleted?'\n )\n }\n\n const { changed, unchanged } = [\n ...Object.entries(subject),\n ...Object.entries(previous.current ?? {}).filter(\n ([key]) => subject[key] === undefined\n ),\n ].reduce(\n ({ changed, unchanged }, [key, value]) => {\n if (previous.current?.[key] !== subject?.[key]) {\n return {\n changed: changed.concat(key),\n unchanged,\n }\n } else {\n return {\n changed,\n unchanged: unchanged.concat(key),\n }\n }\n },\n { changed: [], unchanged: [] }\n )\n\n if (changed.length === 0 && !debug) {\n return\n }\n\n console.groupCollapsed(\n `${title ?? 'object'} -- ${changed.length} members was changed`\n )\n\n Object.values(changed).map((key) => {\n if (debug) {\n console.groupCollapsed(`CHANGED: ${key}`)\n console.log('PREVIOUS: ', previous.current?.[key])\n console.log('CURRENT: ', subject?.[key])\n console.groupEnd()\n } else {\n console.log(`CHANGED: ${key}`)\n }\n })\n Object.values(unchanged).map((key) => {\n console.log(`UNCHANGED: ${key}`)\n })\n\n previous.current = subject\n\n console.groupEnd()\n}\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,OAAO;AAM9B,eAAe,SAASC,aAAaA,CACnCC,OAAgB,EAChBC,KAAc,EACdC,KAAe,EACT;EACN,MAAMC,QAAQ,GAAGL,MAAM,CAAUE,OAAO,CAAC;EACzC,IAAI,CAACG,QAAQ,CAACC,OAAO,IAAI,CAACJ,OAAO,EAAE;IACjCK,OAAO,CAACC,GAAG,CACT,+GACF,CAAC;EACH;EAEA,MAAM;IAAEC,OAAO;IAAEC;EAAU,CAAC,GAAG,CAC7B,GAAGC,MAAM,CAACC,OAAO,CAACV,OAAO,CAAC,EAC1B,GAAGS,MAAM,CAACC,OAAO,CAACP,QAAQ,CAACC,OAAO,IAAI,CAAC,CAAC,CAAC,CAACO,MAAM,CAC9CC,IAAA;IAAA,IAAC,CAACC,GAAG,CAAC,GAAAD,IAAA;IAAA,OAAKZ,OAAO,CAACa,GAAG,CAAC,KAAKC,SAAS;EAAA,CACvC,CAAC,CACF,CAACC,MAAM,CACN,CAAAC,KAAA,EAAAC,KAAA,KAA0C;IAAA,IAAAC,iBAAA;IAAA,IAAzC;MAAEX,OAAO;MAAEC;IAAU,CAAC,GAAAQ,KAAA;IAAA,IAAE,CAACH,GAAG,EAAEM,KAAK,CAAC,GAAAF,KAAA;IACnC,IAAI,EAAAC,iBAAA,GAAAf,QAAQ,CAACC,OAAO,cAAAc,iBAAA,uBAAhBA,iBAAA,CAAmBL,GAAG,CAAC,OAAKb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGa,GAAG,CAAC,GAAE;MAC9C,OAAO;QACLN,OAAO,EAAEA,OAAO,CAACa,MAAM,CAACP,GAAG,CAAC;QAC5BL;MACF,CAAC;IACH,CAAC,MAAM;MACL,OAAO;QACLD,OAAO;QACPC,SAAS,EAAEA,SAAS,CAACY,MAAM,CAACP,GAAG;MACjC,CAAC;IACH;EACF,CAAC,EACD;IAAEN,OAAO,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAG,CAC/B,CAAC;EAED,IAAID,OAAO,CAACc,MAAM,KAAK,CAAC,IAAI,CAACnB,KAAK,EAAE;IAClC;EACF;EAEAG,OAAO,CAACiB,cAAc,CACnB,GAAErB,KAAK,IAAI,QAAS,OAAMM,OAAO,CAACc,MAAO,sBAC5C,CAAC;EAEDZ,MAAM,CAACc,MAAM,CAAChB,OAAO,CAAC,CAACiB,GAAG,CAAEX,GAAG,IAAK;IAClC,IAAIX,KAAK,EAAE;MAAA,IAAAuB,kBAAA;MACTpB,OAAO,CAACiB,cAAc,CAAE,YAAWT,GAAI,EAAC,CAAC;MACzCR,OAAO,CAACC,GAAG,CAAC,YAAY,GAAAmB,kBAAA,GAAEtB,QAAQ,CAACC,OAAO,cAAAqB,kBAAA,uBAAhBA,kBAAA,CAAmBZ,GAAG,CAAC,CAAC;MAClDR,OAAO,CAACC,GAAG,CAAC,WAAW,EAAEN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGa,GAAG,CAAC,CAAC;MACxCR,OAAO,CAACqB,QAAQ,CAAC,CAAC;IACpB,CAAC,MAAM;MACLrB,OAAO,CAACC,GAAG,CAAE,YAAWO,GAAI,EAAC,CAAC;IAChC;EACF,CAAC,CAAC;EACFJ,MAAM,CAACc,MAAM,CAACf,SAAS,CAAC,CAACgB,GAAG,CAAEX,GAAG,IAAK;IACpCR,OAAO,CAACC,GAAG,CAAE,cAAaO,GAAI,EAAC,CAAC;EAClC,CAAC,CAAC;EAEFV,QAAQ,CAACC,OAAO,GAAGJ,OAAO;EAE1BK,OAAO,CAACqB,QAAQ,CAAC,CAAC;AACpB"}

package/extensions/forms/variables.scss ADDED Viewed

@@ -0,0 +1,3 @@
+$forms-field-width-small: 5rem;
+$forms-field-width-medium: 11rem;
+$forms-field-width-large: 21rem;

package/extensions/lib.d.ts CHANGED Viewed

@@ -19,8 +19,6 @@ export declare const getExtensions: () => {
         Currency: typeof import("./forms/Field/Currency").default;
         Date: typeof import("./forms/Field/Date").default;
         Email: typeof import("./forms/Field/Email").default;
-        FirstName: typeof import("./forms/Field/FirstName").default;
-        LastName: typeof import("./forms/Field/LastName").default;
         NationalIdentityNumber: typeof import("./forms/Field/NationalIdentityNumber").default;
         OrganizationNumber: typeof import("./forms/Field/OrganizationNumber").default;
         PhoneNumber: typeof import("./forms/Field/PhoneNumber").default;
@@ -30,6 +28,7 @@ export declare const getExtensions: () => {
         Option: typeof import("./forms/Field/Option").default;
         SelectCountry: typeof import("./forms/Field/SelectCountry").default;
         BankAccountNumber: typeof import("./forms/Field/BankAccountNumber").default;
+        CountryCode: typeof import("./forms/Field/CountryCode").default;
     };
     PaymentCard: typeof PaymentCard;
 };

package/extensions/payment-card/PaymentCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentCard.js","names":["React","PropTypes","classnames","Context","Provider","isTrue","validateDOMAttributes","extendPropsWithContextInClassComponent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","P","ProductType","CardType","BankAxeptType","Designs","defaultDesign","cardProducts","ProductLogo","TypeLogo","BankLogo","StatusIcon","BankAxeptLogo","cardDataPropTypes","process","env","NODE_ENV","shape","productCode","string","isRequired","productName","displayName","cardDesign","object","cardType","productType","bankAxept","translationDefaultPropsProps","text_card_number","text_expired","text_blocked","text_not_active","PaymentCard","PureComponent","render","_this$context","props","defaultProps","locale","context","skeleton","product_code","card_number","card_status","variant","digits","id","raw_data","className","class","_className","children","attributes","_objectWithoutProperties","_excluded","cardData","getCardData","params","_objectSpread","createElement","Consumer","_ref","translation","translations","NormalCard","data","cardStatus","cardNumber","formatCardNumber","parseFloat","_defineProperty","propTypes","oneOf","oneOfType","number","bool","node","func","formatCardNumberRegex","slice","length","replace","card","find","item","defaultCard","None","StatusOverlay","_ref2","status","top","CardText","_ref3","modifier","_ref4","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/*\n Web PaymentCard Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport {\n isTrue,\n validateDOMAttributes,\n extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport {\n spacingPropTypes,\n createSpacingClasses,\n} from '../../components/space/SpacingHelper'\nimport {\n skeletonDOMAttributes,\n createSkeletonClass,\n} from '../../components/skeleton/SkeletonHelper'\nimport P from '../../elements/P'\n\nimport { ProductType, CardType, BankAxeptType } from './utils/Types'\nimport Designs, { defaultDesign } from './utils/CardDesigns'\nimport cardProducts from './utils/cardProducts'\nimport {\n ProductLogo,\n TypeLogo,\n BankLogo,\n StatusIcon,\n BankAxeptLogo,\n} from './icons'\n\nexport { Designs, ProductType, CardType, BankAxeptType }\n\nconst cardDataPropTypes = PropTypes.shape({\n productCode: PropTypes.string.isRequired,\n productName: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n cardDesign: PropTypes.object.isRequired,\n cardType: PropTypes.object.isRequired,\n productType: PropTypes.object.isRequired,\n bankAxept: PropTypes.object.isRequired,\n})\n\nconst translationDefaultPropsProps = {\n text_card_number: null,\n text_expired: null,\n text_blocked: null,\n text_not_active: null,\n}\n\nexport default class PaymentCard extends React.PureComponent {\n static contextType = Context\n\n static propTypes = {\n product_code: PropTypes.string.isRequired,\n card_number: PropTypes.string.isRequired,\n card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active']),\n variant: PropTypes.oneOf(['normal', 'compact']),\n digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n raw_data: cardDataPropTypes,\n id: PropTypes.string,\n locale: PropTypes.string,\n\n skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n ...spacingPropTypes,\n\n class: PropTypes.string,\n className: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n PropTypes.func,\n ]),\n }\n\n static defaultProps = {\n digits: 8,\n locale: null,\n card_status: 'active',\n variant: 'normal',\n\n id: null,\n raw_data: null,\n\n skeleton: false,\n class: null,\n className: null,\n children: null,\n\n ...translationDefaultPropsProps,\n }\n\n render() {\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContextInClassComponent(\n this.props,\n PaymentCard.defaultProps,\n { locale: this.context.locale },\n { skeleton: this.context?.skeleton }\n )\n\n const {\n product_code,\n card_number,\n card_status,\n variant,\n digits,\n id,\n raw_data,\n locale,\n skeleton,\n className,\n class: _className,\n children, //eslint-disable-line\n ...attributes\n } = props\n\n const cardData = raw_data \|\| getCardData(product_code)\n\n const params = {\n className: classnames(\n 'dnb-payment-card',\n `dnb-payment-card--${variant}`,\n createSkeletonClass(null, skeleton, this.context),\n createSpacingClasses(props),\n className,\n _className\n ),\n ...attributes,\n }\n\n skeletonDOMAttributes(params, skeleton, this.context)\n\n // also used for code markup simulation\n validateDOMAttributes(this.props, params)\n\n return (\n <Provider locale={locale}>\n <Context.Consumer>\n {({ translation }) => {\n const translations = extendPropsWithContextInClassComponent(\n this.props,\n translationDefaultPropsProps,\n translation.PaymentCard\n )\n return (\n <figure {...params}>\n <figcaption className=\"dnb-sr-only dnb-payment-card__figcaption\">\n {cardData.productName}\n </figcaption>\n <NormalCard\n id={id}\n skeleton={isTrue(skeleton)}\n data={cardData}\n cardStatus={card_status}\n cardNumber={formatCardNumber(\n card_number,\n parseFloat(digits)\n )}\n translations={translations}\n />\n </figure>\n )\n }}\n </Context.Consumer>\n </Provider>\n )\n }\n}\n\nconst formatCardNumberRegex = /(?=(?:....)*$)/g\n\nexport const formatCardNumber = (cardNumber, digits) =>\n digits\n ? cardNumber\n .slice(cardNumber.length - digits, cardNumber.length)\n .replace(formatCardNumberRegex, ' ')\n : cardNumber.replace(formatCardNumberRegex, ' ')\n\nexport const getCardData = (productCode) => {\n const card = cardProducts.find(\n (item) => item.productCode === productCode\n )\n return card \|\| defaultCard(productCode)\n}\n\nconst defaultCard = (productCode) => ({\n productCode,\n productName: '',\n displayName: '',\n cardDesign: defaultDesign,\n cardType: CardType.None,\n productType: ProductType.None,\n bankAxept: BankAxeptType.None,\n})\n\nStatusOverlay.propTypes = {\n cardStatus: PropTypes.string.isRequired,\n translations: PropTypes.object.isRequired,\n skeleton: PropTypes.bool,\n}\nStatusOverlay.defaultProps = {\n skeleton: false,\n}\n\nfunction StatusOverlay({ cardStatus, translations, skeleton }) {\n switch (cardStatus) {\n case 'not_active':\n return (\n <div\n className={classnames(\n 'dnb-payment-card__blocking__overlay',\n createSkeletonClass('font', skeleton)\n )}\n >\n <div className=\"dnb-payment-card__blocking__center\">\n <StatusIcon status={cardStatus} />\n <P top=\"xx-small\">{translations.text_not_active}</P>\n </div>\n </div>\n )\n case 'blocked':\n return (\n <div\n className={classnames(\n 'dnb-payment-card__blocking__overlay',\n createSkeletonClass('font', skeleton)\n )}\n >\n <div className=\"dnb-payment-card__blocking__center\">\n <StatusIcon status={cardStatus} />\n <P top=\"xx-small\">{translations.text_blocked}</P>\n </div>\n </div>\n )\n\n case 'expired':\n return (\n <div\n className={classnames(\n 'dnb-payment-card__blocking__overlay',\n createSkeletonClass('font', skeleton)\n )}\n >\n <div className=\"dnb-payment-card__blocking__center\">\n <StatusIcon status={cardStatus} />\n <P top=\"xx-small\">{translations.text_expired}</P>\n </div>\n </div>\n )\n\n case 'active':\n default:\n return null\n }\n}\n\nCardText.propTypes = {\n cardNumber: PropTypes.string.isRequired,\n translations: PropTypes.object.isRequired,\n skeleton: PropTypes.bool.isRequired,\n}\n\nfunction CardText({ cardNumber, translations, skeleton }) {\n return (\n <span\n className={classnames(\n 'dnb-payment-card__card__wrapper',\n createSkeletonClass('font', skeleton)\n )}\n >\n <P\n className=\"dnb-payment-card__card__holder\"\n modifier=\"x-small medium\"\n >\n {translations.text_card_number}\n </P>\n <P className=\"dnb-payment-card__card__numbers\">{cardNumber}</P>\n </span>\n )\n}\n\nNormalCard.propTypes = {\n id: PropTypes.string,\n skeleton: PropTypes.bool,\n data: cardDataPropTypes.isRequired,\n cardStatus: PropTypes.string.isRequired,\n cardNumber: PropTypes.string.isRequired,\n translations: PropTypes.object.isRequired,\n}\nNormalCard.defaultProps = {\n id: null,\n skeleton: null,\n}\n\nfunction NormalCard({\n data,\n cardStatus,\n cardNumber,\n id,\n skeleton,\n translations,\n}) {\n return (\n <div\n id={id}\n className={classnames(\n 'dnb-payment-card__card',\n `dnb-payment-card__${data.cardDesign.cardStyle}`\n )}\n {...(data.cardDesign?.backgroundImage\n ? {\n style: {\n backgroundImage: `url(${data.cardDesign.backgroundImage})`,\n },\n }\n : {})}\n >\n <div className=\"dnb-payment-card__card__content\">\n <div className=\"dnb-payment-card__card__top\">\n <BankLogo logoType={data.cardDesign.bankLogo} />\n <ProductLogo\n productType={data.productType}\n cardDesign={data.cardDesign}\n />\n <BankAxeptLogo\n bankAxept={data.bankAxept}\n cardDesign={data.cardDesign}\n />\n </div>\n <div className=\"dnb-payment-card__card__bottom\">\n <CardText\n cardNumber={cardNumber}\n displayName={data.displayName}\n translations={translations}\n skeleton={skeleton}\n />\n <TypeLogo\n cardType={data.cardType}\n cardDesign={data.cardDesign}\n />\n </div>\n </div>\n <StatusOverlay\n skeleton={skeleton}\n cardStatus={cardStatus}\n translations={translations}\n />\n </div>\n )\n}\n"],"mappings":";;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,SACEC,MAAM,EACNC,qBAAqB,EACrBC,sCAAsC,QACjC,+BAA+B;AACtC,SACEC,gBAAgB,EAChBC,oBAAoB,QACf,sCAAsC;AAC7C,SACEC,qBAAqB,EACrBC,mBAAmB,QACd,0CAA0C;AACjD,OAAOC,CAAC,MAAM,kBAAkB;AAEhC,SAASC,WAAW,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,eAAe;AACpE,OAAOC,OAAO,IAAIC,aAAa,QAAQ,qBAAqB;AAC5D,OAAOC,YAAY,MAAM,sBAAsB;AAC/C,SACEC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,aAAa,QACR,SAAS;AAEhB,SAASP,OAAO,EAAEH,WAAW,EAAEC,QAAQ,EAAEC,aAAa;AAEtD,MAAMS,iBAAiB,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG1B,SAAS,CAAC2B,KAAK,CAAC;EACxCC,WAAW,EAAE5B,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACxCC,WAAW,EAAE/B,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACxCE,WAAW,EAAEhC,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACxCG,UAAU,EAAEjC,SAAS,CAACkC,MAAM,CAACJ,UAAU;EACvCK,QAAQ,EAAEnC,SAAS,CAACkC,MAAM,CAACJ,UAAU;EACrCM,WAAW,EAAEpC,SAAS,CAACkC,MAAM,CAACJ,UAAU;EACxCO,SAAS,EAAErC,SAAS,CAACkC,MAAM,CAACJ;AAC9B,CAAC,CAAC;AAEF,MAAMQ,4BAA4B,GAAG;EACnCC,gBAAgB,EAAE,IAAI;EACtBC,YAAY,EAAE,IAAI;EAClBC,YAAY,EAAE,IAAI;EAClBC,eAAe,EAAE;AACnB,CAAC;AAED,eAAe,MAAMC,WAAW,SAAS5C,KAAK,CAAC6C,aAAa,CAAC;EA2C3DC,MAAMA,CAAA,EAAG;IAAA,IAAAC,aAAA;IAEP,MAAMC,KAAK,GAAGzC,sCAAsC,CAClD,IAAI,CAACyC,KAAK,EACVJ,WAAW,CAACK,YAAY,EACxB;MAAEC,MAAM,EAAE,IAAI,CAACC,OAAO,CAACD;IAAO,CAAC,EAC/B;MAAEE,QAAQ,GAAAL,aAAA,GAAE,IAAI,CAACI,OAAO,cAAAJ,aAAA,uBAAZA,aAAA,CAAcK;IAAS,CACrC,CAAC;IAED,MAAM;QACJC,YAAY;QACZC,WAAW;QACXC,WAAW;QACXC,OAAO;QACPC,MAAM;QACNC,EAAE;QACFC,QAAQ;QACRT,MAAM;QACNE,QAAQ;QACRQ,SAAS;QACTC,KAAK,EAAEC,UAAU;QACjBC;MAEF,CAAC,GAAGf,KAAK;MADJgB,UAAU,GAAAC,wBAAA,CACXjB,KAAK,EAAAkB,SAAA;IAET,MAAMC,QAAQ,GAAGR,QAAQ,IAAIS,WAAW,CAACf,YAAY,CAAC;IAEtD,MAAMgB,MAAM,GAAAC,aAAA;MACVV,SAAS,EAAE1D,UAAU,uCAEEsD,OAAQ,IAC7B7C,mBAAmB,CAAC,IAAI,EAAEyC,QAAQ,EAAE,IAAI,CAACD,OAAO,CAAC,EACjD1C,oBAAoB,CAACuC,KAAK,CAAC,EAC3BY,SAAS,EACTE,UACF;IAAC,GACEE,UAAU,CACd;IAEDtD,qBAAqB,CAAC2D,MAAM,EAAEjB,QAAQ,EAAE,IAAI,CAACD,OAAO,CAAC;IAGrD7C,qBAAqB,CAAC,IAAI,CAAC0C,KAAK,EAAEqB,MAAM,CAAC;IAEzC,OACErE,KAAA,CAAAuE,aAAA,CAACnE,QAAQ;MAAC8C,MAAM,EAAEA;IAAO,GACvBlD,KAAA,CAAAuE,aAAA,CAACpE,OAAO,CAACqE,QAAQ,QACdC,IAAA,IAAqB;MAAA,IAApB;QAAEC;MAAY,CAAC,GAAAD,IAAA;MACf,MAAME,YAAY,GAAGpE,sCAAsC,CACzD,IAAI,CAACyC,KAAK,EACVT,4BAA4B,EAC5BmC,WAAW,CAAC9B,WACd,CAAC;MACD,OACE5C,KAAA,CAAAuE,aAAA,WAAYF,MAAM,EAChBrE,KAAA,CAAAuE,aAAA;QAAYX,SAAS,EAAC;MAA0C,GAC7DO,QAAQ,CAACnC,WACA,CAAC,EACbhC,KAAA,CAAAuE,aAAA,CAACK,UAAU;QACTlB,EAAE,EAAEA,EAAG;QACPN,QAAQ,EAAE/C,MAAM,CAAC+C,QAAQ,CAAE;QAC3ByB,IAAI,EAAEV,QAAS;QACfW,UAAU,EAAEvB,WAAY;QACxBwB,UAAU,EAAEC,gBAAgB,CAC1B1B,WAAW,EACX2B,UAAU,CAACxB,MAAM,CACnB,CAAE;QACFkB,YAAY,EAAEA;MAAa,CAC5B,CACK,CAAC;IAEb,CACgB,CACV,CAAC;EAEf;AACF;AAACO,eAAA,CAvHoBtC,WAAW,iBACTzC,OAAO;AAAA+E,eAAA,CADTtC,WAAW,kBAAA0B,aAAA;EA2B5Bb,MAAM,EAAE,CAAC;EACTP,MAAM,EAAE,IAAI;EACZK,WAAW,EAAE,QAAQ;EACrBC,OAAO,EAAE,QAAQ;EAEjBE,EAAE,EAAE,IAAI;EACRC,QAAQ,EAAE,IAAI;EAEdP,QAAQ,EAAE,KAAK;EACfS,KAAK,EAAE,IAAI;EACXD,SAAS,EAAE,IAAI;EACfG,QAAQ,EAAE;AAAI,GAEXxB,4BAA4B;AAAAd,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAxCdiB,WAAW,CAGvBuC,SAAS,GAAAb,aAAA,CAAAA,aAAA;EACdjB,YAAY,EAAEpD,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACzCuB,WAAW,EAAErD,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACxCwB,WAAW,EAAEtD,SAAS,CAACmF,KAAK,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;EAC5E5B,OAAO,EAAEvD,SAAS,CAACmF,KAAK,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;EAC/C3B,MAAM,EAAExD,SAAS,CAACoF,SAAS,CAAC,CAACpF,SAAS,CAAC6B,MAAM,EAAE7B,SAAS,CAACqF,MAAM,CAAC,CAAC;EACjE3B,QAAQ,EAAEnC,iBAAiB;EAC3BkC,EAAE,EAAEzD,SAAS,CAAC6B,MAAM;EACpBoB,MAAM,EAAEjD,SAAS,CAAC6B,MAAM;EAExBsB,QAAQ,EAAEnD,SAAS,CAACoF,SAAS,CAAC,CAACpF,SAAS,CAAC6B,MAAM,EAAE7B,SAAS,CAACsF,IAAI,CAAC;AAAC,GAE9D/E,gBAAgB;EAEnBqD,KAAK,EAAE5D,SAAS,CAAC6B,MAAM;EACvB8B,SAAS,EAAE3D,SAAS,CAAC6B,MAAM;EAC3BiC,QAAQ,EAAE9D,SAAS,CAACoF,SAAS,CAAC,CAC5BpF,SAAS,CAAC6B,MAAM,EAChB7B,SAAS,CAACuF,IAAI,EACdvF,SAAS,CAACwF,IAAI,CACf;AAAC;AAkGN,MAAMC,qBAAqB,GAAG,iBAAiB;AAE/C,OAAO,MAAMV,gBAAgB,GAAGA,CAACD,UAAU,EAAEtB,MAAM,KACjDA,MAAM,GACFsB,UAAU,CACPY,KAAK,CAACZ,UAAU,CAACa,MAAM,GAAGnC,MAAM,EAAEsB,UAAU,CAACa,MAAM,CAAC,CACpDC,OAAO,CAACH,qBAAqB,EAAE,GAAG,CAAC,GACtCX,UAAU,CAACc,OAAO,CAACH,qBAAqB,EAAE,GAAG,CAAC;AAEpD,OAAO,MAAMtB,WAAW,GAAIvC,WAAW,IAAK;EAC1C,MAAMiE,IAAI,GAAG5E,YAAY,CAAC6E,IAAI,CAC3BC,IAAI,IAAKA,IAAI,CAACnE,WAAW,KAAKA,WACjC,CAAC;EACD,OAAOiE,IAAI,IAAIG,WAAW,CAACpE,WAAW,CAAC;AACzC,CAAC;AAED,MAAMoE,WAAW,GAAIpE,WAAW,KAAM;EACpCA,WAAW;EACXG,WAAW,EAAE,EAAE;EACfC,WAAW,EAAE,EAAE;EACfC,UAAU,EAAEjB,aAAa;EACzBmB,QAAQ,EAAEtB,QAAQ,CAACoF,IAAI;EACvB7D,WAAW,EAAExB,WAAW,CAACqF,IAAI;EAC7B5D,SAAS,EAAEvB,aAAa,CAACmF;AAC3B,CAAC,CAAC;AAEFzE,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAAwE,aAAa,CAAChB,SAAS,GAAG;EACxBL,UAAU,EAAE7E,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACvC4C,YAAY,EAAE1E,SAAS,CAACkC,MAAM,CAACJ,UAAU;EACzCqB,QAAQ,EAAEnD,SAAS,CAACsF;AACtB,CAAC;AACDY,aAAa,CAAClD,YAAY,GAAG;EAC3BG,QAAQ,EAAE;AACZ,CAAC;AAED,SAAS+C,aAAaA,CAAAC,KAAA,EAAyC;EAAA,IAAxC;IAAEtB,UAAU;IAAEH,YAAY;IAAEvB;EAAS,CAAC,GAAAgD,KAAA;EAC3D,QAAQtB,UAAU;IAChB,KAAK,YAAY;MACf,OACE9E,KAAA,CAAAuE,aAAA;QACEX,SAAS,EAAE1D,UAAU,CACnB,qCAAqC,EACrCS,mBAAmB,CAAC,MAAM,EAAEyC,QAAQ,CACtC;MAAE,GAEFpD,KAAA,CAAAuE,aAAA;QAAKX,SAAS,EAAC;MAAoC,GACjD5D,KAAA,CAAAuE,aAAA,CAACjD,UAAU;QAAC+E,MAAM,EAAEvB;MAAW,CAAE,CAAC,EAClC9E,KAAA,CAAAuE,aAAA,CAAC3D,CAAC;QAAC0F,GAAG,EAAC;MAAU,GAAE3B,YAAY,CAAChC,eAAmB,CAChD,CACF,CAAC;IAEV,KAAK,SAAS;MACZ,OACE3C,KAAA,CAAAuE,aAAA;QACEX,SAAS,EAAE1D,UAAU,CACnB,qCAAqC,EACrCS,mBAAmB,CAAC,MAAM,EAAEyC,QAAQ,CACtC;MAAE,GAEFpD,KAAA,CAAAuE,aAAA;QAAKX,SAAS,EAAC;MAAoC,GACjD5D,KAAA,CAAAuE,aAAA,CAACjD,UAAU;QAAC+E,MAAM,EAAEvB;MAAW,CAAE,CAAC,EAClC9E,KAAA,CAAAuE,aAAA,CAAC3D,CAAC;QAAC0F,GAAG,EAAC;MAAU,GAAE3B,YAAY,CAACjC,YAAgB,CAC7C,CACF,CAAC;IAGV,KAAK,SAAS;MACZ,OACE1C,KAAA,CAAAuE,aAAA;QACEX,SAAS,EAAE1D,UAAU,CACnB,qCAAqC,EACrCS,mBAAmB,CAAC,MAAM,EAAEyC,QAAQ,CACtC;MAAE,GAEFpD,KAAA,CAAAuE,aAAA;QAAKX,SAAS,EAAC;MAAoC,GACjD5D,KAAA,CAAAuE,aAAA,CAACjD,UAAU;QAAC+E,MAAM,EAAEvB;MAAW,CAAE,CAAC,EAClC9E,KAAA,CAAAuE,aAAA,CAAC3D,CAAC;QAAC0F,GAAG,EAAC;MAAU,GAAE3B,YAAY,CAAClC,YAAgB,CAC7C,CACF,CAAC;IAGV,KAAK,QAAQ;IACb;MACE,OAAO,IAAI;EACf;AACF;AAEAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAA4E,QAAQ,CAACpB,SAAS,GAAG;EACnBJ,UAAU,EAAE9E,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACvC4C,YAAY,EAAE1E,SAAS,CAACkC,MAAM,CAACJ,UAAU;EACzCqB,QAAQ,EAAEnD,SAAS,CAACsF,IAAI,CAACxD;AAC3B,CAAC;AAED,SAASwE,QAAQA,CAAAC,KAAA,EAAyC;EAAA,IAAxC;IAAEzB,UAAU;IAAEJ,YAAY;IAAEvB;EAAS,CAAC,GAAAoD,KAAA;EACtD,OACExG,KAAA,CAAAuE,aAAA;IACEX,SAAS,EAAE1D,UAAU,CACnB,iCAAiC,EACjCS,mBAAmB,CAAC,MAAM,EAAEyC,QAAQ,CACtC;EAAE,GAEFpD,KAAA,CAAAuE,aAAA,CAAC3D,CAAC;IACAgD,SAAS,EAAC,gCAAgC;IAC1C6C,QAAQ,EAAC;EAAgB,GAExB9B,YAAY,CAACnC,gBACb,CAAC,EACJxC,KAAA,CAAAuE,aAAA,CAAC3D,CAAC;IAACgD,SAAS,EAAC;EAAiC,GAAEmB,UAAc,CAC1D,CAAC;AAEX;AAEAtD,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAAiD,UAAU,CAACO,SAAS,GAAG;EACrBzB,EAAE,EAAEzD,SAAS,CAAC6B,MAAM;EACpBsB,QAAQ,EAAEnD,SAAS,CAACsF,IAAI;EACxBV,IAAI,EAAErD,iBAAiB,CAACO,UAAU;EAClC+C,UAAU,EAAE7E,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACvCgD,UAAU,EAAE9E,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACvC4C,YAAY,EAAE1E,SAAS,CAACkC,MAAM,CAACJ;AACjC,CAAC;AACD6C,UAAU,CAAC3B,YAAY,GAAG;EACxBS,EAAE,EAAE,IAAI;EACRN,QAAQ,EAAE;AACZ,CAAC;AAED,SAASwB,UAAUA,CAAA8B,KAAA,EAOhB;EAAA,IAAAC,gBAAA;EAAA,IAPiB;IAClB9B,IAAI;IACJC,UAAU;IACVC,UAAU;IACVrB,EAAE;IACFN,QAAQ;IACRuB;EACF,CAAC,GAAA+B,KAAA;EACC,OACE1G,KAAA,CAAAuE,aAAA,QAAAqC,QAAA;IACElD,EAAE,EAAEA,EAAG;IACPE,SAAS,8CAEciB,IAAI,CAAC3C,UAAU,CAAC2E,SAAU;EAC/C,GACG,CAAAF,gBAAA,GAAA9B,IAAI,CAAC3C,UAAU,cAAAyE,gBAAA,eAAfA,gBAAA,CAAiBG,eAAe,GACjC;IACEC,KAAK,EAAE;MACLD,eAAe,EAAG,OAAMjC,IAAI,CAAC3C,UAAU,CAAC4E,eAAgB;IAC1D;EACF,CAAC,GACD,CAAC,CAAC,GAEN9G,KAAA,CAAAuE,aAAA;IAAKX,SAAS,EAAC;EAAiC,GAC9C5D,KAAA,CAAAuE,aAAA;IAAKX,SAAS,EAAC;EAA6B,GAC1C5D,KAAA,CAAAuE,aAAA,CAAClD,QAAQ;IAAC2F,QAAQ,EAAEnC,IAAI,CAAC3C,UAAU,CAAC+E;EAAS,CAAE,CAAC,EAChDjH,KAAA,CAAAuE,aAAA,CAACpD,WAAW;IACVkB,WAAW,EAAEwC,IAAI,CAACxC,WAAY;IAC9BH,UAAU,EAAE2C,IAAI,CAAC3C;EAAW,CAC7B,CAAC,EACFlC,KAAA,CAAAuE,aAAA,CAAChD,aAAa;IACZe,SAAS,EAAEuC,IAAI,CAACvC,SAAU;IAC1BJ,UAAU,EAAE2C,IAAI,CAAC3C;EAAW,CAC7B,CACE,CAAC,EACNlC,KAAA,CAAAuE,aAAA;IAAKX,SAAS,EAAC;EAAgC,GAC7C5D,KAAA,CAAAuE,aAAA,CAACgC,QAAQ;IACPxB,UAAU,EAAEA,UAAW;IACvB9C,WAAW,EAAE4C,IAAI,CAAC5C,WAAY;IAC9B0C,YAAY,EAAEA,YAAa;IAC3BvB,QAAQ,EAAEA;EAAS,CACpB,CAAC,EACFpD,KAAA,CAAAuE,aAAA,CAACnD,QAAQ;IACPgB,QAAQ,EAAEyC,IAAI,CAACzC,QAAS;IACxBF,UAAU,EAAE2C,IAAI,CAAC3C;EAAW,CAC7B,CACE,CACF,CAAC,EACNlC,KAAA,CAAAuE,aAAA,CAAC4B,aAAa;IACZ/C,QAAQ,EAAEA,QAAS;IACnB0B,UAAU,EAAEA,UAAW;IACvBH,YAAY,EAAEA;EAAa,CAC5B,CACE,CAAC;AAEV"}
1	+ {"version":3,"file":"PaymentCard.js","names":["React","PropTypes","classnames","Context","Provider","isTrue","validateDOMAttributes","extendPropsWithContextInClassComponent","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","P","ProductType","CardType","BankAxeptType","Designs","defaultDesign","cardProducts","ProductLogo","TypeLogo","BankLogo","StatusIcon","BankAxeptLogo","cardDataPropTypes","process","env","NODE_ENV","shape","productCode","string","isRequired","productName","displayName","cardDesign","object","cardType","productType","bankAxept","translationDefaultPropsProps","text_card_number","text_expired","text_blocked","text_not_active","PaymentCard","PureComponent","render","_this$context","props","defaultProps","locale","context","skeleton","product_code","card_number","card_status","variant","digits","id","raw_data","className","class","_className","children","attributes","_objectWithoutProperties","_excluded","cardData","getCardData","params","_objectSpread","createElement","Consumer","_ref","translation","translations","NormalCard","data","cardStatus","cardNumber","formatCardNumber","parseFloat","_defineProperty","propTypes","oneOf","oneOfType","number","bool","node","func","formatCardNumberRegex","slice","length","replace","card","find","item","defaultCard","None","StatusOverlay","_ref2","status","top","CardText","_ref3","modifier","_ref4","_data$cardDesign","_extends","cardStyle","backgroundImage","style","logoType","bankLogo"],"sources":["../../../../src/extensions/payment-card/PaymentCard.js"],"sourcesContent":["/*\n Web PaymentCard Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport {\n isTrue,\n validateDOMAttributes,\n extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport {\n spacingPropTypes,\n createSpacingClasses,\n} from '../../components/space/SpacingHelper'\nimport {\n skeletonDOMAttributes,\n createSkeletonClass,\n} from '../../components/skeleton/SkeletonHelper'\nimport P from '../../elements/P'\n\nimport { ProductType, CardType, BankAxeptType } from './utils/Types'\nimport Designs, { defaultDesign } from './utils/CardDesigns'\nimport cardProducts from './utils/cardProducts'\nimport {\n ProductLogo,\n TypeLogo,\n BankLogo,\n StatusIcon,\n BankAxeptLogo,\n} from './icons'\n\nexport { Designs, ProductType, CardType, BankAxeptType }\n\nconst cardDataPropTypes = PropTypes.shape({\n productCode: PropTypes.string.isRequired,\n productName: PropTypes.string.isRequired,\n displayName: PropTypes.string.isRequired,\n cardDesign: PropTypes.object.isRequired,\n cardType: PropTypes.object.isRequired,\n productType: PropTypes.object.isRequired,\n bankAxept: PropTypes.object.isRequired,\n})\n\nconst translationDefaultPropsProps = {\n text_card_number: null,\n text_expired: null,\n text_blocked: null,\n text_not_active: null,\n}\n\nexport default class PaymentCard extends React.PureComponent {\n static contextType = Context\n\n static propTypes = {\n product_code: PropTypes.string.isRequired,\n card_number: PropTypes.string.isRequired,\n card_status: PropTypes.oneOf([\n 'active',\n 'blocked',\n 'expired',\n 'not_active',\n ]),\n variant: PropTypes.oneOf(['normal', 'compact']),\n digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n raw_data: cardDataPropTypes,\n id: PropTypes.string,\n locale: PropTypes.string,\n\n skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n ...spacingPropTypes,\n\n class: PropTypes.string,\n className: PropTypes.string,\n children: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n PropTypes.func,\n ]),\n }\n\n static defaultProps = {\n digits: 8,\n locale: null,\n card_status: 'active',\n variant: 'normal',\n\n id: null,\n raw_data: null,\n\n skeleton: false,\n class: null,\n className: null,\n children: null,\n\n ...translationDefaultPropsProps,\n }\n\n render() {\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContextInClassComponent(\n this.props,\n PaymentCard.defaultProps,\n { locale: this.context.locale },\n { skeleton: this.context?.skeleton }\n )\n\n const {\n product_code,\n card_number,\n card_status,\n variant,\n digits,\n id,\n raw_data,\n locale,\n skeleton,\n className,\n class: _className,\n children, //eslint-disable-line\n ...attributes\n } = props\n\n const cardData = raw_data \|\| getCardData(product_code)\n\n const params = {\n className: classnames(\n 'dnb-payment-card',\n `dnb-payment-card--${variant}`,\n createSkeletonClass(null, skeleton, this.context),\n createSpacingClasses(props),\n className,\n _className\n ),\n ...attributes,\n }\n\n skeletonDOMAttributes(params, skeleton, this.context)\n\n // also used for code markup simulation\n validateDOMAttributes(this.props, params)\n\n return (\n <Provider locale={locale}>\n <Context.Consumer>\n {({ translation }) => {\n const translations = extendPropsWithContextInClassComponent(\n this.props,\n translationDefaultPropsProps,\n translation.PaymentCard\n )\n return (\n <figure {...params}>\n <figcaption className=\"dnb-sr-only dnb-payment-card__figcaption\">\n {cardData.productName}\n </figcaption>\n <NormalCard\n id={id}\n skeleton={isTrue(skeleton)}\n data={cardData}\n cardStatus={card_status}\n cardNumber={formatCardNumber(\n card_number,\n parseFloat(digits)\n )}\n translations={translations}\n />\n </figure>\n )\n }}\n </Context.Consumer>\n </Provider>\n )\n }\n}\n\nconst formatCardNumberRegex = /(?=(?:....)*$)/g\n\nexport const formatCardNumber = (cardNumber, digits) =>\n digits\n ? cardNumber\n .slice(cardNumber.length - digits, cardNumber.length)\n .replace(formatCardNumberRegex, ' ')\n : cardNumber.replace(formatCardNumberRegex, ' ')\n\nexport const getCardData = (productCode) => {\n const card = cardProducts.find(\n (item) => item.productCode === productCode\n )\n return card \|\| defaultCard(productCode)\n}\n\nconst defaultCard = (productCode) => ({\n productCode,\n productName: '',\n displayName: '',\n cardDesign: defaultDesign,\n cardType: CardType.None,\n productType: ProductType.None,\n bankAxept: BankAxeptType.None,\n})\n\nStatusOverlay.propTypes = {\n cardStatus: PropTypes.string.isRequired,\n translations: PropTypes.object.isRequired,\n skeleton: PropTypes.bool,\n}\nStatusOverlay.defaultProps = {\n skeleton: false,\n}\n\nfunction StatusOverlay({ cardStatus, translations, skeleton }) {\n switch (cardStatus) {\n case 'not_active':\n return (\n <div\n className={classnames(\n 'dnb-payment-card__blocking__overlay',\n createSkeletonClass('font', skeleton)\n )}\n >\n <div className=\"dnb-payment-card__blocking__center\">\n <StatusIcon status={cardStatus} />\n <P top=\"xx-small\">{translations.text_not_active}</P>\n </div>\n </div>\n )\n case 'blocked':\n return (\n <div\n className={classnames(\n 'dnb-payment-card__blocking__overlay',\n createSkeletonClass('font', skeleton)\n )}\n >\n <div className=\"dnb-payment-card__blocking__center\">\n <StatusIcon status={cardStatus} />\n <P top=\"xx-small\">{translations.text_blocked}</P>\n </div>\n </div>\n )\n\n case 'expired':\n return (\n <div\n className={classnames(\n 'dnb-payment-card__blocking__overlay',\n createSkeletonClass('font', skeleton)\n )}\n >\n <div className=\"dnb-payment-card__blocking__center\">\n <StatusIcon status={cardStatus} />\n <P top=\"xx-small\">{translations.text_expired}</P>\n </div>\n </div>\n )\n\n case 'active':\n default:\n return null\n }\n}\n\nCardText.propTypes = {\n cardNumber: PropTypes.string.isRequired,\n translations: PropTypes.object.isRequired,\n skeleton: PropTypes.bool.isRequired,\n}\n\nfunction CardText({ cardNumber, translations, skeleton }) {\n return (\n <span\n className={classnames(\n 'dnb-payment-card__card__wrapper',\n createSkeletonClass('font', skeleton)\n )}\n >\n <P\n className=\"dnb-payment-card__card__holder\"\n modifier=\"x-small medium\"\n >\n {translations.text_card_number}\n </P>\n <P className=\"dnb-payment-card__card__numbers\">{cardNumber}</P>\n </span>\n )\n}\n\nNormalCard.propTypes = {\n id: PropTypes.string,\n skeleton: PropTypes.bool,\n data: cardDataPropTypes.isRequired,\n cardStatus: PropTypes.string.isRequired,\n cardNumber: PropTypes.string.isRequired,\n translations: PropTypes.object.isRequired,\n}\nNormalCard.defaultProps = {\n id: null,\n skeleton: null,\n}\n\nfunction NormalCard({\n data,\n cardStatus,\n cardNumber,\n id,\n skeleton,\n translations,\n}) {\n return (\n <div\n id={id}\n className={classnames(\n 'dnb-payment-card__card',\n `dnb-payment-card__${data.cardDesign.cardStyle}`\n )}\n {...(data.cardDesign?.backgroundImage\n ? {\n style: {\n backgroundImage: `url(${data.cardDesign.backgroundImage})`,\n },\n }\n : {})}\n >\n <div className=\"dnb-payment-card__card__content\">\n <div className=\"dnb-payment-card__card__top\">\n <BankLogo logoType={data.cardDesign.bankLogo} />\n <ProductLogo\n productType={data.productType}\n cardDesign={data.cardDesign}\n />\n <BankAxeptLogo\n bankAxept={data.bankAxept}\n cardDesign={data.cardDesign}\n />\n </div>\n <div className=\"dnb-payment-card__card__bottom\">\n <CardText\n cardNumber={cardNumber}\n displayName={data.displayName}\n translations={translations}\n skeleton={skeleton}\n />\n <TypeLogo\n cardType={data.cardType}\n cardDesign={data.cardDesign}\n />\n </div>\n </div>\n <StatusOverlay\n skeleton={skeleton}\n cardStatus={cardStatus}\n translations={translations}\n />\n </div>\n )\n}\n"],"mappings":"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"}

package/extensions/payment-card/style/dnb-payment-card.css CHANGED Viewed

@@ -54,10 +54,10 @@
 }
 .dnb-payment-card__card {
   position: relative;
-  width: 85.6mm;
-  height: 53.98mm;
-  padding: 4mm;
-  border-radius: 3.48mm;
+  width: 343px;
+  height: 216px;
+  padding: 16px;
+  border-radius: 12px;
   border: 1px solid;
   border-color: rgba(255, 255, 255, 0.1) transparent rgba(0, 0, 0, 0.2) transparent;
   color: var(--color-white);
@@ -195,7 +195,7 @@
 .dnb-payment-card--compact .dnb-payment-card__card {
   padding: 0;
   height: 32.8mm;
-  border-radius: 3.48mm 3.48mm 0 0;
+  border-radius: 12px 12px 0 0;
   box-shadow: var(--shadow-default);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__top {
@@ -213,14 +213,14 @@
   background-color: var(--color-white);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__wrapper {
-  padding: 1.5mm 6mm;
+  padding: 6px 22px;
   color: var(--color-black-80);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__numbers {
   font-size: var(--font-size-basis);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__credit-type {
-  top: 8px;
+  top: 10px;
   right: 4px;
   bottom: auto;
 }

package/extensions/payment-card/style/dnb-payment-card.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:~~3.48mm~~;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:~~53.98mm~~;padding:~~4mm~~;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:~~85.6mm~~}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:~~3.48mm~~ ~~3.48mm~~ 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:~~1.5mm~~ ~~6mm~~}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:~~8px~~}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
1	+ .dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/extensions/payment-card/style/dnb-payment-card.scss CHANGED Viewed

@@ -55,11 +55,11 @@
   &__card {
     position: relative;
-    width: 85.6mm;
-    height: 53.98mm;
-    padding: 4mm;
+    width: 343px;
+    height: 216px;
+    padding: 16px;
-    border-radius: 3.48mm;
+    border-radius: 12px;
     border: 1px solid;
     border-color: rgb(255 255 255 / 10%) transparent rgb(0 0 0 / 20%)
@@ -244,7 +244,7 @@
     padding: 0;
     height: 32.8mm;
-    border-radius: 3.48mm 3.48mm 0 0;
+    border-radius: 12px 12px 0 0;
     box-shadow: var(--shadow-default);
     &__top {
@@ -266,7 +266,7 @@
     }
     &__wrapper {
-      padding: 1.5mm 6mm;
+      padding: 6px 22px;
       color: var(--color-black-80);
     }
@@ -275,7 +275,7 @@
     }
     &__credit-type {
-      top: 8px;
+      top: 10px;
       right: 4px;
       bottom: auto;
     }

package/extensions/payment-card/utils/backgrounds/ung.js CHANGED Viewed

@@ -1,3 +1,3 @@
-const base64EncodedImage = "data:image/jpeg;base64,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";
+const base64EncodedImage = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAQEBAQEBAQEBAQGBgUGBggHBwcHCAwJCQkJCQwTDA4MDA4MExEUEA8QFBEeFxUVFx4iHRsdIiolJSo0MjRERFwBBAQEBAQEBAQEBAYGBQYGCAcHBwcIDAkJCQkJDBMMDgwMDgwTERQQDxAUER4XFRUXHiIdGx0iKiUlKjQyNEREXP/CABEIANgBVwMBIgACEQEDEQH/xAAbAAEBAQEBAQEBAAAAAAAAAAAAAQIDBAUGCP/aAAgBAQAAAAD+/GmdEoSwpx7IqFITSLFlSwWC559glSwsWV5+5ULAzoce1Ss+X12JqSblxuLKhZjdIoBPD7dQqJbz6GNKhZZRLKmbazVSglM6iNRUmoLKElsqKgsWBjWksCUsBy6gqVLCyyyosCoFJSAVFlhUssUxoqFILJb5u9sqLjn3cOukpM6pjRm6nwPvqIKioqeb0gVAqVOE9FlioE1EVRJoixUsWUSaizO/g79vtRbOPeBYPJn3HPpHHsWC8estEqWCxZFolJKVnUWKJRAKZtEoIAAsmhhqwVFgzdMtJQlZ0ebvolJRFZazLpKSpSLAssqUzpKRLUsoIsUk1KJZ8D9BCys0qLDj2KikLCxx66lQsRQFJUuNzl2iUvPpLKiakm4mpcblzVZtRSFDNWRqWLJaEY6ZoqUis0irFSiJqLnTNVFASahc0WKlgCpLZZYMbCaRx7xUlMdCLJoJSBYFAgBZUM6rE6JU+d9FSWSjh3sVm0//xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAIAQIQAAAAAAAAABrIAAAAAAAAAAFhYAAABUALAAAAAAWAAAAVAAAAWAAAAAAAAAsCwWWA/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQACA//aAAgBAxAAAADOhikpEkRoqpGufQSmKmoShRJqJokkqqaiqSYrOxxpJHOrOhoLRIZug51CZ0jlpGoSYmhKRhzqqGKaoRhINIkkaEqpEcsiMVNQlUiTVDRI0MI0GinKwazoRv/EACwQAAECBQMEAQQCAwAAAAAAAAECEQAQICExEjBBA1FhcSITQEKBMlIjkbH/2gAIAQEAAT8COLQgrLhaGbnvMvwJ53XEvkCbWoDzw52sycDb5h7Q63/jaAAHYZl+qTZ4SG97b3EOeBHufFLa1eBUbNAgTcYgeJlQTSFPGYFXTWVJDm4JSYORRZwaAdWKFq0ywfdYvw0AaZcwU0MIsLUJ/LYUr6awNHxV+XYwU3BkYaBa1DDLUHj3QUkxcDvDzbNTvg7YBSfEP3gXnpYqIOYGpvkz+KMHOafFQDSbEjqcNzNrg7LYhz/WhrgzHiSSrmY42ceYHrYPeWopy0w+wS0yHqHMHU7ho1ZtLtsgu8wG+wvxJnzttX5Eg/MmA3nm4oCjYHMNJqDa5jNeZOBQpWh1H+IEJOpLszxiWJ92mU31PCnBe0+rgQgTIekAh3jzQSAzmGfVquk8SIeACEkQk8Wn03+p1EqNgbGhmmoagUnBgg2aPG6U6bgmp3jFD52up0h1AOCOYTqw7gZel2tSS0XeYIUARQA1ApUl/dPqtnIOy0JGl+1X5e5db6yBq6Q5vCup1umgKKdR5aOl1CsF0kHzO7QmzzOLQHSb0swhgbxiSmgXhUA9S8BasNQRdz3oKVObwMUNd4zaNIE9J02kkvVjYzIh+ZtcQHDvDsr3V5qzmkBufuH+wvNxq0nJkRahpm0y7ECGs0A5mHa/eGP9qh8Xm1ALzu5MXH7M7uIbsYv3qNqhietuonpgO/MAu9APigBqBzTzmZtBUfjbNBPihrvM2EZ2OIAA3NVyNlrvuhuJlufsOgrqrUtSiPp8SZPagMLDb/5QolwE7ANAFrwwnaPNHVRqQUjnPqAwAADCpxaO1F3EMKPE3kMl81G8kGxeXLRd/NCkqOC0e6EZVsAcPzCn1JkYPuA/NCUqGaOoMf6oKmpbS7U43Ap7UEYPMarqcMBzAIUHBffF+IZ4zplqAzPkCge6ez08iTNaBiQIOJYgY9z/AHTfaIFng4gETekz0pmXs1SW4jUxudkWmABiYfmkyUlxAGw8lXDDZHMtPesrZTKYDgvLMkgh3+1fn7Jgcze7UX5qKmIDWoJIZhHyI7Xmyhg0fT/yg/iE48195G12gFxRqUW+Mz7gPzNQyeYxHE//xAAoEAACAgICAwACAgIDAQAAAAABEQAhEDFBUSBhcYGhMLGRwdHh8fD/2gAIAQEAAT8hEty9S87oBY+MGwgVCDkyQAIM9Lieh4NC8f1Nx7dQABnvAIUCMW285tm4RNhZQQFme/F7m4+DvqH5CtuDg7BWQ+cn1A1e/Ch7GArm/nMYKH3JSmlDM/cbvh3OUqxb9YNHFce5bKt+sF0vC368CAQjqcHRcNgsHeptJg9TRV8U9q4XxgviES12fcF8eBkj4aM5W7hsEumVklPxFS0Gdx+AJdmvUAq8mp1CBtCY3qv8YBPWTYIhrEPdJEMpBGSQNmB0L1k6nO88y36yQhfGsBCsryKrh3BZzFjbZeEWLrqNK49QWHkk2JoAbcrnIEEjya/gawOZ4e2Ma1gGNqGnuAHBs34JoAgLAMrjAl/InwuAdCvsoU3MIBDk5Qj2l0vAhjagAOjwIHPkWioYBtP3OSJQkY1ghwO613YCn/kjwYs9Qn58KFP1jrwRTrCUKrWDBltroT7g/A8ULOCVxjopQqCLBuECn3DsEsEW/UAAQWR1CAx/5wbBgEAK9+BD3kF8KINq4HS/aETtMK3AAKGEG81CGxDYIEIaDoFASXSwkFsl5D5wsAIJuLvFsaUAj4wQ6PgVgS0YAFsLcDIHDWCC+k7wXxlUhURYLw+C1PkDV7gBQljX7lEr853ggEIjwJAXvHcIYRgeqrUOlPbweADki2K7ifMdM+C55wgL8AXNa7wQQUBneKNX6l3r1AwgsEOjA9Es+HKmmQL8GGucEBzys3J5LRW4uN7vqFiL1xggSCePAgB0AMygB2Nzk14bvAI0ODs8xg6yw/dKhwlQe3RgAHAABDO7Li5wdQt1xCC4hzkGZojiBAfd3HgAI+ATfMNGVGC9F4IggSQAzsw1CQVNYUIajBj6YYi1FrInUoRaLmsgGXOQ9JIbeAAQxDdhsZYa8qsj54EYcOoB34gdYANMhWhzO7gryK0efAIkkpgdiAF4Qs3CJNECQd9ZKqpQ+xWE0NZ1tnLEu/XPzkDbX48N0YK7QcwNBp4oYLNEPcAQAww14EOqh9HJFjXil1vcKYOPWGDzCQLJwCAm/wDhg1ANOW+YB0JQWHkUC3koV24AUH9yxL+kAC5B/Rw7WDYIgBVoQnUuAAEIhKLOrhID3BJAQ/6hxBArjUZbWjihORcIScVQevAkgIAaZhPRQ0DlfalCmISgRScIB2MelLcLW7hRsHyAAIZKV4/qIWe94BFhg1KZLE65g3buoSVsB+R5IPt4DZwQijncJAIHeSM2wSBvPHUH2/4gN3D0m4XxLxwrgIIYwAOsczndfxEPRWB2lFax9xy5zRDHRw8Q7bcdrKC1eSCUbrGxKIvUaw2twhLBIwgHAEX2EA+wby3qH1OYCG6bmxrBAt4WEGjjRfcF9Q0oSUcgH4wABqHV1zCbBKLP7gCYesXgkaxbFVkkCzAGpf3LmPaWoCFIUkag+ZIWyH3wQXgT/LA95o9w4yW3XXMSLk/U6yQEIj4Gjpk7E4CAYwSg41vBAOxC1W8EHkj6g1D+C2X+PAMRsf1l2fUYOAANCWyxXGOeSeuh/AXwPAgEIxLPL/WQIPhN5Vuc+oCDYjGnLh1uHYRHuf3A1e4ha3vBIAJYq4fa6xR4rBcAQZv/AB4AY5CGFC1W5TXJjA2Z0saZcGrMRe9NQrnjIuy8iQwO4CDqMforJfEJXY7iuMjYPXcCNB8x7gIOoSr1bmB6BA68mN3qEoh34cq0P3DcTzNawUETCr7bygKicEvC3PCwn4AgXBBg5O+oQoK/mHa0Khz0Gh7gCzwI/uBrTwHm1WAFzhevAgp2fiGCBWCQaP4jJhAoJcgtZL4hmzB34M32R/lghkHrD6AfJgLAPgDBVcCMV78NOTHTyrBeoXSWQAGvuSUHHCQRAfg8g0MBJSwR2/8AIuIPWeXHZCPgKAED536wQCj14EhacGEARERYCPYwwqfck/Tz4AQ20tnrPyMih9rAChoal1UJIAqPOEIhQNwSLbhKm0Y0KEJgSciCSDQCF8eG3CgLGlFrDL1A+Ri36lv1N8QQk6B/coR6hXIrceA3BH3LB5wDUfEBYa/zDQCP3hhp3CCjB9Y6c0KiQR+cQg6MkogI3kkDZyCf/GOwEYgZoE1Zm7jhRR914WC7xoED/cALSeEElWaFCWBVmAv/AHCATO5q4Kvrlo/Y/XizLgze4FJ2DYPj7IXGNjHZsesAiwMYv1HFGTxjioCw8cvN35ENXj5ipRwAIHAwk0AHgukMKlrJfHmAuSfuSggNu8a1E9qeASdhYDCmXuW3woQ6hXMdpbFVhWC5uASYNh/2ZLBcXr1ndTZjhFpjv7i368SWg3ioixj0q+oGg940IOlQAjZeAJ6TZ7V8yEoGqcAAfIbpn//EACQQAQEAAgICAwEBAQEBAQAAAAERACEQMUFRIGFxgZGxwdGh/9oACAEBAAE/EGlXWVM6uGQE3fkffBUoPkwk2G/x++TCo6c0MqHbx+Z0Q6NB8EWWjFCVC6MVI67VXrBAIiZrQQMrihG1Xhc0nYPAC09FS/p9cgFUj0esuJ9Qe/vnYRhZ2zIX2nee78AKDwxwQUR/MOiGtQ4pImswNNpP9OJiddXBuzgeY7euaj5TWaGvtPgyLJQ34MZEwvTYHUMSLnLSHnUa5SAln5Xl4rBD00iOKzuRtwAIAHoz6DTii0g7bThFQd8/4420Ju5457+tSex+CDau8NBiKfw85uWw3ovxyQho03ZwnQNtmqf3NyEhpgBjBMc0MC/fCBrXADRCnt9M6gYhACr7ms3un5yBHYF+9Yl3MI14+nGSKtT1eQNC068GAyIiFx0LOGAdpobwZJR49f7mwbL3x7mMra7X+pMMlaaJ4cIiqlXSvBBY79+ORsEolOzBhFiaWmtH7gDBqo9oeuT1IMoKUQTo43XWKJsm1wRJQVHZ5mI9pHU7uffAWaVAdvXfAOAR09XvDr4tRC944kPXzkxs+hwFTVNvH5gItHcXm3eICHfvXIjF3d4VibCGsURj6vJ3IRD6PhDnd71jy9UsQ+3V1M27LsnCyGqNMZEiSC4uhbK8oMvjNVIVoYAA7LvBiRDWuHRHTHoN7+D2jSPf2y10c07xsED1erykNnvch3Ceb3MUCrxvGQFXkzubQLPXwREGtl8YR2NHgbdJGb5KJRSXOmUS/wClwoa/em/vDSHp7/vARTpuJHvruyghrvzmr0F3VF0x6wRsemcsFrBiCW1X4B1h5mnCxEWvwsBtavg9cFH7KPOusbqGb241FP4eMsLJwzZoNH78mF3ZyAdGAIG2XhIifzEERNJkwNKsOp6wCJVaUJwISpfJ3npkobNuXA129J6eE0y0NzZWmt/cAVdWs9GORHYERfxyj04IBlJcg3Q5Q7mAIKUeWqv9Z41pL5mQjlt/+MGVvUUeA0lb78YR4R93jwO5LmrYUwId3KeEa0pMNx2d42VNLRt93EjbOl2cBPZtKGr4mJZ9N4T3Brr7wRKYhRTZ1kbbqdYwJr24Vu973MLBcet0794tuis++ACFE3jJHrrJsnQSY7Exo1avcTziKrRKsMcpAlHejC7r+YlhQWyYKtE3r7wITNrBJ25Sh74I8EQzsGBEmnjSCOUaY2Ol8XNDUjc6ubQe2vbkgJSxrxjAhpwpUu8Q0v6ezAAA6MVCRwIAX+8idkUpvEEl8j/mbUJrU3gIGnCRZABV6yeqb/D6xsZLhkCCannlZY8NOzHsEa8dZQhk9bwANfuKG1nABdK7ZwKEim58DNB/pMj7LTX3wpUgUvXG9ArEvaIdM1jprOACFMID2Rk4SzikeSXEizFh2uXRdcpC9hTgIXt9m+EEjhd4GL4tk5YYWNZuBRejthMVPA6f3KKnr6wFKqnITFsjk9BhqAkGCoUBI+8o8KAr0GCAHSUymt4YtgU43C2uu1cKKsZm7wpCs+1nrCjMhDAaaaudgXe1qq8GDgck0PgvccinlJeLSwlm+nswhNrCryhFink52MsLtH1iDRt1T94jjVutb+AS10B+sK+pqG4esIi6k36+E+VkBp0e81tADACb35udaM26ryY1GlDSR/Fxw4EG/U++HHhIuQh1elxQVQMG3U4eZlV5bCEKO2uz+5NIVD05osTYmjDgRXsBcLvefhy7JhbAvb+chAO4ecuO2vbFj5oCjHXtOG6nveN8e86q4duinSRwyALz5gbXUr7wBepubxHUZvIaZ8B40f8As5m7gYF63ZuIiWY4BYG1dbIu19rgBXe/t4L5w9tbf8wKqKW+DOuYNu5zstLdMsyTXTHS+L4wZ+MA+/eNjO8NG/W8vBOlI/0eUEFBesEE7UnI1enrKe8diYDRs34EAhRySdXBlVoe3/swR2OL2IXCOxuSpiIL0Z2Bom83XZMkX2l50HoMAKI3zgUkH3ih28IoEWtN/FUL0z7YcSvZexw1NPoPWM850gP9wWAMWFyd1SzwA4GUxVOqIT/uTKyeijpQMn+zL06784g9g4I2YIyfMHtxUSNN7uIMp1wRm1NKmUmab7UN746Y7Fty9mCh0iYTFdHlwQu4bm9Eqh6rgFQCtcSdAYodhmlYCxzaPHUYrw43TvdHbJsRsg6rxNABXEVCAtPeAQxeERNnuXgAIEMpZd5tLAQS/mTmvCOKj0ZdC8J73ALEhHfTg6xKJ9+MBhIPnhsUOYPo6wJhCNPpwWCWizWvkY6jnd8OBVEej+3Jp6Yr8wkEaOxwx6LOAQI/RvDROHQCbe35jkIawEloAHQf+4bB6+Kx8Anwip7L+zF8HaMwQC7F/TNUdu5ij7qa5sFrtdBPXEVUrD9y8CuxWPUQjT8YVfigrYWg+MmUho4IPXx7PWEdyToMLN5Iz0Ib252D4GW0s0euKwTUa4qBRWo+/ig/FIohvEtunTSOsAh+hH/5M3T1idFsmT0UCjA7j1TycVHWRE2OTO9lyFvmTEomCp6JfMxLNpgBo9r/ALm8JRpxBzZaenLLCwfiG8I06CO8LesH2ZApY046YvQejCQWGqdnq4Xy04AKhMqdL94ihui6w0JbE8D6zW5ROnTvjR1oCLrAmjAatUu3HCQAVN/WXYRxFAKoHDXKwfQ85IhANenAMEPWeIh2v/MjKiI7MDHZq1O+KCJK9HBC3e9fRwkFbB/FnCwFK1vXIKgHtwRFLsV7w+8/MdhCfprog71j36P7BkbdN8+bJpEvw7mSshPgmwkjGxmJQRHyciaKbQ6wGvpn7eCFrtYt4AtAFO5h70u/85DxHuHXwoJKE698qx0TVmsMLR4tQsOjECqEua7w2EnpxhSMaHNz7xsGh2LkXwqvtXzgS7Xh2aU4povfIqAAfgLUk0Xv25KGPTbhQCPv+8KKBWswZw6V7zd+sQqN6usEs2m+Qd7XgRKNOISTsv58HQienAwZW0GXF6OJwoVwQCdPMfZJjVCGp+3AaUzcwp4uHazvWBYI+zEwF5D3MfpCGXAAMfJDDRcTW68OrQqsA9udQda8ezdymx4LQD9L+MtLzoCQFOQZdOb0j4XKRUo/sxBQD24q9Eu/zjo2ne+jGmkvlNGAFB4IwaPmue24oFXEqBIvlfv8MLC94obWZrkSO9DCmYCiSbMDW9i/TnaK0Wk7xz10UPlcECGki964u0zTvVv0XfnB2xkS9nGixud4bcLYahbQdh9prIPQgkjij5NPLq6wcX7TDYe8464m7A9etsQkrojswAQAfWLMaMTcPSuVRBfBrWBNAAGsQSJTEBu5cRolMM3pr0OgeERQQbs84EujbyDelTrQ7xsoBbHrKVIe5T5s4N4CBGacZBCIaqPbebBVqu8QRHOtGaSIxBdMOrZ9evhN1Kyv1Xh7BIq7++AgAO7zdhiOpFLvfDOu91ov3xpibMPQthU2XqWYUMrgu0nbxCrNuaJour6ykFlpaTriULxRckT9d8bSRr8bxITAp4AwzekpcWCsA5Zalte8khY9B51/XPSQP1cYEO5+75aqdtHTcF1Bd31zpTtV+vJM+gw0ECPpz8yjS9cR97Howr9CWhSuvGmCHGlVNcM85PI9SXWFSEm/Dg2/TOEomDYLCVyJ1a4KMbVPg+5NhhyoOsVGNzuJ5/5DhUR3g9HBEEROHAaQv8eDBGxGM5D2q3qTDsTpOWx0s1cigSxdDgKnluKiJ+jL1BrvfRjovUjw5CrNuK1CtfZko7Tv6Os1NLsNZsxeGK6awwwnyP8A4cnahsneautp38Nfq/25ulLqOIVPhpwIigPL5/MSLJ+m8fhp/bnRE02TbmoXo6pjSRG+P1jkdi4GxouEAr0cEVgGaTG6hd8DIBZeNMmhbtH+TIEh6vTkqh9COIKQOhXCQYooZDA13eg4qOl8XGxkswpGzNs1kEDPQYHhtSuxxN4h29uU2CXBGh4zaA+ho4FTZMrQJHfIKpvzF/xn3EWzWLBbQTSmnLYRe5igUgYIANHExJLo+sOoFfeN1C7z+8FUsdB9OFhe81G5Gzwyrtdi3jehTU4VDRdmENGvBjR7CXDFpQ0GzNGCoXy4oFdG8ZWViU8fWAABkNM2Yzia6Su/vFCbJOzBEo3NpvTeRt+jT2JrEBAJ95oMdA1tInEFFNmAFQla8EsCqHNrb1lJzCQeyHzwdEnVM3C7Av8AcRraXBpBNdGEQsfZMQezIxT6l1+8brvDapPHyXsEbrV4SVBXiCsC9uSFB9YoCvRh+Z0XWHU68+DhFIJdq9cIUO3rDGzTHOjTs79fOWfoVxB7MLu+9YQBACLE2P6ZSp5wAQAZr+X/AAxYKbmEX6R5nEhIZ0eOWBJo37zY/wAXmuAFFEjmwhn85ZgateFbCA68OMnwx9BjQGOnscmKt2QNuj75QCijj3IcKNbS+AbcpQ852+576fg3wXEGmDS9Vw6M2r0CHaGObprWvwzoEguJRLMCAqw78uO9NdjCOEItK14mgh5nnGZJpVeQm0QGAToGXTvKbnP/xAAeEQACAAcBAQAAAAAAAAAAAAABEQAhMDFAUGAgUf/aAAgBAgEBPwDRn7wgF8YFUAVNOGFbXyyhBLPID0Cq3//EACYRAAIBBAICAgEFAAAAAAAAAAEREAACITEgQWFxEjBRAxMiQoH/2gAIAQMBAT8AIyCz64scNUGs0AoEvgSRrfDuhoOi4LWJGs8LDg2t3WoGO4Li5rErvRhtjk5S1XVYKKrSH1oveOJaQ4qg+zxyxAksaFA5IolAmh5ovqDsZoeo1WfximXqgWKuv+JsCfyKjMfyFxLYWvPBjXABGQ3kf7zutFwNtwYNAKM9UPSg+xReEKvt+YNvyNpOiKFlwuB/cJtS+JhZEEMuSMajukzsigCNlwAnACZjBpZ1S5PxHih6kPvfF+IfiPUeOIF3Z71y3wP09znHC4kWk2hlV+nabLALrjcdkmQoNZ4F6hhqO6Gk6XmCGFICCrVBdRrGs1sYNLMEaMEMLi91vR4+uIOA/oHBBviUccgANSX0Y3n8cbsBiDqhRDi60XJ9Hj/YDxB2A4WXCG5//9k=';
 export default base64EncodedImage;
 //# sourceMappingURL=ung.js.map