@dnb/eufemia 10.27.0 → 10.28.0

package/cjs/components/checkbox/Checkbox.js

@@ -4,131 +4,166 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CheckIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _keycode = _interopRequireDefault(require("keycode"));
 var _componentHelper = require("../../shared/component-helper");
 var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper"));
 var _SpacingHelper = require("../space/SpacingHelper");
 var _SkeletonHelper = require("../skeleton/SkeletonHelper");
-var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
+var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
+var _filterValidProps = require("../../shared/helpers/filterValidProps");
+var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
 var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
 var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
+var _CheckIcon = _interopRequireDefault(require("./CheckIcon"));
 var _AlignmentHelper, _span;
-const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update", "innerRef"],
-  _excluded2 = ["size"];
+const _excluded = ["value", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "size", "label", "labelPosition", "labelSrOnly", "title", "element", "disabled", "readOnly", "skeleton", "className", "id", "checked", "onChange", "innerRef"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-class Checkbox extends _react.default.PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    if (state._listenForPropChanges) {
-      if (props.checked !== state._checked) {
-        state.checked = Checkbox.parseChecked(props.checked);
-      }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const defaultProps = {
+  statusState: 'error'
+};
+function Checkbox(localProps) {
+  const context = (0, _react.useContext)(_Context.default);
+  const props = extractPropsFromContext();
+  const {
+      value,
+      status,
+      statusState,
+      statusProps,
+      statusNoAnimation,
+      globalStatus,
+      suffix,
+      size,
+      label,
+      labelPosition,
+      labelSrOnly,
+      title,
+      element,
+      disabled,
+      readOnly,
+      skeleton,
+      className,
+      id: idProp,
+      checked,
+      onChange,
+      innerRef
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const id = (0, _useId.default)(idProp);
+  const isFn = typeof innerRef === 'function';
+  const refHook = (0, _react.useRef)();
+  const ref = !isFn && innerRef || refHook;
+  (0, _react.useEffect)(() => {
+    if (isFn) {
+      innerRef === null || innerRef === void 0 ? void 0 : innerRef(ref.current);
     }
-    state._listenForPropChanges = true;
-    if (state.checked !== state.__checked) {
-      (0, _componentHelper.dispatchCustomElementEvent)({
-        props
-      }, 'on_state_update', {
-        checked: state.checked
-      });
+  }, [innerRef, isFn, ref]);
+  const [isChecked, setIsChecked] = (0, _react.useState)(checked !== null && checked !== void 0 ? checked : false);
+  const [prevChecked, setPrevChecked] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
+    if (checked !== prevChecked) {
+      setIsChecked(!!checked);
+      setPrevChecked(!!checked);
     }
-    state._checked = props.checked;
-    state.__checked = state.checked;
-    return state;
-  }
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onKeyDownHandler", event => {
-      switch ((0, _keycode.default)(event)) {
-        case 'enter':
-          this.onChangeHandler(event);
-          break;
-      }
-    });
-    _defineProperty(this, "onChangeHandler", event => {
-      if ((0, _componentHelper.isTrue)(this.props.readOnly)) {
-        return event.preventDefault();
-      }
-      const checked = !this.state.checked;
-      this.setState({
-        checked,
-        _listenForPropChanges: false
-      });
-      (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_change', {
-        checked,
-        event
-      });
-      if (this._refInput.current) {
-        this._refInput.current.focus();
-      }
+  }, [checked, prevChecked]);
+  const callOnChange = (0, _react.useCallback)(args => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(args);
+  }, [onChange]);
+  const onChangeHandler = (0, _react.useCallback)(event => {
+    if (readOnly) {
+      return event.preventDefault();
+    }
+    const updatedCheck = !isChecked;
+    setIsChecked(updatedCheck);
+    callOnChange({
+      checked: updatedCheck,
+      event
     });
-    this._refInput = _react.default.createRef();
-    this._id = props.id || (0, _componentHelper.makeUniqueId)();
-    this.state = {
-      _listenForPropChanges: true
-    };
-  }
-  componentDidMount() {
-    if (this.props.innerRef) {
-      typeof this.props.innerRef === 'function' ? this.props.innerRef(this._refInput.current) : this.props.innerRef.current = this._refInput.current;
+    if (ref.current) {
+      ref.current.focus();
     }
-  }
-  render() {
-    var _this$context, _this$context2;
-    const props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, Checkbox.defaultProps, {
-      skeleton: this.context && this.context.skeleton
-    }, this.context.getTranslation(this.props).Checkbox, (0, _filterValidProps.pickFormElementProps)((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow), (0, _filterValidProps.pickFormElementProps)((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.formElement), this.context.Checkbox);
-    const {
-        value,
-        status,
-        status_state,
-        status_props,
-        status_no_animation,
-        globalStatus,
-        suffix,
-        size,
-        label,
-        label_position,
-        label_sr_only,
-        title,
-        element,
-        disabled,
-        readOnly,
-        skeleton,
-        className,
-        class: _className,
-        id: _id,
-        checked: _checked,
-        children,
-        on_change,
-        on_state_update,
-        innerRef
-      } = props,
-      rest = _objectWithoutProperties(props, _excluded);
-    const {
-      checked
-    } = this.state;
-    const id = this._id;
-    const showStatus = (0, _componentHelper.getStatusState)(status);
-    const mainParams = {
-      className: (0, _classnames.default)("dnb-checkbox dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(props), className, _className, status && `dnb-checkbox__status--${status_state}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${label_position || 'right'}`)
-    };
+  }, [callOnChange, isChecked, readOnly, ref]);
+  const onKeyDownHandler = (0, _react.useCallback)(event => {
+    switch ((0, _keycode.default)(event)) {
+      case 'enter':
+        onChangeHandler(event);
+        break;
+    }
+  }, [onChangeHandler]);
+  const mainParams = {
+    className: (0, _classnames.default)("dnb-checkbox dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
+  };
+  const showStatus = (0, _componentHelper.getStatusState)(status);
+  const inputParams = handleInputAttributes();
+  const statusComp = _react.default.createElement(_FormStatus.default, _extends({
+    show: showStatus,
+    id: id + '-form-status',
+    globalStatus: globalStatus,
+    label: label,
+    text_id: id + '-status',
+    width_selector: id + ', ' + id + '-label',
+    text: status,
+    state: statusState,
+    no_animation: statusNoAnimation,
+    skeleton: skeleton
+  }, statusProps));
+  const Element = element || 'input';
+  return _react.default.createElement("span", mainParams, _react.default.createElement("span", {
+    className: "dnb-checkbox__order"
+  }, label && _react.default.createElement(_FormLabel.default, {
+    id: id + '-label',
+    forId: id,
+    text: label,
+    disabled: disabled,
+    skeleton: skeleton,
+    srOnly: labelSrOnly
+  }), _react.default.createElement("span", {
+    className: "dnb-checkbox__inner"
+  }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), labelPosition === 'left' && statusComp, _react.default.createElement("span", {
+    className: "dnb-checkbox__shell"
+  }, _react.default.createElement(Element, _extends({
+    id: id,
+    name: id,
+    type: "checkbox",
+    title: title,
+    className: "dnb-checkbox__input",
+    value: isChecked ? value || '' : '',
+    disabled: disabled
+  }, inputParams, {
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDownHandler,
+    ref: ref
+  })), _react.default.createElement("span", {
+    className: (0, _classnames.default)('dnb-checkbox__button', (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context)),
+    "aria-hidden": true
+  }, _span || (_span = _react.default.createElement("span", {
+    className: "dnb-checkbox__focus"
+  }))), _react.default.createElement(_CheckIcon.default, {
+    size: size
+  }))), suffix && _react.default.createElement(_Suffix.default, {
+    className: "dnb-checkbox__suffix",
+    id: id + '-suffix',
+    context: props
+  }, suffix)), (labelPosition === 'right' || !labelPosition) && statusComp);
+  function handleInputAttributes() {
     const inputParams = _objectSpread({
       disabled,
-      checked
+      checked: isChecked,
+      readOnly
     }, rest);
     if (showStatus || suffix) {
       inputParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(inputParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
@@ -136,152 +171,14 @@ class Checkbox extends _react.default.PureComponent {
     if (readOnly) {
       inputParams['aria-readonly'] = inputParams.readOnly = true;
     }
-    (0, _SkeletonHelper.skeletonDOMAttributes)(inputParams, skeleton, this.context);
-    (0, _componentHelper.validateDOMAttributes)(this.props, inputParams);
-    const statusComp = _react.default.createElement(_FormStatus.default, _extends({
-      show: showStatus,
-      id: id + '-form-status',
-      globalStatus: globalStatus,
-      label: label,
-      text_id: id + '-status',
-      width_selector: id + ', ' + id + '-label',
-      text: status,
-      state: status_state,
-      no_animation: status_no_animation,
-      skeleton: skeleton
-    }, status_props));
-    const Element = element || 'input';
-    return _react.default.createElement("span", mainParams, _react.default.createElement("span", {
-      className: "dnb-checkbox__order"
-    }, label && _react.default.createElement(_FormLabel.default, {
-      id: id + '-label',
-      for_id: id,
-      text: label,
-      disabled: disabled,
-      skeleton: skeleton,
-      sr_only: label_sr_only
-    }), _react.default.createElement("span", {
-      className: "dnb-checkbox__inner"
-    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), label_position === 'left' && statusComp, _react.default.createElement("span", {
-      className: "dnb-checkbox__shell"
-    }, _react.default.createElement(Element, _extends({
-      id: id,
-      name: id,
-      type: "checkbox",
-      title: title,
-      className: "dnb-checkbox__input",
-      value: checked ? value || '' : '',
-      disabled: (0, _componentHelper.isTrue)(disabled)
-    }, inputParams, {
-      onChange: this.onChangeHandler,
-      onKeyDown: this.onKeyDownHandler,
-      ref: this._refInput
-    })), _react.default.createElement("span", {
-      className: (0, _classnames.default)('dnb-checkbox__button', (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, this.context)),
-      "aria-hidden": true
-    }, _span || (_span = _react.default.createElement("span", {
-      className: "dnb-checkbox__focus"
-    }))), _react.default.createElement(CheckIcon, {
-      size: size
-    }))), suffix && _react.default.createElement(_Suffix.default, {
-      className: "dnb-checkbox__suffix",
-      id: id + '-suffix',
-      context: props
-    }, suffix)), (label_position === 'right' || !label_position) && statusComp);
+    return (0, _componentHelper.validateDOMAttributes)(props, (0, _SkeletonHelper.skeletonDOMAttributes)(inputParams, skeleton, context));
   }
-}
-exports.default = Checkbox;
-_defineProperty(Checkbox, "contextType", _Context.default);
-_defineProperty(Checkbox, "defaultProps", {
-  label: null,
-  label_position: null,
-  label_sr_only: null,
-  title: null,
-  element: 'input',
-  checked: null,
-  disabled: null,
-  id: null,
-  size: null,
-  status: null,
-  status_state: 'error',
-  status_props: null,
-  status_no_animation: null,
-  globalStatus: null,
-  suffix: null,
-  value: null,
-  attributes: null,
-  readOnly: false,
-  skeleton: null,
-  class: null,
-  className: null,
-  children: null,
-  on_change: null,
-  on_state_update: null,
-  innerRef: null
-});
-_defineProperty(Checkbox, "parseChecked", state => /true|on/.test(String(state)));
-process.env.NODE_ENV !== "production" ? Checkbox.propTypes = _objectSpread(_objectSpread({
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  label_position: _propTypes.default.oneOf(['left', 'right']),
-  label_sr_only: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  element: _propTypes.default.node,
-  checked: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  id: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['default', 'medium', 'large']),
-  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
-  status_state: _propTypes.default.string,
-  status_props: _propTypes.default.object,
-  status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  globalStatus: _propTypes.default.shape({
-    id: _propTypes.default.string,
-    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
-  }),
-  suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
-  value: _propTypes.default.string,
-  attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  readOnly: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  class: _propTypes.default.string,
-  innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-}, _SpacingHelper.spacingPropTypes), {}, {
-  className: _propTypes.default.string,
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  on_change: _propTypes.default.func,
-  on_state_update: _propTypes.default.func
-}) : void 0;
-const CheckIcon = _ref => {
-  let {
-      size
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded2);
-  let vB = 16;
-  if (size === 'large') {
-    vB = 24;
+  function extractPropsFromContext() {
+    return (0, _componentHelper.extendPropsWithContext)((0, _withSnakeCaseProps.convertSnakeCaseProps)(localProps), defaultProps, context.Checkbox, {
+      skeleton: context === null || context === void 0 ? void 0 : context.Checkbox
+    }, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.FormRow), (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement));
   }
-  return _react.default.createElement("svg", _extends({
-    width: vB,
-    height: vB,
-    viewBox: `0 0 ${vB} ${vB}`,
-    fill: "none",
-    className: "dnb-checkbox__gfx",
-    "aria-hidden": true
-  }, props), _react.default.createElement("path", {
-    d: size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2',
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-exports.CheckIcon = CheckIcon;
-process.env.NODE_ENV !== "production" ? CheckIcon.propTypes = {
-  size: _propTypes.default.string
-} : void 0;
-CheckIcon.defaultProps = {
-  size: 'default'
-};
-CheckIcon._formElement = true;
-CheckIcon._supportsSpacingProps = true;
+}
+var _default = Checkbox;
+exports.default = _default;
 //# sourceMappingURL=Checkbox.js.map

package/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_keycode","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_filterValidProps","_Context","_Suffix","_FormLabel","_FormStatus","_AlignmentHelper","_span","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Checkbox","React","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","dispatchCustomElementEvent","constructor","event","keycode","onChangeHandler","isTrue","readOnly","preventDefault","setState","_refInput","current","focus","createRef","_id","id","makeUniqueId","componentDidMount","innerRef","render","_this$context","_this$context2","extendPropsWithContextInClassComponent","defaultProps","skeleton","context","getTranslation","pickFormElementProps","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","showStatus","getStatusState","mainParams","classnames","createSkeletonClass","createSpacingClasses","inputParams","combineDescribedBy","skeletonDOMAttributes","validateDOMAttributes","statusComp","createElement","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","name","type","onChange","onKeyDown","onKeyDownHandler","ref","CheckIcon","exports","Context","attributes","test","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","string","func","node","oneOf","bool","shape","message","spacingPropTypes","_ref","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/**\n * Web Checkbox Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    element: PropTypes.node,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    class: PropTypes.string,\n    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    element: 'input',\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_state_update: null,\n\n    innerRef: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Checkbox.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._refInput.current)\n        : (this.props.innerRef.current = this._refInput.current)\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Checkbox.defaultProps,\n      { skeleton: this.context && this.context.skeleton },\n      this.context.getTranslation(this.props).Checkbox,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Checkbox\n    )\n\n    const {\n      value,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      size,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      element,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n      innerRef, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-checkbox',\n        status && `dnb-checkbox__status--${status_state}`,\n        size && `dnb-checkbox--${size}`,\n        label &&\n          `dnb-checkbox--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled,\n      checked,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const statusComp = (\n      <FormStatus\n        show={showStatus}\n        id={id + '-form-status'}\n        globalStatus={globalStatus}\n        label={label}\n        text_id={id + '-status'} // used for \"aria-describedby\"\n        width_selector={id + ', ' + id + '-label'}\n        text={status}\n        state={status_state}\n        no_animation={status_no_animation}\n        skeleton={skeleton}\n        {...status_props}\n      />\n    )\n\n    const Element = element || 'input'\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-checkbox__order\">\n          {label && (\n            <FormLabel\n              id={id + '-label'}\n              for_id={id}\n              text={label}\n              disabled={disabled}\n              skeleton={skeleton}\n              sr_only={label_sr_only}\n            />\n          )}\n\n          <span className=\"dnb-checkbox__inner\">\n            <AlignmentHelper />\n            {label_position === 'left' && statusComp}\n\n            <span className=\"dnb-checkbox__shell\">\n              <Element\n                id={id}\n                name={id}\n                type=\"checkbox\"\n                title={title}\n                className=\"dnb-checkbox__input\"\n                value={checked ? value || '' : ''}\n                disabled={isTrue(disabled)}\n                {...inputParams}\n                onChange={this.onChangeHandler}\n                onKeyDown={this.onKeyDownHandler}\n                ref={this._refInput}\n              />\n\n              <span\n                className={classnames(\n                  'dnb-checkbox__button',\n                  createSkeletonClass('shape', skeleton, this.context)\n                )}\n                aria-hidden\n              >\n                <span className=\"dnb-checkbox__focus\" />\n              </span>\n\n              <CheckIcon size={size} />\n            </span>\n          </span>\n\n          {suffix && (\n            <Suffix\n              className=\"dnb-checkbox__suffix\"\n              id={id + '-suffix'} // used for \"aria-describedby\"\n              context={props}\n            >\n              {suffix}\n            </Suffix>\n          )}\n        </span>\n\n        {(label_position === 'right' || !label_position) && statusComp}\n      </span>\n    )\n  }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n  let vB = 16\n  if (size === 'large') {\n    vB = 24\n  }\n  return (\n    <svg\n      width={vB}\n      height={vB}\n      viewBox={`0 0 ${vB} ${vB}`}\n      fill=\"none\"\n      className=\"dnb-checkbox__gfx\"\n      aria-hidden\n      {...props}\n    >\n      <path\n        d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\nCheckIcon.propTypes = {\n  size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n  size: 'default',\n}\n\nCheckIcon._formElement = true\nCheckIcon._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_keycode","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_useId","_filterValidProps","_withSnakeCaseProps","_FormLabel","_FormStatus","_CheckIcon","_AlignmentHelper","_span","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_extends","assign","bind","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","defaultProps","statusState","Checkbox","localProps","context","useContext","Context","props","extractPropsFromContext","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","skeleton","className","id","idProp","checked","onChange","innerRef","rest","useId","isFn","refHook","useRef","ref","useEffect","current","isChecked","setIsChecked","useState","prevChecked","setPrevChecked","callOnChange","useCallback","args","onChangeHandler","event","preventDefault","updatedCheck","focus","onKeyDownHandler","keycode","mainParams","classnames","createSkeletonClass","createSpacingClasses","showStatus","getStatusState","inputParams","handleInputAttributes","statusComp","createElement","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","name","type","onKeyDown","combineDescribedBy","validateDOMAttributes","skeletonDOMAttributes","extendPropsWithContext","convertSnakeCaseProps","pickFormElementProps","FormRow","formElement","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Web Checkbox Component\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\n\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport useId from '../../shared/helpers/useId'\nimport type { SpacingProps } from '../space/types'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport type {\n  FormStatusProps,\n  FormStatusState,\n  FormStatusText,\n} from '../FormStatus'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\nimport CheckIcon from './CheckIcon'\n\nexport type CheckboxLabelPosition = 'left' | 'right'\nexport type CheckboxSize = 'default' | 'medium' | 'large'\nexport type CheckboxAttributes = string | Record<string, unknown>\nexport type OnChangeParams = {\n  checked: boolean\n  event: React.ChangeEvent<HTMLInputElement>\n}\n\nexport type CheckboxProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * The `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the checkbox is checked or not. The default is `false`.\n   */\n  checked?: boolean | undefined | null\n  /**\n   * The size of the checkbox. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: CheckboxSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)\n   */\n  statusProps?: FormStatusProps\n  statusNoAnimation?: boolean\n  /**\n   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)\n   */\n  globalStatus?: GlobalStatusConfigObject\n  /**\n   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  element?: React.ElementType\n  attributes?: CheckboxAttributes\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.\n   */\n  onChange?: (args: OnChangeParams) => void\n  /**\n   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & SpacingProps &\n  Omit<\n    React.HTMLProps<HTMLInputElement>,\n    'ref' | 'label' | 'size' | 'onChange'\n  > &\n  DeprecatedCheckboxProps\n\n// depracated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onComplete` */\n  on_change?: (args: OnChangeParams) => void\n  /**  @deprecated use `labelPosition` */\n  label_position?: CheckboxLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: FormStatusProps\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps: CheckboxProps = {\n  statusState: 'error',\n}\n\nfunction Checkbox(localProps: CheckboxProps) {\n  const context = useContext(Context)\n\n  const props = extractPropsFromContext()\n\n  const {\n    value,\n    status,\n    statusState,\n    statusProps,\n    statusNoAnimation,\n    globalStatus,\n    suffix,\n    size,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    element,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    checked,\n    onChange,\n    innerRef,\n    ...rest\n  } = props\n\n  const id = useId(idProp)\n\n  const isFn = typeof innerRef === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const ref = (!isFn && innerRef) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRef?.(ref.current)\n    }\n  }, [innerRef, isFn, ref])\n\n  const [isChecked, setIsChecked] = useState<boolean>(checked ?? false)\n  const [prevChecked, setPrevChecked] = useState<boolean>(checked)\n\n  useEffect(() => {\n    if (checked !== prevChecked) {\n      setIsChecked(!!checked)\n      setPrevChecked(!!checked)\n    }\n  }, [checked, prevChecked])\n\n  const callOnChange = useCallback(\n    (args: OnChangeParams) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const onChangeHandler = useCallback(\n    (event) => {\n      if (readOnly) {\n        return event.preventDefault()\n      }\n      const updatedCheck = !isChecked\n\n      setIsChecked(updatedCheck)\n      callOnChange({ checked: updatedCheck, event })\n\n      // help firefox and safari to have an correct state after a click\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [callOnChange, isChecked, readOnly, ref]\n  )\n\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      switch (keycode(event)) {\n        case 'enter':\n          onChangeHandler(event)\n          break\n      }\n    },\n    [onChangeHandler]\n  )\n\n  const mainParams = {\n    className: classnames(\n      'dnb-checkbox',\n      status && `dnb-checkbox__status--${statusState}`,\n      size && `dnb-checkbox--${size}`,\n      label && `dnb-checkbox--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const showStatus = getStatusState(status)\n\n  const inputParams = handleInputAttributes()\n\n  const statusComp = (\n    <FormStatus\n      show={showStatus}\n      id={id + '-form-status'}\n      globalStatus={globalStatus}\n      label={label}\n      text_id={id + '-status'} // used for \"aria-describedby\"\n      width_selector={id + ', ' + id + '-label'}\n      text={status}\n      state={statusState}\n      no_animation={statusNoAnimation}\n      skeleton={skeleton}\n      {...statusProps}\n    />\n  )\n\n  const Element = element || 'input'\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-checkbox__order\">\n        {label && (\n          <FormLabel\n            id={id + '-label'}\n            forId={id}\n            text={label}\n            disabled={disabled}\n            skeleton={skeleton}\n            srOnly={labelSrOnly}\n          />\n        )}\n\n        <span className=\"dnb-checkbox__inner\">\n          <AlignmentHelper />\n          {labelPosition === 'left' && statusComp}\n\n          <span className=\"dnb-checkbox__shell\">\n            <Element\n              id={id}\n              name={id}\n              type=\"checkbox\"\n              title={title}\n              className=\"dnb-checkbox__input\"\n              value={isChecked ? value || '' : ''}\n              disabled={disabled}\n              {...inputParams}\n              onChange={onChangeHandler}\n              onKeyDown={onKeyDownHandler}\n              ref={ref}\n            />\n\n            <span\n              className={classnames(\n                'dnb-checkbox__button',\n                createSkeletonClass('shape', skeleton, context)\n              )}\n              aria-hidden\n            >\n              <span className=\"dnb-checkbox__focus\" />\n            </span>\n\n            <CheckIcon size={size} />\n          </span>\n        </span>\n\n        {suffix && (\n          <Suffix\n            className=\"dnb-checkbox__suffix\"\n            id={id + '-suffix'} // used for \"aria-describedby\"\n            context={props}\n          >\n            {suffix}\n          </Suffix>\n        )}\n      </span>\n\n      {(labelPosition === 'right' || !labelPosition) && statusComp}\n    </span>\n  )\n\n  /**\n   * Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n   */\n  function handleInputAttributes() {\n    const inputParams = {\n      disabled,\n      checked: isChecked,\n      readOnly,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    return validateDOMAttributes(\n      props,\n      skeletonDOMAttributes(inputParams, skeleton, context)\n    )\n  }\n\n  function extractPropsFromContext() {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(localProps),\n      defaultProps,\n      context.Checkbox,\n      {\n        skeleton: context?.Checkbox,\n      },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement)\n    )\n  }\n}\n\nexport default Checkbox\n"],"mappings":"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"}

package/cjs/components/tabs/style/dnb-tabs.css

@@ -249,7 +249,7 @@ html[data-whatinput=keyboard] .dnb-tabs__button:focus::before, html[data-whatinp
   right: -0.375rem;
   bottom: 0.5rem;
   border-radius: 1.5rem;
-  background-color: var(--sb-color-blue-light-3);
+  background-color: var(--tab-focus-background-color, none);
 }
 .dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after, .dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active::after, .dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected::after {
   height: 2px;

package/cjs/components/tabs/style/dnb-tabs.min.css

@@ -1 +1 @@
-.dnb-tabs{--tablist-border-color--default:grey;--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-font-color:dimgray;--tab-title-background--hover:#a9a9a9;--tab-title-color--hover:inherit;--tab-title-border--hover:#000;--tab-title-background--disabled:inherit;--tab-title-color--disabled:#d3d3d3;--tab-title-border--active-selected:#000;--tab-title-color--active-selected:#000;--tab-title-font-weight--selected:var(--font-weight-medium)}.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:flex;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem;outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;position:absolute;width:100%;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__tabs--breakout:before{left:-100vw;width:100vw}.dnb-tabs__tabs:not(.dnb-section):before{background-color:var(--tablist-border-color--default);box-shadow:100vw 0 0 0 var(--tablist-border-color--default)}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button__title{color:var(--tab-title-font-color);display:block;font-size:var(--tab-title-font-size);font-weight:var(--tab-title-font-weight);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover:not([disabled]){color:var(--tab-title-color--hover)}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:var(--tab-title-background--hover)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:var(--tab-title-border--hover);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled],.dnb-tabs__button[disabled]{background-color:var(--tab-title-background--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:var(--tab-title-color--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button span[hidden],.dnb-tabs__button span[hidden]{font-weight:var(--tab-title-font-weight--selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus,.dnb-tabs__button:focus{overflow:visible}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{background-color:var(--sb-color-blue-light-3);border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:after,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active:after,.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:var(--tab-title-border--active-selected);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:var(--tab-title-color--active-selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title{font-weight:var(--tab-title-font-weight--selected)}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem;transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-tabs{--tablist-border-color--default:grey;--tab-title-font-weight:var(--font-weight-regular);--tab-title-font-size:var(--font-size-basis);--tab-title-font-color:dimgray;--tab-title-background--hover:#a9a9a9;--tab-title-color--hover:inherit;--tab-title-border--hover:#000;--tab-title-background--disabled:inherit;--tab-title-color--disabled:#d3d3d3;--tab-title-border--active-selected:#000;--tab-title-color--active-selected:#000;--tab-title-font-weight--selected:var(--font-weight-medium)}.dnb-tabs__tabs{align-items:center;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:flex;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem;outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-tabs__tabs__tablist::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;position:absolute;width:100%;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__tabs--breakout:before{left:-100vw;width:100vw}.dnb-tabs__tabs:not(.dnb-section):before{background-color:var(--tablist-border-color--default);box-shadow:100vw 0 0 0 var(--tablist-border-color--default)}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:margin .4s ease-out;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button__title{color:var(--tab-title-font-color);display:block;font-size:var(--tab-title-font-size);font-weight:var(--tab-title-font-weight);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button__title:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button__title:hover:not([disabled]){color:var(--tab-title-color--hover)}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:var(--font-size-small);transform:translateY(-.125rem)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:var(--tab-title-background--hover)}html:not([data-whatintent=touch]) .dnb-core-style .dnb-tabs .dnb-tabs__button:hover:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:var(--tab-title-border--hover);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{display:flex;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled],.dnb-tabs__button[disabled]{background-color:var(--tab-title-background--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button[disabled] .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:var(--tab-title-color--disabled)}.dnb-core-style .dnb-tabs .dnb-tabs__button span[hidden],.dnb-tabs__button span[hidden]{font-weight:var(--tab-title-font-weight--selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus,.dnb-tabs__button:focus{overflow:visible}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-core-style .dnb-tabs .dnb-tabs__button:focus:before,.dnb-tabs__button:focus:before{background-color:var(--tab-focus-background-color,none);border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected:after,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active:after,.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:var(--tab-title-border--active-selected);border-radius:2px;height:2px}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:var(--tab-title-color--active-selected)}.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-core-style .dnb-tabs .dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-core-style .dnb-tabs .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title{font-weight:var(--tab-title-font-weight--selected)}.dnb-tabs__button__snap{display:flex;padding:0 1rem 0 1.5rem;transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{transition:none!important}.dnb-tabs__content{padding-bottom:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/cjs/components/tabs/style/dnb-tabs.scss

@@ -234,7 +234,7 @@
         right: -0.375rem; // For overflow purposes
         bottom: 0.5rem;
         border-radius: 1.5rem;
-        background-color: var(--sb-color-blue-light-3);
+        background-color: var(--tab-focus-background-color, none);
       }
     }