@dnb/eufemia 10.53.0 → 10.54.0

package/es/components/button/style/themes/dnb-button-theme-eiendom.scss

@@ -29,7 +29,7 @@
 
   @include fakeBorder(var(--color-emerald-green));
 
-  // // This is just not good – it gives the feeling that its not clickable, as the change is almost not noticeable
+  // // This is just not good – it gives the feeling that it's not clickable, as the change is almost not noticeable
   // @include hover() {
   //   @include fakeBorder(var(--color-sea-green), 0.0625rem);
   // }

package/es/components/checkbox/Checkbox.js

@@ -9,8 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
-import keycode from 'keycode';
-import { validateDOMAttributes, getStatusState, combineDescribedBy, extendPropsWithContext } from '../../shared/component-helper';
+import { validateDOMAttributes, getStatusState, combineDescribedBy, extendPropsWithContext, keycode } from '../../shared/component-helper';
 import AlignmentHelper from '../../shared/AlignmentHelper';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","keycode","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","props","extractPropsFromContext","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","skeleton","className","id","idProp","indeterminate","checked","onChange","innerRef","rest","_objectWithoutProperties","_excluded","isFn","refHook","ref","current","isChecked","setIsChecked","prevChecked","setPrevChecked","callOnChange","args","handleChange","event","preventDefault","updatedCheck","focus","onChangeHandler","onKeyDownHandler","mainParams","showStatus","inputParams","handleInputAttributes","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2","_objectSpread","FormRow","formElement"],"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   * Determine whether to show the indeterminate checked state when checked. The default is `false`.\n   */\n  indeterminate?: boolean\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// deprecated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onChange` */\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    indeterminate,\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  useEffect(() => {\n    ref.current.indeterminate = indeterminate\n  }, [indeterminate, ref])\n\n  const callOnChange: CheckboxProps['onChange'] = useCallback(\n    (args) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const handleChange = useCallback(\n    (event: OnChangeParams['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 onChangeHandler = useCallback(\n    (event: OnChangeParams['event']) => {\n      handleChange(event)\n    },\n    [handleChange]\n  )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent & OnChangeParams['event']) => {\n      switch (keycode(event)) {\n        case 'enter':\n          handleChange(event)\n          break\n      }\n    },\n    [handleChange]\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, context),\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            <span className=\"dnb-checkbox__indeterminate\" />\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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"}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","keycode","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","props","extractPropsFromContext","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","skeleton","className","id","idProp","indeterminate","checked","onChange","innerRef","rest","_objectWithoutProperties","_excluded","isFn","refHook","ref","current","isChecked","setIsChecked","prevChecked","setPrevChecked","callOnChange","args","handleChange","event","preventDefault","updatedCheck","focus","onChangeHandler","onKeyDownHandler","mainParams","showStatus","inputParams","handleInputAttributes","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2","_objectSpread","FormRow","formElement"],"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 {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n  keycode,\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   * Determine whether to show the indeterminate checked state when checked. The default is `false`.\n   */\n  indeterminate?: boolean\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// deprecated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onChange` */\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    indeterminate,\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  useEffect(() => {\n    ref.current.indeterminate = indeterminate\n  }, [indeterminate, ref])\n\n  const callOnChange: CheckboxProps['onChange'] = useCallback(\n    (args) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const handleChange = useCallback(\n    (event: OnChangeParams['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 onChangeHandler = useCallback(\n    (event: OnChangeParams['event']) => {\n      handleChange(event)\n    },\n    [handleChange]\n  )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent & OnChangeParams['event']) => {\n      switch (keycode(event)) {\n        case 'enter':\n          handleChange(event)\n          break\n      }\n    },\n    [handleChange]\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, context),\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            <span className=\"dnb-checkbox__indeterminate\" />\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/es/components/country-flag/CountryFlag.d.ts

