@dnb/eufemia 10.4.2 → 10.6.0

package/es/components/dialog/parts/DialogAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogAction.js","names":["React","useContext","classNames","Button","Space","Context","ModalContext","dispatchCustomElementEvent","fallbackCloseAction","close","DialogAction","_ref","_translation$Dialog","_translation$Dialog2","declineText","confirmText","hideDecline","onConfirm","onDecline","className","children","props","_objectWithoutProperties","_excluded","translation","ButtonContext","childrenWithCloseFunc","Children","map","child","type","cloneElement","_objectSpread","on_click","event","createElement","_extends","element","text","Dialog","variant","onClick","size"],"sources":["../../../../../src/components/dialog/parts/DialogAction.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classNames from 'classnames'\nimport Button from '../../button/Button'\nimport Space from '../../space/Space'\nimport { Context } from '../../../shared'\nimport ModalContext from '../../modal/ModalContext'\nimport { dispatchCustomElementEvent } from '../../../shared/component-helper'\n\nimport type { SpacingProps } from '../../space/types'\n\ntype extendedMouseEvent = {\n  event: React.MouseEvent<HTMLElement>\n  close: () => void\n}\n\nexport type DialogActionProps = {\n  /**\n   * For dialog actions, give a custom text for the decline button.\n   */\n  declineText?: string | React.ReactNode\n\n  /**\n   * For dialog actions, give a custom text for the confirm button.\n   */\n  confirmText?: string | React.ReactNode\n\n  /**\n   * For variant confirmation, handle the confirm action click.\n   */\n  onConfirm?: (event: extendedMouseEvent) => void\n\n  /**\n   * For variant confirmation, handle the decline action click.\n   */\n  onDecline?: (event: extendedMouseEvent) => void\n\n  /**\n   * For variant confirmation, hide the default decline button and only show the confirm button.\n   */\n  hideDecline?: boolean\n\n  /**\n   * Pass in custom confirm/decline buttons for action handling. Every child of type Button will be provided with a `close` function attribute.\n   */\n  children?: React.ReactElement | Array<React.ReactElement>\n}\n\nexport type DialogActionAllProps = DialogActionProps &\n  SpacingProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'children'>\n\nconst fallbackCloseAction = ({ close }: extendedMouseEvent) => close()\n\nconst DialogAction = ({\n  declineText = null,\n  confirmText = null,\n  hideDecline = false,\n  onConfirm = fallbackCloseAction,\n  onDecline = fallbackCloseAction,\n  className,\n  children,\n  ...props\n}: DialogActionAllProps) => {\n  const { translation, Button: ButtonContext } = useContext(Context)\n  const { close } = useContext(ModalContext)\n  let childrenWithCloseFunc: Array<React.ReactChild>\n\n  if (children) {\n    childrenWithCloseFunc = React.Children.map(children, (child) => {\n      if (child.type === Button) {\n        return React.cloneElement(\n          child,\n          {\n            ...child.props,\n            on_click: (event) => {\n              dispatchCustomElementEvent(child.props, 'on_click', {\n                event,\n                close,\n              })\n            },\n          },\n          child.props.children\n        )\n      } else {\n        return child\n      }\n    })\n  }\n\n  return (\n    <Space\n      element=\"section\"\n      className={classNames('dnb-dialog__actions', className)}\n      {...props}\n    >\n      {childrenWithCloseFunc}\n\n      {!children && !hideDecline && (\n        <Button\n          text={declineText || translation?.Dialog?.declineText}\n          variant=\"secondary\"\n          onClick={(event) => {\n            dispatchCustomElementEvent({ onDecline }, 'onDecline', {\n              event,\n              close,\n            })\n          }}\n          size={ButtonContext?.size || 'large'}\n        />\n      )}\n      {!children && (\n        <Button\n          text={confirmText || translation?.Dialog?.confirmText}\n          variant=\"primary\"\n          onClick={(event) => {\n            dispatchCustomElementEvent({ onConfirm }, 'onConfirm', {\n              event,\n              close,\n            })\n          }}\n          size={ButtonContext?.size || 'large'}\n        />\n      )}\n    </Space>\n  )\n}\n\nexport default DialogAction\n"],"mappings":"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"}
+{"version":3,"file":"DialogAction.js","names":["React","useContext","classNames","Button","Space","Context","ModalContext","dispatchCustomElementEvent","fallbackCloseAction","close","DialogAction","_ref","_translation$Dialog","_translation$Dialog2","declineText","confirmText","hideDecline","hideConfirm","onConfirm","onDecline","className","children","props","_objectWithoutProperties","_excluded","translation","ButtonContext","childrenWithCloseFunc","Children","map","child","type","cloneElement","_objectSpread","on_click","event","createElement","_extends","element","text","Dialog","variant","onClick","size"],"sources":["../../../../../src/components/dialog/parts/DialogAction.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classNames from 'classnames'\nimport Button from '../../button/Button'\nimport Space from '../../space/Space'\nimport { Context } from '../../../shared'\nimport ModalContext from '../../modal/ModalContext'\nimport { dispatchCustomElementEvent } from '../../../shared/component-helper'\n\nimport type { SpacingProps } from '../../space/types'\n\ntype extendedMouseEvent = {\n  event: React.MouseEvent<HTMLElement>\n  close: () => void\n}\n\nexport type DialogActionProps = {\n  /**\n   * For dialog actions, give a custom text for the decline button.\n   */\n  declineText?: string | React.ReactNode\n\n  /**\n   * For dialog actions, give a custom text for the confirm button.\n   */\n  confirmText?: string | React.ReactNode\n\n  /**\n   * For variant confirmation, handle the confirm action click.\n   */\n  onConfirm?: (event: extendedMouseEvent) => void\n\n  /**\n   * For variant confirmation, handle the decline action click.\n   */\n  onDecline?: (event: extendedMouseEvent) => void\n\n  /**\n   * For variant confirmation, hide the default decline button and only show the confirm button.\n   */\n  hideDecline?: boolean\n\n  /**\n   * For variant confirmation, hide the default confirm button and only show the decline button.\n   */\n  hideConfirm?: boolean\n\n  /**\n   * Pass in custom confirm/decline buttons for action handling. Every child of type Button will be provided with a `close` function attribute.\n   */\n  children?: React.ReactElement | Array<React.ReactElement>\n}\n\nexport type DialogActionAllProps = DialogActionProps &\n  SpacingProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'children'>\n\nconst fallbackCloseAction = ({ close }: extendedMouseEvent) => close()\n\nconst DialogAction = ({\n  declineText = null,\n  confirmText = null,\n  hideDecline = false,\n  hideConfirm = false,\n  onConfirm = fallbackCloseAction,\n  onDecline = fallbackCloseAction,\n  className,\n  children,\n  ...props\n}: DialogActionAllProps) => {\n  const { translation, Button: ButtonContext } = useContext(Context)\n  const { close } = useContext(ModalContext)\n  let childrenWithCloseFunc: Array<React.ReactChild>\n\n  if (children) {\n    childrenWithCloseFunc = React.Children.map(children, (child) => {\n      if (child.type === Button) {\n        return React.cloneElement(\n          child,\n          {\n            ...child.props,\n            on_click: (event) => {\n              dispatchCustomElementEvent(child.props, 'on_click', {\n                event,\n                close,\n              })\n            },\n          },\n          child.props.children\n        )\n      } else {\n        return child\n      }\n    })\n  }\n\n  return (\n    <Space\n      element=\"section\"\n      className={classNames('dnb-dialog__actions', className)}\n      {...props}\n    >\n      {childrenWithCloseFunc}\n\n      {!children && !hideDecline && (\n        <Button\n          text={declineText || translation?.Dialog?.declineText}\n          variant=\"secondary\"\n          onClick={(event) => {\n            dispatchCustomElementEvent({ onDecline }, 'onDecline', {\n              event,\n              close,\n            })\n          }}\n          size={ButtonContext?.size || 'large'}\n        />\n      )}\n      {!children && !hideConfirm && (\n        <Button\n          text={confirmText || translation?.Dialog?.confirmText}\n          variant=\"primary\"\n          onClick={(event) => {\n            dispatchCustomElementEvent({ onConfirm }, 'onConfirm', {\n              event,\n              close,\n            })\n          }}\n          size={ButtonContext?.size || 'large'}\n        />\n      )}\n    </Space>\n  )\n}\n\nexport default DialogAction\n"],"mappings":"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"}

