@dnb/eufemia 10.39.0 → 10.40.0

package/components/badge/Badge.js

@@ -61,9 +61,10 @@ function Badge(localProps) {
     if (!label && contentIsNum) {
       warn(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
     }
+    const isInline = !children && content;
     return React.createElement("span", _extends({
       role: "status",
-      className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`)
+      className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
     }, props), label && (_span || (_span = React.createElement("span", {
       className: "dnb-sr-only"
     }, label, " "))), content);

package/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","_span","context","useContext","allProps","contentProp","props","_objectWithoutProperties","_excluded","createElement","BadgeRoot","BadgeElem","_ref","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    label,\n    className,\n    children, // eslint-disable-line\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    ...props\n  } = allProps\n\n  validateDOMAttributes(allProps, props)\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem />\n\n  function BadgeRoot({ children }: { children: React.ReactNode }) {\n    return <span className=\"dnb-badge__root\">{children}</span>\n  }\n\n  function BadgeElem() {\n    const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n    const spacingClasses = createSpacingClasses(allProps)\n    const contentIsNum = typeof contentProp === 'number'\n    const variantIsNotification = variant === 'notification'\n\n    const content =\n      variantIsNotification && contentIsNum && contentProp > 9\n        ? '9+'\n        : contentProp\n\n    if (variantIsNotification && !contentIsNum) {\n      warn(\n        `Type of content should be a number: A notification badge is best suited to display content of type number.`\n      )\n    }\n    if (!label && contentIsNum) {\n      warn(\n        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n      )\n    }\n\n    return (\n      <span\n        role=\"status\"\n        className={classnames(\n          'dnb-badge',\n          `dnb-badge--variant-${variant}`,\n          horizontal && `dnb-badge--horizontal-${horizontal}`,\n          vertical && `dnb-badge--vertical-${vertical}`,\n          skeletonClasses,\n          spacingClasses,\n          className\n        )}\n        {...props}\n      >\n        {label && <span className=\"dnb-sr-only\">{label} </span>}\n        {content}\n      </span>\n    )\n  }\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","_span","context","useContext","allProps","contentProp","props","_objectWithoutProperties","_excluded","createElement","BadgeRoot","BadgeElem","_ref","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","isInline","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    label,\n    className,\n    children, // eslint-disable-line\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    ...props\n  } = allProps\n\n  validateDOMAttributes(allProps, props)\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem />\n\n  function BadgeRoot({ children }: { children: React.ReactNode }) {\n    return <span className=\"dnb-badge__root\">{children}</span>\n  }\n\n  function BadgeElem() {\n    const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n    const spacingClasses = createSpacingClasses(allProps)\n    const contentIsNum = typeof contentProp === 'number'\n    const variantIsNotification = variant === 'notification'\n\n    const content =\n      variantIsNotification && contentIsNum && contentProp > 9\n        ? '9+'\n        : contentProp\n\n    if (variantIsNotification && !contentIsNum) {\n      warn(\n        `Type of content should be a number: A notification badge is best suited to display content of type number.`\n      )\n    }\n    if (!label && contentIsNum) {\n      warn(\n        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n      )\n    }\n\n    const isInline = !children && content\n\n    return (\n      <span\n        role=\"status\"\n        className={classnames(\n          'dnb-badge',\n          `dnb-badge--variant-${variant}`,\n          horizontal && `dnb-badge--horizontal-${horizontal}`,\n          vertical && `dnb-badge--vertical-${vertical}`,\n          isInline && 'dnb-badge--inline',\n          skeletonClasses,\n          spacingClasses,\n          className\n        )}\n        {...props}\n      >\n        {label && <span className=\"dnb-sr-only\">{label} </span>}\n        {content}\n      </span>\n    )\n  }\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}

package/components/badge/style/dnb-badge.css

@@ -58,4 +58,10 @@
 }
 .dnb-badge--vertical-top {
   top: 0;
+}
+.dnb-badge--inline.dnb-badge--vertical-top {
+  transform: translateY(-25%);
+}
+.dnb-badge--inline.dnb-badge--vertical-bottom {
+  transform: translateY(25%);
 }

package/components/badge/style/dnb-badge.min.css

@@ -1 +1 @@
-.dnb-badge{--badge-font-size:var(--font-size-x-small);--badge-width:1.5rem;--badge-height:1.5rem;--badge-border-radius-information:calc(var(--badge-height)/4);--badge-border-radius-notification:calc(var(--badge-height)/2);--badge-line-height:var(--line-height-x-small);align-content:center;align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(--badge-font-size);font-weight:var(--font-weight-medium);height:var(--badge-height);justify-content:center;white-space:nowrap;width:var(--badge-width)}.dnb-badge,.dnb-core-style .dnb-badge{line-height:var(--badge-line-height)}.dnb-badge__root{display:inline-flex;flex-shrink:0;position:relative;vertical-align:middle}.dnb-badge__root .dnb-badge{display:flex;overflow:hidden;position:absolute;z-index:2}.dnb-badge--variant-notification{border-radius:var(--badge-border-radius-notification)}.dnb-badge--variant-information{border-radius:var(--badge-border-radius-information);min-width:var(--badge-width);padding:0 var(--spacing-xx-small);width:auto}.dnb-badge--horizontal-left{left:0}.dnb-badge--horizontal-right{right:0}.dnb-badge--vertical-bottom{bottom:0}.dnb-badge--vertical-top{top:0}
+.dnb-badge{--badge-font-size:var(--font-size-x-small);--badge-width:1.5rem;--badge-height:1.5rem;--badge-border-radius-information:calc(var(--badge-height)/4);--badge-border-radius-notification:calc(var(--badge-height)/2);--badge-line-height:var(--line-height-x-small);align-content:center;align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(--badge-font-size);font-weight:var(--font-weight-medium);height:var(--badge-height);justify-content:center;white-space:nowrap;width:var(--badge-width)}.dnb-badge,.dnb-core-style .dnb-badge{line-height:var(--badge-line-height)}.dnb-badge__root{display:inline-flex;flex-shrink:0;position:relative;vertical-align:middle}.dnb-badge__root .dnb-badge{display:flex;overflow:hidden;position:absolute;z-index:2}.dnb-badge--variant-notification{border-radius:var(--badge-border-radius-notification)}.dnb-badge--variant-information{border-radius:var(--badge-border-radius-information);min-width:var(--badge-width);padding:0 var(--spacing-xx-small);width:auto}.dnb-badge--horizontal-left{left:0}.dnb-badge--horizontal-right{right:0}.dnb-badge--vertical-bottom{bottom:0}.dnb-badge--vertical-top{top:0}.dnb-badge--inline.dnb-badge--vertical-top{transform:translateY(-25%)}.dnb-badge--inline.dnb-badge--vertical-bottom{transform:translateY(25%)}

package/components/badge/style/dnb-badge.scss

@@ -71,4 +71,16 @@
   &--vertical-top {
     top: 0;
   }
+
+  &--inline {
+    &.dnb-badge--vertical-top {
+      // 1/4 of the badge height
+      transform: translateY(-25%);
+    }
+
+    &.dnb-badge--vertical-bottom {
+      // 1/4 of the badge height
+      transform: translateY(25%);
+    }
+  }
 }

package/es/components/badge/Badge.js

@@ -60,9 +60,10 @@ function Badge(localProps) {
     if (!label && contentIsNum) {
       warn(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
     }
+    const isInline = !children && content;
     return React.createElement("span", _extends({
       role: "status",
-      className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`)
+      className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
     }, props), label && (_span || (_span = React.createElement("span", {
       className: "dnb-sr-only"
     }, label, " "))), content);

package/es/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","_span","context","useContext","allProps","contentProp","props","_objectWithoutProperties","_excluded","createElement","BadgeRoot","BadgeElem","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    label,\n    className,\n    children, // eslint-disable-line\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    ...props\n  } = allProps\n\n  validateDOMAttributes(allProps, props)\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem />\n\n  function BadgeRoot({ children }: { children: React.ReactNode }) {\n    return <span className=\"dnb-badge__root\">{children}</span>\n  }\n\n  function BadgeElem() {\n    const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n    const spacingClasses = createSpacingClasses(allProps)\n    const contentIsNum = typeof contentProp === 'number'\n    const variantIsNotification = variant === 'notification'\n\n    const content =\n      variantIsNotification && contentIsNum && contentProp > 9\n        ? '9+'\n        : contentProp\n\n    if (variantIsNotification && !contentIsNum) {\n      warn(\n        `Type of content should be a number: A notification badge is best suited to display content of type number.`\n      )\n    }\n    if (!label && contentIsNum) {\n      warn(\n        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n      )\n    }\n\n    return (\n      <span\n        role=\"status\"\n        className={classnames(\n          'dnb-badge',\n          `dnb-badge--variant-${variant}`,\n          horizontal && `dnb-badge--horizontal-${horizontal}`,\n          vertical && `dnb-badge--vertical-${vertical}`,\n          skeletonClasses,\n          spacingClasses,\n          className\n        )}\n        {...props}\n      >\n        {label && <span className=\"dnb-sr-only\">{label} </span>}\n        {content}\n      </span>\n    )\n  }\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","_span","context","useContext","allProps","contentProp","props","_objectWithoutProperties","_excluded","createElement","BadgeRoot","BadgeElem","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","isInline","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    label,\n    className,\n    children, // eslint-disable-line\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    ...props\n  } = allProps\n\n  validateDOMAttributes(allProps, props)\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem />\n\n  function BadgeRoot({ children }: { children: React.ReactNode }) {\n    return <span className=\"dnb-badge__root\">{children}</span>\n  }\n\n  function BadgeElem() {\n    const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n    const spacingClasses = createSpacingClasses(allProps)\n    const contentIsNum = typeof contentProp === 'number'\n    const variantIsNotification = variant === 'notification'\n\n    const content =\n      variantIsNotification && contentIsNum && contentProp > 9\n        ? '9+'\n        : contentProp\n\n    if (variantIsNotification && !contentIsNum) {\n      warn(\n        `Type of content should be a number: A notification badge is best suited to display content of type number.`\n      )\n    }\n    if (!label && contentIsNum) {\n      warn(\n        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n      )\n    }\n\n    const isInline = !children && content\n\n    return (\n      <span\n        role=\"status\"\n        className={classnames(\n          'dnb-badge',\n          `dnb-badge--variant-${variant}`,\n          horizontal && `dnb-badge--horizontal-${horizontal}`,\n          vertical && `dnb-badge--vertical-${vertical}`,\n          isInline && 'dnb-badge--inline',\n          skeletonClasses,\n          spacingClasses,\n          className\n        )}\n        {...props}\n      >\n        {label && <span className=\"dnb-sr-only\">{label} </span>}\n        {content}\n      </span>\n    )\n  }\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,4BAA4B;AAGhE,OAAOC,OAAO,MAAM,sBAAsB;AAG1C,SACEC,IAAI,EACJC,sBAAsB,EACtBC,qBAAqB,QAChB,+BAA+B;AAsDtC,OAAO,MAAMC,YAAY,GAAG;EAC1BC,KAAK,EAAE,IAAI;EACXC,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE,KAAK;EACfC,QAAQ,EAAE,IAAI;EACdC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE,IAAI;EACdC,UAAU,EAAE,IAAI;EAChBC,OAAO,EAAE;AACX,CAAC;AAED,SAASC,KAAKA,CAACC,UAAgC,EAAE;EAAA,IAAAC,KAAA;EAE/C,MAAMC,OAAO,GAAGpB,KAAK,CAACqB,UAAU,CAACjB,OAAO,CAAC;EAGzC,MAAMkB,QAAQ,GAAGhB,sBAAsB,CACrCY,UAAU,EACVV,YAAY,EACZY,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEH,KAAK,EACd;IAAEN,QAAQ,EAAES,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAET;EAAS,CAChC,CAAC;EAED,MAAM;MACJF,KAAK;MACLC,SAAS;MACTE,QAAQ;MACRD,QAAQ;MACRI,UAAU;MACVD,QAAQ;MACRD,OAAO,EAAEU,WAAW;MACpBP;IAEF,CAAC,GAAGM,QAAQ;IADPE,KAAK,GAAAC,wBAAA,CACNH,QAAQ,EAAAI,SAAA;EAEZnB,qBAAqB,CAACe,QAAQ,EAAEE,KAAK,CAAC;EAEtC,IAAIZ,QAAQ,EAAE;IACZ,OACEZ,KAAA,CAAA2B,aAAA,CAACC,SAAS,QACPhB,QAAQ,EACTZ,KAAA,CAAA2B,aAAA,CAACE,SAAS,MAAE,CACH,CAAC;EAEhB;EAEA,OAAO7B,KAAA,CAAA2B,aAAA,CAACE,SAAS,MAAE,CAAC;EAEpB,SAASD,SAASA,CAAC;IAAEhB;EAAwC,CAAC,EAAE;IAC9D,OAAOZ,KAAA,CAAA2B,aAAA;MAAMjB,SAAS,EAAC;IAAiB,GAAEE,QAAe,CAAC;EAC5D;EAEA,SAASiB,SAASA,CAAA,EAAG;IACnB,MAAMC,eAAe,GAAG3B,mBAAmB,CAAC,OAAO,EAAEQ,QAAQ,EAAES,OAAO,CAAC;IACvE,MAAMW,cAAc,GAAG7B,oBAAoB,CAACoB,QAAQ,CAAC;IACrD,MAAMU,YAAY,GAAG,OAAOT,WAAW,KAAK,QAAQ;IACpD,MAAMU,qBAAqB,GAAGjB,OAAO,KAAK,cAAc;IAExD,MAAMH,OAAO,GACXoB,qBAAqB,IAAID,YAAY,IAAIT,WAAW,GAAG,CAAC,GACpD,IAAI,GACJA,WAAW;IAEjB,IAAIU,qBAAqB,IAAI,CAACD,YAAY,EAAE;MAC1C3B,IAAI,CACD,4GACH,CAAC;IACH;IACA,IAAI,CAACI,KAAK,IAAIuB,YAAY,EAAE;MAC1B3B,IAAI,CACD,8JACH,CAAC;IACH;IAEA,MAAM6B,QAAQ,GAAG,CAACtB,QAAQ,IAAIC,OAAO;IAErC,OACEb,KAAA,CAAA2B,aAAA,SAAAQ,QAAA;MACEC,IAAI,EAAC,QAAQ;MACb1B,SAAS,EAAET,UAAU,iCAEGe,OAAQ,IAI9Bc,eAAe,EACfC,cAAc,EACdrB,SAAS,EALTK,UAAU,IAAK,yBAAwBA,UAAW,EAAC,EACnDD,QAAQ,IAAK,uBAAsBA,QAAS,EAAC,EAC7CoB,QAAQ,IAAI,mBAId;IAAE,GACEV,KAAK,GAERf,KAAK,KAAAU,KAAA,KAAAA,KAAA,GAAInB,KAAA,CAAA2B,aAAA;MAAMjB,SAAS,EAAC;IAAa,GAAED,KAAK,EAAC,GAAO,CAAC,IACtDI,OACG,CAAC;EAEX;AACF;AAEAI,KAAK,CAACoB,qBAAqB,GAAG,IAAI;AAElC,eAAepB,KAAK"}

package/es/components/badge/style/dnb-badge.css

@@ -58,4 +58,10 @@
 }
 .dnb-badge--vertical-top {
   top: 0;
+}
+.dnb-badge--inline.dnb-badge--vertical-top {
+  transform: translateY(-25%);
+}
+.dnb-badge--inline.dnb-badge--vertical-bottom {
+  transform: translateY(25%);
 }

