@dnb/eufemia 10.56.0 → 10.57.1

package/components/modal/parts/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","names":["React","classnames","findElementInChildren","Section","ModalContext","H1","ModalHeader","PureComponent","constructor","arguments","_defineProperty","render","_this$props","props","title","className","children","title_class","size","ref","sectionProps","_objectWithoutProperties","_excluded","customHeader","cur","type","usedTitle","context","showTitle","fontSize","createElement","_extends","style_type","id","undefined"],"sources":["../../../../../src/components/modal/parts/ModalHeader.tsx"],"sourcesContent":["/**\n * Web Modal Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { findElementInChildren } from '../../../shared/component-helper'\nimport Section, { SectionProps } from '../../section/Section'\nimport ModalContext from '../ModalContext'\nimport H1 from '../../../elements/H1'\nimport { ReactChildType } from '../types'\n\nexport interface ModalHeaderProps extends Omit<SectionProps, 'children'> {\n  /**\n   * The content which will appear when triggering the modal/drawer.\n   */\n  children?: ReactChildType\n\n  /**\n   * The modal/drawer title. Displays on the very top of the content.\n   */\n  title?: React.ReactNode\n\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).\n   */\n  className?: string\n\n  /**\n   * Give the h1 component a classname (maps to `dnb-modal__title`)\n   */\n  title_class?: string\n\n  /**\n   * Font size of the title (maps to `dnb-p--<size>`)\n   */\n  size?: 'medium' | 'large' | 'x-large' | 'xx-large'\n}\n\nexport default class ModalHeader extends React.PureComponent<\n  ModalHeaderProps &\n    Omit<React.HTMLProps<HTMLElement>, 'size' | 'title' | 'children'>\n> {\n  static contextType = ModalContext\n\n  context!: React.ContextType<typeof ModalContext>\n\n  render() {\n    const {\n      title = null,\n      className = null,\n      children = null,\n      title_class = null,\n      size = null,\n      ref, // eslint-disable-line\n      ...sectionProps\n    } = this.props\n\n    const customHeader = findElementInChildren(children, (cur) => {\n      return cur.type === 'h1' || cur.type === H1\n    })\n\n    const usedTitle = title || this.context.title\n    const showTitle = !customHeader && usedTitle\n    const fontSize = size || 'large'\n\n    return (\n      <Section\n        style_type=\"white\"\n        className={classnames(className)}\n        id={\n          showTitle ? 'dnb-modal-' + this.context.id + '-title' : undefined\n        }\n        {...sectionProps}\n      >\n        {showTitle && (\n          <h1\n            className={classnames(\n              'dnb-modal__title', // for tests\n              'dnb-space__top--zero',\n              'dnb-space__bottom--small',\n              `dnb-h--${fontSize}`,\n              title_class\n            )}\n          >\n            {usedTitle}\n          </h1>\n        )}\n        <div>{children as React.ReactNode}</div>\n      </Section>\n    )\n  }\n}\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,OAAOC,OAAO,MAAwB,uBAAuB;AAC7D,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,EAAE,MAAM,sBAAsB;AA8BrC,eAAe,MAAMC,WAAW,SAASN,KAAK,CAACO,aAAa,CAG1D;EAAAC,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA;EAAA;EAKAC,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAQI,IAAI,CAACC,KAAK;MARR;QACJC,KAAK,GAAG,IAAI;QACZC,SAAS,GAAG,IAAI;QAChBC,QAAQ,GAAG,IAAI;QACfC,WAAW,GAAG,IAAI;QAClBC,IAAI,GAAG,IAAI;QACXC;MAEF,CAAC,GAAAP,WAAA;MADIQ,YAAY,GAAAC,wBAAA,CAAAT,WAAA,EAAAU,SAAA;IAGjB,MAAMC,YAAY,GAAGrB,qBAAqB,CAACc,QAAQ,EAAGQ,GAAG,IAAK;MAC5D,OAAOA,GAAG,CAACC,IAAI,KAAK,IAAI,IAAID,GAAG,CAACC,IAAI,KAAKpB,EAAE;IAC7C,CAAC,CAAC;IAEF,MAAMqB,SAAS,GAAGZ,KAAK,IAAI,IAAI,CAACa,OAAO,CAACb,KAAK;IAC7C,MAAMc,SAAS,GAAG,CAACL,YAAY,IAAIG,SAAS;IAC5C,MAAMG,QAAQ,GAAGX,IAAI,IAAI,OAAO;IAEhC,OACElB,KAAA,CAAA8B,aAAA,CAAC3B,OAAO,EAAA4B,QAAA;MACNC,UAAU,EAAC,OAAO;MAClBjB,SAAS,EAAEd,UAAU,CAACc,SAAS,CAAE;MACjCkB,EAAE,EACAL,SAAS,GAAG,YAAY,GAAG,IAAI,CAACD,OAAO,CAACM,EAAE,GAAG,QAAQ,GAAGC;IACzD,GACGd,YAAY,GAEfQ,SAAS,IACR5B,KAAA,CAAA8B,aAAA;MACEf,SAAS,EAAEd,UAAU,0EAIT4B,QAAS,IACnBZ,WACF;IAAE,GAEDS,SACC,CACL,EACD1B,KAAA,CAAA8B,aAAA,cAAMd,QAAiC,CAChC,CAAC;EAEd;AACF;AAACN,eAAA,CArDoBJ,WAAW,iBAITF,YAAY"}
+{"version":3,"file":"ModalHeader.js","names":["React","classnames","findElementInChildren","Section","ModalContext","H1","ModalHeader","PureComponent","constructor","arguments","_defineProperty","render","_this$props","props","title","className","children","title_class","size","ref","sectionProps","_objectWithoutProperties","_excluded","customHeader","cur","type","usedTitle","context","showTitle","fontSize","createElement","_extends","style_type","id","undefined"],"sources":["../../../../../src/components/modal/parts/ModalHeader.tsx"],"sourcesContent":["/**\n * Web Modal Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { findElementInChildren } from '../../../shared/component-helper'\nimport Section, { SectionProps } from '../../section/Section'\nimport ModalContext from '../ModalContext'\nimport H1 from '../../../elements/H1'\nimport { ReactChildType } from '../types'\n\nexport interface ModalHeaderProps extends Omit<SectionProps, 'children'> {\n  /**\n   * The content which will appear when triggering the modal/drawer.\n   */\n  children?: ReactChildType\n\n  /**\n   * The modal/drawer title. Displays on the very top of the content.\n   */\n  title?: React.ReactNode\n\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).\n   */\n  className?: string\n\n  /**\n   * Give the h1 component a classname (maps to `dnb-modal__title`)\n   */\n  title_class?: string\n\n  /**\n   * Font size of the title (maps to `dnb-h--<size>`)\n   * Default is `large`\n   */\n  size?: 'medium' | 'large' | 'x-large' | 'xx-large'\n}\n\nexport default class ModalHeader extends React.PureComponent<\n  ModalHeaderProps &\n    Omit<React.HTMLProps<HTMLElement>, 'size' | 'title' | 'children'>\n> {\n  static contextType = ModalContext\n\n  context!: React.ContextType<typeof ModalContext>\n\n  render() {\n    const {\n      title = null,\n      className = null,\n      children = null,\n      title_class = null,\n      size = null,\n      ref, // eslint-disable-line\n      ...sectionProps\n    } = this.props\n\n    const customHeader = findElementInChildren(children, (cur) => {\n      return cur.type === 'h1' || cur.type === H1\n    })\n\n    const usedTitle = title || this.context.title\n    const showTitle = !customHeader && usedTitle\n    const fontSize = size || 'large'\n\n    return (\n      <Section\n        style_type=\"white\"\n        className={classnames(className)}\n        id={\n          showTitle ? 'dnb-modal-' + this.context.id + '-title' : undefined\n        }\n        {...sectionProps}\n      >\n        {showTitle && (\n          <h1\n            className={classnames(\n              'dnb-modal__title', // for tests\n              'dnb-space__top--zero',\n              'dnb-space__bottom--small',\n              `dnb-h--${fontSize}`,\n              title_class\n            )}\n          >\n            {usedTitle}\n          </h1>\n        )}\n        <div>{children as React.ReactNode}</div>\n      </Section>\n    )\n  }\n}\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,OAAOC,OAAO,MAAwB,uBAAuB;AAC7D,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,EAAE,MAAM,sBAAsB;AA+BrC,eAAe,MAAMC,WAAW,SAASN,KAAK,CAACO,aAAa,CAG1D;EAAAC,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA;EAAA;EAKAC,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAQI,IAAI,CAACC,KAAK;MARR;QACJC,KAAK,GAAG,IAAI;QACZC,SAAS,GAAG,IAAI;QAChBC,QAAQ,GAAG,IAAI;QACfC,WAAW,GAAG,IAAI;QAClBC,IAAI,GAAG,IAAI;QACXC;MAEF,CAAC,GAAAP,WAAA;MADIQ,YAAY,GAAAC,wBAAA,CAAAT,WAAA,EAAAU,SAAA;IAGjB,MAAMC,YAAY,GAAGrB,qBAAqB,CAACc,QAAQ,EAAGQ,GAAG,IAAK;MAC5D,OAAOA,GAAG,CAACC,IAAI,KAAK,IAAI,IAAID,GAAG,CAACC,IAAI,KAAKpB,EAAE;IAC7C,CAAC,CAAC;IAEF,MAAMqB,SAAS,GAAGZ,KAAK,IAAI,IAAI,CAACa,OAAO,CAACb,KAAK;IAC7C,MAAMc,SAAS,GAAG,CAACL,YAAY,IAAIG,SAAS;IAC5C,MAAMG,QAAQ,GAAGX,IAAI,IAAI,OAAO;IAEhC,OACElB,KAAA,CAAA8B,aAAA,CAAC3B,OAAO,EAAA4B,QAAA;MACNC,UAAU,EAAC,OAAO;MAClBjB,SAAS,EAAEd,UAAU,CAACc,SAAS,CAAE;MACjCkB,EAAE,EACAL,SAAS,GAAG,YAAY,GAAG,IAAI,CAACD,OAAO,CAACM,EAAE,GAAG,QAAQ,GAAGC;IACzD,GACGd,YAAY,GAEfQ,SAAS,IACR5B,KAAA,CAAA8B,aAAA;MACEf,SAAS,EAAEd,UAAU,0EAIT4B,QAAS,IACnBZ,WACF;IAAE,GAEDS,SACC,CACL,EACD1B,KAAA,CAAA8B,aAAA,cAAMd,QAAiC,CAChC,CAAC;EAEd;AACF;AAACN,eAAA,CArDoBJ,WAAW,iBAITF,YAAY"}

package/components/section/Section.d.ts

@@ -40,6 +40,11 @@ export type SectionProps = {
      * Define if the background color should break-out to a fullscreen view. Defaults to `true`.
      */
     breakout?: boolean | ResponsiveProp<boolean>;
+    /**
+     * Define if the Card should break out negatively on larger screens. You can not use `breakout` and `outset` together.
+     * Defaults to `false`
+     */
+    outset?: boolean | ResponsiveProp<boolean>;
     /**
      * Define if the section should have rounded corners. Defaults to `false`.
      */

package/components/section/Section.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["variant", "breakout", "roundedCorner", "textColor", "backgroundColor", "dropShadow", "outline", "innerRef", "className", "children", "spacing", "style_type", "inner_ref"];
+const _excluded = ["variant", "breakout", "outset", "roundedCorner", "textColor", "backgroundColor", "dropShadow", "outline", "innerRef", "className", "children", "spacing", "style_type", "inner_ref"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
@@ -21,7 +21,8 @@ export function SectionParams(localProps) {
   const props = extendPropsWithContext(localProps, defaultProps, context.Section);
   const {
       variant,
-      breakout = true,
+      breakout = !props.outset,
+      outset,
       roundedCorner,
       textColor,
       backgroundColor,
@@ -39,7 +40,7 @@ export function SectionParams(localProps) {
   const elementRef = innerRef || inner_ref || internalRef;
   return Object.freeze(_objectSpread(_objectSpread({}, attributes), {}, {
     className: classnames(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, className, spacing && `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`),
-    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(roundedCorner, 'rounded-corner', value => value && 'var(--rounded-corner--value)')), computeStyle(textColor, 'text-color', value => getColor(value))), computeStyle(backgroundColor, 'background-color', value => getColor(value))), computeStyle(dropShadow, 'drop-shadow', value => value && 'var(--shadow-default)')), computeStyle(outline, 'outline-color', value => String(value) === 'true' ? 'var(--outline-color--value)' : getColor(value))), attributes === null || attributes === void 0 ? void 0 : attributes.style),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(outset, 'outset', value => value ? '1' : '0')), computeStyle(roundedCorner, 'rounded-corner', value => value && 'var(--rounded-corner--value)')), computeStyle(textColor, 'text-color', value => getColor(value))), computeStyle(backgroundColor, 'background-color', value => getColor(value))), computeStyle(dropShadow, 'drop-shadow', value => value && 'var(--shadow-default)')), computeStyle(outline, 'outline-color', value => String(value) === 'true' ? 'var(--outline-color--value)' : getColor(value))), attributes === null || attributes === void 0 ? void 0 : attributes.style),
     innerRef: elementRef,
     children
   }));

