@dnb/eufemia 10.8.0 → 10.9.0

package/extensions/forms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useField","default","FieldBlock","Field","useValue","ValueBlock","Value","Layout","StepsLayout","StepsContext","DataContext","Visibility"],"sources":["../../../../src/extensions/forms/index.ts"],"sourcesContent":["export type { FieldProps } from './field-types'\nexport type { ValueProps } from './value-types'\nexport { useField } from './Field/hooks'\nexport { default as FieldBlock } from './FieldBlock'\nexport { default as Field } from './Field'\nexport { useValue } from './Value/hooks'\nexport { default as ValueBlock } from './ValueBlock'\nexport { default as Value } from './Value'\nexport { default as Layout } from './Layout'\nexport { default as StepsLayout, StepsContext } from './StepsLayout'\nexport { default as DataContext } from './DataContext'\nexport { default as Visibility } from './Visibility'\nexport * from './utils'\n"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,eAAe;AACxC,SAASC,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,KAAK,QAAQ,SAAS;AAC1C,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASH,OAAO,IAAII,UAAU,QAAQ,cAAc;AACpD,SAASJ,OAAO,IAAIK,KAAK,QAAQ,SAAS;AAC1C,SAASL,OAAO,IAAIM,MAAM,QAAQ,UAAU;AAC5C,SAASN,OAAO,IAAIO,WAAW,EAAEC,YAAY,QAAQ,eAAe;AACpE,SAASR,OAAO,IAAIS,WAAW,QAAQ,eAAe;AACtD,SAAST,OAAO,IAAIU,UAAU,QAAQ,cAAc;AACpD,cAAc,SAAS"}
+{"version":3,"file":"index.js","names":["useDataValue","default","FieldBlock","Field","Iterate","ValueBlock","Form","Value","Layout","StepsLayout","StepsContext","DataContext","Visibility"],"sources":["../../../../src/extensions/forms/index.ts"],"sourcesContent":["export type { FieldProps, ValueProps } from './types'\nexport { useDataValue } from './hooks'\nexport { default as FieldBlock } from './FieldBlock'\nexport { default as Field } from './Field'\nexport { default as Iterate } from './Iterate'\nexport { default as ValueBlock } from './ValueBlock'\nexport { default as Form } from './Form'\nexport { default as Value } from './Value'\nexport { default as Layout } from './Layout'\nexport { default as StepsLayout, StepsContext } from './StepsLayout'\nexport { default as DataContext } from './DataContext'\nexport { default as Visibility } from './Visibility'\nexport * from './utils'\n"],"mappings":"AACA,SAASA,YAAY,QAAQ,SAAS;AACtC,SAASC,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,KAAK,QAAQ,SAAS;AAC1C,SAASF,OAAO,IAAIG,OAAO,QAAQ,WAAW;AAC9C,SAASH,OAAO,IAAII,UAAU,QAAQ,cAAc;AACpD,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ;AACxC,SAASL,OAAO,IAAIM,KAAK,QAAQ,SAAS;AAC1C,SAASN,OAAO,IAAIO,MAAM,QAAQ,UAAU;AAC5C,SAASP,OAAO,IAAIQ,WAAW,EAAEC,YAAY,QAAQ,eAAe;AACpE,SAAST,OAAO,IAAIU,WAAW,QAAQ,eAAe;AACtD,SAASV,OAAO,IAAIW,UAAU,QAAQ,cAAc;AACpD,cAAc,SAAS"}

package/extensions/forms/types.d.ts

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

package/extensions/forms/types.js

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

package/extensions/forms/types.js.map

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

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

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

package/extensions/forms/utils/index.js

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

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

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

package/extensions/lib.d.ts