package/es/components/form-row/FormRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormRow.js","names":["React","PropTypes","classnames","extend","extendPropsWithContextInClassComponent","isTrue","makeUniqueId","validateDOMAttributes","AlignmentHelper","Context","FormLabel","Section","spacingPropTypes","createSpacingClasses","formRowPropTypes","_objectSpread","id","string","label","oneOfType","func","node","label_direction","oneOf","label_sr_only","bool","label_id","label_class","no_label","no_fieldset","locale","wrap","direction","vertical","centered","section_style","section_spacing","globalStatus","shape","message","responsive","disabled","skeleton","class","skipContentWrapperIfNested","className","children","formRowDefaultProps","FormRow","PureComponent","getContent","props","Array","isArray","reduce","pV","cV","type","name","push","constructor","_id","render","defaultProps","context","_className","_label","attributes","_objectWithoutProperties","_excluded","isNested","itsMeAgain","nestedLabel","hasLabel","length","params","providerContext","useId","isIsUsed","useFieldset","createElement","Provider","value","Fieldset","_extends","style_type","spacing","element","_AlignmentHelper","for_id","text","sr_only","_span","_defineProperty","process","env","NODE_ENV","propTypes","_ref","_excluded2"],"sources":["../../../../src/components/form-row/FormRow.js"],"sourcesContent":["/**\n * Web FormRow Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  extend,\n  extendPropsWithContextInClassComponent,\n  isTrue,\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\n\nimport Context from '../../shared/Context'\nimport FormLabel from '../form-label/FormLabel'\nimport Section from '../section/Section'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\n\nexport const formRowPropTypes = {\n  id: PropTypes.string,\n  label: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  label_direction: PropTypes.oneOf(['vertical', 'horizontal']),\n  label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  label_id: PropTypes.string,\n  label_class: PropTypes.string,\n  no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  no_fieldset: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  locale: PropTypes.string,\n  wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  direction: PropTypes.oneOf(['vertical', 'horizontal']),\n  vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  centered: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  section_style: PropTypes.string,\n  section_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  globalStatus: PropTypes.shape({\n    id: PropTypes.string,\n    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  }),\n  responsive: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  class: PropTypes.string,\n\n  skipContentWrapperIfNested: PropTypes.bool,\n\n  ...spacingPropTypes,\n\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n}\n\nexport const formRowDefaultProps = {\n  id: null,\n  label: null,\n  label_direction: null,\n  label_sr_only: null,\n  label_id: null,\n  label_class: null,\n  no_label: false,\n  no_fieldset: null,\n  locale: null,\n  wrap: null,\n  direction: null,\n  vertical: null,\n  centered: null,\n  section_style: null,\n  section_spacing: null,\n  globalStatus: null,\n  responsive: null,\n  disabled: null,\n  skeleton: null,\n  class: null,\n\n  skipContentWrapperIfNested: false,\n  className: null,\n  children: null,\n}\n\nexport default class FormRow extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    ...formRowPropTypes,\n  }\n\n  static defaultProps = {\n    ...formRowDefaultProps,\n  }\n\n  static getContent(props) {\n    let label = null\n    let children =\n      typeof props.children === 'function'\n        ? props.children(props)\n        : props.children\n\n    if (Array.isArray(props.children)) {\n      children = children.reduce((pV, cV) => {\n        if (cV && cV.type && cV.type.name === 'FormLabel') {\n          label = cV.props.children\n        } else {\n          pV.push(cV)\n        }\n        return pV\n      }, [])\n    }\n\n    return { label, children }\n  }\n\n  constructor(props) {\n    super(props)\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n\n    // We may considder to use this later to check if we are inside FormSet\n    // this.isInsideFormSet =\n    //   context.FormRow && context.FormRow.isInsideFormSet\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      FormRow.defaultProps,\n      this.context.FormRow // nested FormRow\n    )\n\n    const {\n      label_direction,\n      label_sr_only,\n      label_id,\n      label_class,\n      no_fieldset,\n      no_label,\n      locale,\n      direction,\n      vertical,\n      centered,\n      section_style,\n      section_spacing,\n      globalStatus,\n      responsive,\n      disabled,\n      skeleton,\n      wrap,\n      className,\n      class: _className,\n      skipContentWrapperIfNested,\n\n      id: _id, // eslint-disable-line\n      label: _label, // eslint-disable-line\n\n      ...attributes\n    } = props\n\n    let { label } = props\n\n    const isNested =\n      this.context.FormRow && this.context.FormRow.itsMeAgain\n\n    // in case we have a label already, we split this out and use this one instead\n    const { label: nestedLabel, children } = FormRow.getContent(this.props)\n    if (!label && nestedLabel) {\n      label = nestedLabel\n    }\n    const hasLabel =\n      (typeof label === 'string' && label.length > 0) || label\n        ? true\n        : false\n\n    const id = this._id\n    const params = {\n      className: classnames(\n        'dnb-form-row',\n        (isTrue(vertical) || direction) &&\n          `dnb-form-row--${isTrue(vertical) ? 'vertical' : direction}`,\n        (isTrue(vertical) || label_direction) &&\n          `dnb-form-row--${\n            isTrue(vertical) ? 'vertical' : label_direction\n          }-label`, // <-- has label\n        centered && 'dnb-form-row--centered',\n        isNested && 'dnb-form-row--nested',\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n      ...attributes,\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const providerContext = extend(this.context, {\n      locale: locale ? locale : this.context.locale,\n      FormRow: {\n        useId: () => {\n          if (this.isIsUsed) {\n            // make a new ID, as we used one\n            return makeUniqueId() // cause we need an id anyway\n          }\n          this.isIsUsed = true\n          return id\n        },\n        itsMeAgain: true,\n        hasLabel,\n        globalStatus,\n        direction,\n        vertical,\n        label_direction: isTrue(vertical) ? 'vertical' : label_direction,\n        responsive,\n        disabled,\n        skeleton,\n      },\n    })\n\n    const useFieldset = !isTrue(no_fieldset) && hasLabel\n\n    return (\n      <Context.Provider value={providerContext}>\n        <Fieldset useFieldset={useFieldset}>\n          <Section\n            style_type={section_style || 'transparent'}\n            spacing={section_spacing}\n            element=\"div\"\n            {...params}\n          >\n            <AlignmentHelper />\n\n            {label && (\n              <FormLabel\n                className={classnames('dnb-form-row__label', label_class)}\n                id={label_id ? label_id : id + '-label'}\n                for_id={useFieldset ? null : id} // we don't use for_id, because we don't have a single element to target to\n                text={label}\n                element={useFieldset ? 'legend' : 'label'}\n                label_direction={label_direction}\n                sr_only={label_sr_only}\n                disabled={disabled}\n                skeleton={skeleton}\n              />\n            )}\n\n            {isTrue(no_label) && (\n              <span\n                className=\"dnb-form-label dnb-form-row__label-dummy\"\n                aria-hidden\n              />\n            )}\n\n            {isNested && skipContentWrapperIfNested ? (\n              children\n            ) : (\n              <div\n                className={classnames(\n                  'dnb-form-row__content',\n                  isTrue(wrap) && 'dnb-form-row__content--wrap',\n                  label && !isTrue(vertical) && direction !== 'vertical',\n                  responsive && 'dnb-responsive-component'\n                )}\n              >\n                {children}\n              </div>\n            )}\n          </Section>\n        </Fieldset>\n      </Context.Provider>\n    )\n  }\n}\n\nconst Fieldset = ({\n  useFieldset,\n  children,\n  className = null,\n  ...props\n}) => {\n  if (useFieldset) {\n    return (\n      <fieldset\n        className={classnames('dnb-form-row__fieldset', className)}\n        {...props}\n      >\n        {children}\n      </fieldset>\n    )\n  }\n  return (\n    <div\n      className={classnames('dnb-form-row__fieldset', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n// docs (or use ptd): https://github.com/facebook/prop-types#usage\nFieldset.propTypes = {\n  children: PropTypes.node,\n  useFieldset: PropTypes.bool,\n  className: PropTypes.string,\n}\nFieldset.defaultProps = {\n  children: null,\n  useFieldset: false,\n  className: null,\n}\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,MAAM,EACNC,sCAAsC,EACtCC,MAAM,EACNC,YAAY,EACZC,qBAAqB,QAChB,+BAA+B;AACtC,OAAOC,eAAe,MAAM,8BAA8B;AAE1D,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,OAAO,MAAM,oBAAoB;AACxC,SACEC,gBAAgB,EAChBC,oBAAoB,QACf,wBAAwB;AAE/B,OAAO,MAAMC,gBAAgB,GAAAC,aAAA,CAAAA,aAAA;EAC3BC,EAAE,EAAEf,SAAS,CAACgB,MAAM;EACpBC,KAAK,EAAEjB,SAAS,CAACkB,SAAS,CAAC,CACzBlB,SAAS,CAACgB,MAAM,EAChBhB,SAAS,CAACmB,IAAI,EACdnB,SAAS,CAACoB,IAAI,CACf,CAAC;EACFC,eAAe,EAAErB,SAAS,CAACsB,KAAK,CAAC,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;EAC5DC,aAAa,EAAEvB,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACtEC,QAAQ,EAAEzB,SAAS,CAACgB,MAAM;EAC1BU,WAAW,EAAE1B,SAAS,CAACgB,MAAM;EAC7BW,QAAQ,EAAE3B,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACjEI,WAAW,EAAE5B,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACpEK,MAAM,EAAE7B,SAAS,CAACgB,MAAM;EACxBc,IAAI,EAAE9B,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EAC7DO,SAAS,EAAE/B,SAAS,CAACsB,KAAK,CAAC,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;EACtDU,QAAQ,EAAEhC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACjES,QAAQ,EAAEjC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACjEU,aAAa,EAAElC,SAAS,CAACgB,MAAM;EAC/BmB,eAAe,EAAEnC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACxEY,YAAY,EAAEpC,SAAS,CAACqC,KAAK,CAAC;IAC5BtB,EAAE,EAAEf,SAAS,CAACgB,MAAM;IACpBsB,OAAO,EAAEtC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACoB,IAAI,CAAC;EACjE,CAAC,CAAC;EACFmB,UAAU,EAAEvC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACnEgB,QAAQ,EAAExC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACjEiB,QAAQ,EAAEzC,SAAS,CAACkB,SAAS,CAAC,CAAClB,SAAS,CAACgB,MAAM,EAAEhB,SAAS,CAACwB,IAAI,CAAC,CAAC;EACjEkB,KAAK,EAAE1C,SAAS,CAACgB,MAAM;EAEvB2B,0BAA0B,EAAE3C,SAAS,CAACwB;AAAI,GAEvCb,gBAAgB;EAEnBiC,SAAS,EAAE5C,SAAS,CAACgB,MAAM;EAC3B6B,QAAQ,EAAE7C,SAAS,CAACkB,SAAS,CAAC,CAC5BlB,SAAS,CAACgB,MAAM,EAChBhB,SAAS,CAACmB,IAAI,EACdnB,SAAS,CAACoB,IAAI,CACf;AAAC,EACH;AAED,OAAO,MAAM0B,mBAAmB,GAAG;EACjC/B,EAAE,EAAE,IAAI;EACRE,KAAK,EAAE,IAAI;EACXI,eAAe,EAAE,IAAI;EACrBE,aAAa,EAAE,IAAI;EACnBE,QAAQ,EAAE,IAAI;EACdC,WAAW,EAAE,IAAI;EACjBC,QAAQ,EAAE,KAAK;EACfC,WAAW,EAAE,IAAI;EACjBC,MAAM,EAAE,IAAI;EACZC,IAAI,EAAE,IAAI;EACVC,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE,IAAI;EACdC,QAAQ,EAAE,IAAI;EACdC,aAAa,EAAE,IAAI;EACnBC,eAAe,EAAE,IAAI;EACrBC,YAAY,EAAE,IAAI;EAClBG,UAAU,EAAE,IAAI;EAChBC,QAAQ,EAAE,IAAI;EACdC,QAAQ,EAAE,IAAI;EACdC,KAAK,EAAE,IAAI;EAEXC,0BAA0B,EAAE,KAAK;EACjCC,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE;AACZ,CAAC;AAED,eAAe,MAAME,OAAO,SAAShD,KAAK,CAACiD,aAAa,CAAC;EAWvD,OAAOC,UAAUA,CAACC,KAAK,EAAE;IACvB,IAAIjC,KAAK,GAAG,IAAI;IAChB,IAAI4B,QAAQ,GACV,OAAOK,KAAK,CAACL,QAAQ,KAAK,UAAU,GAChCK,KAAK,CAACL,QAAQ,CAACK,KAAK,CAAC,GACrBA,KAAK,CAACL,QAAQ;IAEpB,IAAIM,KAAK,CAACC,OAAO,CAACF,KAAK,CAACL,QAAQ,CAAC,EAAE;MACjCA,QAAQ,GAAGA,QAAQ,CAACQ,MAAM,CAAC,CAACC,EAAE,EAAEC,EAAE,KAAK;QACrC,IAAIA,EAAE,IAAIA,EAAE,CAACC,IAAI,IAAID,EAAE,CAACC,IAAI,CAACC,IAAI,KAAK,WAAW,EAAE;UACjDxC,KAAK,GAAGsC,EAAE,CAACL,KAAK,CAACL,QAAQ;QAC3B,CAAC,MAAM;UACLS,EAAE,CAACI,IAAI,CAACH,EAAE,CAAC;QACb;QACA,OAAOD,EAAE;MACX,CAAC,EAAE,EAAE,CAAC;IACR;IAEA,OAAO;MAAErC,KAAK;MAAE4B;IAAS,CAAC;EAC5B;EAEAc,WAAWA,CAACT,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACU,GAAG,GAAGV,KAAK,CAACnC,EAAE,IAAIV,YAAY,CAAC,CAAC;EAKvC;EAEAwD,MAAMA,CAAA,EAAG;IAEP,MAAMX,KAAK,GAAG/C,sCAAsC,CAClD,IAAI,CAAC+C,KAAK,EACVH,OAAO,CAACe,YAAY,EACpB,IAAI,CAACC,OAAO,CAAChB,OACf,CAAC;IAED,MAAM;QACJ1B,eAAe;QACfE,aAAa;QACbE,QAAQ;QACRC,WAAW;QACXE,WAAW;QACXD,QAAQ;QACRE,MAAM;QACNE,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,aAAa;QACbC,eAAe;QACfC,YAAY;QACZG,UAAU;QACVC,QAAQ;QACRC,QAAQ;QACRX,IAAI;QACJc,SAAS;QACTF,KAAK,EAAEsB,UAAU;QACjBrB,0BAA0B;QAE1B5B,EAAE,EAAE6C,GAAG;QACP3C,KAAK,EAAEgD;MAGT,CAAC,GAAGf,KAAK;MADJgB,UAAU,GAAAC,wBAAA,CACXjB,KAAK,EAAAkB,SAAA;IAET,IAAI;MAAEnD;IAAM,CAAC,GAAGiC,KAAK;IAErB,MAAMmB,QAAQ,GACZ,IAAI,CAACN,OAAO,CAAChB,OAAO,IAAI,IAAI,CAACgB,OAAO,CAAChB,OAAO,CAACuB,UAAU;IAGzD,MAAM;MAAErD,KAAK,EAAEsD,WAAW;MAAE1B;IAAS,CAAC,GAAGE,OAAO,CAACE,UAAU,CAAC,IAAI,CAACC,KAAK,CAAC;IACvE,IAAI,CAACjC,KAAK,IAAIsD,WAAW,EAAE;MACzBtD,KAAK,GAAGsD,WAAW;IACrB;IACA,MAAMC,QAAQ,GACX,OAAOvD,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACwD,MAAM,GAAG,CAAC,IAAKxD,KAAK,GACpD,IAAI,GACJ,KAAK;IAEX,MAAMF,EAAE,GAAG,IAAI,CAAC6C,GAAG;IACnB,MAAMc,MAAM,GAAA5D,aAAA;MACV8B,SAAS,EAAE3C,UAAU,CACnB,cAAc,EACd,CAACG,MAAM,CAAC4B,QAAQ,CAAC,IAAID,SAAS,KAC3B,iBAAgB3B,MAAM,CAAC4B,QAAQ,CAAC,GAAG,UAAU,GAAGD,SAAU,EAAC,EAC9D,CAAC3B,MAAM,CAAC4B,QAAQ,CAAC,IAAIX,eAAe,KACjC,iBACCjB,MAAM,CAAC4B,QAAQ,CAAC,GAAG,UAAU,GAAGX,eACjC,QAAO,EAGVT,oBAAoB,CAACsC,KAAK,CAAC,EAC3BN,SAAS,EACToB,UAAU,EAJV/B,QAAQ,IAAI,wBAAwB,EACpCoC,QAAQ,IAAI,sBAId;IAAC,GACEH,UAAU,CACd;IAGD5D,qBAAqB,CAAC,IAAI,CAAC4C,KAAK,EAAEwB,MAAM,CAAC;IAEzC,MAAMC,eAAe,GAAGzE,MAAM,CAAC,IAAI,CAAC6D,OAAO,EAAE;MAC3ClC,MAAM,EAAEA,MAAM,GAAGA,MAAM,GAAG,IAAI,CAACkC,OAAO,CAAClC,MAAM;MAC7CkB,OAAO,EAAE;QACP6B,KAAK,EAAEA,CAAA,KAAM;UACX,IAAI,IAAI,CAACC,QAAQ,EAAE;YAEjB,OAAOxE,YAAY,CAAC,CAAC;UACvB;UACA,IAAI,CAACwE,QAAQ,GAAG,IAAI;UACpB,OAAO9D,EAAE;QACX,CAAC;QACDuD,UAAU,EAAE,IAAI;QAChBE,QAAQ;QACRpC,YAAY;QACZL,SAAS;QACTC,QAAQ;QACRX,eAAe,EAAEjB,MAAM,CAAC4B,QAAQ,CAAC,GAAG,UAAU,GAAGX,eAAe;QAChEkB,UAAU;QACVC,QAAQ;QACRC;MACF;IACF,CAAC,CAAC;IAEF,MAAMqC,WAAW,GAAG,CAAC1E,MAAM,CAACwB,WAAW,CAAC,IAAI4C,QAAQ;IAEpD,OACEzE,KAAA,CAAAgF,aAAA,CAACvE,OAAO,CAACwE,QAAQ;MAACC,KAAK,EAAEN;IAAgB,GACvC5E,KAAA,CAAAgF,aAAA,CAACG,QAAQ;MAACJ,WAAW,EAAEA;IAAY,GACjC/E,KAAA,CAAAgF,aAAA,CAACrE,OAAO,EAAAyE,QAAA;MACNC,UAAU,EAAElD,aAAa,IAAI,aAAc;MAC3CmD,OAAO,EAAElD,eAAgB;MACzBmD,OAAO,EAAC;IAAK,GACTZ,MAAM,GAAAa,gBAAA,KAAAA,gBAAA,GAEVxF,KAAA,CAAAgF,aAAA,CAACxE,eAAe,MAAE,CAAC,GAElBU,KAAK,IACJlB,KAAA,CAAAgF,aAAA,CAACtE,SAAS;MACRmC,SAAS,EAAE3C,UAAU,CAAC,qBAAqB,EAAEyB,WAAW,CAAE;MAC1DX,EAAE,EAAEU,QAAQ,GAAGA,QAAQ,GAAGV,EAAE,GAAG,QAAS;MACxCyE,MAAM,EAAEV,WAAW,GAAG,IAAI,GAAG/D,EAAG;MAChC0E,IAAI,EAAExE,KAAM;MACZqE,OAAO,EAAER,WAAW,GAAG,QAAQ,GAAG,OAAQ;MAC1CzD,eAAe,EAAEA,eAAgB;MACjCqE,OAAO,EAAEnE,aAAc;MACvBiB,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA;IAAS,CACpB,CACF,EAEArC,MAAM,CAACuB,QAAQ,CAAC,KAAAgE,KAAA,KAAAA,KAAA,GACf5F,KAAA,CAAAgF,aAAA;MACEnC,SAAS,EAAC,0CAA0C;MACpD;IAAW,CACZ,CAAC,EACH,EAEAyB,QAAQ,IAAI1B,0BAA0B,GACrCE,QAAQ,GAER9C,KAAA,CAAAgF,aAAA;MACEnC,SAAS,EAAE3C,UAAU,CACnB,uBAAuB,EACvBG,MAAM,CAAC0B,IAAI,CAAC,IAAI,6BAA6B,EAC7Cb,KAAK,IAAI,CAACb,MAAM,CAAC4B,QAAQ,CAAC,IAAID,SAAS,KAAK,UAAU,EACtDQ,UAAU,IAAI,0BAChB;IAAE,GAEDM,QACE,CAEA,CACD,CACM,CAAC;EAEvB;AACF;AAAC+C,eAAA,CA9LoB7C,OAAO,iBACLvC,OAAO;AAAAoF,eAAA,CADT7C,OAAO,kBAAAjC,aAAA,KAQrBgC,mBAAmB;AAAA+C,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBARLhD,OAAO,CAGnBiD,SAAS,GAAAlF,aAAA,KACXD,gBAAgB;AA4LvB,MAAMqE,QAAQ,GAAGe,IAAA,IAKX;EAAA,IALY;MAChBnB,WAAW;MACXjC,QAAQ;MACRD,SAAS,GAAG;IAEd,CAAC,GAAAqD,IAAA;IADI/C,KAAK,GAAAiB,wBAAA,CAAA8B,IAAA,EAAAC,UAAA;EAER,IAAIpB,WAAW,EAAE;IACf,OACE/E,KAAA,CAAAgF,aAAA,aAAAI,QAAA;MACEvC,SAAS,EAAE3C,UAAU,CAAC,wBAAwB,EAAE2C,SAAS;IAAE,GACvDM,KAAK,GAERL,QACO,CAAC;EAEf;EACA,OACE9C,KAAA,CAAAgF,aAAA,QAAAI,QAAA;IACEvC,SAAS,EAAE3C,UAAU,CAAC,wBAAwB,EAAE2C,SAAS;EAAE,GACvDM,KAAK,GAERL,QACE,CAAC;AAEV,CAAC;AAGDgD,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAAb,QAAQ,CAACc,SAAS,GAAG;EACnBnD,QAAQ,EAAE7C,SAAS,CAACoB,IAAI;EACxB0D,WAAW,EAAE9E,SAAS,CAACwB,IAAI;EAC3BoB,SAAS,EAAE5C,SAAS,CAACgB;AACvB,CAAC;AACDkE,QAAQ,CAACpB,YAAY,GAAG;EACtBjB,QAAQ,EAAE,IAAI;EACdiC,WAAW,EAAE,KAAK;EAClBlC,SAAS,EAAE;AACb,CAAC"}
+{"version":3,"file":"FormRow.js","names":["React","PropTypes","classnames","extend","extendPropsWithContextInClassComponent","isTrue","makeUniqueId","validateDOMAttributes","AlignmentHelper","Context","FormLabel","Section","spacingPropTypes","createSpacingClasses","formRowPropTypes","_objectSpread","id","string","label","oneOfType","func","node","label_direction","oneOf","label_sr_only","bool","label_id","label_class","no_label","no_fieldset","locale","wrap","direction","vertical","centered","section_style","section_spacing","globalStatus","shape","message","responsive","disabled","skeleton","class","skipContentWrapperIfNested","className","children","formRowDefaultProps","FormRow","PureComponent","getContent","props","Array","isArray","reduce","pV","cV","type","name","push","constructor","_id","render","defaultProps","context","_className","_label","attributes","_objectWithoutProperties","_excluded","isNested","itsMeAgain","nestedLabel","hasLabel","length","params","providerContext","useId","isIsUsed","useFieldset","createElement","Provider","value","Fieldset","_extends","style_type","spacing","element","_AlignmentHelper","for_id","text","sr_only","_span","_defineProperty","process","env","NODE_ENV","propTypes","_ref","_excluded2"],"sources":["../../../../src/components/form-row/FormRow.js"],"sourcesContent":["/**\n * Web FormRow Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  extend,\n  extendPropsWithContextInClassComponent,\n  isTrue,\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\n\nimport Context from '../../shared/Context'\nimport FormLabel from '../form-label/FormLabel'\nimport Section from '../section/Section'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\n\nexport const formRowPropTypes = {\n  id: PropTypes.string,\n  label: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n  label_direction: PropTypes.oneOf(['vertical', 'horizontal']),\n  label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  label_id: PropTypes.string,\n  label_class: PropTypes.string,\n  no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  no_fieldset: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  locale: PropTypes.string,\n  wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  direction: PropTypes.oneOf(['vertical', 'horizontal']),\n  vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  centered: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  section_style: PropTypes.string,\n  section_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  globalStatus: PropTypes.shape({\n    id: PropTypes.string,\n    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  }),\n  responsive: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  class: PropTypes.string,\n\n  skipContentWrapperIfNested: PropTypes.bool,\n\n  ...spacingPropTypes,\n\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.func,\n    PropTypes.node,\n  ]),\n}\n\nexport const formRowDefaultProps = {\n  id: null,\n  label: null,\n  label_direction: null,\n  label_sr_only: null,\n  label_id: null,\n  label_class: null,\n  no_label: false,\n  no_fieldset: null,\n  locale: null,\n  wrap: null,\n  direction: null,\n  vertical: null,\n  centered: null,\n  section_style: null,\n  section_spacing: null,\n  globalStatus: null,\n  responsive: null,\n  disabled: null,\n  skeleton: null,\n  class: null,\n\n  skipContentWrapperIfNested: false,\n  className: null,\n  children: null,\n}\n\nexport default class FormRow extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    ...formRowPropTypes,\n  }\n\n  static defaultProps = {\n    ...formRowDefaultProps,\n  }\n\n  static getContent(props) {\n    let label = null\n    let children =\n      typeof props.children === 'function'\n        ? props.children(props)\n        : props.children\n\n    if (Array.isArray(props.children)) {\n      children = children.reduce((pV, cV) => {\n        if (cV && cV.type && cV.type.name === 'FormLabel') {\n          label = cV.props.children\n        } else {\n          pV.push(cV)\n        }\n        return pV\n      }, [])\n    }\n\n    return { label, children }\n  }\n\n  constructor(props) {\n    super(props)\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n\n    // We may consider to use this later to check if we are inside FormSet\n    // this.isInsideFormSet =\n    //   context.FormRow && context.FormRow.isInsideFormSet\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      FormRow.defaultProps,\n      this.context.FormRow // nested FormRow\n    )\n\n    const {\n      label_direction,\n      label_sr_only,\n      label_id,\n      label_class,\n      no_fieldset,\n      no_label,\n      locale,\n      direction,\n      vertical,\n      centered,\n      section_style,\n      section_spacing,\n      globalStatus,\n      responsive,\n      disabled,\n      skeleton,\n      wrap,\n      className,\n      class: _className,\n      skipContentWrapperIfNested,\n\n      id: _id, // eslint-disable-line\n      label: _label, // eslint-disable-line\n\n      ...attributes\n    } = props\n\n    let { label } = props\n\n    const isNested =\n      this.context.FormRow && this.context.FormRow.itsMeAgain\n\n    // in case we have a label already, we split this out and use this one instead\n    const { label: nestedLabel, children } = FormRow.getContent(this.props)\n    if (!label && nestedLabel) {\n      label = nestedLabel\n    }\n    const hasLabel =\n      (typeof label === 'string' && label.length > 0) || label\n        ? true\n        : false\n\n    const id = this._id\n    const params = {\n      className: classnames(\n        'dnb-form-row',\n        (isTrue(vertical) || direction) &&\n          `dnb-form-row--${isTrue(vertical) ? 'vertical' : direction}`,\n        (isTrue(vertical) || label_direction) &&\n          `dnb-form-row--${\n            isTrue(vertical) ? 'vertical' : label_direction\n          }-label`, // <-- has label\n        centered && 'dnb-form-row--centered',\n        isNested && 'dnb-form-row--nested',\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n      ...attributes,\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const providerContext = extend(this.context, {\n      locale: locale ? locale : this.context.locale,\n      FormRow: {\n        useId: () => {\n          if (this.isIsUsed) {\n            // make a new ID, as we used one\n            return makeUniqueId() // cause we need an id anyway\n          }\n          this.isIsUsed = true\n          return id\n        },\n        itsMeAgain: true,\n        hasLabel,\n        globalStatus,\n        direction,\n        vertical,\n        label_direction: isTrue(vertical) ? 'vertical' : label_direction,\n        responsive,\n        disabled,\n        skeleton,\n      },\n    })\n\n    const useFieldset = !isTrue(no_fieldset) && hasLabel\n\n    return (\n      <Context.Provider value={providerContext}>\n        <Fieldset useFieldset={useFieldset}>\n          <Section\n            style_type={section_style || 'transparent'}\n            spacing={section_spacing}\n            element=\"div\"\n            {...params}\n          >\n            <AlignmentHelper />\n\n            {label && (\n              <FormLabel\n                className={classnames('dnb-form-row__label', label_class)}\n                id={label_id ? label_id : id + '-label'}\n                for_id={useFieldset ? null : id} // we don't use for_id, because we don't have a single element to target to\n                text={label}\n                element={useFieldset ? 'legend' : 'label'}\n                label_direction={label_direction}\n                sr_only={label_sr_only}\n                disabled={disabled}\n                skeleton={skeleton}\n              />\n            )}\n\n            {isTrue(no_label) && (\n              <span\n                className=\"dnb-form-label dnb-form-row__label-dummy\"\n                aria-hidden\n              />\n            )}\n\n            {isNested && skipContentWrapperIfNested ? (\n              children\n            ) : (\n              <div\n                className={classnames(\n                  'dnb-form-row__content',\n                  isTrue(wrap) && 'dnb-form-row__content--wrap',\n                  label && !isTrue(vertical) && direction !== 'vertical',\n                  responsive && 'dnb-responsive-component'\n                )}\n              >\n                {children}\n              </div>\n            )}\n          </Section>\n        </Fieldset>\n      </Context.Provider>\n    )\n  }\n}\n\nconst Fieldset = ({\n  useFieldset,\n  children,\n  className = null,\n  ...props\n}) => {\n  if (useFieldset) {\n    return (\n      <fieldset\n        className={classnames('dnb-form-row__fieldset', className)}\n        {...props}\n      >\n        {children}\n      </fieldset>\n    )\n  }\n  return (\n    <div\n      className={classnames('dnb-form-row__fieldset', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n// docs (or use ptd): https://github.com/facebook/prop-types#usage\nFieldset.propTypes = {\n  children: PropTypes.node,\n  useFieldset: PropTypes.bool,\n  className: PropTypes.string,\n}\nFieldset.defaultProps = {\n  children: null,\n  useFieldset: false,\n  className: null,\n}\n"],"mappings":"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"}

package/es/components/form-row/style/dnb-form-row.scss

@@ -32,7 +32,7 @@
         display: block;
       }
 
-      // TODO: We may considder to wrap horizontal direction to vertical
+      // TODO: We may consider to wrap horizontal direction to vertical
       // overwrite display to be block on small screens
       // @media screen and (max-width: 40em) {
       //   flex-direction: column;
@@ -81,7 +81,7 @@
     flex-direction: column;
   }
 
-  // TODO: we may considder this to be included with a prop later on
+  // TODO: we may consider this to be included with a prop later on
   // default spacing
   // &:not(#{&}--nested) {
   //   margin-bottom: 1.5rem;

package/es/components/form-set/FormSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSet.js","names":["React","PropTypes","classnames","isTrue","makeUniqueId","extend","extendPropsWithContextInClassComponent","validateDOMAttributes","processChildren","dispatchCustomElementEvent","createSpacingClasses","Context","formRowDefaultProps","formRowPropTypes","FormSet","PureComponent","getContent","props","constructor","_defineProperty","event","prevent_submit","preventDefault","_id","id","render","defaultProps","context","element","locale","no_form","className","class","_className","rest","_objectWithoutProperties","_excluded","allowedProps","Object","entries","reduce","acc","k","v","attributes","params","_objectSpread","onSubmit","onSubmitHandler","content","providerContext","FormRow","Element","createElement","Provider","value","disabled","skeleton","on_submit","process","env","NODE_ENV","propTypes","string","oneOfType","bool","func"],"sources":["../../../../src/components/form-set/FormSet.js"],"sourcesContent":["/**\n * Web FormSet Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  makeUniqueId,\n  extend,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  processChildren,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Context from '../../shared/Context'\nimport { formRowDefaultProps, formRowPropTypes } from '../form-row/FormRow'\n\nexport default class FormSet extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    element: PropTypes.string,\n    no_form: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    prevent_submit: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n\n    ...formRowPropTypes,\n\n    on_submit: PropTypes.func,\n  }\n\n  static defaultProps = {\n    element: 'form',\n    no_form: false,\n    disabled: null,\n    skeleton: null,\n    prevent_submit: false,\n\n    on_submit: null,\n  }\n\n  static getContent(props) {\n    return processChildren(props)\n  }\n\n  constructor(props) {\n    super(props)\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n  }\n\n  onSubmitHandler = (event) => {\n    const { prevent_submit } = this.props\n    if (isTrue(prevent_submit)) {\n      event.preventDefault()\n    }\n    dispatchCustomElementEvent(this, 'on_submit', { event })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      FormSet.defaultProps,\n      this.context.FormSet\n    )\n\n    const {\n      element,\n      locale,\n      no_form,\n      prevent_submit, // eslint-disable-line\n      id, // eslint-disable-line\n      className,\n      class: _className,\n\n      ...rest\n    } = props\n\n    const allowedProps = Object.entries(rest).reduce((acc, [k, v]) => {\n      if (\n        typeof formRowDefaultProps[k] !== 'undefined' &&\n        k !== 'id' &&\n        k !== 'children' &&\n        k !== 'label'\n      ) {\n        acc[k] = v\n      }\n      return acc\n    }, {})\n    const attributes = Object.entries(rest).reduce((acc, [k, v]) => {\n      if (typeof allowedProps[k] === 'undefined' && k !== 'children') {\n        acc[k] = v\n      }\n      return acc\n    }, {})\n\n    const params = {\n      className: classnames(\n        'dnb-form-set',\n        createSpacingClasses(this.props),\n        className,\n        _className\n      ),\n      ...attributes,\n    }\n\n    if (!isTrue(no_form)) {\n      params.onSubmit = this.onSubmitHandler\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const content = FormSet.getContent(this.props)\n\n    const providerContext = extend(this.context, {\n      locale: locale ? locale : this.context.locale,\n      FormRow: allowedProps,\n      // isInsideFormSet: true // We may considder to use this later to check if we are inside FormSet\n    })\n\n    const Element = isTrue(no_form) ? 'div' : element\n\n    return (\n      <Context.Provider value={providerContext}>\n        <Element {...params}>{content}</Element>\n      </Context.Provider>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"FormSet.js","names":["React","PropTypes","classnames","isTrue","makeUniqueId","extend","extendPropsWithContextInClassComponent","validateDOMAttributes","processChildren","dispatchCustomElementEvent","createSpacingClasses","Context","formRowDefaultProps","formRowPropTypes","FormSet","PureComponent","getContent","props","constructor","_defineProperty","event","prevent_submit","preventDefault","_id","id","render","defaultProps","context","element","locale","no_form","className","class","_className","rest","_objectWithoutProperties","_excluded","allowedProps","Object","entries","reduce","acc","k","v","attributes","params","_objectSpread","onSubmit","onSubmitHandler","content","providerContext","FormRow","Element","createElement","Provider","value","disabled","skeleton","on_submit","process","env","NODE_ENV","propTypes","string","oneOfType","bool","func"],"sources":["../../../../src/components/form-set/FormSet.js"],"sourcesContent":["/**\n * Web FormSet Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  makeUniqueId,\n  extend,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  processChildren,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Context from '../../shared/Context'\nimport { formRowDefaultProps, formRowPropTypes } from '../form-row/FormRow'\n\nexport default class FormSet extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    element: PropTypes.string,\n    no_form: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    prevent_submit: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n\n    ...formRowPropTypes,\n\n    on_submit: PropTypes.func,\n  }\n\n  static defaultProps = {\n    element: 'form',\n    no_form: false,\n    disabled: null,\n    skeleton: null,\n    prevent_submit: false,\n\n    on_submit: null,\n  }\n\n  static getContent(props) {\n    return processChildren(props)\n  }\n\n  constructor(props) {\n    super(props)\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n  }\n\n  onSubmitHandler = (event) => {\n    const { prevent_submit } = this.props\n    if (isTrue(prevent_submit)) {\n      event.preventDefault()\n    }\n    dispatchCustomElementEvent(this, 'on_submit', { event })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      FormSet.defaultProps,\n      this.context.FormSet\n    )\n\n    const {\n      element,\n      locale,\n      no_form,\n      prevent_submit, // eslint-disable-line\n      id, // eslint-disable-line\n      className,\n      class: _className,\n\n      ...rest\n    } = props\n\n    const allowedProps = Object.entries(rest).reduce((acc, [k, v]) => {\n      if (\n        typeof formRowDefaultProps[k] !== 'undefined' &&\n        k !== 'id' &&\n        k !== 'children' &&\n        k !== 'label'\n      ) {\n        acc[k] = v\n      }\n      return acc\n    }, {})\n    const attributes = Object.entries(rest).reduce((acc, [k, v]) => {\n      if (typeof allowedProps[k] === 'undefined' && k !== 'children') {\n        acc[k] = v\n      }\n      return acc\n    }, {})\n\n    const params = {\n      className: classnames(\n        'dnb-form-set',\n        createSpacingClasses(this.props),\n        className,\n        _className\n      ),\n      ...attributes,\n    }\n\n    if (!isTrue(no_form)) {\n      params.onSubmit = this.onSubmitHandler\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const content = FormSet.getContent(this.props)\n\n    const providerContext = extend(this.context, {\n      locale: locale ? locale : this.context.locale,\n      FormRow: allowedProps,\n      // isInsideFormSet: true // We may consider to use this later to check if we are inside FormSet\n    })\n\n    const Element = isTrue(no_form) ? 'div' : element\n\n    return (\n      <Context.Provider value={providerContext}>\n        <Element {...params}>{content}</Element>\n      </Context.Provider>\n    )\n  }\n}\n"],"mappings":"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"}

package/es/components/height-animation/HeightAnimation.d.ts

@@ -4,7 +4,7 @@ import { useHeightAnimationOptions } from './useHeightAnimation';
 import type { DynamicElement } from '../../shared/types';
 export type HeightAnimationProps = {
     /**
-     * Wheter the nested children content should be kept in the DOM or not.
+     * Whether the nested children content should be kept in the DOM or not.
      * Default: false
      */
     keepInDOM?: boolean;