package/es/components/badge/style/dnb-badge.min.css

@@ -1 +1 @@
-.dnb-badge{--badge-font-size:var(--font-size-x-small);--badge-width:1.5rem;--badge-height:1.5rem;--badge-border-radius-information:calc(var(--badge-height)/4);--badge-border-radius-notification:calc(var(--badge-height)/2);--badge-line-height:var(--line-height-x-small);align-content:center;align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(--badge-font-size);font-weight:var(--font-weight-medium);height:var(--badge-height);justify-content:center;white-space:nowrap;width:var(--badge-width)}.dnb-badge,.dnb-core-style .dnb-badge{line-height:var(--badge-line-height)}.dnb-badge__root{display:inline-flex;flex-shrink:0;position:relative;vertical-align:middle}.dnb-badge__root .dnb-badge{display:flex;overflow:hidden;position:absolute;z-index:2}.dnb-badge--variant-notification{border-radius:var(--badge-border-radius-notification)}.dnb-badge--variant-information{border-radius:var(--badge-border-radius-information);min-width:var(--badge-width);padding:0 var(--spacing-xx-small);width:auto}.dnb-badge--horizontal-left{left:0}.dnb-badge--horizontal-right{right:0}.dnb-badge--vertical-bottom{bottom:0}.dnb-badge--vertical-top{top:0}
+.dnb-badge{--badge-font-size:var(--font-size-x-small);--badge-width:1.5rem;--badge-height:1.5rem;--badge-border-radius-information:calc(var(--badge-height)/4);--badge-border-radius-notification:calc(var(--badge-height)/2);--badge-line-height:var(--line-height-x-small);align-content:center;align-items:center;display:inline-flex;flex-flow:row wrap;font-size:var(--badge-font-size);font-weight:var(--font-weight-medium);height:var(--badge-height);justify-content:center;white-space:nowrap;width:var(--badge-width)}.dnb-badge,.dnb-core-style .dnb-badge{line-height:var(--badge-line-height)}.dnb-badge__root{display:inline-flex;flex-shrink:0;position:relative;vertical-align:middle}.dnb-badge__root .dnb-badge{display:flex;overflow:hidden;position:absolute;z-index:2}.dnb-badge--variant-notification{border-radius:var(--badge-border-radius-notification)}.dnb-badge--variant-information{border-radius:var(--badge-border-radius-information);min-width:var(--badge-width);padding:0 var(--spacing-xx-small);width:auto}.dnb-badge--horizontal-left{left:0}.dnb-badge--horizontal-right{right:0}.dnb-badge--vertical-bottom{bottom:0}.dnb-badge--vertical-top{top:0}.dnb-badge--inline.dnb-badge--vertical-top{transform:translateY(-25%)}.dnb-badge--inline.dnb-badge--vertical-bottom{transform:translateY(25%)}