@@ -19,8 +19,6 @@ export declare const getExtensions: () => {
         Currency: typeof import("./forms/Field/Currency").default;
         Date: typeof import("./forms/Field/Date").default;
         Email: typeof import("./forms/Field/Email").default;
-        FirstName: typeof import("./forms/Field/FirstName").default;
-        LastName: typeof import("./forms/Field/LastName").default;
         NationalIdentityNumber: typeof import("./forms/Field/NationalIdentityNumber").default;
         OrganizationNumber: typeof import("./forms/Field/OrganizationNumber").default;
         PhoneNumber: typeof import("./forms/Field/PhoneNumber").default;

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "10.8.0",
+  "version": "10.9.0",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",
@@ -26,6 +26,7 @@
   "typings": "./index.d.ts",
   "dependencies": {
     "@babel/runtime": "7.22.5",
+    "@ungap/structured-clone": "1.2.0",
     "ajv": "8.12.0",
     "ajv-errors": "3.0.0",
     "classnames": "2.3.1",

package/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
 export function init(): void;
-export const version: "10.8.0";
+export const version: "10.9.0";

package/shared/Eufemia.js

@@ -1,9 +1,9 @@
-export const version = '10.8.0';
+export const version = '10.9.0';
 export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.8.0';
+        return '10.9.0';
       }
     }
     window.Eufemia = new Eufemia();

package/shared/Eufemia.js.map