@@ -0,0 +1,11 @@
+import { SpaceAllProps } from '../space/Space';
+type CountryFlagProps = {
+    iso?: string;
+    size?: 'auto' | 'small' | 'medium' | 'large' | 'x-large';
+    shape?: 'round' | 'square';
+} & Omit<SpaceAllProps, 'size'>;
+declare const CountryFlag: {
+    (props: CountryFlagProps): import("react/jsx-runtime").JSX.Element;
+    _supportsSpacingProps: boolean;
+};
+export default CountryFlag;

package/es/components/country-flag/CountryFlag.js

@@ -0,0 +1,38 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["iso", "size", "shape", "className"];
+import React, { useContext, useMemo } from 'react';
+import classnames from 'classnames';
+import SharedContext from '../../shared/Context';
+import { COUNTRY as defaultCountry } from '../../shared/defaults';
+import countries from '../../extensions/forms/constants/countries';
+import Space from '../space/Space';
+const CountryFlag = props => {
+  const {
+      iso = defaultCountry,
+      size,
+      shape,
+      className
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const {
+    locale
+  } = useContext(SharedContext);
+  const countryName = useMemo(() => {
+    var _countries$find;
+    return (_countries$find = countries.find(item => item.iso === iso)) === null || _countries$find === void 0 ? void 0 : _countries$find.i18n[locale.split('-')[0]];
+  }, [iso, locale]);
+  return React.createElement(Space, _extends({
+    element: "span",
+    className: classnames('dnb-country-flag', 'dnb-country-flag__size--' + (size || 'auto'), className, shape && 'dnb-country-flag__shape--' + shape)
+  }, rest), React.createElement("span", {
+    className: "dnb-sr-only"
+  }, countryName), React.createElement("span", {
+    className: `dnb-country-flag__flag fis fi-${iso.toLowerCase()}`
+  }));
+};
+CountryFlag._supportsSpacingProps = true;
+export default CountryFlag;
+//# sourceMappingURL=CountryFlag.js.map

package/es/components/country-flag/CountryFlag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryFlag.js","names":["React","useContext","useMemo","classnames","SharedContext","COUNTRY","defaultCountry","countries","Space","CountryFlag","props","iso","size","shape","className","rest","_objectWithoutProperties","_excluded","locale","countryName","_countries$find","find","item","i18n","split","createElement","_extends","element","toLowerCase","_supportsSpacingProps"],"sources":["../../../../src/components/country-flag/CountryFlag.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../shared/Context'\nimport { COUNTRY as defaultCountry } from '../../shared/defaults'\nimport countries from '../../extensions/forms/constants/countries'\nimport Space, { SpaceAllProps } from '../space/Space'\n\ntype CountryFlagProps = {\n  iso?: string\n  size?: 'auto' | 'small' | 'medium' | 'large' | 'x-large'\n  shape?: 'round' | 'square'\n} & Omit<SpaceAllProps, 'size'>\n\nconst CountryFlag = (props: CountryFlagProps) => {\n  const { iso = defaultCountry, size, shape, className, ...rest } = props\n\n  const { locale } = useContext(SharedContext)\n  const countryName = useMemo(() => {\n    return countries.find((item) => item.iso === iso)?.i18n[\n      locale.split('-')[0]\n    ]\n  }, [iso, locale])\n\n  return (\n    <Space\n      element=\"span\"\n      className={classnames(\n        'dnb-country-flag',\n        'dnb-country-flag__size--' + (size || 'auto'),\n        shape && 'dnb-country-flag__shape--' + shape,\n        className\n      )}\n      {...rest}\n    >\n      <span className=\"dnb-sr-only\">{countryName}</span>\n      <span\n        className={`dnb-country-flag__flag fis fi-${iso.toLowerCase()}`}\n      />\n    </Space>\n  )\n}\n\nCountryFlag._supportsSpacingProps = true\n\nexport default CountryFlag\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,sBAAsB;AAChD,SAASC,OAAO,IAAIC,cAAc,QAAQ,uBAAuB;AACjE,OAAOC,SAAS,MAAM,4CAA4C;AAClE,OAAOC,KAAK,MAAyB,gBAAgB;AAQrD,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EAC/C,MAAM;MAAEC,GAAG,GAAGL,cAAc;MAAEM,IAAI;MAAEC,KAAK;MAAEC;IAAmB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EAEvE,MAAM;IAAEC;EAAO,CAAC,GAAGjB,UAAU,CAACG,aAAa,CAAC;EAC5C,MAAMe,WAAW,GAAGjB,OAAO,CAAC,MAAM;IAAA,IAAAkB,eAAA;IAChC,QAAAA,eAAA,GAAOb,SAAS,CAACc,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACX,GAAG,KAAKA,GAAG,CAAC,cAAAS,eAAA,uBAA1CA,eAAA,CAA4CG,IAAI,CACrDL,MAAM,CAACM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACrB;EACH,CAAC,EAAE,CAACb,GAAG,EAAEO,MAAM,CAAC,CAAC;EAEjB,OACElB,KAAA,CAAAyB,aAAA,CAACjB,KAAK,EAAAkB,QAAA;IACJC,OAAO,EAAC,MAAM;IACdb,SAAS,EAAEX,UAAU,CACnB,kBAAkB,EAClB,0BAA0B,IAAIS,IAAI,IAAI,MAAM,CAAC,EAE7CE,SAAS,EADTD,KAAK,IAAI,2BAA2B,GAAGA,KAEzC;EAAE,GACEE,IAAI,GAERf,KAAA,CAAAyB,aAAA;IAAMX,SAAS,EAAC;EAAa,GAAEK,WAAkB,CAAC,EAClDnB,KAAA,CAAAyB,aAAA;IACEX,SAAS,EAAG,iCAAgCH,GAAG,CAACiB,WAAW,CAAC,CAAE;EAAE,CACjE,CACI,CAAC;AAEZ,CAAC;AAEDnB,WAAW,CAACoB,qBAAqB,GAAG,IAAI;AAExC,eAAepB,WAAW"}

package/es/components/country-flag/CountryFlagDocs.d.ts

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

package/es/components/country-flag/CountryFlagDocs.js

@@ -0,0 +1,18 @@
+export const CountryFlagProperties = {
+  size: {
+    doc: 'The size of the component. Can be `auto`, `small`, `medium`, `large` or `x-large`. Defaults to `auto` (1em).',
+    type: 'string',
+    status: 'optional'
+  },
+  shape: {
+    doc: 'The shape of the component. Can be `round` or `square`. Defaults to `round`.',
+    type: 'string',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=CountryFlagDocs.js.map

package/es/components/country-flag/CountryFlagDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryFlagDocs.js","names":["CountryFlagProperties","size","doc","type","status","shape"],"sources":["../../../../src/components/country-flag/CountryFlagDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CountryFlagProperties: PropertiesTableProps = {\n  size: {\n    doc: 'The size of the component. Can be `auto`, `small`, `medium`, `large` or `x-large`. Defaults to `auto` (1em).',\n    type: 'string',\n    status: 'optional',\n  },\n  shape: {\n    doc: 'The shape of the component. Can be `round` or `square`. Defaults to `round`.',\n    type: 'string',\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,qBAA2C,GAAG;EACzDC,IAAI,EAAE;IACJC,GAAG,EAAE,8GAA8G;IACnHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,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/es/components/country-flag/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Component Entry
+ *
+ */
+import CountryFlag from './CountryFlag';
+export default CountryFlag;
+export * from './CountryFlag';

package/es/components/country-flag/index.js

@@ -0,0 +1,4 @@
+import CountryFlag from './CountryFlag';
+export default CountryFlag;
+export * from './CountryFlag';
+//# sourceMappingURL=index.js.map

package/es/components/country-flag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CountryFlag"],"sources":["../../../../src/components/country-flag/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport CountryFlag from './CountryFlag'\nexport default CountryFlag\nexport * from './CountryFlag'\n"],"mappings":"AAKA,OAAOA,WAAW,MAAM,eAAe;AACvC,eAAeA,WAAW;AAC1B,cAAc,eAAe"}