package/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","includes","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  if (value.includes('--')) {\n    return value\n  }\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","outset","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","includes","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the Card should break out negatively on larger screens. You can not use `breakout` and `outset` together.\n   * Defaults to `false`\n   */\n  outset?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = !props.outset,\n    outset,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(outset, 'outset', (value) => (value ? '1' : '0')),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  if (value.includes('--')) {\n    return value\n  }\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/section/SectionDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const SectionProperties: PropertiesTableProps;

package/components/section/SectionDocs.js

@@ -0,0 +1,58 @@
+export const SectionProperties = {
+  variant: {
+    doc: 'Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property.',
+    type: 'string',
+    status: 'optional'
+  },
+  breakout: {
+    doc: 'Use `true` to enable a fullscreen breakout look. Supports also media query breakpoints like `{ small: boolean }`. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  outset: {
+    doc: 'Define if the Card should break out negatively on larger screens. You can not use `breakout` and `outset` together. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  outline: {
+    doc: "Define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-8' }`.",
+    type: 'string',
+    status: 'optional'
+  },
+  roundedCorner: {
+    doc: 'Use `true` to enable rounded corners (border-radius). Supports also media query breakpoints like `{ small: boolean }`. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  backgroundColor: {
+    doc: "Define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'white' }`.",
+    type: 'string',
+    status: 'optional'
+  },
+  dropShadow: {
+    doc: 'Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  textColor: {
+    doc: "Define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-80' }`.",
+    type: 'string',
+    status: 'optional'
+  },
+  innerSpace: {
+    doc: "Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.",
+    type: 'string',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'By providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SectionDocs.js.map

package/components/section/SectionDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDocs.js","names":["SectionProperties","variant","doc","type","status","breakout","outset","outline","roundedCorner","backgroundColor","dropShadow","textColor","innerSpace","innerRef"],"sources":["../../../../src/components/section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property.',\n    type: 'string',\n    status: 'optional',\n  },\n  breakout: {\n    doc: 'Use `true` to enable a fullscreen breakout look. Supports also media query breakpoints like `{ small: boolean }`. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outset: {\n    doc: 'Define if the Card should break out negatively on larger screens. You can not use `breakout` and `outset` together. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outline: {\n    doc: \"Define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-8' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  roundedCorner: {\n    doc: 'Use `true` to enable rounded corners (border-radius). Supports also media query breakpoints like `{ small: boolean }`. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  backgroundColor: {\n    doc: \"Define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'white' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  dropShadow: {\n    doc: 'Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  textColor: {\n    doc: \"Define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-80' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  innerSpace: {\n    doc: \"Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG;EACrDC,OAAO,EAAE;IACPC,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,oKAAoK;IACzKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,aAAa,EAAE;IACbN,GAAG,EAAE,6IAA6I;IAClJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,eAAe,EAAE;IACfP,GAAG,EAAE,+IAA+I;IACpJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,UAAU,EAAE;IACVR,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRX,GAAG,EAAE,mJAAmJ;IACxJC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -51,9 +51,19 @@
 .dnb-section:not([style*="--breakout"]) {
   --breakout: var(--breakout--on);
 }
+.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.dnb-section[style*="--outset"]::before {
+  margin-left: calc(var(--outset-left, var(--padding-left)) * -1 * var(--outset));
+  margin-right: calc(var(--outset-right, var(--padding-right)) * -1 * var(--outset));
+  background-color: inherit;
+}
 @media screen and (max-width: 60em) {
   .dnb-section {
     --breakout: var(--breakout--small, var(--breakout--fallback));
+    --outset: var(--outset--small, var(--outset--fallback));
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
@@ -67,6 +77,7 @@
 @media screen and (max-width: 60em) and (min-width: 40.00625em) {
   .dnb-section {
     --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --outset: var(--outset--medium, var(--outset--fallback));
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
@@ -80,6 +91,7 @@
 @media screen and (min-width: 60.00625em) {
   .dnb-section {
     --breakout: var(--breakout--large, var(--breakout--fallback));
+    --outset: var(--outset--large, var(--outset--fallback));
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);

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

@@ -1,7 +1,7 @@
-.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
+.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card){padding-left:calc(var(--padding-left)*(1 - var(--outset)));padding-right:calc(var(--padding-right)*(1 - var(--outset)))}.dnb-section[style*="--outset"]:before{background-color:inherit;margin-left:calc(var(--outset-left, var(--padding-left))*-1*var(--outset));margin-right:calc(var(--outset-right, var(--padding-right))*-1*var(--outset))}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--outset:var(--outset--small,var(--outset--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
       --rounded-corner--small,var(--rounded-corner--fallback)
-    )}}@media screen and (max-width:60em) and (min-width:40.00625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
+    )}}@media screen and (max-width:60em) and (min-width:40.00625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--outset:var(--outset--medium,var(--outset--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
       --rounded-corner--medium,var(--rounded-corner--fallback)
-    )}}@media screen and (min-width:60.00625em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--drop-shadow:var(--drop-shadow--large);--rounded-corner:var(
+    )}}@media screen and (min-width:60.00625em){.dnb-section{--breakout:var(--breakout--large,var(--breakout--fallback));--outset:var(--outset--large,var(--outset--fallback));--background-color--value:var(--background-color--large);--text-color--value:var(--text-color--large);--outline-color:var(--outline-color--large);--drop-shadow:var(--drop-shadow--large);--rounded-corner:var(
       --rounded-corner--large,var(--rounded-corner--fallback)
     )}}.dnb-section .dnb-section:after{z-index:-14}.dnb-section .dnb-section .dnb-section:after{z-index:-13}.dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-12}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-11}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-10}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-9}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-8}.dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section:after{z-index:-7}.dnb-section--spacing-x-small{padding-bottom:var(--spacing-x-small);padding-top:var(--spacing-x-small)}.dnb-section--spacing-small{padding-bottom:var(--spacing-small);padding-top:var(--spacing-small)}.dnb-section--spacing-medium{padding-bottom:var(--spacing-medium);padding-top:var(--spacing-medium)}.dnb-section--spacing,.dnb-section--spacing-large{padding-bottom:var(--spacing-large);padding-top:var(--spacing-large)}.dnb-section--spacing-x-large{padding-bottom:var(--spacing-x-large);padding-top:var(--spacing-x-large)}.dnb-section--spacing-xx-large{padding-bottom:var(--spacing-xx-large);padding-top:var(--spacing-xx-large)}

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