package/es/components/height-animation/HeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeightAnimation.js","names":["React","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","className","innerRef","children","onInit","onOpen","onAnimationEnd","rest","_objectWithoutProperties","_excluded","ref","useRef","props","isInDOM","isVisible","isVisibleParallax","isAnimating","style","createElement","_extends","undefined"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../shared/types'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space, { SpaceProps } from '../space/Space'\n\nimport type { DynamicElement } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Wheter the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Set to `true` ensure the nested children content will be kept in the DOM.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nexport default function HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  className,\n  innerRef,\n  children,\n  onInit = null,\n  onOpen = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const ref = React.useRef<HTMLElement>()\n  const props = rest as SpaceProps\n\n  const { isInDOM, isVisible, isVisibleParallax, isAnimating } =\n    useHeightAnimation(innerRef || ref, {\n      open,\n      animate,\n      children,\n      onInit,\n      onOpen,\n      onAnimationEnd,\n    })\n\n  if (!isInDOM && !keepInDOM) {\n    return null\n  }\n\n  const style: React.CSSProperties = {}\n  if (duration) {\n    style['--duration'] = `${duration}ms`\n  }\n\n  return (\n    <Space\n      innerRef={innerRef || ref}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={style}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...props}\n    >\n      {children}\n    </Space>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAsB,gBAAgB;AAwClD,eAAe,SAASC,eAAeA,CAAAC,IAAA,EAcX;EAAA,IAdY;MACtCC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,cAAc,GAAG;IAEM,CAAC,GAAAZ,IAAA;IADrBa,IAAI,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAEP,MAAMC,GAAG,GAAGrB,KAAK,CAACsB,MAAM,CAAc,CAAC;EACvC,MAAMC,KAAK,GAAGL,IAAkB;EAEhC,MAAM;IAAEM,OAAO;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC;EAAY,CAAC,GAC1DzB,kBAAkB,CAACW,QAAQ,IAAIQ,GAAG,EAAE;IAClCf,IAAI;IACJC,OAAO;IACPO,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC;EACF,CAAC,CAAC;EAEJ,IAAI,CAACO,OAAO,IAAI,CAAChB,SAAS,EAAE;IAC1B,OAAO,IAAI;EACb;EAEA,MAAMoB,KAA0B,GAAG,CAAC,CAAC;EACrC,IAAIjB,QAAQ,EAAE;IACZiB,KAAK,CAAC,YAAY,CAAC,GAAI,GAAEjB,QAAS,IAAG;EACvC;EAEA,OACEX,KAAA,CAAA6B,aAAA,CAAC1B,KAAK,EAAA2B,QAAA;IACJjB,QAAQ,EAAEA,QAAQ,IAAIQ,GAAI;IAC1BX,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BE,SAAS,EAAEX,UAAU,CACnB,sBAAsB,EAUtBW,SAAS,EARTa,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACrB,IAAI,IACL,8BAA8B,EAPhCkB,OAAO,IAAI,iCAAiC,EAE5CE,iBAAiB,IAAI,gCAAgC,EACrDC,WAAW,IAAI,iCAAiC,EAKhDlB,YAAY,IAAI,qCAElB,CAAE;IACFmB,KAAK,EAAEA,KAAM;IACb,eAAapB,SAAS,GAAG,CAACF,IAAI,GAAGyB;EAAU,GACvCR,KAAK,GAERT,QACI,CAAC;AAEZ"}
+{"version":3,"file":"HeightAnimation.js","names":["React","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","className","innerRef","children","onInit","onOpen","onAnimationEnd","rest","_objectWithoutProperties","_excluded","ref","useRef","props","isInDOM","isVisible","isVisibleParallax","isAnimating","style","createElement","_extends","undefined"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { SpacingProps } from '../../shared/types'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space, { SpaceProps } from '../space/Space'\n\nimport type { DynamicElement } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Set to `true` ensure the nested children content will be kept in the DOM.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nexport default function HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  className,\n  innerRef,\n  children,\n  onInit = null,\n  onOpen = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const ref = React.useRef<HTMLElement>()\n  const props = rest as SpaceProps\n\n  const { isInDOM, isVisible, isVisibleParallax, isAnimating } =\n    useHeightAnimation(innerRef || ref, {\n      open,\n      animate,\n      children,\n      onInit,\n      onOpen,\n      onAnimationEnd,\n    })\n\n  if (!isInDOM && !keepInDOM) {\n    return null\n  }\n\n  const style: React.CSSProperties = {}\n  if (duration) {\n    style['--duration'] = `${duration}ms`\n  }\n\n  return (\n    <Space\n      innerRef={innerRef || ref}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={style}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...props}\n    >\n      {children}\n    </Space>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAsB,gBAAgB;AAwClD,eAAe,SAASC,eAAeA,CAAAC,IAAA,EAcX;EAAA,IAdY;MACtCC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,cAAc,GAAG;IAEM,CAAC,GAAAZ,IAAA;IADrBa,IAAI,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAEP,MAAMC,GAAG,GAAGrB,KAAK,CAACsB,MAAM,CAAc,CAAC;EACvC,MAAMC,KAAK,GAAGL,IAAkB;EAEhC,MAAM;IAAEM,OAAO;IAAEC,SAAS;IAAEC,iBAAiB;IAAEC;EAAY,CAAC,GAC1DzB,kBAAkB,CAACW,QAAQ,IAAIQ,GAAG,EAAE;IAClCf,IAAI;IACJC,OAAO;IACPO,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC;EACF,CAAC,CAAC;EAEJ,IAAI,CAACO,OAAO,IAAI,CAAChB,SAAS,EAAE;IAC1B,OAAO,IAAI;EACb;EAEA,MAAMoB,KAA0B,GAAG,CAAC,CAAC;EACrC,IAAIjB,QAAQ,EAAE;IACZiB,KAAK,CAAC,YAAY,CAAC,GAAI,GAAEjB,QAAS,IAAG;EACvC;EAEA,OACEX,KAAA,CAAA6B,aAAA,CAAC1B,KAAK,EAAA2B,QAAA;IACJjB,QAAQ,EAAEA,QAAQ,IAAIQ,GAAI;IAC1BX,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BE,SAAS,EAAEX,UAAU,CACnB,sBAAsB,EAUtBW,SAAS,EARTa,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACrB,IAAI,IACL,8BAA8B,EAPhCkB,OAAO,IAAI,iCAAiC,EAE5CE,iBAAiB,IAAI,gCAAgC,EACrDC,WAAW,IAAI,iCAAiC,EAKhDlB,YAAY,IAAI,qCAElB,CAAE;IACFmB,KAAK,EAAEA,KAAM;IACb,eAAapB,SAAS,GAAG,CAACF,IAAI,GAAGyB;EAAU,GACvCR,KAAK,GAERT,QACI,CAAC;AAEZ"}

package/es/components/height-animation/useHeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeightAnimation.js","names":["React","HeightAnimationInstance","useLayoutEffect","window","useEffect","useHeightAnimation","targetRef","open","animate","children","onInit","onOpen","onAnimationEnd","animRef","useRef","isOpen","setIsOpen","useState","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","isInitialRender","setIsMounted","global","IS_TEST","current","onStart","state","onEnd","_animRef$current","remove","useOpenClose","useAdjust","isInDOM","anim","setElement","close","fromHeight","shouldAdjust","_animRef$current2","useMemo","_animRef$current3","getHeight","elem","style","height","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    onInit = null,\n    onOpen = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const animRef = React.useRef<HeightAnimationInstance>(null)\n  const [isOpen, setIsOpen] = React.useState(open)\n  const [isVisible, setIsVisible] = React.useState(false)\n  const [isAnimating, setIsAnimating] = React.useState(false)\n  const [isVisibleParallax, setParallax] = React.useState(open)\n  const [isInitialRender, setIsMounted] = React.useState(true)\n\n  if (typeof global !== 'undefined' && global.IS_TEST) {\n    animate = false\n  }\n\n  React.useEffect(() => setIsMounted(false), []) // eslint-disable-line\n\n  useLayoutEffect(() => {\n    animRef.current = new HeightAnimationInstance({ animate })\n\n    if (isInitialRender && onInit) {\n      onInit(animRef.current)\n    }\n\n    if (isInitialRender && isOpen) {\n      onOpen?.(true)\n    }\n\n    if (animate) {\n      animRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n        switch (state) {\n          case 'opening':\n            setIsVisible(true)\n            setParallax(true)\n            setIsAnimating(true)\n            break\n\n          case 'closing':\n            setParallax(false)\n            setIsAnimating(true)\n            break\n\n          case 'adjusting':\n            setIsAnimating(true)\n            break\n        }\n      })\n\n      animRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n        switch (state) {\n          case 'opened':\n            setIsOpen(true)\n            setIsAnimating(false)\n            onOpen?.(true)\n            break\n\n          case 'closed':\n            setIsVisible(false)\n            setIsOpen(false)\n            setParallax(false)\n            setIsAnimating(false)\n            onOpen?.(false)\n            break\n\n          case 'adjusted':\n            setIsAnimating(false)\n            break\n        }\n\n        onAnimationEnd?.(state)\n      })\n    }\n\n    return () => animRef.current?.remove()\n  }, [animate]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useOpenClose({ open, animRef, targetRef, isInitialRender })\n  useAdjust({ children, animRef, isInitialRender })\n\n  return {\n    open,\n    isOpen,\n    isInDOM: open || isVisible,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n  }\n}\n\nfunction useOpenClose({ open, animRef, targetRef, isInitialRender }) {\n  useLayoutEffect(() => {\n    if (!targetRef.current) {\n      return // stop here\n    }\n\n    const anim = animRef.current\n\n    anim.setElement(targetRef.current)\n\n    if (open) {\n      anim.open({ animate: !isInitialRender })\n    } else if (anim.state === 'init') {\n      anim.close({ animate: false })\n    } else {\n      anim.close()\n    }\n  }, [open, targetRef, animRef]) // eslint-disable-line\n}\n\nfunction useAdjust({ children, animRef, isInitialRender }) {\n  const fromHeight = React.useRef(0)\n\n  const shouldAdjust = () => {\n    switch (animRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return !isInitialRender\n    }\n\n    return false\n  }\n\n  React.useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = animRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relaying on \"getUnknownHeight\" inside of adjustTo\n       */\n      animRef.current.elem.style.height = ''\n\n      animRef.current.adjustTo(\n        fromHeight.current,\n        animRef.current.getHeight() // use getHeight instead of getUnknownHeight because of the additional, disturbing DOM manipupation\n      )\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":"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"}
+{"version":3,"file":"useHeightAnimation.js","names":["React","HeightAnimationInstance","useLayoutEffect","window","useEffect","useHeightAnimation","targetRef","open","animate","children","onInit","onOpen","onAnimationEnd","animRef","useRef","isOpen","setIsOpen","useState","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","isInitialRender","setIsMounted","global","IS_TEST","current","onStart","state","onEnd","_animRef$current","remove","useOpenClose","useAdjust","isInDOM","anim","setElement","close","fromHeight","shouldAdjust","_animRef$current2","useMemo","_animRef$current3","getHeight","elem","style","height","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    onInit = null,\n    onOpen = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const animRef = React.useRef<HeightAnimationInstance>(null)\n  const [isOpen, setIsOpen] = React.useState(open)\n  const [isVisible, setIsVisible] = React.useState(false)\n  const [isAnimating, setIsAnimating] = React.useState(false)\n  const [isVisibleParallax, setParallax] = React.useState(open)\n  const [isInitialRender, setIsMounted] = React.useState(true)\n\n  if (typeof global !== 'undefined' && global.IS_TEST) {\n    animate = false\n  }\n\n  React.useEffect(() => setIsMounted(false), []) // eslint-disable-line\n\n  useLayoutEffect(() => {\n    animRef.current = new HeightAnimationInstance({ animate })\n\n    if (isInitialRender && onInit) {\n      onInit(animRef.current)\n    }\n\n    if (isInitialRender && isOpen) {\n      onOpen?.(true)\n    }\n\n    if (animate) {\n      animRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n        switch (state) {\n          case 'opening':\n            setIsVisible(true)\n            setParallax(true)\n            setIsAnimating(true)\n            break\n\n          case 'closing':\n            setParallax(false)\n            setIsAnimating(true)\n            break\n\n          case 'adjusting':\n            setIsAnimating(true)\n            break\n        }\n      })\n\n      animRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n        switch (state) {\n          case 'opened':\n            setIsOpen(true)\n            setIsAnimating(false)\n            onOpen?.(true)\n            break\n\n          case 'closed':\n            setIsVisible(false)\n            setIsOpen(false)\n            setParallax(false)\n            setIsAnimating(false)\n            onOpen?.(false)\n            break\n\n          case 'adjusted':\n            setIsAnimating(false)\n            break\n        }\n\n        onAnimationEnd?.(state)\n      })\n    }\n\n    return () => animRef.current?.remove()\n  }, [animate]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useOpenClose({ open, animRef, targetRef, isInitialRender })\n  useAdjust({ children, animRef, isInitialRender })\n\n  return {\n    open,\n    isOpen,\n    isInDOM: open || isVisible,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n  }\n}\n\nfunction useOpenClose({ open, animRef, targetRef, isInitialRender }) {\n  useLayoutEffect(() => {\n    if (!targetRef.current) {\n      return // stop here\n    }\n\n    const anim = animRef.current\n\n    anim.setElement(targetRef.current)\n\n    if (open) {\n      anim.open({ animate: !isInitialRender })\n    } else if (anim.state === 'init') {\n      anim.close({ animate: false })\n    } else {\n      anim.close()\n    }\n  }, [open, targetRef, animRef]) // eslint-disable-line\n}\n\nfunction useAdjust({ children, animRef, isInitialRender }) {\n  const fromHeight = React.useRef(0)\n\n  const shouldAdjust = () => {\n    switch (animRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return !isInitialRender\n    }\n\n    return false\n  }\n\n  React.useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = animRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relaying on \"getUnknownHeight\" inside of adjustTo\n       */\n      animRef.current.elem.style.height = ''\n\n      animRef.current.adjustTo(\n        fromHeight.current,\n        animRef.current.getHeight() // use getHeight instead of getUnknownHeight because of the additional, disturbing DOM manipulation\n      )\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":"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"}

package/es/components/icon/lib/SvgComparison.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgComparison.js","names":["React","SvgComparison","props","createElement","Fragment","_extends","width","height","_path","d","stroke","fill","strokeweight","strokeLinecap","strokeLinejoin","_path2","clipRule","_path3","_path4","_path5","fillRule","_path6","_path7"],"sources":["../../../../../src/components/icon/lib/SvgComparison.js"],"sourcesContent":["/**\n * I used this tools:\n * to convert https://svg2jsx.herokuapp.com\n * to otimize https://jakearchibald.github.io/svgomg/\n */\n\nimport React from 'react'\n\nconst SvgComparison = (props) => (\n  <React.Fragment>\n    <svg width=\"24\" height=\"24\" {...props}>\n      <path\n        d=\"M.5 23.56h23\"\n        stroke=\"black\"\n        fill=\"white\"\n        strokeweight=\"40\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5 19.24a.49.49 0 0 0-.5-.48H2a.49.49 0 0 0-.5.48v4.32h3v-4.32zM10.5 14.44a.49.49 0 0 0-.5-.48H8a.49.49 0 0 0-.5.48v9.12h3v-9.12zM16.5 16.36a.49.49 0 0 0-.5-.48h-2a.49.49 0 0 0-.5.48v7.2h3v-7.2zM22.5 9.64a.49.49 0 0 0-.5-.48h-2a.49.49 0 0 0-.5.48v13.92h3V9.64zM3 13.48c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44zM9 8.68c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44zM15 10.6c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44zM21 4.36c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44z\"\n        stroke=\"black\"\n        fill=\"white\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M4.261 11.032l3.587-2.87M10.424 7.695l3.153 1.009M19.8 3.784l-3.759 4.21\"\n        stroke=\"black\"\n        fill=\"white\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n    <svg width=\"24\" height=\"24\" {...props}>\n      <path d=\"M.5 23.06a.5.5 0 1 0 0 1v-1zm23 1a.5.5 0 0 0 0-1v1zm-22-.5H1a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zm3 0H7a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zm3 0H13a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zm3 0H19a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zM3.949 10.642a.5.5 0 0 0 .624.78l-.624-.78zm4.211-2.09a.5.5 0 1 0-.624-.78l.624.78zm2.416-1.333a.5.5 0 1 0-.304.952l.304-.952zm2.849 1.961a.5.5 0 1 0 .304-.952l-.304.952zm6.748-5.063a.5.5 0 0 0-.746-.666l.746.666zm-4.505 3.544a.5.5 0 1 0 .746.666l-.746-.666zM.5 24.06h23v-1H.5v1zM5 19.24c0-.56-.467-.98-1-.98v1l.007.001a.02.02 0 0 1-.004-.006A.038.038 0 0 1 4 19.24h1zm-1-.98H2v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1l-.003.015a.02.02 0 0 1-.004.006L2 19.26v-1zm-1 .98v4.32h1v-4.32H1zm.5 4.82h3v-1h-3v1zm3.5-.5v-4.32H4v4.32h1zm6-9.12c0-.56-.467-.98-1-.98v1l.007.001-.004-.006A.04.04 0 0 1 10 14.44h1zm-1-.98H8v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1l-.003.015a.02.02 0 0 1-.004.006L8 14.46v-1zm-1 .98v9.12h1v-9.12H7zm.5 9.62h3v-1h-3v1zm3.5-.5v-9.12h-1v9.12h1zm6-7.2c0-.56-.467-.98-1-.98v1l.007.001-.004-.006A.04.04 0 0 1 16 16.36h1zm-1-.98h-2v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1a.04.04 0 0 1-.003.015.022.022 0 0 1-.004.006L14 16.38v-1zm-1 .98v7.2h1v-7.2h-1zm.5 7.7h3v-1h-3v1zm3.5-.5v-7.2h-1v7.2h1zm6-13.92c0-.56-.467-.98-1-.98v1l.007.001-.004-.006A.04.04 0 0 1 22 9.64h1zm-1-.98h-2v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1a.04.04 0 0 1-.003.015.022.022 0 0 1-.004.006L20 9.66v-1zm-1 .98v13.92h1V9.64h-1zm.5 14.42h3v-1h-3v1zm3.5-.5V9.64h-1v13.92h1zM3 13.98c1.085 0 2-.85 2-1.94H4c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zM3 10.1c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zm-2 1.94c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94H1zm8-2.86c1.085 0 2-.85 2-1.94h-1c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zM9 5.3c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zM7 7.24c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94H7zm8 3.86c1.085 0 2-.85 2-1.94h-1c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zm-2-1.94c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zm-2 1.94c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94h-1zm8-4.3c1.085 0 2-.85 2-1.94h-1c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zM21 .98c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zm-2 1.94c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94h-1zM4.573 11.422l3.587-2.87-.624-.78-3.587 2.87.624.78zm5.699-3.25l3.153 1.008.304-.952-3.153-1.01-.304.953zm9.155-4.721l-3.759 4.21.746.666 3.759-4.21-.746-.666z\" />\n    </svg>\n    <svg width=\"24\" height=\"24\" {...props}>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M.5 23.08a.5.5 0 0 1 .5-.5h23a.5.5 0 1 1 0 1H1a.5.5 0 0 1-.5-.5z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.5 18.76c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v4.32a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-4.32zm1 .02v3.8h2v-3.8h-2zM7.5 13.96c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v9.12a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5v-9.12zm1 .02v8.6h2v-8.6h-2zM13.5 15.88c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v7.2a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-7.2zm1 .02v6.68h2V15.9h-2zM19.5 9.16c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v13.92a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V9.16zm1 .02v13.4h2V9.18h-2zM1.5 11.56c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94zM7.5 6.76c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94zM13.5 8.68c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94zM19.5 2.44c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.738 7.37a.5.5 0 0 1-.078.702l-3.587 2.87a.5.5 0 0 1-.624-.78l3.587-2.87a.5.5 0 0 1 .702.077zM10.448 7.063a.5.5 0 0 1 .628-.324l3.153 1.009a.5.5 0 1 1-.304.952l-3.153-1.009a.5.5 0 0 1-.324-.628zM20.633 2.931a.5.5 0 0 1 .04.706l-3.759 4.21a.5.5 0 0 1-.746-.666l3.76-4.21a.5.5 0 0 1 .705-.04z\"\n      />\n    </svg>\n  </React.Fragment>\n)\n\nexport default SvgComparison\n"],"mappings":";;AAMA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,aAAa,GAAIC,KAAK,IAC1BF,KAAA,CAAAG,aAAA,CAACH,KAAK,CAACI,QAAQ,QACbJ,KAAA,CAAAG,aAAA,QAAAE,QAAA;EAAKC,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,GAAKL,KAAK,GAAAM,KAAA,KAAAA,KAAA,GACnCR,KAAA,CAAAG,aAAA;EACEM,CAAC,EAAC,cAAc;EAChBC,MAAM,EAAC,OAAO;EACdC,IAAI,EAAC,OAAO;EACZC,YAAY,EAAC,IAAI;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CAAC,GAAAC,MAAA,KAAAA,MAAA,GACFf,KAAA,CAAAG,aAAA;EACEa,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC,mqBAAmqB;EACrqBC,MAAM,EAAC,OAAO;EACdC,IAAI,EAAC,OAAO;EACZE,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CAAC,GAAAG,MAAA,KAAAA,MAAA,GACFjB,KAAA,CAAAG,aAAA;EACEM,CAAC,EAAC,0EAA0E;EAC5EC,MAAM,EAAC,OAAO;EACdC,IAAI,EAAC,OAAO;EACZE,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CAAC,CACC,CAAC,EACNd,KAAA,CAAAG,aAAA,QAAAE,QAAA;EAAKC,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,GAAKL,KAAK,GAAAgB,MAAA,KAAAA,MAAA,GACnClB,KAAA,CAAAG,aAAA;EAAMM,CAAC,EAAC;AAAo/E,CAAE,CAAC,CAC5/E,CAAC,EACNT,KAAA,CAAAG,aAAA,QAAAE,QAAA;EAAKC,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,GAAKL,KAAK,GAAAiB,MAAA,KAAAA,MAAA,GACnCnB,KAAA,CAAAG,aAAA;EACEiB,QAAQ,EAAC,SAAS;EAClBJ,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC;AAAkE,CACrE,CAAC,GAAAY,MAAA,KAAAA,MAAA,GACFrB,KAAA,CAAAG,aAAA;EACEiB,QAAQ,EAAC,SAAS;EAClBJ,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC;AAAgoC,CACnoC,CAAC,GAAAa,MAAA,KAAAA,MAAA,GACFtB,KAAA,CAAAG,aAAA;EACEiB,QAAQ,EAAC,SAAS;EAClBJ,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC;AAAsS,CACzS,CAAC,CACC,CACS,CACjB;AAED,eAAeR,aAAa"}
+{"version":3,"file":"SvgComparison.js","names":["React","SvgComparison","props","createElement","Fragment","_extends","width","height","_path","d","stroke","fill","strokeweight","strokeLinecap","strokeLinejoin","_path2","clipRule","_path3","_path4","_path5","fillRule","_path6","_path7"],"sources":["../../../../../src/components/icon/lib/SvgComparison.js"],"sourcesContent":["/**\n * I used this tools:\n * to convert https://svg2jsx.herokuapp.com\n * to optimize https://jakearchibald.github.io/svgomg/\n */\n\nimport React from 'react'\n\nconst SvgComparison = (props) => (\n  <React.Fragment>\n    <svg width=\"24\" height=\"24\" {...props}>\n      <path\n        d=\"M.5 23.56h23\"\n        stroke=\"black\"\n        fill=\"white\"\n        strokeweight=\"40\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5 19.24a.49.49 0 0 0-.5-.48H2a.49.49 0 0 0-.5.48v4.32h3v-4.32zM10.5 14.44a.49.49 0 0 0-.5-.48H8a.49.49 0 0 0-.5.48v9.12h3v-9.12zM16.5 16.36a.49.49 0 0 0-.5-.48h-2a.49.49 0 0 0-.5.48v7.2h3v-7.2zM22.5 9.64a.49.49 0 0 0-.5-.48h-2a.49.49 0 0 0-.5.48v13.92h3V9.64zM3 13.48c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44zM9 8.68c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44zM15 10.6c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44zM21 4.36c.828 0 1.5-.645 1.5-1.44 0-.795-.672-1.44-1.5-1.44s-1.5.645-1.5 1.44c0 .795.672 1.44 1.5 1.44z\"\n        stroke=\"black\"\n        fill=\"white\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M4.261 11.032l3.587-2.87M10.424 7.695l3.153 1.009M19.8 3.784l-3.759 4.21\"\n        stroke=\"black\"\n        fill=\"white\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n    <svg width=\"24\" height=\"24\" {...props}>\n      <path d=\"M.5 23.06a.5.5 0 1 0 0 1v-1zm23 1a.5.5 0 0 0 0-1v1zm-22-.5H1a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zm3 0H7a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zm3 0H13a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zm3 0H19a.5.5 0 0 0 .5.5v-.5zm3 0v.5a.5.5 0 0 0 .5-.5h-.5zM3.949 10.642a.5.5 0 0 0 .624.78l-.624-.78zm4.211-2.09a.5.5 0 1 0-.624-.78l.624.78zm2.416-1.333a.5.5 0 1 0-.304.952l.304-.952zm2.849 1.961a.5.5 0 1 0 .304-.952l-.304.952zm6.748-5.063a.5.5 0 0 0-.746-.666l.746.666zm-4.505 3.544a.5.5 0 1 0 .746.666l-.746-.666zM.5 24.06h23v-1H.5v1zM5 19.24c0-.56-.467-.98-1-.98v1l.007.001a.02.02 0 0 1-.004-.006A.038.038 0 0 1 4 19.24h1zm-1-.98H2v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1l-.003.015a.02.02 0 0 1-.004.006L2 19.26v-1zm-1 .98v4.32h1v-4.32H1zm.5 4.82h3v-1h-3v1zm3.5-.5v-4.32H4v4.32h1zm6-9.12c0-.56-.467-.98-1-.98v1l.007.001-.004-.006A.04.04 0 0 1 10 14.44h1zm-1-.98H8v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1l-.003.015a.02.02 0 0 1-.004.006L8 14.46v-1zm-1 .98v9.12h1v-9.12H7zm.5 9.62h3v-1h-3v1zm3.5-.5v-9.12h-1v9.12h1zm6-7.2c0-.56-.467-.98-1-.98v1l.007.001-.004-.006A.04.04 0 0 1 16 16.36h1zm-1-.98h-2v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1a.04.04 0 0 1-.003.015.022.022 0 0 1-.004.006L14 16.38v-1zm-1 .98v7.2h1v-7.2h-1zm.5 7.7h3v-1h-3v1zm3.5-.5v-7.2h-1v7.2h1zm6-13.92c0-.56-.467-.98-1-.98v1l.007.001-.004-.006A.04.04 0 0 1 22 9.64h1zm-1-.98h-2v1h2v-1zm-2 0c-.533 0-1 .42-1 .98h1a.04.04 0 0 1-.003.015.022.022 0 0 1-.004.006L20 9.66v-1zm-1 .98v13.92h1V9.64h-1zm.5 14.42h3v-1h-3v1zm3.5-.5V9.64h-1v13.92h1zM3 13.98c1.085 0 2-.85 2-1.94H4c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zM3 10.1c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zm-2 1.94c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94H1zm8-2.86c1.085 0 2-.85 2-1.94h-1c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zM9 5.3c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zM7 7.24c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94H7zm8 3.86c1.085 0 2-.85 2-1.94h-1c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zm-2-1.94c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zm-2 1.94c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94h-1zm8-4.3c1.085 0 2-.85 2-1.94h-1c0 .5-.428.94-1 .94v1zm2-1.94c0-1.09-.915-1.94-2-1.94v1c.572 0 1 .44 1 .94h1zM21 .98c-1.085 0-2 .85-2 1.94h1c0-.5.428-.94 1-.94v-1zm-2 1.94c0 1.09.915 1.94 2 1.94v-1c-.572 0-1-.44-1-.94h-1zM4.573 11.422l3.587-2.87-.624-.78-3.587 2.87.624.78zm5.699-3.25l3.153 1.008.304-.952-3.153-1.01-.304.953zm9.155-4.721l-3.759 4.21.746.666 3.759-4.21-.746-.666z\" />\n    </svg>\n    <svg width=\"24\" height=\"24\" {...props}>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M.5 23.08a.5.5 0 0 1 .5-.5h23a.5.5 0 1 1 0 1H1a.5.5 0 0 1-.5-.5z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.5 18.76c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v4.32a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-4.32zm1 .02v3.8h2v-3.8h-2zM7.5 13.96c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v9.12a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5v-9.12zm1 .02v8.6h2v-8.6h-2zM13.5 15.88c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v7.2a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-7.2zm1 .02v6.68h2V15.9h-2zM19.5 9.16c0-.56.467-.98 1-.98h2c.533 0 1 .42 1 .98v13.92a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V9.16zm1 .02v13.4h2V9.18h-2zM1.5 11.56c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94zM7.5 6.76c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94zM13.5 8.68c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94zM19.5 2.44c0-1.09.915-1.94 2-1.94s2 .85 2 1.94c0 1.09-.915 1.94-2 1.94s-2-.85-2-1.94zm2-.94c-.572 0-1 .44-1 .94 0 .5.428.94 1 .94.572 0 1-.44 1-.94 0-.5-.428-.94-1-.94z\"\n      />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.738 7.37a.5.5 0 0 1-.078.702l-3.587 2.87a.5.5 0 0 1-.624-.78l3.587-2.87a.5.5 0 0 1 .702.077zM10.448 7.063a.5.5 0 0 1 .628-.324l3.153 1.009a.5.5 0 1 1-.304.952l-3.153-1.009a.5.5 0 0 1-.324-.628zM20.633 2.931a.5.5 0 0 1 .04.706l-3.759 4.21a.5.5 0 0 1-.746-.666l3.76-4.21a.5.5 0 0 1 .705-.04z\"\n      />\n    </svg>\n  </React.Fragment>\n)\n\nexport default SvgComparison\n"],"mappings":";;AAMA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,aAAa,GAAIC,KAAK,IAC1BF,KAAA,CAAAG,aAAA,CAACH,KAAK,CAACI,QAAQ,QACbJ,KAAA,CAAAG,aAAA,QAAAE,QAAA;EAAKC,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,GAAKL,KAAK,GAAAM,KAAA,KAAAA,KAAA,GACnCR,KAAA,CAAAG,aAAA;EACEM,CAAC,EAAC,cAAc;EAChBC,MAAM,EAAC,OAAO;EACdC,IAAI,EAAC,OAAO;EACZC,YAAY,EAAC,IAAI;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CAAC,GAAAC,MAAA,KAAAA,MAAA,GACFf,KAAA,CAAAG,aAAA;EACEa,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC,mqBAAmqB;EACrqBC,MAAM,EAAC,OAAO;EACdC,IAAI,EAAC,OAAO;EACZE,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CAAC,GAAAG,MAAA,KAAAA,MAAA,GACFjB,KAAA,CAAAG,aAAA;EACEM,CAAC,EAAC,0EAA0E;EAC5EC,MAAM,EAAC,OAAO;EACdC,IAAI,EAAC,OAAO;EACZE,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CAAC,CACC,CAAC,EACNd,KAAA,CAAAG,aAAA,QAAAE,QAAA;EAAKC,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,GAAKL,KAAK,GAAAgB,MAAA,KAAAA,MAAA,GACnClB,KAAA,CAAAG,aAAA;EAAMM,CAAC,EAAC;AAAo/E,CAAE,CAAC,CAC5/E,CAAC,EACNT,KAAA,CAAAG,aAAA,QAAAE,QAAA;EAAKC,KAAK,EAAC,IAAI;EAACC,MAAM,EAAC;AAAI,GAAKL,KAAK,GAAAiB,MAAA,KAAAA,MAAA,GACnCnB,KAAA,CAAAG,aAAA;EACEiB,QAAQ,EAAC,SAAS;EAClBJ,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC;AAAkE,CACrE,CAAC,GAAAY,MAAA,KAAAA,MAAA,GACFrB,KAAA,CAAAG,aAAA;EACEiB,QAAQ,EAAC,SAAS;EAClBJ,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC;AAAgoC,CACnoC,CAAC,GAAAa,MAAA,KAAAA,MAAA,GACFtB,KAAA,CAAAG,aAAA;EACEiB,QAAQ,EAAC,SAAS;EAClBJ,QAAQ,EAAC,SAAS;EAClBP,CAAC,EAAC;AAAsS,CACzS,CAAC,CACC,CACS,CACjB;AAED,eAAeR,aAAa"}

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

@@ -125,6 +125,11 @@
   margin-left: calc(0px - var(--input-height));
   line-height: var(--line-height-basis);
 }
+.dnb-input__submit-element .dnb-button--input-button {
+  width: var(--input-height);
+  height: var(--input-height);
+  line-height: var(--input-height);
+}
 .dnb-input__submit-button {
   position: relative;
   align-self: center; /* IE needs this to stay centered */

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

@@ -1 +1 @@
-.dnb-input{--input-font-size:var(--font-size-basis);--input-font-size--small:var(--font-size-basis);--input-font-size--medium:var(--font-size-basis);--input-font-size--large:var(--font-size-medium);--input-padding:1rem;--input-padding--small:1rem;--input-padding--medium:1rem;--input-padding--large:1rem;--input-height:2rem;--input-height--small:1.5rem;--input-height--medium:2.5rem;--input-height--large:3rem;--input-border-width:0.0625rem;--input-border-radius:0.25rem;align-items:center;display:inline-flex;font-size:var(--input-font-small);line-height:var(--input-height);text-align:left}.dnb-input__inner{display:inline-flex;flex-direction:column;width:auto}.dnb-input__shell{align-items:center;border:var(--input-border-width) solid var(--color-sea-green);display:flex;position:relative}.dnb-input__input{border:none;outline:none;position:relative;word-break:normal;z-index:2}.dnb-input__input[disabled]{opacity:1;-webkit-user-select:none;user-select:none}.dnb-input__input,.dnb-input__shell{border-radius:var(--input-border-radius);height:var(--input-height)}.dnb-input__input,.dnb-input__placeholder{padding-left:var(--input-padding);padding-right:var(--input-padding);width:100%}.dnb-input input.dnb-input__input,.dnb-input__input,.dnb-input__placeholder{background-color:transparent;color:inherit;font-size:var(--input-font-size);line-height:inherit;padding-bottom:0;padding-top:0}.dnb-input__placeholder{left:0;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;z-index:1}.dnb-input input.dnb-input__input[type=file]{line-height:calc(var(--input-height) - 2px)}.dnb-input__input::-webkit-search-cancel-button{display:none}.dnb-input__input::-ms-clear{display:none}.dnb-input ::-webkit-file-upload-button{color:var(--color-sea-green);cursor:pointer;outline:none}.dnb-input ::-webkit-file-upload-button:active,.dnb-input ::-webkit-file-upload-button:hover{color:var(--color-emerald-green)}.dnb-input--has-clear-button .dnb-input__input,.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--has-submit-element .dnb-input__input,.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding)*2.5)}.dnb-input--password .dnb-input__input,.dnb-input--password .dnb-input__placeholder{margin-right:2.5rem;padding-right:0}.dnb-input--password .dnb-input__input::-ms-clear,.dnb-input--password .dnb-input__input::-ms-reveal,.dnb-input--password .dnb-input__placeholder::-ms-clear,.dnb-input--password .dnb-input__placeholder::-ms-reveal{display:none}.dnb-input--password .dnb-input__placeholder{padding-right:4rem}.dnb-input--password .dnb-input__input{font-family:var(--font-family-monospace)}.dnb-input__row{align-items:center;display:inline-flex}.dnb-input__suffix{color:inherit}.dnb-input__submit-element{line-height:var(--line-height-basis);margin-left:calc(0px - var(--input-height));z-index:3}.dnb-input__submit-button{align-self:center;position:relative}.dnb-input__submit-button__button{border-radius:0 var(--input-border-radius) var(--input-border-radius) 0}.dnb-input>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-input{flex-wrap:wrap}.dnb-input>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-input:not(.dnb-input--vertical)[class*=__status]{align-items:flex-start}.dnb-input:not(.dnb-input--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-input--small{line-height:var(--input-height--small)}.dnb-input--small .dnb-input__input,.dnb-input--small .dnb-input__shell{height:var(--input-height--small)}.dnb-input--small .dnb-input__input,.dnb-input--small .dnb-input__placeholder{font-size:var(--input-font-size--small);padding-left:var(--input-padding--small);padding-right:var(--input-padding--small)}.dnb-input--small .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--small))}.dnb-input--small .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--small);line-height:var(--input-height--small);width:var(--input-height--small)}.dnb-input--small.dnb-input--has-clear-button .dnb-input__input,.dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--small.dnb-input--has-submit-element .dnb-input__input,.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--small)*2)}.dnb-input--medium{line-height:var(--input-height--medium)}.dnb-input--medium .dnb-input__input,.dnb-input--medium .dnb-input__shell{height:var(--input-height--medium)}.dnb-input--medium .dnb-input__input,.dnb-input--medium .dnb-input__placeholder{font-size:var(--input-font-size--medium);padding-left:var(--input-padding--medium);padding-right:var(--input-padding--medium)}.dnb-input--medium .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--medium))}.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--medium);line-height:var(--input-height--medium);width:var(--input-height--medium)}.dnb-input--medium.dnb-input--has-clear-button .dnb-input__input,.dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--medium.dnb-input--has-submit-element .dnb-input__input,.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--medium)*3)}.dnb-input--large{line-height:var(--input-height--large)}.dnb-input--large .dnb-input__input,.dnb-input--large .dnb-input__shell{height:var(--input-height--large)}.dnb-input--large .dnb-input__input,.dnb-input--large .dnb-input__placeholder{font-size:var(--input-font-size--large);padding-left:var(--input-padding--large);padding-right:var(--input-padding--large)}.dnb-input--large .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--large))}.dnb-input--large .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--large);width:var(--input-height--large)}.dnb-input--large.dnb-input--has-clear-button .dnb-input__input,.dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--large.dnb-input--has-submit-element .dnb-input__input,.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--large)*3)}.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--large) + .5rem)}.dnb-input__align--center .dnb-input__input,.dnb-input__align--center .dnb-input__placeholder{text-align:center}.dnb-input__align--right .dnb-input__input,.dnb-input__align--right .dnb-input__placeholder{text-align:right}.dnb-input--clear.dnb-input__submit-element{opacity:0;transition:opacity .2s ease-in-out}.dnb-input--clear.dnb-input__submit-element .dnb-button{border-radius:var(--button-border-radius);height:var(--input-height--small);width:var(--input-height--small)}.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon{margin:auto}html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled]{cursor:default}.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button{height:1rem;width:1rem}.dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button,.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button{height:var(--input-height--small);width:var(--input-height--small)}.dnb-input[data-has-content=true] .dnb-input--clear{opacity:1}.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2.5rem}.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2rem}.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3rem}.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3.5rem}.dnb-input__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-input--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-input--stretch{display:flex;flex-grow:1}.dnb-input--stretch .dnb-input__inner{flex-grow:1}.dnb-input--stretch .dnb-input__inner,.dnb-input--stretch .dnb-input__shell{width:100%}.dnb-input--stretch .dnb-form-label+.dnb-input__inner{width:auto}.dnb-form-row--horizontal .dnb-input--stretch,.dnb-input--vertical.dnb-input--stretch .dnb-input__inner{width:100%}.dnb-input__icon{bottom:0;left:1rem;margin:auto;order:0;position:absolute;right:auto;top:0}.dnb-input--icon-position-right .dnb-input__icon{left:auto;order:1;right:1rem}.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:2.5rem}.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:2.5rem}.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:3rem}.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:3rem}html[data-visual-test] .dnb-input__input{caret-color:var(--color-white)}@media screen and (max-width:40em){.dnb-responsive-component .dnb-input{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-input__row{align-items:flex-start}.dnb-responsive-component .dnb-input>.dnb-form-label{margin-bottom:.5rem}}
+.dnb-input{--input-font-size:var(--font-size-basis);--input-font-size--small:var(--font-size-basis);--input-font-size--medium:var(--font-size-basis);--input-font-size--large:var(--font-size-medium);--input-padding:1rem;--input-padding--small:1rem;--input-padding--medium:1rem;--input-padding--large:1rem;--input-height:2rem;--input-height--small:1.5rem;--input-height--medium:2.5rem;--input-height--large:3rem;--input-border-width:0.0625rem;--input-border-radius:0.25rem;align-items:center;display:inline-flex;font-size:var(--input-font-small);line-height:var(--input-height);text-align:left}.dnb-input__inner{display:inline-flex;flex-direction:column;width:auto}.dnb-input__shell{align-items:center;border:var(--input-border-width) solid var(--color-sea-green);display:flex;position:relative}.dnb-input__input{border:none;outline:none;position:relative;word-break:normal;z-index:2}.dnb-input__input[disabled]{opacity:1;-webkit-user-select:none;user-select:none}.dnb-input__input,.dnb-input__shell{border-radius:var(--input-border-radius);height:var(--input-height)}.dnb-input__input,.dnb-input__placeholder{padding-left:var(--input-padding);padding-right:var(--input-padding);width:100%}.dnb-input input.dnb-input__input,.dnb-input__input,.dnb-input__placeholder{background-color:transparent;color:inherit;font-size:var(--input-font-size);line-height:inherit;padding-bottom:0;padding-top:0}.dnb-input__placeholder{left:0;overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;z-index:1}.dnb-input input.dnb-input__input[type=file]{line-height:calc(var(--input-height) - 2px)}.dnb-input__input::-webkit-search-cancel-button{display:none}.dnb-input__input::-ms-clear{display:none}.dnb-input ::-webkit-file-upload-button{color:var(--color-sea-green);cursor:pointer;outline:none}.dnb-input ::-webkit-file-upload-button:active,.dnb-input ::-webkit-file-upload-button:hover{color:var(--color-emerald-green)}.dnb-input--has-clear-button .dnb-input__input,.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--has-submit-element .dnb-input__input,.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding)*2.5)}.dnb-input--password .dnb-input__input,.dnb-input--password .dnb-input__placeholder{margin-right:2.5rem;padding-right:0}.dnb-input--password .dnb-input__input::-ms-clear,.dnb-input--password .dnb-input__input::-ms-reveal,.dnb-input--password .dnb-input__placeholder::-ms-clear,.dnb-input--password .dnb-input__placeholder::-ms-reveal{display:none}.dnb-input--password .dnb-input__placeholder{padding-right:4rem}.dnb-input--password .dnb-input__input{font-family:var(--font-family-monospace)}.dnb-input__row{align-items:center;display:inline-flex}.dnb-input__suffix{color:inherit}.dnb-input__submit-element{line-height:var(--line-height-basis);margin-left:calc(0px - var(--input-height));z-index:3}.dnb-input__submit-element .dnb-button--input-button{height:var(--input-height);line-height:var(--input-height);width:var(--input-height)}.dnb-input__submit-button{align-self:center;position:relative}.dnb-input__submit-button__button{border-radius:0 var(--input-border-radius) var(--input-border-radius) 0}.dnb-input>.dnb-form-label{line-height:var(--line-height-basis)}@media screen and (max-width:40em){.dnb-input{flex-wrap:wrap}.dnb-input>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-input:not(.dnb-input--vertical)[class*=__status]{align-items:flex-start}.dnb-input:not(.dnb-input--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-input--small{line-height:var(--input-height--small)}.dnb-input--small .dnb-input__input,.dnb-input--small .dnb-input__shell{height:var(--input-height--small)}.dnb-input--small .dnb-input__input,.dnb-input--small .dnb-input__placeholder{font-size:var(--input-font-size--small);padding-left:var(--input-padding--small);padding-right:var(--input-padding--small)}.dnb-input--small .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--small))}.dnb-input--small .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--small);line-height:var(--input-height--small);width:var(--input-height--small)}.dnb-input--small.dnb-input--has-clear-button .dnb-input__input,.dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--small.dnb-input--has-submit-element .dnb-input__input,.dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--small)*2)}.dnb-input--medium{line-height:var(--input-height--medium)}.dnb-input--medium .dnb-input__input,.dnb-input--medium .dnb-input__shell{height:var(--input-height--medium)}.dnb-input--medium .dnb-input__input,.dnb-input--medium .dnb-input__placeholder{font-size:var(--input-font-size--medium);padding-left:var(--input-padding--medium);padding-right:var(--input-padding--medium)}.dnb-input--medium .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--medium))}.dnb-input--medium .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--medium);line-height:var(--input-height--medium);width:var(--input-height--medium)}.dnb-input--medium.dnb-input--has-clear-button .dnb-input__input,.dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--medium.dnb-input--has-submit-element .dnb-input__input,.dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--medium)*3)}.dnb-input--large{line-height:var(--input-height--large)}.dnb-input--large .dnb-input__input,.dnb-input--large .dnb-input__shell{height:var(--input-height--large)}.dnb-input--large .dnb-input__input,.dnb-input--large .dnb-input__placeholder{font-size:var(--input-font-size--large);padding-left:var(--input-padding--large);padding-right:var(--input-padding--large)}.dnb-input--large .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--large))}.dnb-input--large .dnb-input__submit-element .dnb-button--input-button{height:var(--input-height--large);width:var(--input-height--large)}.dnb-input--large.dnb-input--has-clear-button .dnb-input__input,.dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder,.dnb-input--large.dnb-input--has-submit-element .dnb-input__input,.dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder{padding-right:calc(var(--input-padding--large)*3)}.dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element{margin-left:calc(0px - var(--input-height--large) + .5rem)}.dnb-input__align--center .dnb-input__input,.dnb-input__align--center .dnb-input__placeholder{text-align:center}.dnb-input__align--right .dnb-input__input,.dnb-input__align--right .dnb-input__placeholder{text-align:right}.dnb-input--clear.dnb-input__submit-element{opacity:0;transition:opacity .2s ease-in-out}.dnb-input--clear.dnb-input__submit-element .dnb-button{border-radius:var(--button-border-radius);height:var(--input-height--small);width:var(--input-height--small)}.dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon{margin:auto}html:not([data-whatintent=touch]) .dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled]{cursor:default}.dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button{height:1rem;width:1rem}.dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button,.dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button{height:var(--input-height--small);width:var(--input-height--small)}.dnb-input[data-has-content=true] .dnb-input--clear{opacity:1}.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2.5rem}.dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:2rem}.dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3rem}.dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element{margin-right:3.5rem}.dnb-input__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-input--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-input--stretch{display:flex;flex-grow:1}.dnb-input--stretch .dnb-input__inner{flex-grow:1}.dnb-input--stretch .dnb-input__inner,.dnb-input--stretch .dnb-input__shell{width:100%}.dnb-input--stretch .dnb-form-label+.dnb-input__inner{width:auto}.dnb-form-row--horizontal .dnb-input--stretch,.dnb-input--vertical.dnb-input--stretch .dnb-input__inner{width:100%}.dnb-input__icon{bottom:0;left:1rem;margin:auto;order:0;position:absolute;right:auto;top:0}.dnb-input--icon-position-right .dnb-input__icon{left:auto;order:1;right:1rem}.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:2.5rem}.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:2.5rem}.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder{padding-left:3rem}.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,.dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder{padding-right:3rem}html[data-visual-test] .dnb-input__input{caret-color:var(--color-white)}@media screen and (max-width:40em){.dnb-responsive-component .dnb-input{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-input__row{align-items:flex-start}.dnb-responsive-component .dnb-input>.dnb-form-label{margin-bottom:.5rem}}

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

@@ -100,7 +100,7 @@
     left: 0;
     overflow: hidden;
 
-    // NB: We may considder moving this part to include &__input
+    // NB: We may consider moving this part to include &__input
     white-space: nowrap;
     text-overflow: ellipsis;
   }
