@dnb/eufemia 10.6.0 → 10.7.0

package/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","children","createElement","_extends","for_id","label_direction","space","bottom","Fragment","state","id","undefined","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    children,\n  } = props\n\n  return (\n    <Div\n      className={classnames('dnb-forms-field-block', className)}\n      {...forwardSpaceProps(props)}\n    >\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      {children}\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","width","contentsWidth","children","cn","undefined","createElement","_extends","for_id","label_direction","space","bottom","Fragment","state","id","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n    /** Width of outer block element */\n    width?: 'medium' | 'large'\n    /** Width of contents block, while label etc can be wider if space is available */\n    contentsWidth?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    width,\n    contentsWidth,\n    children,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      <div\n        className={classnames(\n          'dnb-forms-field-block__contents',\n          contentsWidth !== undefined &&\n            `dnb-forms-field-block__contents--width-${contentsWidth}`\n        )}\n      >\n        {children}\n      </div>\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -12,4 +12,19 @@
 .dnb-forms-field-block__label-secondary {
   color: var(--color-black-55);
   font-size: var(--font-size-small);
+}
+.dnb-forms-field-block--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block--width-medium {
+  width: 176px;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block__contents--width-medium {
+  width: 176px;
 }

package/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}
+.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}

package/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -1,3 +1,5 @@
+@import '../../Field/fields.scss';
+
 .dnb-forms-field-block {
   &__label-block {
     display: flex;
@@ -16,4 +18,28 @@
     color: var(--color-black-55);
     font-size: var(--font-size-small);
   }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &__contents {
+    &--width-stretch {
+      width: 100%;
+    }
+
+    &--width-large {
+      width: $forms-field-width-large;
+    }
+  
+    &--width-medium {
+      width: $forms-field-width-medium;
+    }
+  }
+
+  
 }

package/extensions/forms/Layout/FlexContainer.js