@@ -1 +1 @@
-{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.js"],"sourcesContent":["export const version = '10.8.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.8.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,QAAQ;AAE/B,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,QAAQ;MACjB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}
+{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.js"],"sourcesContent":["export const version = '10.9.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.9.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,QAAQ;AAE/B,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,QAAQ;MACjB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}

package/shared/useMedia.js

@@ -24,10 +24,36 @@ export default function useMedia() {
     disabled,
     log
   } = props;
-  const makeResult = () => {
-    return Object.entries(queries).reduce((acc, _ref) => {
+  const context = React.useContext(Context);
+  const refs = React.useRef({});
+  const defaults = React.useRef({});
+  const disabledRef = React.useRef(disabled);
+  const [result, updateRerender] = React.useState(makeResult);
+  React.useEffect(() => {
+    if (Object.keys(refs.current).length) {
+      makeResult();
+    }
+    return removeListeners;
+  }, []);
+  React.useEffect(() => {
+    if (disabledRef.current && !disabled) {
+      updateRerender(makeResult());
+    }
+    disabledRef.current = disabled;
+  }, [disabled]);
+  return result;
+  function removeListeners() {
+    Object.entries(refs.current).forEach(_ref => {
+      var _item$event;
+      let [key, item] = _ref;
+      item === null || item === void 0 ? void 0 : (_item$event = item.event) === null || _item$event === void 0 ? void 0 : _item$event.call(item);
+      delete refs.current[key];
+    });
+  }
+  function makeResult() {
+    return Object.entries(queries).reduce((acc, _ref2) => {
       var _item$mediaQueryList;
-      let [key, when] = _ref;
+      let [key, when] = _ref2;
       const name = `is${toPascalCase(key)}`;
       if (disabled) {
         acc[name] = false;
@@ -44,12 +70,12 @@ export default function useMedia() {
     }, {
       isSSR: !isMatchMediaSupported()
     });
-  };
-  const runQuery = _ref2 => {
+  }
+  function runQuery(_ref3) {
     let {
       when,
       name
-    } = _ref2;
+    } = _ref3;
     if (!isMatchMediaSupported()) {
       return;
     }
@@ -71,22 +97,6 @@ export default function useMedia() {
       event,
       mediaQueryList
     };
-  };
-  React.useEffect(() => {
-    if (disabledRef.current && !disabled) {
-      updateRerender(makeResult());
-    }
-    disabledRef.current = disabled;
-  }, [disabled]);
-  React.useEffect(() => removeListeners, []);
-  const context = React.useContext(Context);
-  const refs = React.useRef({});
-  const defaults = React.useRef({});
-  const disabledRef = React.useRef(disabled);
-  const [result, updateRerender] = React.useState(makeResult);
-  const removeListeners = () => {
-    Object.values(refs.current).forEach(item => (item === null || item === void 0 ? void 0 : item.event) && item.event());
-  };
-  return result;
+  }
 }
 //# sourceMappingURL=useMedia.js.map

package/shared/useMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.js","names":["React","Context","makeMediaQueryList","createMediaQueryListener","isMatchMediaSupported","toPascalCase","queries","small","min","max","medium","large","useMedia","props","arguments","length","undefined","disabled","log","makeResult","Object","entries","reduce","acc","_ref","_item$mediaQueryList","key","when","name","defaults","current","item","runQuery","mediaQueryList","matches","refs","isSSR","_ref2","context","breakpoints","event","match","disabledRef","state","_objectSpread","result","updateRerender","useEffect","removeListeners","useContext","useRef","useState","values","forEach"],"sources":["../../../src/shared/useMedia.tsx"],"sourcesContent":["import React from 'react'\nimport Context from './Context'\nimport {\n  makeMediaQueryList,\n  createMediaQueryListener,\n  isMatchMediaSupported,\n  MediaQueryCondition,\n} from './MediaQueryUtils'\nimport type { MediaQueryListener } from './MediaQueryUtils'\nimport { toPascalCase } from './component-helper'\n\nexport type UseMediaProps = {\n  /**\n   * If set to true, no MediaQuery will be used.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * For debugging\n   */\n  log?: boolean\n}\n\nexport type UseMediaQueries = {\n  small: MediaQueryCondition\n  medium: MediaQueryCondition\n  large: MediaQueryCondition\n}\n\nexport const queries: UseMediaQueries = {\n  small: { min: 0, max: 'small' },\n  medium: { min: 'small', max: 'medium' },\n  large: { min: 'medium' },\n}\n\nexport type UseMediaResult = {\n  isSmall: boolean\n  isMedium: boolean\n  isLarge: boolean\n  isSSR: boolean\n}\n\n/**\n * Internal stuff\n */\n\ntype UseMediaItem = {\n  event: MediaQueryListener\n  mediaQueryList: MediaQueryList\n}\n\ntype UseMediaQueryProps = {\n  name: string\n  when: MediaQueryCondition\n}\n\nexport default function useMedia(\n  props: UseMediaProps = {}\n): UseMediaResult {\n  const { disabled, log } = props\n\n  const makeResult = () => {\n    return Object.entries(queries).reduce(\n      (acc, [key, when]) => {\n        const name = `is${toPascalCase(key)}`\n\n        if (disabled) {\n          acc[name] = false\n          return acc\n        }\n\n        defaults.current[name] = false\n\n        const item = runQuery({\n          name,\n          when,\n        })\n\n        acc[name] = item?.mediaQueryList?.matches || false\n\n        refs.current[key] = item\n\n        return acc\n      },\n      { isSSR: !isMatchMediaSupported() }\n    ) as UseMediaResult\n  }\n\n  const runQuery = ({ when, name }: UseMediaQueryProps): UseMediaItem => {\n    if (!isMatchMediaSupported()) {\n      return // do nothing\n    }\n\n    const mediaQueryList = makeMediaQueryList(\n      {\n        when,\n        disabled,\n        log,\n      },\n\n      context.breakpoints\n    )\n\n    const event = createMediaQueryListener(mediaQueryList, (match) => {\n      if (!disabledRef.current && match) {\n        const state = {\n          ...defaults.current,\n          isSSR: result.isSSR,\n        } as UseMediaResult\n        state[name] = match\n        updateRerender(state)\n      }\n    })\n\n    return { event, mediaQueryList }\n  }\n\n  React.useEffect(() => {\n    // If it was disabled before\n    if (disabledRef.current && !disabled) {\n      updateRerender(makeResult())\n    }\n    disabledRef.current = disabled\n  }, [disabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => removeListeners, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const context = React.useContext(Context)\n\n  const refs = React.useRef({})\n  const defaults = React.useRef({})\n  const disabledRef = React.useRef(disabled)\n  const [result, updateRerender] =\n    React.useState<UseMediaResult>(makeResult)\n  const removeListeners = () => {\n    Object.values(refs.current).forEach(\n      (item: UseMediaItem) => item?.event && item.event()\n    )\n  }\n\n  return result\n}\n"],"mappings":"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"}
+{"version":3,"file":"useMedia.js","names":["React","Context","makeMediaQueryList","createMediaQueryListener","isMatchMediaSupported","toPascalCase","queries","small","min","max","medium","large","useMedia","props","arguments","length","undefined","disabled","log","context","useContext","refs","useRef","defaults","disabledRef","result","updateRerender","useState","makeResult","useEffect","Object","keys","current","removeListeners","entries","forEach","_ref","_item$event","key","item","event","call","reduce","acc","_ref2","_item$mediaQueryList","when","name","runQuery","mediaQueryList","matches","isSSR","_ref3","breakpoints","match","state","_objectSpread"],"sources":["../../../src/shared/useMedia.tsx"],"sourcesContent":["import React from 'react'\nimport Context from './Context'\nimport {\n  makeMediaQueryList,\n  createMediaQueryListener,\n  isMatchMediaSupported,\n  MediaQueryCondition,\n} from './MediaQueryUtils'\nimport type { MediaQueryListener } from './MediaQueryUtils'\nimport { toPascalCase } from './component-helper'\n\nexport type UseMediaProps = {\n  /**\n   * If set to true, no MediaQuery will be used.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * For debugging\n   */\n  log?: boolean\n}\n\nexport type UseMediaQueries = {\n  small: MediaQueryCondition\n  medium: MediaQueryCondition\n  large: MediaQueryCondition\n}\n\nexport const queries: UseMediaQueries = {\n  small: { min: 0, max: 'small' },\n  medium: { min: 'small', max: 'medium' },\n  large: { min: 'medium' },\n}\n\nexport type UseMediaResult = {\n  isSmall: boolean\n  isMedium: boolean\n  isLarge: boolean\n  isSSR: boolean\n}\n\n/**\n * Internal stuff\n */\n\ntype UseMediaItem = {\n  event: MediaQueryListener\n  mediaQueryList: MediaQueryList\n}\n\ntype UseMediaQueryProps = {\n  name: string\n  when: MediaQueryCondition\n}\n\nexport default function useMedia(\n  props: UseMediaProps = {}\n): UseMediaResult {\n  const { disabled, log } = props\n\n  const context = React.useContext(Context)\n\n  const refs = React.useRef({})\n  const defaults = React.useRef({})\n  const disabledRef = React.useRef(disabled)\n  const [result, updateRerender] =\n    React.useState<UseMediaResult>(makeResult)\n\n  React.useEffect(() => {\n    // In StrictMode, the keys got empty,\n    // so we make the result again\n    if (Object.keys(refs.current).length) {\n      makeResult()\n    }\n\n    return removeListeners\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    // If it was disabled before\n    if (disabledRef.current && !disabled) {\n      updateRerender(makeResult())\n    }\n    disabledRef.current = disabled\n  }, [disabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return result\n\n  function removeListeners() {\n    Object.entries(refs.current).forEach(\n      ([key, item]: [string, UseMediaItem]) => {\n        item?.event?.()\n        delete refs.current[key]\n      }\n    )\n  }\n\n  function makeResult() {\n    return Object.entries(queries).reduce(\n      (acc, [key, when]) => {\n        const name = `is${toPascalCase(key)}`\n\n        if (disabled) {\n          acc[name] = false\n          return acc\n        }\n\n        defaults.current[name] = false\n\n        const item = runQuery({\n          name,\n          when,\n        })\n\n        acc[name] = item?.mediaQueryList?.matches || false\n\n        refs.current[key] = item\n\n        return acc\n      },\n      { isSSR: !isMatchMediaSupported() }\n    ) as UseMediaResult\n  }\n\n  function runQuery({ when, name }: UseMediaQueryProps): UseMediaItem {\n    if (!isMatchMediaSupported()) {\n      return // do nothing\n    }\n\n    const mediaQueryList = makeMediaQueryList(\n      {\n        when,\n        disabled,\n        log,\n      },\n\n      context.breakpoints\n    )\n\n    const event = createMediaQueryListener(mediaQueryList, (match) => {\n      if (!disabledRef.current && match) {\n        const state = {\n          ...defaults.current,\n          isSSR: result.isSSR,\n        } as UseMediaResult\n        state[name] = match\n        updateRerender(state)\n      }\n    })\n\n    return { event, mediaQueryList }\n  }\n}\n"],"mappings":"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"}