@@ -67,8 +67,28 @@
     --breakout: var(--breakout--on);
   }
 
+  &[style*='--outset'] {
+    &.dnb-space[style]:not(.dnb-card) {
+      padding-left: calc(var(--padding-left) * calc(1 - var(--outset)));
+      padding-right: calc(var(--padding-right) * calc(1 - var(--outset)));
+    }
+
+    &::before {
+      margin-left: calc(
+        var(--outset-left, var(--padding-left)) * -1 * var(--outset)
+      );
+      margin-right: calc(
+        var(--outset-right, var(--padding-right)) * -1 * var(--outset)
+      );
+
+      // Because of the margin usage, we need to inherit the background color.
+      background-color: inherit;
+    }
+  }
+
   @include allBelow(medium) {
     --breakout: var(--breakout--small, var(--breakout--fallback));
+    --outset: var(--outset--small, var(--outset--fallback));
     --background-color--value: var(--background-color--small);
     --text-color--value: var(--text-color--small);
     --outline-color: var(--outline-color--small);
@@ -80,6 +100,7 @@
   }
   @include allBetween(small, medium) {
     --breakout: var(--breakout--medium, var(--breakout--fallback));
+    --outset: var(--outset--medium, var(--outset--fallback));
     --background-color--value: var(--background-color--medium);
     --text-color--value: var(--text-color--medium);
     --outline-color: var(--outline-color--medium);
@@ -91,6 +112,7 @@
   }
   @include allAbove(medium) {
     --breakout: var(--breakout--large, var(--breakout--fallback));
+    --outset: var(--outset--large, var(--outset--fallback));
     --background-color--value: var(--background-color--large);
     --text-color--value: var(--text-color--large);
     --outline-color: var(--outline-color--large);

package/core/jest/jestSetupScreenshots.css

@@ -35,9 +35,19 @@ html {
   background: #fff;
 }
 
+[data-visual-test]:has(
+    .dnb-section[style*='--outset--medium: 1'],
+    .dnb-section[style*='--outset--large: 1']
+  ) {
+  @media (min-width: 40em) {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
 /**
 * Hide "Preparing requested page" popup
 */
 gatsby-qod {
   opacity: 0;
-}
+}

package/elements/lib.d.ts

@@ -159,7 +159,16 @@ export declare const getElements: () => {
     Span: import("react").ForwardRefExoticComponent<import("../shared/types").SpacingElementProps & {
         space?: import("../shared/types").SpaceTypeAll;
         innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
-    } & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<unknown>>;
+    } & import("react").HTMLAttributes<HTMLSpanElement> & {
+        element?: import("../shared/types").DynamicElement;
+        size?: import("./typography/Typography").TypographySize;
+        lineHeight?: import("./typography/Typography").TypographySize;
+        align?: import("./typography/Typography").TypographyAlign;
+        family?: import("./typography/Typography").TypographyFamily;
+        weight?: import("./typography/Typography").TypographyWeight;
+        decoration?: "underline";
+        slant?: "italic";
+    } & import("react").RefAttributes<unknown>>;
     Td: typeof Td;
     Th: typeof Th;
     Tr: typeof Tr;

package/elements/span/Span.d.ts

@@ -3,8 +3,17 @@
  *
  */
 import React from 'react';
-declare const Span: React.ForwardRefExoticComponent<import("../../components/space/types").SpacingElementProps & {
-    space?: import("../../components/space/types").SpaceTypeAll;
-    innerSpace?: import("../../components/space/types").SpaceTypeAll | import("../../components/space/types").SpaceTypeMedia;
-} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<unknown>>;
+declare const Span: React.ForwardRefExoticComponent<import("../../shared/types").SpacingElementProps & {
+    space?: import("../../shared/types").SpaceTypeAll;
+    innerSpace?: import("../../shared/types").SpaceTypeAll | import("../../shared/types").SpaceTypeMedia;
+} & React.HTMLAttributes<HTMLSpanElement> & {
+    element?: import("../../shared/types").DynamicElement;
+    size?: import("../typography/Typography").TypographySize;
+    lineHeight?: import("../typography/Typography").TypographySize;
+    align?: import("../typography/Typography").TypographyAlign;
+    family?: import("../typography/Typography").TypographyFamily;
+    weight?: import("../typography/Typography").TypographyWeight;
+    decoration?: "underline";
+    slant?: "italic";
+} & React.RefAttributes<unknown>>;
 export default Span;

package/elements/span/Span.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import E from '../Element';
-const Span = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  as: "span",
+import Typography from '../typography/Typography';
+const Span = React.forwardRef((props, ref) => React.createElement(Typography, _extends({
+  element: "span",
   innerRef: ref
 }, props)));
 Span._supportsSpacingProps = true;

package/elements/span/Span.js.map

@@ -1 +1 @@
-{"version":3,"file":"Span.js","names":["React","E","Span","forwardRef","props","ref","createElement","_extends","as","innerRef","_supportsSpacingProps"],"sources":["../../../../src/elements/span/Span.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport { SpacingProps } from '../../components/space/types'\nimport E from '../Element'\n\ntype SpanProps = SpacingProps & React.HTMLAttributes<HTMLElement>\n\nconst Span = React.forwardRef((props: SpanProps, ref) => (\n  <E as=\"span\" innerRef={ref} {...props} />\n))\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nSpan._supportsSpacingProps = true\n\nexport default Span\n"],"mappings":";AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,CAAC,MAAM,YAAY;AAI1B,MAAMC,IAAI,GAAGF,KAAK,CAACG,UAAU,CAAC,CAACC,KAAgB,EAAEC,GAAG,KAClDL,KAAA,CAAAM,aAAA,CAACL,CAAC,EAAAM,QAAA;EAACC,EAAE,EAAC,MAAM;EAACC,QAAQ,EAAEJ;AAAI,GAAKD,KAAK,CAAG,CACzC,CAAC;AAIFF,IAAI,CAACQ,qBAAqB,GAAG,IAAI;AAEjC,eAAeR,IAAI"}
+{"version":3,"file":"Span.js","names":["React","Typography","Span","forwardRef","props","ref","createElement","_extends","element","innerRef","_supportsSpacingProps"],"sources":["../../../../src/elements/span/Span.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport Typography, { TypographyProps } from '../typography/Typography'\n\ntype SpanProps = TypographyProps<HTMLSpanElement>\n\nconst Span = React.forwardRef((props: SpanProps, ref) => (\n  <Typography element=\"span\" innerRef={ref} {...props} />\n))\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nSpan._supportsSpacingProps = true\n\nexport default Span\n"],"mappings":";AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAA2B,0BAA0B;AAItE,MAAMC,IAAI,GAAGF,KAAK,CAACG,UAAU,CAAC,CAACC,KAAgB,EAAEC,GAAG,KAClDL,KAAA,CAAAM,aAAA,CAACL,UAAU,EAAAM,QAAA;EAACC,OAAO,EAAC,MAAM;EAACC,QAAQ,EAAEJ;AAAI,GAAKD,KAAK,CAAG,CACvD,CAAC;AAIFF,IAAI,CAACQ,qBAAqB,GAAG,IAAI;AAEjC,eAAeR,IAAI"}

package/elements/span/SpanDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const SpanProperties: PropertiesTableProps;

package/elements/span/SpanDocs.js

@@ -0,0 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { TypographyProperties } from '../typography/TypographyDocs';
+export const SpanProperties = _objectSpread({}, TypographyProperties);
+//# sourceMappingURL=SpanDocs.js.map

package/elements/span/SpanDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanDocs.js","names":["TypographyProperties","SpanProperties","_objectSpread"],"sources":["../../../../src/elements/span/SpanDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { TypographyProperties } from '../typography/TypographyDocs'\n\nexport const SpanProperties: PropertiesTableProps = {\n  ...TypographyProperties,\n}\n"],"mappings":";;;AACA,SAASA,oBAAoB,QAAQ,8BAA8B;AAEnE,OAAO,MAAMC,cAAoC,GAAAC,aAAA,KAC5CF,oBAAoB,CACxB"}

package/elements/typography/Ingress.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import P from './P';
 const Ingress = props => React.createElement(P, _extends({
-  medium: true
+  weight: "medium"
 }, props));
 Ingress._supportsSpacingProps = true;
 export default Ingress;

package/elements/typography/Ingress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ingress.js","names":["React","P","Ingress","props","createElement","_extends","medium","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/Ingress.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport P, { PProps } from './P'\n\nconst Ingress = (props: PProps) => <P medium {...props} />\n\nIngress._supportsSpacingProps = true\n\nexport default Ingress\n"],"mappings":";AAIA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,CAAC,MAAkB,KAAK;AAE/B,MAAMC,OAAO,GAAIC,KAAa,IAAKH,KAAA,CAAAI,aAAA,CAACH,CAAC,EAAAI,QAAA;EAACC,MAAM;AAAA,GAAKH,KAAK,CAAG,CAAC;AAE1DD,OAAO,CAACK,qBAAqB,GAAG,IAAI;AAEpC,eAAeL,OAAO"}
+{"version":3,"file":"Ingress.js","names":["React","P","Ingress","props","createElement","_extends","weight","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/Ingress.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\nimport React from 'react'\nimport P, { PProps } from './P'\n\nconst Ingress = (props: PProps) => <P weight=\"medium\" {...props} />\n\nIngress._supportsSpacingProps = true\n\nexport default Ingress\n"],"mappings":";AAIA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,CAAC,MAAkB,KAAK;AAE/B,MAAMC,OAAO,GAAIC,KAAa,IAAKH,KAAA,CAAAI,aAAA,CAACH,CAAC,EAAAI,QAAA;EAACC,MAAM,EAAC;AAAQ,GAAKH,KAAK,CAAG,CAAC;AAEnED,OAAO,CAACK,qBAAqB,GAAG,IAAI;AAEpC,eAAeL,OAAO"}

package/elements/typography/P.d.ts

@@ -3,31 +3,25 @@
  *
  */
 import React from 'react';
-import { SpacingProps } from '../../components/space/types';
-import type { DynamicElement } from '../../shared/types';
-export type PSize = 'x-small' | 'small' | 'basis' | 'medium' | 'large' | 'x-large' | 'xx-large';
-export type PProps = SpacingProps & React.HTMLAttributes<HTMLParagraphElement> & {
+import { TypographySize, TypographyProps } from './Typography';
+/** @deprecated use TypographySize instead */
+export type PSize = TypographySize;
+export type PProps = TypographyProps<HTMLParagraphElement> & {
     /**
-     * Defines the Element Type, like "p"
-     * Default: p
-     */
-    element?: DynamicElement | 'p';
-    /**
-     * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+     * Tells the component to use the medium font-weight styling dnb-t__weight--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+     * @deprecated use the `weight` prop instead
      */
     medium?: boolean;
     /**
-     * Tells the component to use the bold font-weight styling dnb-p--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+     * Tells the component to use the bold font-weight styling dnb-t__weight--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+     * @deprecated use the `weight` prop instead
      */
     bold?: boolean;
-    /**
-     * Sets the font size based on size classes defined in paragraphStyle - typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/
-     */
-    size?: PSize;
     /**
      * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. "x-small bold" would make the paragraph extra small and bold.
-     * Works as a flexible alternative to setting the medium, small, bold and size props.
+     * Works as a flexible alternative to setting the medium, bold and size props.
      * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/
+     * @deprecated only font weights "bold" and "medium" and sizes "x-small" and "small" are supported. Use the `size` and `weight` props instead.
      */
     modifier?: string;
 };

package/elements/typography/P.js

@@ -1,43 +1,71 @@
 "use client";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["modifier", "element", "className", "medium", "bold", "size", "children"];
+const _excluded = ["remainingModifiers", "element", "className"],
+  _excluded2 = ["weight", "size", "modifier", "bold", "medium"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { createContext, useContext } from 'react';
 import classnames from 'classnames';
-import E from '../Element';
+import Typography from './Typography';
 function P(props) {
-  const {
-      modifier,
+  const _handleDeprecatedProp = handleDeprecatedProps(props),
+    {
+      remainingModifiers,
       element = 'p',
-      className,
-      medium,
-      bold,
-      size,
-      children
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const allModifiers = [medium && 'medium', bold && 'bold'];
+      className
+    } = _handleDeprecatedProp,
+    rest = _objectWithoutProperties(_handleDeprecatedProp, _excluded);
   const paragraphContext = useContext(ParagraphContext);
-  if (modifier) {
-    modifier.split(/\s/g).forEach(modifier => allModifiers.push(modifier));
-  }
-  const modifierString = allModifiers.filter(Boolean).reduce((acc, cur) => {
-    if (['x-small', 'small'].includes(cur)) {
-      return `${acc} dnb-p__size--${cur}`;
-    }
+  const deprecatedModifierString = remainingModifiers.reduce((acc, cur) => {
     return `${acc} dnb-p--${cur}`;
   }, '');
   return React.createElement(ParagraphContext.Provider, {
     value: {
       isNested: true
     }
-  }, React.createElement(E, _extends({
-    as: element === 'p' && paragraphContext !== null && paragraphContext !== void 0 && paragraphContext.isNested ? 'span' : element
-  }, rest, {
-    className: classnames('dnb-p', modifierString, className, size && `dnb-p__size--${size}`)
-  }), children));
+  }, React.createElement(Typography, _extends({
+    element: element === 'p' && paragraphContext !== null && paragraphContext !== void 0 && paragraphContext.isNested ? 'span' : element,
+    className: classnames('dnb-p', deprecatedModifierString, className)
+  }, rest)));
 }
+const handleDeprecatedProps = _ref => {
+  let {
+      weight,
+      size,
+      modifier,
+      bold,
+      medium
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  let oldWeight;
+  let oldSize;
+  const allModifiers = [bold && 'bold', medium && 'medium'];
+  if (modifier) {
+    modifier.split(/\s/g).forEach(modifier => allModifiers.push(modifier));
+  }
+  const remainingModifiers = allModifiers.filter(Boolean).filter(cur => {
+    if (['x-small'].includes(cur)) {
+      oldSize = 'x-small';
+    } else if (['small'].includes(cur)) {
+      oldSize = oldSize || 'small';
+    } else if (['medium'].includes(cur)) {
+      oldWeight = oldWeight || 'medium';
+    } else if (['bold'].includes(cur)) {
+      oldWeight = 'bold';
+    } else {
+      return true;
+    }
+    return false;
+  }, []);
+  return _objectSpread({
+    weight: weight || oldWeight,
+    size: oldSize && size !== 'x-small' ? oldSize : size,
+    remainingModifiers
+  }, rest);
+};
 P._supportsSpacingProps = true;
 export default P;
 export const ParagraphContext = createContext(undefined);