@@ -29,7 +29,8 @@ export const isEufemiaElement = element => {
   return Object.values(EufemiaElements).some(eufemiaElement => (element === null || element === void 0 ? void 0 : element.type) === eufemiaElement);
 };
 export const isSpacePropsComponent = element => {
-  return React.isValidElement(element) && typeof element.type === 'object' && '_supportsEufemiaSpacingProps' in element.type || isEufemiaElement(element);
+  var _element$type;
+  return React.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type['_supportsEufemiaSpacingProps']) === true || isEufemiaElement(element);
 };
 const renderWithSpacing = (element, props) => {
   const takesSpaceProps = isSpacePropsComponent(element);

package/extensions/forms/Layout/FlexContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.js","names":["React","classnames","Space","Div","EufemiaElements","forwardSpaceProps","MainHeading","SubHeading","isHeadingElement","element","type","getSpaceTop","_element$props","_element$props2","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","renderWithSpacing","takesSpaceProps","cloneElement","createElement","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","cn","childrenArray","Children","toArray","_extends","map","child","i","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","key","_hr","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      typeof element.type === 'object' &&\n      '_supportsEufemiaSpacingProps' in\n        (element.type as React.JSXElementConstructor<unknown>)) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? childrenArray.map((child, i) => {\n            // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n            // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n            // and bottom when th\n            const isFirst = i === 0\n            const previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAO,KAAKC,eAAe,MAAM,mBAAmB;AAEpD,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,UAAU,MAAM,cAAc;AAErC,OAAO,SAASC,gBAAgBA,CAACC,OAAO,EAAW;EACjD,OAAOA,OAAO,CAACC,IAAI,KAAKJ,WAAW,IAAIG,OAAO,CAACC,IAAI,KAAKH,UAAU;AACpE;AAEA,MAAMI,WAAW,GACfF,OAAmE,IACzC;EAAA,IAAAG,cAAA,EAAAC,eAAA;EAC1B,IAAI,CAACb,KAAK,CAACc,cAAc,CAACL,OAAO,CAAC,EAAE;IAClC;EACF;EACA,OACE,EAAAG,cAAA,GAAAH,OAAO,CAACM,KAAK,cAAAH,cAAA,uBAAbA,cAAA,CAAeI,GAAG,MACjB,SAAAH,eAAA,GAAOJ,OAAO,CAACM,KAAK,cAAAF,eAAA,uBAAbA,eAAA,CAAeI,KAAK,MAAK,QAAQ,GACrCR,OAAO,CAACM,KAAK,CAACE,KAAK,CAACD,GAAG,GACvBE,SAAS,CAAC;AAElB,CAAC;AAED,MAAMC,cAAc,GAClBV,OAAmE,IACzC;EAAA,IAAAW,eAAA,EAAAC,eAAA;EAC1B,IAAI,CAACrB,KAAK,CAACc,cAAc,CAACL,OAAO,CAAC,EAAE;IAClC;EACF;EACA,OACE,EAAAW,eAAA,GAAAX,OAAO,CAACM,KAAK,cAAAK,eAAA,uBAAbA,eAAA,CAAeE,MAAM,MACpB,SAAAD,eAAA,GAAOZ,OAAO,CAACM,KAAK,cAAAM,eAAA,uBAAbA,eAAA,CAAeJ,KAAK,MAAK,QAAQ,GACrCR,OAAO,CAACM,KAAK,CAACE,KAAK,CAACK,MAAM,GAC1BJ,SAAS,CAAC;AAElB,CAAC;AAED,OAAO,MAAMK,gBAAgB,GAAId,OAAO,IAAc;EACpD,OAAOe,MAAM,CAACC,MAAM,CAACrB,eAAe,CAAC,CAACsB,IAAI,CACvCC,cAAc,IAAK,CAAAlB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,IAAI,MAAKiB,cACxC,CAAC;AACH,CAAC;AAKD,OAAO,MAAMC,qBAAqB,GAChCnB,OAAwB,IACZ;EACZ,OACGT,KAAK,CAACc,cAAc,CAACL,OAAO,CAAC,IAC5B,OAAOA,OAAO,CAACC,IAAI,KAAK,QAAQ,IAChC,8BAA8B,IAC3BD,OAAO,CAACC,IAA6C,IAC1Da,gBAAgB,CAACd,OAAO,CAAC;AAE7B,CAAC;AAED,MAAMoB,iBAAiB,GAAGA,CAACpB,OAAwB,EAAEM,KAAK,KAAK;EAC7D,MAAMe,eAAe,GAAGF,qBAAqB,CAACnB,OAAO,CAAC;EAEtD,OAAOqB,eAAe,GACpB9B,KAAK,CAAC+B,YAAY,CAACtB,OAAO,EAAiCM,KAAK,CAAC,GAEjEf,KAAA,CAAAgC,aAAA,CAAC7B,GAAG,EAAKY,KAAK,EAAGN,OAAa,CAC/B;AACH,CAAC;AA2BD,SAASwB,aAAaA,CAAClB,KAAY,EAAE;EACnC,MAAM;IACJmB,SAAS;IACTC,QAAQ;IACRC,SAAS,GAAG,QAAQ;IACpBC,IAAI,GAAG,KAAK;IACZC,OAAO,GAAG,YAAY;IACtBC,KAAK,GAAG,SAAS;IACjBC,OAAO,GAAG,OAAO;IACjBC,OAAO,GAAG;EACZ,CAAC,GAAG1B,KAAK;EAET,MAAM2B,EAAE,GAAGzC,UAAU,CACnB,0BAA0B,EAO1BiC,SAAS,EANTE,SAAS,IAAK,uCAAsCA,SAAU,EAAC,EAC/DE,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,KAAK,IAAK,mCAAkCA,KAAM,EAAC,EACnDF,IAAI,IAAK,gCAA+B,EACxCG,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,OAAO,IAAK,qCAAoCA,OAAQ,EAE1D,CAAC;EACD,MAAME,aAAa,GAAG3C,KAAK,CAAC4C,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC;EAEtD,OACEnC,KAAA,CAAAgC,aAAA,CAAC7B,GAAG,EAAA2C,QAAA;IAACZ,SAAS,EAAEQ;EAAG,GAAKrC,iBAAiB,CAACU,KAAK,CAAC,GAC7CqB,SAAS,KAAK,QAAQ,GACnBO,aAAa,CAACI,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,KAAK;IAI9B,MAAMC,OAAO,GAAGD,CAAC,KAAK,CAAC;IACvB,MAAME,aAAa,GAAGR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGM,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAMG,gBAAgB,GAAG5C,gBAAgB,CAACwC,KAAK,CAAC;IAChD,MAAMK,kBAAkB,GACtBJ,CAAC,GAAG,CAAC,IAAIzC,gBAAgB,CAAC2C,aAAa,CAAC;IAI1C,MAAM7B,MAAM,GAAG,CAAC;IAEhB,IACEkB,OAAO,KAAK,MAAM,IAElB,CAACU,OAAO,IAER,CAACG,kBAAkB,IACnB,CAACD,gBAAgB,EACjB;MACA,MAAME,cAAc,GAClBnC,cAAc,CAACgC,aAAa,CAAC,IAAIV,OAAO;MAC1C,MAAMzB,GAAG,GAAGL,WAAW,CAACqC,KAAK,CAAC,IAAIP,OAAO;MAEzC,OACEzC,KAAA,CAAAgC,aAAA,CAAChC,KAAK,CAACuD,QAAQ;QAACC,GAAG,EAAG,WAAUP,CAAE;MAAE,GAClCjD,KAAA,CAAAgC,aAAA,CAAC9B,KAAK;QAACc,GAAG,EAAEsC;MAAe,CAAE,CAAC,EAAAG,GAAA,KAAAA,GAAA,GAC9BzD,KAAA,CAAAgC,aAAA;QAAIE,SAAS,EAAC;MAA8B,CAAE,CAAC,GAC9CL,iBAAiB,CAACmB,KAAK,EAAE;QACxB/B,KAAK,EAAE;UAAED,GAAG;UAAEM;QAAO,CAAC;QACtBN,GAAG;QACHM;MACF,CAAC,CACa,CAAC;IAErB;IAEA,MAAMN,GAAG,GAEPkC,OAAO,GACH,CAAC,GAEDvC,WAAW,CAACqC,KAAK,CAAC,IAClB7B,cAAc,CAACgC,aAAa,CAAC,IAC7BV,OAAO;IAEb,OAAOZ,iBAAiB,CAACmB,KAAK,EAAE;MAC9BQ,GAAG,EAAG,WAAUP,CAAE,EAAC;MACnBhC,KAAK,EAAE;QAAED,GAAG;QAAEM;MAAO,CAAC;MACtBN,GAAG;MACHM;IACF,CAAC,CAAC;EACJ,CAAC,CAAC,GAEFa,QACD,CAAC;AAEV;AAEAF,aAAa,CAACyB,4BAA4B,GAAG,IAAI;AACjD,eAAezB,aAAa"}
+{"version":3,"file":"FlexContainer.js","names":["React","classnames","Space","Div","EufemiaElements","forwardSpaceProps","MainHeading","SubHeading","isHeadingElement","element","type","getSpaceTop","_element$props","_element$props2","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","_element$type","renderWithSpacing","takesSpaceProps","cloneElement","createElement","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","cn","childrenArray","Children","toArray","_extends","map","child","i","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","key","_hr","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      element?.type?.['_supportsEufemiaSpacingProps'] === true) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\n  justify?:\n    | 'flex-start'\n    | 'flex-end'\n    | 'center'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'\n  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? childrenArray.map((child, i) => {\n            // Set spacing on child components by props (instead of CSS) to be able to dynamically override by props on each child. The default\n            // is the spacing-props that controls space between children. Then override with props sent to the children, including both top\n            // and bottom when th\n            const isFirst = i === 0\n            const previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAO,KAAKC,eAAe,MAAM,mBAAmB;AAEpD,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,UAAU,MAAM,cAAc;AAErC,OAAO,SAASC,gBAAgBA,CAACC,OAAO,EAAW;EACjD,OAAOA,OAAO,CAACC,IAAI,KAAKJ,WAAW,IAAIG,OAAO,CAACC,IAAI,KAAKH,UAAU;AACpE;AAEA,MAAMI,WAAW,GACfF,OAAmE,IACzC;EAAA,IAAAG,cAAA,EAAAC,eAAA;EAC1B,IAAI,CAACb,KAAK,CAACc,cAAc,CAACL,OAAO,CAAC,EAAE;IAClC;EACF;EACA,OACE,EAAAG,cAAA,GAAAH,OAAO,CAACM,KAAK,cAAAH,cAAA,uBAAbA,cAAA,CAAeI,GAAG,MACjB,SAAAH,eAAA,GAAOJ,OAAO,CAACM,KAAK,cAAAF,eAAA,uBAAbA,eAAA,CAAeI,KAAK,MAAK,QAAQ,GACrCR,OAAO,CAACM,KAAK,CAACE,KAAK,CAACD,GAAG,GACvBE,SAAS,CAAC;AAElB,CAAC;AAED,MAAMC,cAAc,GAClBV,OAAmE,IACzC;EAAA,IAAAW,eAAA,EAAAC,eAAA;EAC1B,IAAI,CAACrB,KAAK,CAACc,cAAc,CAACL,OAAO,CAAC,EAAE;IAClC;EACF;EACA,OACE,EAAAW,eAAA,GAAAX,OAAO,CAACM,KAAK,cAAAK,eAAA,uBAAbA,eAAA,CAAeE,MAAM,MACpB,SAAAD,eAAA,GAAOZ,OAAO,CAACM,KAAK,cAAAM,eAAA,uBAAbA,eAAA,CAAeJ,KAAK,MAAK,QAAQ,GACrCR,OAAO,CAACM,KAAK,CAACE,KAAK,CAACK,MAAM,GAC1BJ,SAAS,CAAC;AAElB,CAAC;AAED,OAAO,MAAMK,gBAAgB,GAAId,OAAO,IAAc;EACpD,OAAOe,MAAM,CAACC,MAAM,CAACrB,eAAe,CAAC,CAACsB,IAAI,CACvCC,cAAc,IAAK,CAAAlB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,IAAI,MAAKiB,cACxC,CAAC;AACH,CAAC;AAKD,OAAO,MAAMC,qBAAqB,GAChCnB,OAAwB,IACZ;EAAA,IAAAoB,aAAA;EACZ,OACG7B,KAAK,CAACc,cAAc,CAACL,OAAO,CAAC,IAC5B,CAAAA,OAAO,aAAPA,OAAO,wBAAAoB,aAAA,GAAPpB,OAAO,CAAEC,IAAI,cAAAmB,aAAA,uBAAbA,aAAA,CAAgB,8BAA8B,CAAC,MAAK,IAAI,IAC1DN,gBAAgB,CAACd,OAAO,CAAC;AAE7B,CAAC;AAED,MAAMqB,iBAAiB,GAAGA,CAACrB,OAAwB,EAAEM,KAAK,KAAK;EAC7D,MAAMgB,eAAe,GAAGH,qBAAqB,CAACnB,OAAO,CAAC;EAEtD,OAAOsB,eAAe,GACpB/B,KAAK,CAACgC,YAAY,CAACvB,OAAO,EAAiCM,KAAK,CAAC,GAEjEf,KAAA,CAAAiC,aAAA,CAAC9B,GAAG,EAAKY,KAAK,EAAGN,OAAa,CAC/B;AACH,CAAC;AA2BD,SAASyB,aAAaA,CAACnB,KAAY,EAAE;EACnC,MAAM;IACJoB,SAAS;IACTC,QAAQ;IACRC,SAAS,GAAG,QAAQ;IACpBC,IAAI,GAAG,KAAK;IACZC,OAAO,GAAG,YAAY;IACtBC,KAAK,GAAG,SAAS;IACjBC,OAAO,GAAG,OAAO;IACjBC,OAAO,GAAG;EACZ,CAAC,GAAG3B,KAAK;EAET,MAAM4B,EAAE,GAAG1C,UAAU,CACnB,0BAA0B,EAO1BkC,SAAS,EANTE,SAAS,IAAK,uCAAsCA,SAAU,EAAC,EAC/DE,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,KAAK,IAAK,mCAAkCA,KAAM,EAAC,EACnDF,IAAI,IAAK,gCAA+B,EACxCG,OAAO,IAAK,qCAAoCA,OAAQ,EAAC,EACzDC,OAAO,IAAK,qCAAoCA,OAAQ,EAE1D,CAAC;EACD,MAAME,aAAa,GAAG5C,KAAK,CAAC6C,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC;EAEtD,OACEpC,KAAA,CAAAiC,aAAA,CAAC9B,GAAG,EAAA4C,QAAA;IAACZ,SAAS,EAAEQ;EAAG,GAAKtC,iBAAiB,CAACU,KAAK,CAAC,GAC7CsB,SAAS,KAAK,QAAQ,GACnBO,aAAa,CAACI,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,KAAK;IAI9B,MAAMC,OAAO,GAAGD,CAAC,KAAK,CAAC;IACvB,MAAME,aAAa,GAAGR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGM,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAMG,gBAAgB,GAAG7C,gBAAgB,CAACyC,KAAK,CAAC;IAChD,MAAMK,kBAAkB,GACtBJ,CAAC,GAAG,CAAC,IAAI1C,gBAAgB,CAAC4C,aAAa,CAAC;IAI1C,MAAM9B,MAAM,GAAG,CAAC;IAEhB,IACEmB,OAAO,KAAK,MAAM,IAElB,CAACU,OAAO,IAER,CAACG,kBAAkB,IACnB,CAACD,gBAAgB,EACjB;MACA,MAAME,cAAc,GAClBpC,cAAc,CAACiC,aAAa,CAAC,IAAIV,OAAO;MAC1C,MAAM1B,GAAG,GAAGL,WAAW,CAACsC,KAAK,CAAC,IAAIP,OAAO;MAEzC,OACE1C,KAAA,CAAAiC,aAAA,CAACjC,KAAK,CAACwD,QAAQ;QAACC,GAAG,EAAG,WAAUP,CAAE;MAAE,GAClClD,KAAA,CAAAiC,aAAA,CAAC/B,KAAK;QAACc,GAAG,EAAEuC;MAAe,CAAE,CAAC,EAAAG,GAAA,KAAAA,GAAA,GAC9B1D,KAAA,CAAAiC,aAAA;QAAIE,SAAS,EAAC;MAA8B,CAAE,CAAC,GAC9CL,iBAAiB,CAACmB,KAAK,EAAE;QACxBhC,KAAK,EAAE;UAAED,GAAG;UAAEM;QAAO,CAAC;QACtBN,GAAG;QACHM;MACF,CAAC,CACa,CAAC;IAErB;IAEA,MAAMN,GAAG,GAEPmC,OAAO,GACH,CAAC,GAEDxC,WAAW,CAACsC,KAAK,CAAC,IAClB9B,cAAc,CAACiC,aAAa,CAAC,IAC7BV,OAAO;IAEb,OAAOZ,iBAAiB,CAACmB,KAAK,EAAE;MAC9BQ,GAAG,EAAG,WAAUP,CAAE,EAAC;MACnBjC,KAAK,EAAE;QAAED,GAAG;QAAEM;MAAO,CAAC;MACtBN,GAAG;MACHM;IACF,CAAC,CAAC;EACJ,CAAC,CAAC,GAEFc,QACD,CAAC;AAEV;AAEAF,aAAa,CAACyB,4BAA4B,GAAG,IAAI;AACjD,eAAezB,aAAa"}

package/extensions/forms/Layout/SubHeading.js

@@ -10,7 +10,8 @@ function SubHeading(props) {
   } = props;
   return React.createElement(Heading, _extends({
     className: classnames('dnb-forms-sub-heading', className),
-    level: "3"
+    level: "3",
+    size: "medium"
   }, forwardSpaceProps(props)), children);
 }
 SubHeading._supportsEufemiaSpacingProps = true;

package/extensions/forms/Layout/SubHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC;EAAG,GACLP,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACO,4BAA4B,GAAG,IAAI;AAC9C,eAAeP,UAAU"}
+{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","size","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      size=\"medium\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC,GAAG;IACTC,IAAI,EAAC;EAAQ,GACTR,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACQ,4BAA4B,GAAG,IAAI;AAC9C,eAAeR,UAAU"}

package/extensions/forms/style/dnb-forms.css

@@ -1,15 +1,3 @@
-.dnb-forms-field-number__input--width-medium {
-  width: 176px;
-}
-.dnb-forms-field-number__input--width-large {
-  width: 336px;
-}
-.dnb-forms-field-number .dnb-input__inner,
-.dnb-forms-field-number .dnb-input__row,
-.dnb-forms-field-number .dnb-input__shell {
-  width: 100%;
-}
-
 .dnb-forms-field-phone-number {
   display: flex;
   flex-flow: row;
@@ -17,6 +5,9 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-phone-number--width-stretch {
+  width: 100%;
+}
 .dnb-forms-field-phone-number--width-large {
   width: 336px;
 }
@@ -61,18 +52,6 @@
   width: 176px;
 }
 
-.dnb-forms-field-string__input--width-large {
-  width: 336px;
-}
-.dnb-forms-field-string__input--width-medium {
-  width: 176px;
-}
-.dnb-forms-field-string .dnb-input__inner,
-.dnb-forms-field-string .dnb-input__row,
-.dnb-forms-field-string .dnb-input__shell {
-  width: 100%;
-}
-
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
@@ -218,6 +197,21 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
+.dnb-forms-field-block--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block--width-medium {
+  width: 176px;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 336px;
+}
+.dnb-forms-field-block__contents--width-medium {
+  width: 176px;
+}
 
 .dnb-forms-value-block {
   display: block;

package/extensions/forms/style/dnb-forms.min.css

@@ -1 +1 @@
-.dnb-forms-field-number__input--width-medium{width:176px}.dnb-forms-field-number__input--width-large{width:336px}.dnb-forms-field-number .dnb-input__inner,.dnb-forms-field-number .dnb-input__row,.dnb-forms-field-number .dnb-input__shell{width:100%}.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-field-string__input--width-large{width:336px}.dnb-forms-field-string__input--width-medium{width:176px}.dnb-forms-field-string .dnb-input__inner,.dnb-forms-field-string .dnb-input__row,.dnb-forms-field-string .dnb-input__shell{width:100%}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}
+.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}

package/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/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() {
@@ -97,7 +98,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,
@@ -139,6 +140,16 @@ function StatusOverlay(_ref2) {
     skeleton
   } = _ref2;
   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/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","_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}\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","_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":"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"}

package/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/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/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/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';
@@ -106,6 +107,8 @@ const StatusIcon = _ref4 => {
   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/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","_ref","logoType","height","cata","Colored","color","createElement","fill","className","ProductLogo","_ref2","_SagaGold","_SagaPlatinum","_Pluss","_Intro","_Business","_Bedrift","_PB","productType","cardDesign","id","Saga","saga","Gold","Platinum","None","PrivateBanking","privateBanking","Default","BankAxeptLogo","_ref3","_BankAxept","_BankAxept2","_BankAxept3","_BankAxept4","_BankAxept5","bankAxept","White","Black20","Gray","Black","StatusIcon","_ref4","status","_Expired","_Blocked","TypeLogo","_ref5","_VisaPlatinum","_MastercardDefault","_MastercardDark","cardType","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,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OACpCC,QAAQ,CAACE,IAAI,CAAC;IACZC,OAAO,EAAGC,KAAK,IACbtB,KAAA,CAAAuB,aAAA,CAACrB,GAAG;MACFiB,MAAM,EAAEA,MAAO;MACfK,IAAI,EAAEF,KAAM;MACZG,SAAS,EAAC;IAAmC,CAC9C;EAEL,CAAC,CAAC;AAAA;AAEJ,MAAMC,WAAW,GAAGC,KAAA,IAAiC;EAAA,IAAAC,SAAA,EAAAC,aAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,SAAA,EAAAC,QAAA,EAAAC,GAAA;EAAA,IAAhC;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAAT,KAAA;EAC9C,MAAMU,EAAE,GAAG,sCAAsC;EACjD,OAAOF,WAAW,CAACf,IAAI,CAAC;IACtBkB,IAAI,EAAEA,CAAA,KACJF,UAAU,CAACG,IAAI,CAACnB,IAAI,CAAC;MACnBoB,IAAI,EAAEA,CAAA,KAAAZ,SAAA,KAAAA,SAAA,GAAM5B,KAAA,CAAAuB,aAAA,CAACX,QAAQ;QAACa,SAAS,EAAEY;MAAG,CAAE,CAAC;MACvCI,QAAQ,EAAEA,CAAA,KAAAZ,aAAA,KAAAA,aAAA,GAAM7B,KAAA,CAAAuB,aAAA,CAACV,YAAY;QAACY,SAAS,EAAEY;MAAG,CAAE,CAAC;MAC/CK,IAAI,EAAEA,CAAA,KAAM;IACd,CAAC,CAAC;IACJnC,KAAK,EAAEA,CAAA,KAAAuB,MAAA,KAAAA,MAAA,GAAM9B,KAAA,CAAAuB,aAAA,CAAChB,KAAK;MAACkB,SAAS,EAAEY;IAAG,CAAE,CAAC;IACrC7B,KAAK,EAAEA,CAAA,KAAAuB,MAAA,KAAAA,MAAA,GAAM/B,KAAA,CAAAuB,aAAA,CAACf,KAAK;MAACiB,SAAS,EAAEY;IAAG,CAAE,CAAC;IACrC5B,QAAQ,EAAEA,CAAA,KAAAuB,SAAA,KAAAA,SAAA,GAAMhC,KAAA,CAAAuB,aAAA,CAACd,QAAQ;MAACgB,SAAS,EAAEY;IAAG,CAAE,CAAC;IAC3C3B,OAAO,EAAEA,CAAA,KAAAuB,QAAA,KAAAA,QAAA,GAAMjC,KAAA,CAAAuB,aAAA,CAACb,OAAO;MAACe,SAAS,EAAEY;IAAG,CAAE,CAAC;IACzCM,cAAc,EAAEA,CAAA,KACdP,UAAU,CAACQ,cAAc,CAACxB,IAAI,CAAC;MAC7ByB,OAAO,EAAEA,CAAA,KAAAX,GAAA,KAAAA,GAAA,GAAMlC,KAAA,CAAAuB,aAAA,CAACZ,EAAE;QAACc,SAAS,EAAEY;MAAG,CAAE,CAAC;MACpCK,IAAI,EAAEA,CAAA,KAAM;IACd,CAAC,CAAC;IACJA,IAAI,EAAEA,CAAA,KAAM;EACd,CAAC,CAAC;AACJ,CAAC;AAED,MAAMI,aAAa,GAAGC,KAAA,IAA+B;EAAA,IAAAC,UAAA,EAAAC,WAAA,EAAAC,WAAA,EAAAC,WAAA,EAAAC,WAAA;EAAA,IAA9B;IAAEC,SAAS;IAAEjB;EAAW,CAAC,GAAAW,KAAA;EAC9C,MAAMV,EAAE,GAAG,oCAAoC;EAC/C,OAAOgB,SAAS,CAACjC,IAAI,CAAC;IACpBnB,SAAS,EAAEA,CAAA,KACTmC,UAAU,CAACiB,SAAS,CAACjC,IAAI,CAAC;MACxBkC,KAAK,EAAEA,CAAA,KAAAN,UAAA,KAAAA,UAAA,GAAMhD,KAAA,CAAAuB,aAAA,CAACtB,SAAS;QAACwB,SAAS,EAAEY,EAAG;QAACb,IAAI,EAAC;MAAS,CAAE,CAAC;MACxD+B,OAAO,EAAEA,CAAA,KAAAN,WAAA,KAAAA,WAAA,GAAMjD,KAAA,CAAAuB,aAAA,CAACtB,SAAS;QAACwB,SAAS,EAAEY,EAAG;QAACb,IAAI,EAAC;MAAS,CAAE,CAAC;MAC1DgC,IAAI,EAAEA,CAAA,KAAAN,WAAA,KAAAA,WAAA,GAAMlD,KAAA,CAAAuB,aAAA,CAACtB,SAAS;QAACwB,SAAS,EAAEY,EAAG;QAACb,IAAI,EAAC;MAAS,CAAE,CAAC;MACvDiC,KAAK,EAAEA,CAAA,KAAAN,WAAA,KAAAA,WAAA,GAAMnD,KAAA,CAAAuB,aAAA,CAACtB,SAAS;QAACwB,SAAS,EAAEY,EAAG;QAACb,IAAI,EAAC;MAAS,CAAE,CAAC;MACxDgB,IAAI,EAAEA,CAAA,KAAAY,WAAA,KAAAA,WAAA,GAAMpD,KAAA,CAAAuB,aAAA,CAACtB,SAAS;QAACwB,SAAS,EAAEY,EAAG;QAACb,IAAI,EAAC;MAAS,CAAE,CAAC;IACzD,CAAC,CAAC;IACJkB,IAAI,EAAEA,CAAA,KAAM;EACd,CAAC,CAAC;AACJ,CAAC;AAED,MAAMgB,UAAU,GAAGC,KAAA,IAAgB;EAAA,IAAf;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAC5B,QAAQC,MAAM;IACZ,KAAK,SAAS;MACZ,OAAAC,QAAA,KAAAA,QAAA,GAAO7D,KAAA,CAAAuB,aAAA,CAACpB,OAAO,MAAE,CAAC;IAEpB,KAAK,SAAS;MACZ,OAAA2D,QAAA,KAAAA,QAAA,GAAO9D,KAAA,CAAAuB,aAAA,CAACnB,OAAO,MAAE,CAAC;IAEpB,KAAK,QAAQ;IACb;MACE,OAAO,IAAI;EACf;AACF,CAAC;AAED,MAAM2D,QAAQ,GAAGC,KAAA,IAA8B;EAAA,IAAAC,aAAA,EAAAC,kBAAA,EAAAC,eAAA;EAAA,IAA7B;IAAEC,QAAQ;IAAEhC;EAAW,CAAC,GAAA4B,KAAA;EACxC,MAAM3B,EAAE,GAAG,qCAAqC;EAChD,OAAO+B,QAAQ,CAAChD,IAAI,CAAC;IACnBiD,IAAI,EAAEA,CAAA,KACJjC,UAAU,CAACkC,IAAI,CAAClD,IAAI,CAAC;MACnBC,OAAO,EAAGC,KAAK,IAAKtB,KAAA,CAAAuB,aAAA,CAACT,WAAW;QAACW,SAAS,EAAEY,EAAG;QAACb,IAAI,EAAEF;MAAM,CAAE,CAAC;MAC/DmB,QAAQ,EAAEA,CAAA,KAAAwB,aAAA,KAAAA,aAAA,GAAMjE,KAAA,CAAAuB,aAAA,CAACR,YAAY;QAACU,SAAS,EAAEY;MAAG,CAAE,CAAC;IACjD,CAAC,CAAC;IACJkC,UAAU,EAAEA,CAAA,KACVnC,UAAU,CAACoC,UAAU,CAACpD,IAAI,CAAC;MACzByB,OAAO,EAAEA,CAAA,KAAAqB,kBAAA,KAAAA,kBAAA,GAAMlE,KAAA,CAAAuB,aAAA,CAAClB,iBAAiB;QAACoB,SAAS,EAAEY;MAAG,CAAE,CAAC;MACnDoC,IAAI,EAAEA,CAAA,KAAAN,eAAA,KAAAA,eAAA,GAAMnE,KAAA,CAAAuB,aAAA,CAACjB,cAAc;QAACmB,SAAS,EAAEY;MAAG,CAAE,CAAC;IAC/C,CAAC,CAAC;IACJK,IAAI,EAAEA,CAAA,KAAM;EACd,CAAC,CAAC;AACJ,CAAC;AAED,SAAS1B,QAAQ,EAAEU,WAAW,EAAEgC,UAAU,EAAEK,QAAQ,EAAEjB,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","_ref","logoType","height","cata","Colored","color","createElement","fill","className","ProductLogo","_ref2","_SagaGold","_SagaPlatinum","_Pluss","_Intro","_Business","_Bedrift","_PB","productType","cardDesign","id","Saga","saga","Gold","Platinum","None","PrivateBanking","privateBanking","Default","BankAxeptLogo","_ref3","_BankAxept","_BankAxept2","_BankAxept3","_BankAxept4","_BankAxept5","bankAxept","White","Black20","Gray","Black","StatusIcon","_ref4","status","_Expired","_NotActive","_Blocked","TypeLogo","_ref5","_VisaPlatinum","_MastercardDefault","_MastercardDark","cardType","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/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/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/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;