package/es/components/badge/style/dnb-badge.scss

@@ -71,4 +71,16 @@
   &--vertical-top {
     top: 0;
   }
+
+  &--inline {
+    &.dnb-badge--vertical-top {
+      // 1/4 of the badge height
+      transform: translateY(-25%);
+    }
+
+    &.dnb-badge--vertical-bottom {
+      // 1/4 of the badge height
+      transform: translateY(25%);
+    }
+  }
 }

package/es/extensions/forms/Form/Section/EditContainer/EditToolbarTools.js

@@ -20,7 +20,7 @@ export default function EditToolbarTools() {
     hasVisibleError,
     hasSubmitError
   } = useContext(FieldBoundaryContext) || {};
-  const translation = useTranslation().Section;
+  const translation = useTranslation().SectionEditContainer;
   const [showError, setShowError] = useState(false);
   const cancelHandler = useCallback(() => {
     if (hasSubmitError) {
@@ -49,11 +49,11 @@ export default function EditToolbarTools() {
     icon: check,
     icon_position: "left",
     on_click: doneHandler
-  }, translation.done), React.createElement(Button, {
+  }, translation.doneButton), React.createElement(Button, {
     variant: "tertiary",
     icon: close,
     icon_position: "left",
     on_click: cancelHandler
-  }, translation.cancel)));
+  }, translation.cancelButton)));
 }
 //# sourceMappingURL=EditToolbarTools.js.map

package/es/extensions/forms/Form/Section/EditContainer/EditToolbarTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useState","Button","Flex","FormStatus","useTranslation","SectionContainerContext","FieldBoundaryContext","check","close","useContainerDataStore","useEditContainerToolbar","EditToolbarTools","restoreOriginalData","switchContainerMode","hasVisibleError","hasSubmitError","translation","Section","showError","setShowError","cancelHandler","doneHandler","createElement","Fragment","show","no_animation","errorInSection","Horizontal","gap","variant","icon","icon_position","on_click","done","cancel"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from 'react'\nimport { Button, Flex, FormStatus } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { check, close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport useEditContainerToolbar from './useEditContainerToolbar'\n\nexport default function EditToolbarTools() {\n  useEditContainerToolbar()\n  const { restoreOriginalData } = useContainerDataStore()\n\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const { hasVisibleError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().Section\n\n  const [showError, setShowError] = useState(false)\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n    }\n  }, [hasSubmitError, restoreOriginalData, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    if (hasVisibleError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      switchContainerMode?.('view')\n    }\n  }, [hasVisibleError, switchContainerMode])\n\n  return (\n    <>\n      <FormStatus show={showError && hasVisibleError} no_animation={false}>\n        {translation.errorInSection}\n      </FormStatus>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.done}\n        </Button>\n\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancel}\n        </Button>\n      </Flex.Horizontal>\n    </>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAChE,SAASC,MAAM,EAAEC,IAAI,EAAEC,UAAU,QAAQ,2BAA2B;AACpE,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,oBAAoB,MAAM,yDAAyD;AAC1F,SAASC,KAAK,EAAEC,KAAK,QAAQ,sBAAsB;AACnD,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,uBAAuB,MAAM,2BAA2B;AAE/D,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzCD,uBAAuB,CAAC,CAAC;EACzB,MAAM;IAAEE;EAAoB,CAAC,GAAGH,qBAAqB,CAAC,CAAC;EAEvD,MAAM;IAAEI;EAAoB,CAAC,GAAGd,UAAU,CAACM,uBAAuB,CAAC,IAAI,CAAC,CAAC;EACzE,MAAM;IAAES,eAAe;IAAEC;EAAe,CAAC,GACvChB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAExC,MAAMU,WAAW,GAAGZ,cAAc,CAAC,CAAC,CAACa,OAAO;EAE5C,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMoB,aAAa,GAAGtB,WAAW,CAAC,MAAM;IACtC,IAAIiB,cAAc,EAAE;MAClBI,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBP,mBAAmB,CAAC,CAAC;MACrBC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACE,cAAc,EAAEH,mBAAmB,EAAEC,mBAAmB,CAAC,CAAC;EAC9D,MAAMQ,WAAW,GAAGvB,WAAW,CAAC,MAAM;IACpC,IAAIgB,eAAe,EAAE;MACnBK,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBN,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACC,eAAe,EAAED,mBAAmB,CAAC,CAAC;EAE1C,OACEhB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACE1B,KAAA,CAAAyB,aAAA,CAACnB,UAAU;IAACqB,IAAI,EAAEN,SAAS,IAAIJ,eAAgB;IAACW,YAAY,EAAE;EAAM,GACjET,WAAW,CAACU,cACH,CAAC,EACb7B,KAAA,CAAAyB,aAAA,CAACpB,IAAI,CAACyB,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1B/B,KAAA,CAAAyB,aAAA,CAACrB,MAAM;IACL4B,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEvB,KAAM;IACZwB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEX;EAAY,GAErBL,WAAW,CAACiB,IACP,CAAC,EAETpC,KAAA,CAAAyB,aAAA,CAACrB,MAAM;IACL4B,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEtB,KAAM;IACZuB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEZ;EAAc,GAEvBJ,WAAW,CAACkB,MACP,CACO,CACjB,CAAC;AAEP"}
+{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useState","Button","Flex","FormStatus","useTranslation","SectionContainerContext","FieldBoundaryContext","check","close","useContainerDataStore","useEditContainerToolbar","EditToolbarTools","restoreOriginalData","switchContainerMode","hasVisibleError","hasSubmitError","translation","SectionEditContainer","showError","setShowError","cancelHandler","doneHandler","createElement","Fragment","show","no_animation","errorInSection","Horizontal","gap","variant","icon","icon_position","on_click","doneButton","cancelButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from 'react'\nimport { Button, Flex, FormStatus } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { check, close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport useEditContainerToolbar from './useEditContainerToolbar'\n\nexport default function EditToolbarTools() {\n  useEditContainerToolbar()\n  const { restoreOriginalData } = useContainerDataStore()\n\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const { hasVisibleError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const [showError, setShowError] = useState(false)\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n    }\n  }, [hasSubmitError, restoreOriginalData, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    if (hasVisibleError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      switchContainerMode?.('view')\n    }\n  }, [hasVisibleError, switchContainerMode])\n\n  return (\n    <>\n      <FormStatus show={showError && hasVisibleError} no_animation={false}>\n        {translation.errorInSection}\n      </FormStatus>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.doneButton}\n        </Button>\n\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancelButton}\n        </Button>\n      </Flex.Horizontal>\n    </>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAChE,SAASC,MAAM,EAAEC,IAAI,EAAEC,UAAU,QAAQ,2BAA2B;AACpE,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,OAAOC,oBAAoB,MAAM,yDAAyD;AAC1F,SAASC,KAAK,EAAEC,KAAK,QAAQ,sBAAsB;AACnD,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,uBAAuB,MAAM,2BAA2B;AAE/D,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzCD,uBAAuB,CAAC,CAAC;EACzB,MAAM;IAAEE;EAAoB,CAAC,GAAGH,qBAAqB,CAAC,CAAC;EAEvD,MAAM;IAAEI;EAAoB,CAAC,GAAGd,UAAU,CAACM,uBAAuB,CAAC,IAAI,CAAC,CAAC;EACzE,MAAM;IAAES,eAAe;IAAEC;EAAe,CAAC,GACvChB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAExC,MAAMU,WAAW,GAAGZ,cAAc,CAAC,CAAC,CAACa,oBAAoB;EAEzD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMoB,aAAa,GAAGtB,WAAW,CAAC,MAAM;IACtC,IAAIiB,cAAc,EAAE;MAClBI,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBP,mBAAmB,CAAC,CAAC;MACrBC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACE,cAAc,EAAEH,mBAAmB,EAAEC,mBAAmB,CAAC,CAAC;EAC9D,MAAMQ,WAAW,GAAGvB,WAAW,CAAC,MAAM;IACpC,IAAIgB,eAAe,EAAE;MACnBK,YAAY,CAAC,IAAI,CAAC;IACpB,CAAC,MAAM;MACLA,YAAY,CAAC,KAAK,CAAC;MACnBN,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACC,eAAe,EAAED,mBAAmB,CAAC,CAAC;EAE1C,OACEhB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACE1B,KAAA,CAAAyB,aAAA,CAACnB,UAAU;IAACqB,IAAI,EAAEN,SAAS,IAAIJ,eAAgB;IAACW,YAAY,EAAE;EAAM,GACjET,WAAW,CAACU,cACH,CAAC,EACb7B,KAAA,CAAAyB,aAAA,CAACpB,IAAI,CAACyB,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1B/B,KAAA,CAAAyB,aAAA,CAACrB,MAAM;IACL4B,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEvB,KAAM;IACZwB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEX;EAAY,GAErBL,WAAW,CAACiB,UACP,CAAC,EAETpC,KAAA,CAAAyB,aAAA,CAACrB,MAAM;IACL4B,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEtB,KAAM;IACZuB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEZ;EAAc,GAEvBJ,WAAW,CAACkB,YACP,CACO,CACjB,CAAC;AAEP"}

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.js

