@dnb/eufemia 10.5.0 → 10.7.0

package/es/extensions/forms/utils/components.js

@@ -0,0 +1,23 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["space", "top", "bottom", "left", "right"];
+export const forwardSpaceProps = 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 omitSpaceProps = props => {
+  const {
+      space,
+      top,
+      bottom,
+      left,
+      right
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return restProps;
+};
+//# sourceMappingURL=components.js.map

package/es/extensions/forms/utils/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","names":["forwardSpaceProps","props","space","top","bottom","left","right","omitSpaceProps","restProps","_objectWithoutProperties","_excluded"],"sources":["../../../../../src/extensions/forms/utils/components.ts"],"sourcesContent":["import { SpacingProps } from '../../../components/space/types'\n\nexport const forwardSpaceProps = <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 omitSpaceProps = <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"],"mappings":";;AAEA,OAAO,MAAMA,iBAAiB,GAC5BC,KAAY,IACK;EACjB,OAAO;IACLC,KAAK,EAAED,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,KAAK;IACnBC,GAAG,EAAEF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,GAAG;IACfC,MAAM,EAAEH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,MAAM;IACrBC,IAAI,EAAEJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,IAAI;IACjBC,KAAK,EAAEL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK;EAChB,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,cAAc,GACzBN,KAAY,IACwB;EAEpC,MAAM;MAAEC,KAAK;MAAEC,GAAG;MAAEC,MAAM;MAAEC,IAAI;MAAEC;IAAoB,CAAC,GAAGL,KAAK;IAAnBO,SAAS,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA;EAC/D,OAAOF,SAAS;AAClB,CAAC"}

package/es/extensions/forms/utils/index.d.ts

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

package/es/extensions/forms/utils/index.js

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

package/es/extensions/forms/utils/index.js.map

@@ -0,0 +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"}

package/es/extensions/forms/utils/numbers.d.ts

@@ -0,0 +1,17 @@
+interface FormatNumberOptions {
+    prefix?: string;
+    suffix?: string;
+    /** Character to use for separating groups of number. Like '12 345' for 12345. */
+    thousandSeparator?: string;
+    /** Max number of decimals. For source numbers with higher number of decimals, the number will be rounded. Will not add leading zeros. */
+    decimalLimit?: number;
+    /** Set a fixed number of decimals (rounding when more decimals, adding leading zeros when less). */
+    fixedDecimals?: number;
+    /** Symbol to separate between digits and decimals. */
+    decimalSymbol?: string;
+    /** For showing magnitude of original number. For instance, 23500000 with magnitude 6 displays as 23,5 */
+    magnitude?: number;
+}
+export declare function formatNumber(value: number, options?: FormatNumberOptions): string;
+export declare function parseFormattedNumber(formattedValue: string, options?: FormatNumberOptions): number;
+export {};

package/es/extensions/forms/utils/numbers.js

@@ -0,0 +1,35 @@
+export function formatNumber(value, options) {
+  const {
+    thousandSeparator,
+    decimalLimit,
+    fixedDecimals,
+    decimalSymbol = ',',
+    magnitude,
+    prefix,
+    suffix
+  } = options ?? {};
+  const withMagnitude = magnitude !== undefined ? value / Math.pow(10, magnitude) : value;
+  const withDecimals = fixedDecimals !== undefined ? withMagnitude.toFixed(fixedDecimals) : decimalLimit ? (Math.round(withMagnitude * Math.pow(10, decimalLimit)) / Math.pow(10, decimalLimit)).toString() : withMagnitude.toString();
+  const withDecimalSymbol = decimalSymbol !== undefined ? withDecimals.replace('.', decimalSymbol) : withDecimals;
+  const withThousandSeparator = thousandSeparator !== undefined ? withDecimalSymbol.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator) : withDecimalSymbol;
+  const withPrefix = prefix !== undefined ? prefix + withThousandSeparator : withThousandSeparator;
+  const withSuffix = suffix !== undefined ? withPrefix + suffix : withPrefix;
+  return withSuffix;
+}
+export function parseFormattedNumber(formattedValue, options) {
+  const {
+    thousandSeparator,
+    decimalSymbol = ',',
+    magnitude,
+    prefix,
+    suffix
+  } = options ?? {};
+  const parsedDecimalSymbol = decimalSymbol !== undefined ? formattedValue.replace(decimalSymbol, '.') : formattedValue;
+  const parsedThousandSeparator = thousandSeparator !== undefined ? parsedDecimalSymbol.split(thousandSeparator).join('') : parsedDecimalSymbol;
+  const parsedPrefix = prefix !== undefined && parsedThousandSeparator.substring(0, prefix.length) === prefix ? parsedThousandSeparator.substring(prefix.length) : parsedThousandSeparator;
+  const parsedSuffix = suffix !== undefined && parsedPrefix.slice(suffix.length * -1) === suffix ? parsedPrefix.substring(0, parsedPrefix.length - suffix.length) : parsedPrefix;
+  const parsedNumber = Number(parsedSuffix);
+  const parsedMagnitude = magnitude !== undefined ? Number((parsedNumber * Math.pow(10, magnitude)).toFixed(6)) : parsedNumber;
+  return parsedMagnitude;
+}
+//# sourceMappingURL=numbers.js.map