@@ -176,6 +176,12 @@
 
     margin-left: calc(1px - 1px - var(--input-height));
     line-height: var(--line-height-basis);
+
+    .dnb-button--input-button {
+      width: var(--input-height);
+      height: var(--input-height);
+      line-height: var(--input-height);
+    }
   }
 
   &__submit-button {

package/es/components/input/style/themes/dnb-input-theme-sbanken.css

@@ -0,0 +1,104 @@
+/*
+* Input theme
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-input {
+  --input-height: 2.5rem;
+  --input-button-border-color: var(--input-border-color);
+  --input-button-border-width: var(--input-border-width);
+  --input-border-radius: 0.5rem;
+  --input-border-width: 0.0625rem;
+  --input-color: var(--input-color--default);
+  --input-color--default: var(--sb-color-text);
+  --input-color--active: var(--sb-color-text);
+  --input-border-color: var(--sb-color-gray-dark-2);
+  --input-border-color--hover: var(--sb-color-violet);
+  --input-border-color--active: var(--sb-color-violet);
+  --input-border-color--focus: var(--focus-ring-color);
+}
+.dnb-input__shell {
+  background-color: var(--color-white);
+  transition: border-radius 0.25s ease-out;
+  border: none;
+  color: var(--input-color);
+  --border-color: var(--input-border-color);
+  --border-width: var(--input-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-input__submit-button__button {
+  --button-secondary-color: var(--sb-color-violet);
+}
+.dnb-input__placeholder {
+  color: var(--sb-color-gray-dark-3);
+}
+.dnb-input[data-input-state=disabled] {
+  --input-border-color: var(--sb-color-gray);
+}
+.dnb-input[data-input-state=disabled] .dnb-input__shell {
+  -webkit-text-fill-color: currentcolor;
+  background-color: var(--sb-color-gray-light);
+}
+.dnb-input[data-input-state=disabled] .dnb-input__shell,
+.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,
+.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder {
+  color: var(--sb-color-gray-dark-2);
+}
+.dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
+  --input-color: var(--input-color--active);
+  --input-border-radius: 1.5rem;
+  --input-border-color: var(--input-border-color--active);
+}
+html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] {
+  --input-button-border-color: var(--input-border-color--focus);
+  --input-button-border-width: var(--focus-ring-width);
+}
+.dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell {
+  --border-color: var(--input-border-color--focus);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,
+.dnb-input:not([data-input-state=disabled]) .dnb-form-label:hover + .dnb-input__inner .dnb-input__shell {
+  --input-border-color: var(--input-border-color--hover);
+  --input-border-width: 0.125rem;
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button {
+  transition: border-radius 0.25s ease-out;
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:hover, .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:active {
+  border: var(--input-button-border-width) solid var(--input-button-border-color);
+  border-left: none;
+  padding-left: var(--input-button-border-width);
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.focus-visible {
+  border: none;
+  padding-left: none;
+}
+.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:focus-visible {
+  border: none;
+  padding-left: none;
+}
+.dnb-input:not([data-input-state=disabled]).dnb-input__status--error {
+  --input-border-color: var(--sb-color-red);
+  --input-color--default: var(--sb-color-red);
+  --input-color--active: var(--sb-color-text);
+  --input-border-color--hover: var(--sb-color-red);
+  --input-border-color--active: var(--sb-color-red);
+  --input-border-color--focus: var(--sb-color-red);
+}
+.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button {
+  --button-secondary-background--hover: var(--sb-color-red);
+}
+.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button:hover:not(:active) {
+  --button-secondary-color: var(--sb-color-white);
+}

package/es/components/input/style/themes/dnb-input-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-input{--input-height:2.5rem;--input-button-border-color:var(--input-border-color);--input-button-border-width:var(--input-border-width);--input-border-radius:0.5rem;--input-border-width:0.0625rem;--input-color:var(--input-color--default);--input-color--default:var(--sb-color-text);--input-color--active:var(--sb-color-text);--input-border-color:var(--sb-color-gray-dark-2);--input-border-color--hover:var(--sb-color-violet);--input-border-color--active:var(--sb-color-violet);--input-border-color--focus:var(--focus-ring-color)}.dnb-input__shell{--border-color:var(--input-border-color);--border-width:var(--input-border-width);background-color:var(--color-white);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--input-color);transition:border-radius .25s ease-out}.dnb-input__submit-button__button{--button-secondary-color:var(--sb-color-violet)}.dnb-input__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-input[data-input-state=disabled]{--input-border-color:var(--sb-color-gray)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;background-color:var(--sb-color-gray-light)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder{color:var(--sb-color-gray-dark-2)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-color:var(--input-color--active);--input-border-radius:1.5rem;--input-border-color:var(--input-border-color--active)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-button-border-color:var(--input-border-color--focus);--input-button-border-width:var(--focus-ring-width)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{outline:none}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{--border-color:var(--input-border-color--focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input:not([data-input-state=disabled]) .dnb-form-label:hover+.dnb-input__inner .dnb-input__shell,.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover{--input-border-color:var(--input-border-color--hover);--input-border-width:0.125rem}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:transparent;box-shadow:none;transition:border-radius .25s ease-out}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.focus-visible{border:none;padding-left:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:focus-visible{border:none;padding-left:none}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error{--input-border-color:var(--sb-color-red);--input-color--default:var(--sb-color-red);--input-color--active:var(--sb-color-text);--input-border-color--hover:var(--sb-color-red);--input-border-color--active:var(--sb-color-red);--input-border-color--focus:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button{--button-secondary-background--hover:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button:hover:not(:active){--button-secondary-color:var(--sb-color-white)}