@@ -10,7 +10,7 @@ export default function ViewToolbarTools() {
   const {
     switchContainerMode
   } = sectionContainerContext !== null && sectionContainerContext !== void 0 ? sectionContainerContext : {};
-  const translation = useTranslation().Section;
+  const translation = useTranslation().SectionViewContainer;
   const editHandler = useCallback(() => {
     switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
   }, [switchContainerMode]);
@@ -21,6 +21,6 @@ export default function ViewToolbarTools() {
     icon: edit,
     icon_position: "left",
     on_click: editHandler
-  }, translation.edit));
+  }, translation.editButton));
 }
 //# sourceMappingURL=ViewToolbarTools.js.map

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","useTranslation","SectionContainerContext","edit","ViewToolbarTools","sectionContainerContext","switchContainerMode","translation","Section","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport { edit } from '../../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const sectionContainerContext = useContext(SectionContainerContext)\n  const { switchContainerMode } = sectionContainerContext ?? {}\n\n  const translation = useTranslation().Section\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.edit}\n      </Button>\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,2BAA2B;AACxD,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,SAASC,IAAI,QAAQ,sBAAsB;AAE3C,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,uBAAuB,GAAGP,UAAU,CAACI,uBAAuB,CAAC;EACnE,MAAM;IAAEI;EAAoB,CAAC,GAAGD,uBAAuB,aAAvBA,uBAAuB,cAAvBA,uBAAuB,GAAI,CAAC,CAAC;EAE7D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,OAAO;EAE5C,MAAMC,WAAW,GAAGZ,WAAW,CAAC,MAAM;IACpCS,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEV,KAAA,CAAAc,aAAA,CAACV,IAAI,CAACW,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BhB,KAAA,CAAAc,aAAA,CAACX,MAAM;IACLc,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACJ,IACP,CACO,CAAC;AAEtB"}
+{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","useTranslation","SectionContainerContext","edit","ViewToolbarTools","sectionContainerContext","switchContainerMode","translation","SectionViewContainer","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click","editButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport { edit } from '../../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const sectionContainerContext = useContext(SectionContainerContext)\n  const { switchContainerMode } = sectionContainerContext ?? {}\n\n  const translation = useTranslation().SectionViewContainer\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.editButton}\n      </Button>\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,2BAA2B;AACxD,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,SAASC,IAAI,QAAQ,sBAAsB;AAE3C,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,uBAAuB,GAAGP,UAAU,CAACI,uBAAuB,CAAC;EACnE,MAAM;IAAEI;EAAoB,CAAC,GAAGD,uBAAuB,aAAvBA,uBAAuB,cAAvBA,uBAAuB,GAAI,CAAC,CAAC;EAE7D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,oBAAoB;EAEzD,MAAMC,WAAW,GAAGZ,WAAW,CAAC,MAAM;IACpCS,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEV,KAAA,CAAAc,aAAA,CAACV,IAAI,CAACW,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BhB,KAAA,CAAAc,aAAA,CAACX,MAAM;IACLc,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACU,UACP,CACO,CAAC;AAEtB"}

package/es/extensions/forms/Iterate/EditContainer/EditToolbarTools.js

@@ -1,6 +1,5 @@
 "use client";
 
-var _RemoveButton;
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Button, Flex, FormStatus } from '../../../../components';
 import useTranslation from '../../hooks/useTranslation';