package/es/extensions/forms/utils/numbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numbers.js","names":["formatNumber","value","options","thousandSeparator","decimalLimit","fixedDecimals","decimalSymbol","magnitude","prefix","suffix","withMagnitude","undefined","Math","pow","withDecimals","toFixed","round","toString","withDecimalSymbol","replace","withThousandSeparator","withPrefix","withSuffix","parseFormattedNumber","formattedValue","parsedDecimalSymbol","parsedThousandSeparator","split","join","parsedPrefix","substring","length","parsedSuffix","slice","parsedNumber","Number","parsedMagnitude"],"sources":["../../../../../src/extensions/forms/utils/numbers.ts"],"sourcesContent":["interface FormatNumberOptions {\n  prefix?: string\n  suffix?: string\n  /** Character to use for separating groups of number. Like '12 345' for 12345. */\n  thousandSeparator?: string\n  /** Max number of decimals. For source numbers with higher number of decimals, the number will be rounded. Will not add leading zeros. */\n  decimalLimit?: number\n  /** Set a fixed number of decimals (rounding when more decimals, adding leading zeros when less). */\n  fixedDecimals?: number\n  /** Symbol to separate between digits and decimals. */\n  decimalSymbol?: string\n  /** For showing magnitude of original number. For instance, 23500000 with magnitude 6 displays as 23,5 */\n  magnitude?: number\n}\n\nexport function formatNumber(\n  value: number,\n  options?: FormatNumberOptions\n): string {\n  const {\n    thousandSeparator,\n    decimalLimit,\n    fixedDecimals,\n    decimalSymbol = ',', // Norwegian default format\n    magnitude,\n    prefix,\n    suffix,\n  } = options ?? {}\n\n  const withMagnitude =\n    magnitude !== undefined ? value / Math.pow(10, magnitude) : value\n\n  const withDecimals =\n    fixedDecimals !== undefined\n      ? withMagnitude.toFixed(fixedDecimals)\n      : decimalLimit\n      ? (\n          Math.round(withMagnitude * Math.pow(10, decimalLimit)) /\n          Math.pow(10, decimalLimit)\n        ).toString()\n      : withMagnitude.toString()\n\n  const withDecimalSymbol =\n    decimalSymbol !== undefined\n      ? withDecimals.replace('.', decimalSymbol)\n      : withDecimals\n\n  const withThousandSeparator =\n    thousandSeparator !== undefined\n      ? withDecimalSymbol.replace(\n          /\\B(?=(\\d{3})+(?!\\d))/g,\n          thousandSeparator\n        )\n      : withDecimalSymbol\n\n  const withPrefix =\n    prefix !== undefined\n      ? prefix + withThousandSeparator\n      : withThousandSeparator\n\n  const withSuffix =\n    suffix !== undefined ? withPrefix + suffix : withPrefix\n\n  return withSuffix\n}\n\nexport function parseFormattedNumber(\n  formattedValue: string,\n  options?: FormatNumberOptions\n): number {\n  const {\n    thousandSeparator,\n    decimalSymbol = ',', // Norwegian default format\n    magnitude,\n    prefix,\n    suffix,\n  } = options ?? {}\n\n  const parsedDecimalSymbol =\n    decimalSymbol !== undefined\n      ? formattedValue.replace(decimalSymbol, '.')\n      : formattedValue\n\n  const parsedThousandSeparator =\n    thousandSeparator !== undefined\n      ? parsedDecimalSymbol.split(thousandSeparator).join('')\n      : parsedDecimalSymbol\n\n  const parsedPrefix =\n    prefix !== undefined &&\n    parsedThousandSeparator.substring(0, prefix.length) === prefix\n      ? parsedThousandSeparator.substring(prefix.length)\n      : parsedThousandSeparator\n\n  const parsedSuffix =\n    suffix !== undefined &&\n    parsedPrefix.slice(suffix.length * -1) === suffix\n      ? parsedPrefix.substring(0, parsedPrefix.length - suffix.length)\n      : parsedPrefix\n\n  const parsedNumber = Number(parsedSuffix)\n\n  const parsedMagnitude =\n    magnitude !== undefined\n      ? // toFixed to avoid inaccuracies (like 10/5 = 1.999999999999998)\n        Number((parsedNumber * Math.pow(10, magnitude)).toFixed(6))\n      : parsedNumber\n\n  return parsedMagnitude\n}\n"],"mappings":"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"}

package/es/extensions/forms/value-types.d.ts

@@ -0,0 +1,15 @@
+import { SpacingProps } from '../../components/space/types';
+export type ValueProps<Value> = SpacingProps & {
+    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 input is located in the source dataset */
+    path?: string;
+    value?: Value;
+    /** 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;
+};

package/es/extensions/forms/value-types.js

@@ -0,0 +1 @@
+export {};

package/es/extensions/forms/value-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-types.js","names":[],"sources":["../../../../src/extensions/forms/value-types.ts"],"sourcesContent":["import { SpacingProps } from '../../components/space/types'\n\nexport type ValueProps<Value> = SpacingProps & {\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 input is located in the source dataset */\n  path?: string\n  value?: Value\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":""}

package/es/extensions/index.d.ts

@@ -7,5 +7,6 @@
  * Library Index template to autogenerate all the components and extensions
  * Used by "prepareTemplates"
  */
+import Forms from './forms/Forms';
 import PaymentCard from './payment-card/PaymentCard';
-export { PaymentCard };
+export { Forms, PaymentCard };

package/es/extensions/index.js

@@ -1,3 +1,4 @@
+import Forms from './forms/Forms';
 import PaymentCard from './payment-card/PaymentCard';
-export { PaymentCard };
+export { Forms, PaymentCard };
 //# sourceMappingURL=index.js.map

package/es/extensions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PaymentCard"],"sources":["../../../src/extensions/index.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport PaymentCard from './payment-card/PaymentCard'\n\n// define / export all the available components\nexport { PaymentCard }\n"],"mappings":"AAYA,OAAOA,WAAW,MAAM,4BAA4B;AAGpD,SAASA,WAAW"}
+{"version":3,"file":"index.js","names":["Forms","PaymentCard"],"sources":["../../../src/extensions/index.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport Forms from './forms/Forms'\nimport PaymentCard from './payment-card/PaymentCard'\n\n// define / export all the available components\nexport { Forms, PaymentCard }\n"],"mappings":"AAYA,OAAOA,KAAK,MAAM,eAAe;AACjC,OAAOC,WAAW,MAAM,4BAA4B;AAGpD,SAASD,KAAK,EAAEC,WAAW"}

package/es/extensions/lib.d.ts

@@ -7,8 +7,29 @@
  * Library Index template to autogenerate all the components and extensions
  * Used by "prepareTemplates"
  */
+import Forms from './forms/Forms';
 import PaymentCard from './payment-card/PaymentCard';
-export { PaymentCard };
+export { Forms, PaymentCard };
 export declare const getExtensions: () => {
+    Forms: {
+        String: typeof import("./forms/Field/String").default;
+        Number: typeof import("./forms/Field/Number").default;
+        Toggle: typeof import("./forms/Field/Toggle").default;
+        Boolean: typeof import("./forms/Field/Boolean").default;
+        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;
+        PostalCodeAndCity: typeof import("./forms/Field/PostalCodeAndCity").default;
+        Selection: typeof import("./forms/Field/Selection").default;
+        ArraySelection: typeof import("./forms/Field/ArraySelection").default;
+        Option: typeof import("./forms/Field/Option").default;
+        SelectCountry: typeof import("./forms/Field/SelectCountry").default;
+        BankAccountNumber: typeof import("./forms/Field/BankAccountNumber").default;
+    };
     PaymentCard: typeof PaymentCard;
 };

package/es/extensions/lib.js

@@ -1,7 +1,9 @@
+import Forms from './forms/Forms';
 import PaymentCard from './payment-card/PaymentCard';
-export { PaymentCard };
+export { Forms, PaymentCard };
 export const getExtensions = () => {
   return {
+    Forms,
     PaymentCard
   };
 };

package/es/extensions/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","names":["PaymentCard","getExtensions"],"sources":["../../../src/extensions/lib.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport PaymentCard from './payment-card/PaymentCard'\n\n// define / export all the available components\nexport { PaymentCard }\n\nexport const getExtensions = () => {\n  return { PaymentCard }\n}\n"],"mappings":"AAYA,OAAOA,WAAW,MAAM,4BAA4B;AAGpD,SAASA,WAAW;AAEpB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,OAAO;IAAED;EAAY,CAAC;AACxB,CAAC"}
+{"version":3,"file":"lib.js","names":["Forms","PaymentCard","getExtensions"],"sources":["../../../src/extensions/lib.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport Forms from './forms/Forms'\nimport PaymentCard from './payment-card/PaymentCard'\n\n// define / export all the available components\nexport { Forms, PaymentCard }\n\nexport const getExtensions = () => {\n  return { Forms, PaymentCard }\n}\n"],"mappings":"AAYA,OAAOA,KAAK,MAAM,eAAe;AACjC,OAAOC,WAAW,MAAM,4BAA4B;AAGpD,SAASD,KAAK,EAAEC,WAAW;AAE3B,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,OAAO;IAAEF,KAAK;IAAEC;EAAY,CAAC;AAC/B,CAAC"}

package/es/extensions/payment-card/PaymentCard.d.ts

@@ -3,7 +3,11 @@ import * as React from 'react';
 import type { SpacingProps } from '../shared/types';
 import type { SkeletonShow } from '../components/skeleton/Skeleton';
 import type { Locale } from '../../shared/Context';
-export type PaymentCardCardStatus = 'active' | 'blocked' | 'expired';
+export type PaymentCardCardStatus =
+  | 'active'
+  | 'blocked'
+  | 'expired'
+  | 'not_active';
 export type PaymentCardVariant = 'normal' | 'compact';
 export type PaymentCardDigits = string | number;
 export enum CardType {
@@ -70,7 +74,7 @@ export interface PaymentCardProps
    */
   card_number: string;
   /**
-   * Use one of these: `active`, `blocked`, `expired`. Defaults to `active`.
+   * Use one of these: `active`, `not_active`, `blocked`, `expired`. Defaults to `active`.
    */
   card_status?: PaymentCardCardStatus;
   /**

package/es/extensions/payment-card/PaymentCard.js

@@ -30,7 +30,8 @@ const cardDataPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.shap
 const translationDefaultPropsProps = {
   text_card_number: null,
   text_expired: null,
-  text_blocked: null
+  text_blocked: null,
+  text_not_active: null
 };
 export default class PaymentCard extends React.PureComponent {
   render() {
@@ -96,7 +97,7 @@ _defineProperty(PaymentCard, "defaultProps", _objectSpread({
 process.env.NODE_ENV !== "production" ? PaymentCard.propTypes = _objectSpread(_objectSpread({
   product_code: PropTypes.string.isRequired,
   card_number: PropTypes.string.isRequired,
-  card_status: PropTypes.oneOf(['active', 'blocked', 'expired']),
+  card_status: PropTypes.oneOf(['active', 'blocked', 'expired', 'not_active']),
   variant: PropTypes.oneOf(['normal', 'compact']),
   digits: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   raw_data: cardDataPropTypes,
@@ -137,6 +138,16 @@ function StatusOverlay({
   skeleton
 }) {
   switch (cardStatus) {
+    case 'not_active':
+      return React.createElement("div", {
+        className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))
+      }, React.createElement("div", {
+        className: "dnb-payment-card__blocking__center"
+      }, React.createElement(StatusIcon, {
+        status: cardStatus
+      }), React.createElement(P, {
+        top: "xx-small"
+      }, translations.text_not_active)));
     case 'blocked':
       return React.createElement("div", {
         className: classnames('dnb-payment-card__blocking__overlay', createSkeletonClass('font', skeleton))

package/es/extensions/payment-card/PaymentCard.js.map

@@ -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","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","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","status","top","CardText","modifier","_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}\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']),\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 '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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"}
+{"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","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","status","top","CardText","modifier","_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":"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"}

package/es/extensions/payment-card/icons/CardIn.d.ts

@@ -0,0 +1,2 @@
+declare const CardIn: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default CardIn;

package/es/extensions/payment-card/icons/CardIn.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _title, _path;
+import React from 'react';
+const CardIn = props => React.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _title || (_title = React.createElement("title", null, "Kort In")), _path || (_path = React.createElement("path", {
+  d: "M12 16h7.5M.75 8V6.5a2 2 0 0 1 2-2h18.5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2.75a2 2 0 0 1-2-2V17M1 12.5h7.5M6 15l2.5-2.5m0 0L6 10",
+  stroke: "#FBF6EC",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5
+})));
+export default CardIn;
+//# sourceMappingURL=CardIn.js.map

package/es/extensions/payment-card/icons/CardIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardIn.js","names":["React","CardIn","props","createElement","_extends","width","height","fill","viewBox","xmlns","_title","_path","d","stroke","strokeLinecap","strokeLinejoin","strokeWidth"],"sources":["../../../../../src/extensions/payment-card/icons/CardIn.tsx"],"sourcesContent":["import React from 'react'\nconst CardIn = (props) => (\n  <svg\n    width=\"24\"\n    height=\"24\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Kort In</title>\n    <path\n      d=\"M12 16h7.5M.75 8V6.5a2 2 0 0 1 2-2h18.5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2.75a2 2 0 0 1-2-2V17M1 12.5h7.5M6 15l2.5-2.5m0 0L6 10\"\n      stroke=\"#FBF6EC\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n    />\n  </svg>\n)\nexport default CardIn\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,MAAMC,MAAM,GAAIC,KAAK,IACnBF,KAAA,CAAAG,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXC,IAAI,EAAC,MAAM;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC;AAA4B,GAC9BP,KAAK,GAAAQ,MAAA,KAAAA,MAAA,GAETV,KAAA,CAAAG,aAAA,gBAAO,SAAc,CAAC,GAAAQ,KAAA,KAAAA,KAAA,GACtBX,KAAA,CAAAG,aAAA;EACES,CAAC,EAAC,+HAA+H;EACjIC,MAAM,EAAC,SAAS;EAChBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC,OAAO;EACtBC,WAAW,EAAE;AAAI,CAClB,CAAC,CACC,CACN;AACD,eAAef,MAAM"}

package/es/extensions/payment-card/icons/index.js

@@ -1,9 +1,10 @@
-var _Expired, _Blocked;
+var _Expired, _NotActive, _Blocked;
 import React from 'react';
 import BankAxept from './BankAxept';
 import DNB from './DNB';
 import Expired from './Clock';
 import Blocked from './Padlock';
+import NotActive from './CardIn';
 import MastercardDefault from './MastercardDefault';
 import MastercardDark from './MastercardDark';
 import Pluss from './Pluss';
@@ -100,6 +101,8 @@ const StatusIcon = ({
   switch (status) {
     case 'expired':
       return _Expired || (_Expired = React.createElement(Expired, null));
+    case 'not_active':
+      return _NotActive || (_NotActive = React.createElement(NotActive, null));
     case 'blocked':
       return _Blocked || (_Blocked = React.createElement(Blocked, null));
     case 'active':

package/es/extensions/payment-card/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","BankAxept","DNB","Expired","Blocked","MastercardDefault","MastercardDark","Pluss","Intro","Business","Bedrift","PB","SagaGold","SagaPlatinum","VisaDefault","VisaPlatinum","BankLogo","logoType","height","cata","Colored","color","createElement","fill","className","ProductLogo","productType","cardDesign","_SagaGold","_SagaPlatinum","_Pluss","_Intro","_Business","_Bedrift","_PB","id","Saga","saga","Gold","Platinum","None","PrivateBanking","privateBanking","Default","BankAxeptLogo","bankAxept","_BankAxept","_BankAxept2","_BankAxept3","_BankAxept4","_BankAxept5","White","Black20","Gray","Black","StatusIcon","status","_Expired","_Blocked","TypeLogo","cardType","_VisaPlatinum","_MastercardDefault","_MastercardDark","Visa","visa","Mastercard","mastercard","Dark"],"sources":["../../../../../src/extensions/payment-card/icons/index.js"],"sourcesContent":["import React from 'react'\n\nimport BankAxept from './BankAxept'\nimport DNB from './DNB'\nimport Expired from './Clock'\nimport Blocked from './Padlock'\nimport MastercardDefault from './MastercardDefault'\nimport MastercardDark from './MastercardDark'\nimport Pluss from './Pluss'\nimport Intro from './Intro'\nimport Business from './Business'\nimport Bedrift from './Bedrift'\nimport PB from './PB'\nimport SagaGold from './SagaGold'\nimport SagaPlatinum from './SagaPlatinum'\nimport VisaDefault from './VisaDefault'\nimport VisaPlatinum from './VisaPlatinum'\n\nconst BankLogo = ({ logoType, height }) =>\n  logoType.cata({\n    Colored: (color) => (\n      <DNB\n        height={height}\n        fill={color}\n        className=\"dnb-payment-card__card__bank-logo\"\n      />\n    ),\n  })\n\nconst ProductLogo = ({ productType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__product-type'\n  return productType.cata({\n    Saga: () =>\n      cardDesign.saga.cata({\n        Gold: () => <SagaGold className={id} />,\n        Platinum: () => <SagaPlatinum className={id} />,\n        None: () => null,\n      }),\n    Pluss: () => <Pluss className={id} />,\n    Intro: () => <Intro className={id} />,\n    Business: () => <Business className={id} />,\n    Bedrift: () => <Bedrift className={id} />,\n    PrivateBanking: () =>\n      cardDesign.privateBanking.cata({\n        Default: () => <PB className={id} />,\n        None: () => null,\n      }),\n    None: () => null,\n  })\n}\n\nconst BankAxeptLogo = ({ bankAxept, cardDesign }) => {\n  const id = 'dnb-payment-card__card__bank-axept'\n  return bankAxept.cata({\n    BankAxept: () =>\n      cardDesign.bankAxept.cata({\n        White: () => <BankAxept className={id} fill=\"#ffffff\" />,\n        Black20: () => <BankAxept className={id} fill=\"#cccccc\" />,\n        Gray: () => <BankAxept className={id} fill=\"#b2b4b3\" />,\n        Black: () => <BankAxept className={id} fill=\"#333333\" />,\n        Gold: () => <BankAxept className={id} fill=\"#BFA970\" />,\n      }),\n    None: () => null,\n  })\n}\n\nconst StatusIcon = ({ status }) => {\n  switch (status) {\n    case 'expired':\n      return <Expired />\n\n    case 'blocked':\n      return <Blocked />\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nconst TypeLogo = ({ cardType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__credit-type'\n  return cardType.cata({\n    Visa: () =>\n      cardDesign.visa.cata({\n        Colored: (color) => <VisaDefault className={id} fill={color} />,\n        Platinum: () => <VisaPlatinum className={id} />,\n      }),\n    Mastercard: () =>\n      cardDesign.mastercard.cata({\n        Default: () => <MastercardDefault className={id} />,\n        Dark: () => <MastercardDark className={id} />,\n      }),\n    None: () => null,\n  })\n}\n\nexport { BankLogo, ProductLogo, StatusIcon, TypeLogo, BankAxeptLogo }\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,GAAG,MAAM,OAAO;AACvB,OAAOC,OAAO,MAAM,SAAS;AAC7B,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,EAAE,MAAM,MAAM;AACrB,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KACpCD,QAAQ,CAACE,IAAI,CAAC;EACZC,OAAO,EAAGC,KAAK,IACbrB,KAAA,CAAAsB,aAAA,CAACpB,GAAG;IACFgB,MAAM,EAAEA,MAAO;IACfK,IAAI,EAAEF,KAAM;IACZG,SAAS,EAAC;EAAmC,CAC9C;AAEL,CAAC,CAAC;AAEJ,MAAMC,WAAW,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAAK;EAAA,IAAAC,SAAA,EAAAC,aAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,SAAA,EAAAC,QAAA,EAAAC,GAAA;EACnD,MAAMC,EAAE,GAAG,sCAAsC;EACjD,OAAOT,WAAW,CAACP,IAAI,CAAC;IACtBiB,IAAI,EAAEA,CAAA,KACJT,UAAU,CAACU,IAAI,CAAClB,IAAI,CAAC;MACnBmB,IAAI,EAAEA,CAAA,KAAAV,SAAA,KAAAA,SAAA,GAAM5B,KAAA,CAAAsB,aAAA,CAACV,QAAQ;QAACY,SAAS,EAAEW;MAAG,CAAE,CAAC;MACvCI,QAAQ,EAAEA,CAAA,KAAAV,aAAA,KAAAA,aAAA,GAAM7B,KAAA,CAAAsB,aAAA,CAACT,YAAY;QAACW,SAAS,EAAEW;MAAG,CAAE,CAAC;MAC/CK,IAAI,EAAEA,CAAA,KAAM;IACd,CAAC,CAAC;IACJjC,KAAK,EAAEA,CAAA,KAAAuB,MAAA,KAAAA,MAAA,GAAM9B,KAAA,CAAAsB,aAAA,CAACf,KAAK;MAACiB,SAAS,EAAEW;IAAG,CAAE,CAAC;IACrC3B,KAAK,EAAEA,CAAA,KAAAuB,MAAA,KAAAA,MAAA,GAAM/B,KAAA,CAAAsB,aAAA,CAACd,KAAK;MAACgB,SAAS,EAAEW;IAAG,CAAE,CAAC;IACrC1B,QAAQ,EAAEA,CAAA,KAAAuB,SAAA,KAAAA,SAAA,GAAMhC,KAAA,CAAAsB,aAAA,CAACb,QAAQ;MAACe,SAAS,EAAEW;IAAG,CAAE,CAAC;IAC3CzB,OAAO,EAAEA,CAAA,KAAAuB,QAAA,KAAAA,QAAA,GAAMjC,KAAA,CAAAsB,aAAA,CAACZ,OAAO;MAACc,SAAS,EAAEW;IAAG,CAAE,CAAC;IACzCM,cAAc,EAAEA,CAAA,KACdd,UAAU,CAACe,cAAc,CAACvB,IAAI,CAAC;MAC7BwB,OAAO,EAAEA,CAAA,KAAAT,GAAA,KAAAA,GAAA,GAAMlC,KAAA,CAAAsB,aAAA,CAACX,EAAE;QAACa,SAAS,EAAEW;MAAG,CAAE,CAAC;MACpCK,IAAI,EAAEA,CAAA,KAAM;IACd,CAAC,CAAC;IACJA,IAAI,EAAEA,CAAA,KAAM;EACd,CAAC,CAAC;AACJ,CAAC;AAED,MAAMI,aAAa,GAAGA,CAAC;EAAEC,SAAS;EAAElB;AAAW,CAAC,KAAK;EAAA,IAAAmB,UAAA,EAAAC,WAAA,EAAAC,WAAA,EAAAC,WAAA,EAAAC,WAAA;EACnD,MAAMf,EAAE,GAAG,oCAAoC;EAC/C,OAAOU,SAAS,CAAC1B,IAAI,CAAC;IACpBlB,SAAS,EAAEA,CAAA,KACT0B,UAAU,CAACkB,SAAS,CAAC1B,IAAI,CAAC;MACxBgC,KAAK,EAAEA,CAAA,KAAAL,UAAA,KAAAA,UAAA,GAAM9C,KAAA,CAAAsB,aAAA,CAACrB,SAAS;QAACuB,SAAS,EAAEW,EAAG;QAACZ,IAAI,EAAC;MAAS,CAAE,CAAC;MACxD6B,OAAO,EAAEA,CAAA,KAAAL,WAAA,KAAAA,WAAA,GAAM/C,KAAA,CAAAsB,aAAA,CAACrB,SAAS;QAACuB,SAAS,EAAEW,EAAG;QAACZ,IAAI,EAAC;MAAS,CAAE,CAAC;MAC1D8B,IAAI,EAAEA,CAAA,KAAAL,WAAA,KAAAA,WAAA,GAAMhD,KAAA,CAAAsB,aAAA,CAACrB,SAAS;QAACuB,SAAS,EAAEW,EAAG;QAACZ,IAAI,EAAC;MAAS,CAAE,CAAC;MACvD+B,KAAK,EAAEA,CAAA,KAAAL,WAAA,KAAAA,WAAA,GAAMjD,KAAA,CAAAsB,aAAA,CAACrB,SAAS;QAACuB,SAAS,EAAEW,EAAG;QAACZ,IAAI,EAAC;MAAS,CAAE,CAAC;MACxDe,IAAI,EAAEA,CAAA,KAAAY,WAAA,KAAAA,WAAA,GAAMlD,KAAA,CAAAsB,aAAA,CAACrB,SAAS;QAACuB,SAAS,EAAEW,EAAG;QAACZ,IAAI,EAAC;MAAS,CAAE,CAAC;IACzD,CAAC,CAAC;IACJiB,IAAI,EAAEA,CAAA,KAAM;EACd,CAAC,CAAC;AACJ,CAAC;AAED,MAAMe,UAAU,GAAGA,CAAC;EAAEC;AAAO,CAAC,KAAK;EACjC,QAAQA,MAAM;IACZ,KAAK,SAAS;MACZ,OAAAC,QAAA,KAAAA,QAAA,GAAOzD,KAAA,CAAAsB,aAAA,CAACnB,OAAO,MAAE,CAAC;IAEpB,KAAK,SAAS;MACZ,OAAAuD,QAAA,KAAAA,QAAA,GAAO1D,KAAA,CAAAsB,aAAA,CAAClB,OAAO,MAAE,CAAC;IAEpB,KAAK,QAAQ;IACb;MACE,OAAO,IAAI;EACf;AACF,CAAC;AAED,MAAMuD,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEjC;AAAW,CAAC,KAAK;EAAA,IAAAkC,aAAA,EAAAC,kBAAA,EAAAC,eAAA;EAC7C,MAAM5B,EAAE,GAAG,qCAAqC;EAChD,OAAOyB,QAAQ,CAACzC,IAAI,CAAC;IACnB6C,IAAI,EAAEA,CAAA,KACJrC,UAAU,CAACsC,IAAI,CAAC9C,IAAI,CAAC;MACnBC,OAAO,EAAGC,KAAK,IAAKrB,KAAA,CAAAsB,aAAA,CAACR,WAAW;QAACU,SAAS,EAAEW,EAAG;QAACZ,IAAI,EAAEF;MAAM,CAAE,CAAC;MAC/DkB,QAAQ,EAAEA,CAAA,KAAAsB,aAAA,KAAAA,aAAA,GAAM7D,KAAA,CAAAsB,aAAA,CAACP,YAAY;QAACS,SAAS,EAAEW;MAAG,CAAE,CAAC;IACjD,CAAC,CAAC;IACJ+B,UAAU,EAAEA,CAAA,KACVvC,UAAU,CAACwC,UAAU,CAAChD,IAAI,CAAC;MACzBwB,OAAO,EAAEA,CAAA,KAAAmB,kBAAA,KAAAA,kBAAA,GAAM9D,KAAA,CAAAsB,aAAA,CAACjB,iBAAiB;QAACmB,SAAS,EAAEW;MAAG,CAAE,CAAC;MACnDiC,IAAI,EAAEA,CAAA,KAAAL,eAAA,KAAAA,eAAA,GAAM/D,KAAA,CAAAsB,aAAA,CAAChB,cAAc;QAACkB,SAAS,EAAEW;MAAG,CAAE,CAAC;IAC/C,CAAC,CAAC;IACJK,IAAI,EAAEA,CAAA,KAAM;EACd,CAAC,CAAC;AACJ,CAAC;AAED,SAASxB,QAAQ,EAAES,WAAW,EAAE8B,UAAU,EAAEI,QAAQ,EAAEf,aAAa"}
+{"version":3,"file":"index.js","names":["React","BankAxept","DNB","Expired","Blocked","NotActive","MastercardDefault","MastercardDark","Pluss","Intro","Business","Bedrift","PB","SagaGold","SagaPlatinum","VisaDefault","VisaPlatinum","BankLogo","logoType","height","cata","Colored","color","createElement","fill","className","ProductLogo","productType","cardDesign","_SagaGold","_SagaPlatinum","_Pluss","_Intro","_Business","_Bedrift","_PB","id","Saga","saga","Gold","Platinum","None","PrivateBanking","privateBanking","Default","BankAxeptLogo","bankAxept","_BankAxept","_BankAxept2","_BankAxept3","_BankAxept4","_BankAxept5","White","Black20","Gray","Black","StatusIcon","status","_Expired","_NotActive","_Blocked","TypeLogo","cardType","_VisaPlatinum","_MastercardDefault","_MastercardDark","Visa","visa","Mastercard","mastercard","Dark"],"sources":["../../../../../src/extensions/payment-card/icons/index.js"],"sourcesContent":["import React from 'react'\n\nimport BankAxept from './BankAxept'\nimport DNB from './DNB'\nimport Expired from './Clock'\nimport Blocked from './Padlock'\nimport NotActive from './CardIn'\nimport MastercardDefault from './MastercardDefault'\nimport MastercardDark from './MastercardDark'\nimport Pluss from './Pluss'\nimport Intro from './Intro'\nimport Business from './Business'\nimport Bedrift from './Bedrift'\nimport PB from './PB'\nimport SagaGold from './SagaGold'\nimport SagaPlatinum from './SagaPlatinum'\nimport VisaDefault from './VisaDefault'\nimport VisaPlatinum from './VisaPlatinum'\n\nconst BankLogo = ({ logoType, height }) =>\n  logoType.cata({\n    Colored: (color) => (\n      <DNB\n        height={height}\n        fill={color}\n        className=\"dnb-payment-card__card__bank-logo\"\n      />\n    ),\n  })\n\nconst ProductLogo = ({ productType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__product-type'\n  return productType.cata({\n    Saga: () =>\n      cardDesign.saga.cata({\n        Gold: () => <SagaGold className={id} />,\n        Platinum: () => <SagaPlatinum className={id} />,\n        None: () => null,\n      }),\n    Pluss: () => <Pluss className={id} />,\n    Intro: () => <Intro className={id} />,\n    Business: () => <Business className={id} />,\n    Bedrift: () => <Bedrift className={id} />,\n    PrivateBanking: () =>\n      cardDesign.privateBanking.cata({\n        Default: () => <PB className={id} />,\n        None: () => null,\n      }),\n    None: () => null,\n  })\n}\n\nconst BankAxeptLogo = ({ bankAxept, cardDesign }) => {\n  const id = 'dnb-payment-card__card__bank-axept'\n  return bankAxept.cata({\n    BankAxept: () =>\n      cardDesign.bankAxept.cata({\n        White: () => <BankAxept className={id} fill=\"#ffffff\" />,\n        Black20: () => <BankAxept className={id} fill=\"#cccccc\" />,\n        Gray: () => <BankAxept className={id} fill=\"#b2b4b3\" />,\n        Black: () => <BankAxept className={id} fill=\"#333333\" />,\n        Gold: () => <BankAxept className={id} fill=\"#BFA970\" />,\n      }),\n    None: () => null,\n  })\n}\n\nconst StatusIcon = ({ status }) => {\n  switch (status) {\n    case 'expired':\n      return <Expired />\n\n    case 'not_active':\n      return <NotActive />\n    \n    case 'blocked':\n      return <Blocked />\n\n    case 'active':\n    default:\n      return null\n  }\n}\n\nconst TypeLogo = ({ cardType, cardDesign }) => {\n  const id = 'dnb-payment-card__card__credit-type'\n  return cardType.cata({\n    Visa: () =>\n      cardDesign.visa.cata({\n        Colored: (color) => <VisaDefault className={id} fill={color} />,\n        Platinum: () => <VisaPlatinum className={id} />,\n      }),\n    Mastercard: () =>\n      cardDesign.mastercard.cata({\n        Default: () => <MastercardDefault className={id} />,\n        Dark: () => <MastercardDark className={id} />,\n      }),\n    None: () => null,\n  })\n}\n\nexport { BankLogo, ProductLogo, StatusIcon, TypeLogo, BankAxeptLogo }\n"],"mappings":"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"}

package/es/extensions/payment-card/style/dnb-payment-card.css

@@ -177,8 +177,7 @@
   background: linear-gradient(184.55deg, rgba(204, 204, 204, 0.5) 4.63%, rgba(232, 232, 232, 0.5) 84.83%);
 }
 .dnb-payment-card__blocking__center {
-  width: 77px;
-  height: 77px;
+  padding: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -232,6 +231,8 @@
   flex-direction: row;
   height: 100%;
   width: 100%;
+  grid-gap: var(--spacing-x-small);
+  gap: var(--spacing-x-small);
   background: rgba(0, 0, 0, 0.739);
   border-radius: inherit;
 }

package/es/extensions/payment-card/style/dnb-payment-card.min.css

@@ -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;height:77px;justify-content:center;width:77px}.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{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;height:100%;justify-content:center;width:100%}
+.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%}

package/es/extensions/payment-card/style/dnb-payment-card.scss

@@ -220,8 +220,7 @@
     }
 
     &__center {
-      width: 77px;
-      height: 77px;
+      padding: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -291,6 +290,7 @@
 
       height: 100%;
       width: 100%;
+      gap: var(--spacing-x-small);
 
       background: rgb(0 0 0 / 73.9%);
       border-radius: inherit;

package/es/shared/Context.d.ts

@@ -29,6 +29,7 @@ import type { HelpButtonProps } from '../components/HelpButton';
 import type { TableProps } from '../components/Table';
 import type { GlobalErrorProps } from '../components/GlobalError';
 import type { ModalProps } from '../components/modal/types';
+import type { AccordionProps } from '../components/Accordion';
 import type { NumberFormatCurrency } from '../components/NumberFormat';
 import type { ThemeProps } from './Theme';
 export type ContextComponents = {
@@ -57,6 +58,7 @@ export type ContextComponents = {
     Table?: Partial<TableProps>;
     GlobalError?: Partial<GlobalErrorProps>;
     Modal?: Partial<ModalProps>;
+    Accordion?: Partial<AccordionProps>;
     NumberFormat?: Record<string, unknown>;
     Pagination?: Record<string, unknown>;
     FormRow?: FormRowProps;