@@ -20,7 +19,7 @@ export default function EditToolbarTools() {
   const {
     hasVisibleError
   } = useContext(FieldBoundaryContext) || {};
-  const translation = useTranslation().Section;
+  const translation = useTranslation().IterateEditContainer;
   const valueBackupRef = useRef();
   const wasNew = useWasNew({
     isNew,
@@ -60,12 +59,14 @@ export default function EditToolbarTools() {
     icon: check,
     icon_position: "left",
     on_click: doneHandler
-  }, translation.done), wasNew ? _RemoveButton || (_RemoveButton = React.createElement(RemoveButton, null)) : React.createElement(Button, {
+  }, translation.doneButton), wasNew ? React.createElement(RemoveButton, {
+    text: translation.removeButton
+  }) : React.createElement(Button, {
     variant: "tertiary",
     icon: close,
     icon_position: "left",
     on_click: cancelHandler
-  }, translation.cancel)));
+  }, translation.cancelButton)));
 }
 export function useWasNew({
   isNew,

package/es/extensions/forms/Iterate/EditContainer/EditToolbarTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useEffect","useRef","useState","Button","Flex","FormStatus","useTranslation","IterateElementContext","check","close","RemoveButton","FieldBoundaryContext","EditToolbarTools","restoreOriginalValue","switchContainerMode","containerMode","arrayValue","index","isNew","hasVisibleError","translation","Section","valueBackupRef","wasNew","useWasNew","showError","setShowError","current","cancelHandler","doneHandler","createElement","Fragment","show","no_animation","errorInSection","Horizontal","gap","variant","icon","icon_position","on_click","done","_RemoveButton","cancel","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { Button, Flex, FormStatus } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { check, close } from '../../../../icons'\nimport RemoveButton from '../RemoveButton'\nimport { ContainerMode } from '../Array/types'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function EditToolbarTools() {\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    arrayValue,\n    index,\n    isNew,\n  } = useContext(IterateElementContext) || {}\n  const { hasVisibleError } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().Section\n  const valueBackupRef = useRef<unknown>()\n  const wasNew = useWasNew({ isNew, containerMode })\n  const [showError, setShowError] = useState(false)\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (valueBackupRef.current) {\n      restoreOriginalValue?.(valueBackupRef.current)\n    }\n    setShowError(false)\n    switchContainerMode?.('view')\n  }, [restoreOriginalValue, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    if (hasVisibleError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      switchContainerMode?.('view')\n    }\n  }, [hasVisibleError, switchContainerMode])\n\n  return (\n    <>\n      <FormStatus show={showError && hasVisibleError} no_animation={false}>\n        {translation.errorInSection}\n      </FormStatus>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.done}\n        </Button>\n\n        {wasNew ? (\n          <RemoveButton />\n        ) : (\n          <Button\n            variant=\"tertiary\"\n            icon={close}\n            icon_position=\"left\"\n            on_click={cancelHandler}\n          >\n            {translation.cancel}\n          </Button>\n        )}\n      </Flex.Horizontal>\n    </>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useEffect","useRef","useState","Button","Flex","FormStatus","useTranslation","IterateElementContext","check","close","RemoveButton","FieldBoundaryContext","EditToolbarTools","restoreOriginalValue","switchContainerMode","containerMode","arrayValue","index","isNew","hasVisibleError","translation","IterateEditContainer","valueBackupRef","wasNew","useWasNew","showError","setShowError","current","cancelHandler","doneHandler","createElement","Fragment","show","no_animation","errorInSection","Horizontal","gap","variant","icon","icon_position","on_click","doneButton","text","removeButton","cancelButton","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { Button, Flex, FormStatus } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { check, close } from '../../../../icons'\nimport RemoveButton from '../RemoveButton'\nimport { ContainerMode } from '../Array/types'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function EditToolbarTools() {\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    arrayValue,\n    index,\n    isNew,\n  } = useContext(IterateElementContext) || {}\n  const { hasVisibleError } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().IterateEditContainer\n  const valueBackupRef = useRef<unknown>()\n  const wasNew = useWasNew({ isNew, containerMode })\n  const [showError, setShowError] = useState(false)\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (valueBackupRef.current) {\n      restoreOriginalValue?.(valueBackupRef.current)\n    }\n    setShowError(false)\n    switchContainerMode?.('view')\n  }, [restoreOriginalValue, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    if (hasVisibleError) {\n      setShowError(true)\n    } else {\n      setShowError(false)\n      switchContainerMode?.('view')\n    }\n  }, [hasVisibleError, switchContainerMode])\n\n  return (\n    <>\n      <FormStatus show={showError && hasVisibleError} no_animation={false}>\n        {translation.errorInSection}\n      </FormStatus>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.doneButton}\n        </Button>\n\n        {wasNew ? (\n          <RemoveButton text={translation.removeButton} />\n        ) : (\n          <Button\n            variant=\"tertiary\"\n            icon={close}\n            icon_position=\"left\"\n            on_click={cancelHandler}\n          >\n            {translation.cancelButton}\n          </Button>\n        )}\n      </Flex.Horizontal>\n    </>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}

package/es/extensions/forms/Iterate/RemoveButton/RemoveButton.js

@@ -28,8 +28,8 @@ function RemoveButton(props) {
     text
   } = useFieldProps(restProps);
   const buttonProps = omitDataValueReadWriteProps(restProps);
-  const translation = useTranslation().Section;
-  const textContent = text || children || translation.remove;
+  const translation = useTranslation().RemoveButton;
+  const textContent = text || children || translation.text;
   const elementBlockContext = useContext(ElementBlockContext);
   const {
     handleRemoveBlock

package/es/extensions/forms/Iterate/RemoveButton/RemoveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoveButton.js","names":["React","useCallback","useContext","classnames","Button","IterateElementContext","useFieldProps","useTranslation","ElementBlockContext","omitDataValueReadWriteProps","trash","RemoveButton","props","iterateElementContext","handleRemove","Error","className","restProps","_objectWithoutProperties","_excluded","children","text","buttonProps","translation","Section","textContent","remove","elementBlockContext","handleRemoveBlock","handleClick","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateElementContext from '../IterateElementContext'\nimport { useFieldProps, useTranslation } from '../../hooks'\nimport ElementBlockContext from '../AnimatedContainer/ElementBlockContext'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\nimport { trash } from '../../../../icons'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]>\n\nfunction RemoveButton(props: Props) {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { handleRemove } = iterateElementContext ?? {}\n\n  if (!iterateElementContext) {\n    throw new Error('RemoveButton must be inside an Iterate.Array')\n  }\n\n  const { className, ...restProps } = props\n  const { children, text } = useFieldProps(restProps)\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const translation = useTranslation().Section\n  const textContent = text || children || translation.remove\n\n  const elementBlockContext = useContext(ElementBlockContext)\n  const { handleRemoveBlock } = elementBlockContext ?? {}\n\n  const handleClick = useCallback(() => {\n    if (handleRemoveBlock) {\n      handleRemoveBlock()\n    } else {\n      handleRemove()\n    }\n  }, [handleRemove, handleRemoveBlock])\n\n  return (\n    <Button\n      className={classnames(\n        'dnb-forms-iterate-remove-element-button',\n        className\n      )}\n      variant={textContent ? 'tertiary' : 'secondary'}\n      icon={trash}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {textContent}\n    </Button>\n  )\n}\n\nRemoveButton._supportsSpacingProps = true\nexport default RemoveButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,aAAa,EAAEC,cAAc,QAAQ,aAAa;AAC3D,OAAOC,mBAAmB,MAAM,0CAA0C;AAC1E,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,qBAAqB,GAAGX,UAAU,CAACG,qBAAqB,CAAC;EAC/D,MAAM;IAAES;EAAa,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAEpD,IAAI,CAACA,qBAAqB,EAAE;IAC1B,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;EACjE;EAEA,MAAM;MAAEC;IAAwB,CAAC,GAAGJ,KAAK;IAAnBK,SAAS,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EACzC,MAAM;IAAEC,QAAQ;IAAEC;EAAK,CAAC,GAAGf,aAAa,CAACW,SAAS,CAAC;EACnD,MAAMK,WAAW,GAAGb,2BAA2B,CAACQ,SAAS,CAAC;EAC1D,MAAMM,WAAW,GAAGhB,cAAc,CAAC,CAAC,CAACiB,OAAO;EAC5C,MAAMC,WAAW,GAAGJ,IAAI,IAAID,QAAQ,IAAIG,WAAW,CAACG,MAAM;EAE1D,MAAMC,mBAAmB,GAAGzB,UAAU,CAACM,mBAAmB,CAAC;EAC3D,MAAM;IAAEoB;EAAkB,CAAC,GAAGD,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAI,CAAC,CAAC;EAEvD,MAAME,WAAW,GAAG5B,WAAW,CAAC,MAAM;IACpC,IAAI2B,iBAAiB,EAAE;MACrBA,iBAAiB,CAAC,CAAC;IACrB,CAAC,MAAM;MACLd,YAAY,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAACA,YAAY,EAAEc,iBAAiB,CAAC,CAAC;EAErC,OACE5B,KAAA,CAAA8B,aAAA,CAAC1B,MAAM,EAAA2B,QAAA;IACLf,SAAS,EAAEb,UAAU,CACnB,yCAAyC,EACzCa,SACF,CAAE;IACFgB,OAAO,EAAEP,WAAW,GAAG,UAAU,GAAG,WAAY;IAChDQ,IAAI,EAAEvB,KAAM;IACZwB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEN;EAAY,GAClBP,WAAW,GAEdG,WACK,CAAC;AAEb;AAEAd,YAAY,CAACyB,qBAAqB,GAAG,IAAI;AACzC,eAAezB,YAAY"}
+{"version":3,"file":"RemoveButton.js","names":["React","useCallback","useContext","classnames","Button","IterateElementContext","useFieldProps","useTranslation","ElementBlockContext","omitDataValueReadWriteProps","trash","RemoveButton","props","iterateElementContext","handleRemove","Error","className","restProps","_objectWithoutProperties","_excluded","children","text","buttonProps","translation","textContent","elementBlockContext","handleRemoveBlock","handleClick","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateElementContext from '../IterateElementContext'\nimport { useFieldProps, useTranslation } from '../../hooks'\nimport ElementBlockContext from '../AnimatedContainer/ElementBlockContext'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\nimport { trash } from '../../../../icons'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]>\n\nfunction RemoveButton(props: Props) {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { handleRemove } = iterateElementContext ?? {}\n\n  if (!iterateElementContext) {\n    throw new Error('RemoveButton must be inside an Iterate.Array')\n  }\n\n  const { className, ...restProps } = props\n  const { children, text } = useFieldProps(restProps)\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const translation = useTranslation().RemoveButton\n  const textContent = text || children || translation.text\n\n  const elementBlockContext = useContext(ElementBlockContext)\n  const { handleRemoveBlock } = elementBlockContext ?? {}\n\n  const handleClick = useCallback(() => {\n    if (handleRemoveBlock) {\n      handleRemoveBlock()\n    } else {\n      handleRemove()\n    }\n  }, [handleRemove, handleRemoveBlock])\n\n  return (\n    <Button\n      className={classnames(\n        'dnb-forms-iterate-remove-element-button',\n        className\n      )}\n      variant={textContent ? 'tertiary' : 'secondary'}\n      icon={trash}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {textContent}\n    </Button>\n  )\n}\n\nRemoveButton._supportsSpacingProps = true\nexport default RemoveButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,aAAa,EAAEC,cAAc,QAAQ,aAAa;AAC3D,OAAOC,mBAAmB,MAAM,0CAA0C;AAC1E,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,qBAAqB,GAAGX,UAAU,CAACG,qBAAqB,CAAC;EAC/D,MAAM;IAAES;EAAa,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAEpD,IAAI,CAACA,qBAAqB,EAAE;IAC1B,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;EACjE;EAEA,MAAM;MAAEC;IAAwB,CAAC,GAAGJ,KAAK;IAAnBK,SAAS,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EACzC,MAAM;IAAEC,QAAQ;IAAEC;EAAK,CAAC,GAAGf,aAAa,CAACW,SAAS,CAAC;EACnD,MAAMK,WAAW,GAAGb,2BAA2B,CAACQ,SAAS,CAAC;EAC1D,MAAMM,WAAW,GAAGhB,cAAc,CAAC,CAAC,CAACI,YAAY;EACjD,MAAMa,WAAW,GAAGH,IAAI,IAAID,QAAQ,IAAIG,WAAW,CAACF,IAAI;EAExD,MAAMI,mBAAmB,GAAGvB,UAAU,CAACM,mBAAmB,CAAC;EAC3D,MAAM;IAAEkB;EAAkB,CAAC,GAAGD,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAI,CAAC,CAAC;EAEvD,MAAME,WAAW,GAAG1B,WAAW,CAAC,MAAM;IACpC,IAAIyB,iBAAiB,EAAE;MACrBA,iBAAiB,CAAC,CAAC;IACrB,CAAC,MAAM;MACLZ,YAAY,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAACA,YAAY,EAAEY,iBAAiB,CAAC,CAAC;EAErC,OACE1B,KAAA,CAAA4B,aAAA,CAACxB,MAAM,EAAAyB,QAAA;IACLb,SAAS,EAAEb,UAAU,CACnB,yCAAyC,EACzCa,SACF,CAAE;IACFc,OAAO,EAAEN,WAAW,GAAG,UAAU,GAAG,WAAY;IAChDO,IAAI,EAAErB,KAAM;IACZsB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEN;EAAY,GAClBL,WAAW,GAEdE,WACK,CAAC;AAEb;AAEAb,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}

package/es/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.js

@@ -11,7 +11,7 @@ export default function ViewToolbarTools() {
   const {
     switchContainerMode
   } = iterateElementContext !== null && iterateElementContext !== void 0 ? iterateElementContext : {};
-  const translation = useTranslation().Section;
+  const translation = useTranslation().IterateViewContainer;
   const editHandler = useCallback(() => {
     switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
   }, [switchContainerMode]);
@@ -22,8 +22,8 @@ export default function ViewToolbarTools() {
     icon: edit,
     icon_position: "left",
     on_click: editHandler
-  }, translation.edit), React.createElement(RemoveButton, {
-    text: translation.remove
+  }, translation.editButton), React.createElement(RemoveButton, {
+    text: translation.removeButton
   }));
 }
 //# sourceMappingURL=ViewToolbarTools.js.map

package/es/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","RemoveButton","useTranslation","IterateElementContext","edit","ViewToolbarTools","iterateElementContext","switchContainerMode","translation","Section","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click","text","remove"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport RemoveButton from '../RemoveButton'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { edit } from '../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { switchContainerMode } = iterateElementContext ?? {}\n\n  const translation = useTranslation().Section\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.edit}\n      </Button>\n\n      <RemoveButton text={translation.remove} />\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,IAAI,QAAQ,mBAAmB;AAExC,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,qBAAqB,GAAGR,UAAU,CAACK,qBAAqB,CAAC;EAC/D,MAAM;IAAEI;EAAoB,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAE3D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,OAAO;EAE5C,MAAMC,WAAW,GAAGb,WAAW,CAAC,MAAM;IACpCU,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEX,KAAA,CAAAe,aAAA,CAACX,IAAI,CAACY,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BjB,KAAA,CAAAe,aAAA,CAACZ,MAAM;IACLe,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACJ,IACP,CAAC,EAETR,KAAA,CAAAe,aAAA,CAACV,YAAY;IAACiB,IAAI,EAAEV,WAAW,CAACW;EAAO,CAAE,CAC1B,CAAC;AAEtB"}
+{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","RemoveButton","useTranslation","IterateElementContext","edit","ViewToolbarTools","iterateElementContext","switchContainerMode","translation","IterateViewContainer","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click","editButton","text","removeButton"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport RemoveButton from '../RemoveButton'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { edit } from '../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { switchContainerMode } = iterateElementContext ?? {}\n\n  const translation = useTranslation().IterateViewContainer\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.editButton}\n      </Button>\n\n      <RemoveButton text={translation.removeButton} />\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,IAAI,QAAQ,mBAAmB;AAExC,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,qBAAqB,GAAGR,UAAU,CAACK,qBAAqB,CAAC;EAC/D,MAAM;IAAEI;EAAoB,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAE3D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,oBAAoB;EAEzD,MAAMC,WAAW,GAAGb,WAAW,CAAC,MAAM;IACpCU,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEX,KAAA,CAAAe,aAAA,CAACX,IAAI,CAACY,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BjB,KAAA,CAAAe,aAAA,CAACZ,MAAM;IACLe,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACU,UACP,CAAC,EAETtB,KAAA,CAAAe,aAAA,CAACV,YAAY;IAACkB,IAAI,EAAEX,WAAW,CAACY;EAAa,CAAE,CAChC,CAAC;AAEtB"}

package/es/extensions/forms/Wizard/EditButton/EditButton.js

@@ -12,7 +12,7 @@ import { edit } from '../../../../icons';
 import Hr from '../../../../elements/Hr';
 import { omitSpacingProps, pickSpacingProps } from '../../../../components/flex/utils';
 function EditButton(props) {
-  const translations = useTranslation().Step;
+  const translations = useTranslation().WizardEditButton;
   const {
     setActiveIndex
   } = useStep();
@@ -22,7 +22,7 @@ function EditButton(props) {
       icon_position = 'left',
       icon,
       toStep,
-      children = translations.edit
+      children = translations.text
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const handleClick = useCallback(() => {

package/es/extensions/forms/Wizard/EditButton/EditButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditButton.js","names":["React","useCallback","classnames","Button","ButtonRow","useTranslation","useStep","edit","Hr","omitSpacingProps","pickSpacingProps","EditButton","props","translations","Step","setActiveIndex","className","variant","icon_position","icon","toStep","children","rest","_objectWithoutProperties","_excluded","handleClick","createElement","_Hr","space","_extends","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/EditButton/EditButton.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport ButtonRow from '../../Form/ButtonRow'\nimport { StepIndex } from '../Context/WizardContext'\nimport useTranslation from '../../hooks/useTranslation'\nimport useStep from '../hooks/useStep'\nimport { edit } from '../../../../icons'\nimport Hr from '../../../../elements/Hr'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\n\nexport type Props = ComponentProps & ButtonProps & { toStep?: StepIndex }\n\nfunction EditButton(props: Props) {\n  const translations = useTranslation().Step\n  const { setActiveIndex } = useStep()\n\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon,\n    toStep,\n    children = translations.edit,\n    ...rest\n  } = props\n\n  const handleClick = useCallback(() => {\n    if (toStep > -1) {\n      setActiveIndex(toStep)\n    }\n  }, [toStep, setActiveIndex])\n\n  return (\n    <ButtonRow {...pickSpacingProps(props)}>\n      <Hr space={0} />\n      <Button\n        className={classnames('dnb-forms-edit-button', className)}\n        variant={variant}\n        icon_position={icon_position}\n        icon={edit || icon}\n        on_click={handleClick}\n        {...omitSpacingProps(rest)}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nEditButton._supportsSpacingProps = true\nexport default EditButton\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,SAAS,MAAM,sBAAsB;AAE5C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,OAAO,MAAM,kBAAkB;AACtC,SAASC,IAAI,QAAQ,mBAAmB;AACxC,OAAOC,EAAE,MAAM,yBAAyB;AACxC,SACEC,gBAAgB,EAChBC,gBAAgB,QACX,mCAAmC;AAI1C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,YAAY,GAAGR,cAAc,CAAC,CAAC,CAACS,IAAI;EAC1C,MAAM;IAAEC;EAAe,CAAC,GAAGT,OAAO,CAAC,CAAC;EAEpC,MAAM;MACJU,SAAS;MACTC,OAAO,GAAG,UAAU;MACpBC,aAAa,GAAG,MAAM;MACtBC,IAAI;MACJC,MAAM;MACNC,QAAQ,GAAGR,YAAY,CAACN;IAE1B,CAAC,GAAGK,KAAK;IADJU,IAAI,GAAAC,wBAAA,CACLX,KAAK,EAAAY,SAAA;EAET,MAAMC,WAAW,GAAGxB,WAAW,CAAC,MAAM;IACpC,IAAImB,MAAM,GAAG,CAAC,CAAC,EAAE;MACfL,cAAc,CAACK,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAEL,cAAc,CAAC,CAAC;EAE5B,OACEf,KAAA,CAAA0B,aAAA,CAACtB,SAAS,EAAKM,gBAAgB,CAACE,KAAK,CAAC,EAAAe,GAAA,KAAAA,GAAA,GACpC3B,KAAA,CAAA0B,aAAA,CAAClB,EAAE;IAACoB,KAAK,EAAE;EAAE,CAAE,CAAC,GAChB5B,KAAA,CAAA0B,aAAA,CAACvB,MAAM,EAAA0B,QAAA;IACLb,SAAS,EAAEd,UAAU,CAAC,uBAAuB,EAAEc,SAAS,CAAE;IAC1DC,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEZ,IAAI,IAAIY,IAAK;IACnBW,QAAQ,EAAEL;EAAY,GAClBhB,gBAAgB,CAACa,IAAI,CAAC,GAEzBD,QACK,CACC,CAAC;AAEhB;AAEAV,UAAU,CAACoB,qBAAqB,GAAG,IAAI;AACvC,eAAepB,UAAU"}
+{"version":3,"file":"EditButton.js","names":["React","useCallback","classnames","Button","ButtonRow","useTranslation","useStep","edit","Hr","omitSpacingProps","pickSpacingProps","EditButton","props","translations","WizardEditButton","setActiveIndex","className","variant","icon_position","icon","toStep","children","text","rest","_objectWithoutProperties","_excluded","handleClick","createElement","_Hr","space","_extends","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/EditButton/EditButton.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport ButtonRow from '../../Form/ButtonRow'\nimport { StepIndex } from '../Context/WizardContext'\nimport useTranslation from '../../hooks/useTranslation'\nimport useStep from '../hooks/useStep'\nimport { edit } from '../../../../icons'\nimport Hr from '../../../../elements/Hr'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\n\nexport type Props = ComponentProps & ButtonProps & { toStep?: StepIndex }\n\nfunction EditButton(props: Props) {\n  const translations = useTranslation().WizardEditButton\n  const { setActiveIndex } = useStep()\n\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon,\n    toStep,\n    children = translations.text,\n    ...rest\n  } = props\n\n  const handleClick = useCallback(() => {\n    if (toStep > -1) {\n      setActiveIndex(toStep)\n    }\n  }, [toStep, setActiveIndex])\n\n  return (\n    <ButtonRow {...pickSpacingProps(props)}>\n      <Hr space={0} />\n      <Button\n        className={classnames('dnb-forms-edit-button', className)}\n        variant={variant}\n        icon_position={icon_position}\n        icon={edit || icon}\n        on_click={handleClick}\n        {...omitSpacingProps(rest)}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nEditButton._supportsSpacingProps = true\nexport default EditButton\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,SAAS,MAAM,sBAAsB;AAE5C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,OAAO,MAAM,kBAAkB;AACtC,SAASC,IAAI,QAAQ,mBAAmB;AACxC,OAAOC,EAAE,MAAM,yBAAyB;AACxC,SACEC,gBAAgB,EAChBC,gBAAgB,QACX,mCAAmC;AAI1C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,YAAY,GAAGR,cAAc,CAAC,CAAC,CAACS,gBAAgB;EACtD,MAAM;IAAEC;EAAe,CAAC,GAAGT,OAAO,CAAC,CAAC;EAEpC,MAAM;MACJU,SAAS;MACTC,OAAO,GAAG,UAAU;MACpBC,aAAa,GAAG,MAAM;MACtBC,IAAI;MACJC,MAAM;MACNC,QAAQ,GAAGR,YAAY,CAACS;IAE1B,CAAC,GAAGV,KAAK;IADJW,IAAI,GAAAC,wBAAA,CACLZ,KAAK,EAAAa,SAAA;EAET,MAAMC,WAAW,GAAGzB,WAAW,CAAC,MAAM;IACpC,IAAImB,MAAM,GAAG,CAAC,CAAC,EAAE;MACfL,cAAc,CAACK,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAEL,cAAc,CAAC,CAAC;EAE5B,OACEf,KAAA,CAAA2B,aAAA,CAACvB,SAAS,EAAKM,gBAAgB,CAACE,KAAK,CAAC,EAAAgB,GAAA,KAAAA,GAAA,GACpC5B,KAAA,CAAA2B,aAAA,CAACnB,EAAE;IAACqB,KAAK,EAAE;EAAE,CAAE,CAAC,GAChB7B,KAAA,CAAA2B,aAAA,CAACxB,MAAM,EAAA2B,QAAA;IACLd,SAAS,EAAEd,UAAU,CAAC,uBAAuB,EAAEc,SAAS,CAAE;IAC1DC,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEZ,IAAI,IAAIY,IAAK;IACnBY,QAAQ,EAAEL;EAAY,GAClBjB,gBAAgB,CAACc,IAAI,CAAC,GAEzBF,QACK,CACC,CAAC;AAEhB;AAEAV,UAAU,CAACqB,qBAAqB,GAAG,IAAI;AACvC,eAAerB,UAAU"}

package/es/extensions/forms/Wizard/NextButton/NextButton.js

@@ -8,12 +8,12 @@ import ButtonRow from '../../Form/ButtonRow';
 import SubmitButton from '../../Form/SubmitButton';
 import useTranslation from '../../hooks/useTranslation';
 function NextButton(props) {
-  const translations = useTranslation().Step;
+  const translations = useTranslation().WizardNextButton;
   const {
     className,
     icon_position = 'right',
     icon = 'chevron_right',
-    children = translations.next
+    children = translations.text
   } = props;
   const {
     handleNext

package/es/extensions/forms/Wizard/NextButton/NextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","WizardContext","ButtonRow","SubmitButton","useTranslation","NextButton","props","translations","Step","className","icon_position","icon","children","next","handleNext","createElement","_extends","type","onClick","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/NextButton/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport WizardContext from '../Context/WizardContext'\nimport ButtonRow from '../../Form/ButtonRow'\nimport SubmitButton from '../../Form/SubmitButton'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = ComponentProps & Omit<ButtonProps, 'variant'>\n\nfunction NextButton(props: Props) {\n  const translations = useTranslation().Step\n\n  const {\n    className,\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = translations.next,\n  } = props\n  const { handleNext } = useContext(WizardContext) || {}\n\n  return (\n    <ButtonRow>\n      {/* Use SubmitButton to inherit the indicator functionality */}\n      <SubmitButton\n        type=\"button\"\n        className={classnames('dnb-forms-next-button', className)}\n        onClick={handleNext}\n        icon_position={icon_position}\n        icon={icon}\n        {...props}\n      >\n        {children}\n      </SubmitButton>\n    </ButtonRow>\n  )\n}\n\nNextButton._supportsSpacingProps = true\nexport default NextButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,YAAY,MAAM,yBAAyB;AAClD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,IAAI;EAE1C,MAAM;IACJC,SAAS;IACTC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,YAAY,CAACM;EAC1B,CAAC,GAAGP,KAAK;EACT,MAAM;IAAEQ;EAAW,CAAC,GAAGf,UAAU,CAACE,aAAa,CAAC,IAAI,CAAC,CAAC;EAEtD,OACEH,KAAA,CAAAiB,aAAA,CAACb,SAAS,QAERJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,EAAAa,QAAA;IACXC,IAAI,EAAC,QAAQ;IACbR,SAAS,EAAET,UAAU,CAAC,uBAAuB,EAAES,SAAS,CAAE;IAC1DS,OAAO,EAAEJ,UAAW;IACpBJ,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,GACPL,KAAK,GAERM,QACW,CACL,CAAC;AAEhB;AAEAP,UAAU,CAACc,qBAAqB,GAAG,IAAI;AACvC,eAAed,UAAU"}
+{"version":3,"file":"NextButton.js","names":["React","useContext","classnames","WizardContext","ButtonRow","SubmitButton","useTranslation","NextButton","props","translations","WizardNextButton","className","icon_position","icon","children","text","handleNext","createElement","_extends","type","onClick","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/NextButton/NextButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport WizardContext from '../Context/WizardContext'\nimport ButtonRow from '../../Form/ButtonRow'\nimport SubmitButton from '../../Form/SubmitButton'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = ComponentProps & Omit<ButtonProps, 'variant'>\n\nfunction NextButton(props: Props) {\n  const translations = useTranslation().WizardNextButton\n\n  const {\n    className,\n    icon_position = 'right',\n    icon = 'chevron_right',\n    children = translations.text,\n  } = props\n  const { handleNext } = useContext(WizardContext) || {}\n\n  return (\n    <ButtonRow>\n      {/* Use SubmitButton to inherit the indicator functionality */}\n      <SubmitButton\n        type=\"button\"\n        className={classnames('dnb-forms-next-button', className)}\n        onClick={handleNext}\n        icon_position={icon_position}\n        icon={icon}\n        {...props}\n      >\n        {children}\n      </SubmitButton>\n    </ButtonRow>\n  )\n}\n\nNextButton._supportsSpacingProps = true\nexport default NextButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,YAAY,MAAM,yBAAyB;AAClD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,gBAAgB;EAEtD,MAAM;IACJC,SAAS;IACTC,aAAa,GAAG,OAAO;IACvBC,IAAI,GAAG,eAAe;IACtBC,QAAQ,GAAGL,YAAY,CAACM;EAC1B,CAAC,GAAGP,KAAK;EACT,MAAM;IAAEQ;EAAW,CAAC,GAAGf,UAAU,CAACE,aAAa,CAAC,IAAI,CAAC,CAAC;EAEtD,OACEH,KAAA,CAAAiB,aAAA,CAACb,SAAS,QAERJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,EAAAa,QAAA;IACXC,IAAI,EAAC,QAAQ;IACbR,SAAS,EAAET,UAAU,CAAC,uBAAuB,EAAES,SAAS,CAAE;IAC1DS,OAAO,EAAEJ,UAAW;IACpBJ,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,GACPL,KAAK,GAERM,QACW,CACL,CAAC;AAEhB;AAEAP,UAAU,CAACc,qBAAqB,GAAG,IAAI;AACvC,eAAed,UAAU"}

package/es/extensions/forms/Wizard/PreviousButton/PreviousButton.js

@@ -8,13 +8,13 @@ import WizardContext from '../Context/WizardContext';
 import ButtonRow from '../../Form/ButtonRow';
 import useTranslation from '../../hooks/useTranslation';
 function PreviousButton(props) {
-  const translations = useTranslation().Step;
+  const translations = useTranslation().WizardPreviousButton;
   const {
     className,
     variant = 'tertiary',
     icon_position = 'left',
     icon = 'chevron_left',
-    children = translations.previous
+    children = translations.text
   } = props;
   const {
     activeIndex,

package/es/extensions/forms/Wizard/PreviousButton/PreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviousButton.js","names":["React","useContext","classnames","Button","WizardContext","ButtonRow","useTranslation","PreviousButton","props","translations","Step","className","variant","icon_position","icon","children","previous","activeIndex","handlePrevious","params","disabled","createElement","_extends","onClick","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/PreviousButton/PreviousButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport WizardContext from '../Context/WizardContext'\nimport ButtonRow from '../../Form/ButtonRow'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = ComponentProps & ButtonProps\n\nfunction PreviousButton(props: Props) {\n  const translations = useTranslation().Step\n\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon = 'chevron_left',\n    children = translations.previous,\n  } = props\n  const { activeIndex, handlePrevious } = useContext(WizardContext) || {}\n\n  const params: Props = {}\n  if (activeIndex === 0) {\n    params.disabled = true\n  }\n\n  return (\n    <ButtonRow>\n      <Button\n        className={classnames('dnb-forms-previous-button', className)}\n        onClick={handlePrevious}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n        {...params}\n        {...props}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nPreviousButton._supportsSpacingProps = true\nexport default PreviousButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,IAAI;EAE1C,MAAM;IACJC,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,aAAa,GAAG,MAAM;IACtBC,IAAI,GAAG,cAAc;IACrBC,QAAQ,GAAGN,YAAY,CAACO;EAC1B,CAAC,GAAGR,KAAK;EACT,MAAM;IAAES,WAAW;IAAEC;EAAe,CAAC,GAAGjB,UAAU,CAACG,aAAa,CAAC,IAAI,CAAC,CAAC;EAEvE,MAAMe,MAAa,GAAG,CAAC,CAAC;EACxB,IAAIF,WAAW,KAAK,CAAC,EAAE;IACrBE,MAAM,CAACC,QAAQ,GAAG,IAAI;EACxB;EAEA,OACEpB,KAAA,CAAAqB,aAAA,CAAChB,SAAS,QACRL,KAAA,CAAAqB,aAAA,CAAClB,MAAM,EAAAmB,QAAA;IACLX,SAAS,EAAET,UAAU,CAAC,2BAA2B,EAAES,SAAS,CAAE;IAC9DY,OAAO,EAAEL,cAAe;IACxBN,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,GACPK,MAAM,EACNX,KAAK,GAERO,QACK,CACC,CAAC;AAEhB;AAEAR,cAAc,CAACiB,qBAAqB,GAAG,IAAI;AAC3C,eAAejB,cAAc"}
+{"version":3,"file":"PreviousButton.js","names":["React","useContext","classnames","Button","WizardContext","ButtonRow","useTranslation","PreviousButton","props","translations","WizardPreviousButton","className","variant","icon_position","icon","children","text","activeIndex","handlePrevious","params","disabled","createElement","_extends","onClick","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/PreviousButton/PreviousButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/button/Button'\nimport WizardContext from '../Context/WizardContext'\nimport ButtonRow from '../../Form/ButtonRow'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = ComponentProps & ButtonProps\n\nfunction PreviousButton(props: Props) {\n  const translations = useTranslation().WizardPreviousButton\n\n  const {\n    className,\n    variant = 'tertiary',\n    icon_position = 'left',\n    icon = 'chevron_left',\n    children = translations.text,\n  } = props\n  const { activeIndex, handlePrevious } = useContext(WizardContext) || {}\n\n  const params: Props = {}\n  if (activeIndex === 0) {\n    params.disabled = true\n  }\n\n  return (\n    <ButtonRow>\n      <Button\n        className={classnames('dnb-forms-previous-button', className)}\n        onClick={handlePrevious}\n        variant={variant}\n        icon_position={icon_position}\n        icon={icon}\n        {...params}\n        {...props}\n      >\n        {children}\n      </Button>\n    </ButtonRow>\n  )\n}\n\nPreviousButton._supportsSpacingProps = true\nexport default PreviousButton\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,oBAAoB;EAE1D,MAAM;IACJC,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,aAAa,GAAG,MAAM;IACtBC,IAAI,GAAG,cAAc;IACrBC,QAAQ,GAAGN,YAAY,CAACO;EAC1B,CAAC,GAAGR,KAAK;EACT,MAAM;IAAES,WAAW;IAAEC;EAAe,CAAC,GAAGjB,UAAU,CAACG,aAAa,CAAC,IAAI,CAAC,CAAC;EAEvE,MAAMe,MAAa,GAAG,CAAC,CAAC;EACxB,IAAIF,WAAW,KAAK,CAAC,EAAE;IACrBE,MAAM,CAACC,QAAQ,GAAG,IAAI;EACxB;EAEA,OACEpB,KAAA,CAAAqB,aAAA,CAAChB,SAAS,QACRL,KAAA,CAAAqB,aAAA,CAAClB,MAAM,EAAAmB,QAAA;IACLX,SAAS,EAAET,UAAU,CAAC,2BAA2B,EAAES,SAAS,CAAE;IAC9DY,OAAO,EAAEL,cAAe;IACxBN,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BC,IAAI,EAAEA;EAAK,GACPK,MAAM,EACNX,KAAK,GAERO,QACK,CACC,CAAC;AAEhB;AAEAR,cAAc,CAACiB,qBAAqB,GAAG,IAAI;AAC3C,eAAejB,cAAc"}

package/es/extensions/forms/constants/locales/en-GB.d.ts

@@ -15,16 +15,36 @@ declare const _default: {
             sendText: string;
         };
         Step: {
-            next: string;
-            previous: string;
-            edit: string;
             summaryTitle: string;
         };
-        Section: {
-            remove: string;
-            done: string;
-            cancel: string;
-            edit: string;
+        WizardEditButton: {
+            text: string;
+        };
+        WizardPreviousButton: {
+            text: string;
+        };
+        WizardNextButton: {
+            text: string;
+        };
+        RemoveButton: {
+            text: string;
+        };
+        IterateViewContainer: {
+            removeButton: string;
+            editButton: string;
+        };
+        SectionViewContainer: {
+            editButton: string;
+        };
+        SectionEditContainer: {
+            doneButton: string;
+            cancelButton: string;
+            errorInSection: string;
+        };
+        IterateEditContainer: {
+            removeButton: string;
+            doneButton: string;
+            cancelButton: string;
             errorInSection: string;
         };
         /**