@dnb/eufemia 10.21.0 → 10.23.0

package/cjs/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["_react","_interopRequireDefault","require","_classnames","_IconPrimary2","_Button","_Context","_componentHelper","_TagGroup","_TagContext","_SpacingHelper","_svg","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","omitOnKeyUpDeleteEvent","exports","Tag","localProps","_context$translation","_IconPrimary","context","React","useContext","Context","tagGroupContext","TagGroupContext","allProps","extendPropsWithContext","translation","className","children","text","hasLabel","onClick","onDelete","removeIconTitle","props","content","isClickable","isRemovable","isInteractive","spacingClasses","createSpacingClasses","tagClassNames","classnames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","handleKeyUp","event","element","type","icon","getDeleteIcon","warn","createElement","variant","size","icon_position","on_click","onKeyUp","e","undefined","title","inherit_color","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","TagGroup","_formElement","_supportsSpacingProps","_default"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n  /**\n   * The content of the tag element, can be a string or a React Element.\n   * Default: null\n   */\n  text?: string | React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: null\n   */\n  icon?: IconIcon\n\n  /**\n   * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n   * Default: null\n   */\n  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n  /**\n   * Handle the click event on 'tag' element\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  omitOnKeyUpDeleteEvent?: boolean\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  removeIconTitle?: string\n}\n\nexport const defaultProps = {\n  skeleton: null,\n  omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const tagGroupContext = React.useContext(TagGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Tag,\n    context?.Tag,\n    tagGroupContext\n  )\n\n  const {\n    className,\n    skeleton,\n    children,\n    text,\n    hasLabel,\n    onClick,\n    onDelete,\n    omitOnKeyUpDeleteEvent,\n    removeIconTitle, // has a translation in context\n    ...props\n  } = allProps\n\n  const content = text || children\n  const isClickable = !!onClick\n  const isRemovable = !!onDelete && !isClickable\n  const isInteractive = isClickable || isRemovable\n  const spacingClasses = createSpacingClasses(props)\n  const tagClassNames = classnames(\n    'dnb-tag',\n    className,\n    spacingClasses,\n    isInteractive && 'dnb-tag--interactive',\n    isRemovable && 'dnb-tag--removable'\n  )\n  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =\n    props\n\n  const isDeleteKeyboardEvent = (keyboardEvent) => {\n    return (\n      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'\n    )\n  }\n\n  const handleKeyUp = (event) => {\n    if (onDelete && isDeleteKeyboardEvent(event)) {\n      onDelete(event)\n    }\n  }\n\n  if (!isInteractive) {\n    buttonAttr.element = 'span'\n    buttonAttr.type = ''\n  }\n\n  if (isRemovable) {\n    buttonAttr.icon = getDeleteIcon()\n  }\n\n  if (!tagGroupContext && !hasLabel) {\n    warn(\n      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  return (\n    <Button\n      variant=\"unstyled\"\n      size=\"small\"\n      icon_position={isRemovable ? 'right' : 'left'}\n      className={tagClassNames}\n      on_click={onClick || onDelete}\n      text={content}\n      skeleton={skeleton}\n      onKeyUp={\n        isRemovable && !omitOnKeyUpDeleteEvent\n          ? (e) => handleKeyUp(e)\n          : undefined\n      }\n      {...buttonAttr}\n    />\n  )\n\n  function getDeleteIcon() {\n    return (\n      <IconPrimary\n        title={removeIconTitle}\n        inherit_color={false}\n        icon={\n          <svg\n            width=\"16\"\n            height=\"16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n              className=\"dnb-icon-close-circle-path\"\n            />\n            <path\n              d=\"m5.5 10.5 5-5m0 5-5-5\"\n              className=\"dnb-icon-close-cross-path\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        }\n      />\n    )\n  }\n}\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["_react","_interopRequireDefault","require","_classnames","_IconPrimary","_Button","_Context","_componentHelper","_TagGroup","_TagContext","_SpacingHelper","_svg","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","omitOnKeyUpDeleteEvent","exports","Tag","localProps","_context$translation","context","React","useContext","Context","tagGroupContext","TagGroupContext","allProps","extendPropsWithContext","translation","_handleDeprecatedBeha","handleDeprecatedBehaviour","className","children","text","hasLabel","variant","onClick","removeIconTitle","addIconTitle","props","content","addIcon","isInteractive","spacingClasses","createSpacingClasses","tagClassNames","classnames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","handleDeleteKeyUp","event","element","type","icon","getIcon","warn","createElement","size","icon_position","on_click","onKeyUp","e","undefined","_ref","onDelete","title","inherit_color","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","TagGroup","_formElement","_supportsSpacingProps","_default"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n  /**\n   * The content of the tag element, can be a string or a React Element.\n   * Default: null\n   */\n  text?: string | React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: null\n   */\n  icon?: IconIcon\n\n  /**\n   * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Defines the variant\n   * Default: 'default'\n   */\n  variant?: 'default' | 'clickable' | 'addable' | 'removable'\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n   * Default: null\n   */\n  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n  /**\n   * Handle the click event on 'tag' element\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   * @deprecated Use `onClick` instead. With `variant='removable'`\n   */\n  onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  omitOnKeyUpDeleteEvent?: boolean\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  removeIconTitle?: string\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  addIconTitle?: string\n}\n\nexport const defaultProps = {\n  skeleton: null,\n  omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const tagGroupContext = React.useContext(TagGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Tag,\n    context?.Tag,\n    tagGroupContext\n  )\n\n  const {\n    className,\n    skeleton,\n    children,\n    text,\n    hasLabel,\n    variant = 'default',\n    onClick,\n    omitOnKeyUpDeleteEvent,\n    removeIconTitle, // has a translation in context\n    addIconTitle, // has a translation in context\n    ...props\n  } = handleDeprecatedBehaviour(allProps)\n\n  const content = text || children\n\n  const addIcon = variant === 'removable' || variant === 'addable'\n  const isInteractive = variant !== 'default'\n  const spacingClasses = createSpacingClasses(props)\n  const tagClassNames = classnames(\n    'dnb-tag',\n    className,\n    spacingClasses,\n    isInteractive && 'dnb-tag--interactive',\n    `dnb-tag--${variant}`\n  )\n  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =\n    props\n\n  const isDeleteKeyboardEvent = (keyboardEvent) => {\n    return (\n      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'\n    )\n  }\n\n  const handleDeleteKeyUp = (event) => {\n    if (isDeleteKeyboardEvent(event) && onClick) {\n      onClick(event)\n    }\n  }\n\n  if (!isInteractive) {\n    buttonAttr.element = 'span'\n    buttonAttr.type = ''\n  }\n\n  if (addIcon) {\n    buttonAttr.icon = getIcon(\n      variant === 'addable' ? addIconTitle : removeIconTitle\n    )\n  }\n\n  if (!tagGroupContext && !hasLabel) {\n    warn(\n      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  return (\n    <Button\n      variant=\"unstyled\"\n      size=\"small\"\n      icon_position={addIcon ? 'right' : 'left'}\n      className={tagClassNames}\n      on_click={onClick}\n      text={content}\n      skeleton={skeleton}\n      onKeyUp={\n        variant === 'removable' && !omitOnKeyUpDeleteEvent\n          ? (e) => handleDeleteKeyUp(e)\n          : undefined\n      }\n      {...buttonAttr}\n    />\n  )\n}\n\n/**\n * Support deprecated behaviour by mutating the props.\n * Deprecated behaviour: variant 'clickable' and 'removable' is defined by the 'onClick' and 'onDelete' props\n */\nconst handleDeprecatedBehaviour: (allProps: TagProps) => TagProps = ({\n  onDelete,\n  ...allProps\n}) => {\n  if (!allProps.variant) {\n    if (allProps.onClick) {\n      allProps.variant = 'clickable'\n    } else if (onDelete) {\n      allProps.onClick = onDelete\n      allProps.variant = 'removable'\n    }\n  }\n  return allProps\n}\nconst getIcon = (title: string) => (\n  <IconPrimary\n    title={title}\n    inherit_color={false}\n    icon={\n      <svg\n        width=\"16\"\n        height=\"16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n          className=\"dnb-icon-close-circle-path\"\n        />\n        <path\n          d=\"m5.5 10.5 5-5m0 5-5-5\"\n          className=\"dnb-icon-close-cross-path\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    }\n  />\n)\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}

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

@@ -13,18 +13,17 @@
 * Tag mixins
 *
 */
+.dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+}
 .dnb-tag.dnb-button {
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--color-black-8);
-}
-.dnb-tag.dnb-button.dnb-button--size-small {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon {
-  padding-left: 0;
-}
 .dnb-tag.dnb-button .dnb-button__text {
   font-size: var(--font-size-x-small);
   transform: none;
@@ -39,48 +38,43 @@
 }
 .dnb-tag--interactive.dnb-button {
   color: var(--color-sea-green);
+  background-color: var(--color-pistachio);
   --border-color: var(--color-sea-green);
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
+  outline: none;
   --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
-.dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--interactive.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
   background-color: var(--color-mint-green-50);
   --border-color: transparent;
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-sea-green);
 }
 .dnb-tag--interactive.dnb-button[disabled] {
   color: var(--color-sea-green-30);
@@ -90,83 +84,53 @@ html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabl
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-tag--removable.dnb-button {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path {
-  fill: var(--color-white);
+.dnb-tag--removable.dnb-button, .dnb-tag--addable.dnb-button {
+  padding-right: 0.25rem;
+  --tag-icon-fill: var(--tag-icon-fill-color);
+  --tag-icon-stroke: var(--tag-icon-stroke-color);
 }
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  outline: none;
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled] {
+.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled], .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]), .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
+.dnb-tag--removable.dnb-button svg, .dnb-tag--addable.dnb-button svg {
+  border-radius: 50%;
+  outline: 0.0625rem solid var(--tag-icon-border-color);
+  outline-offset: -0.0625rem;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
+  fill: var(--tag-icon-fill);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path {
-  fill: var(--color-mint-green-50);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
+  stroke: var(--tag-icon-stroke);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green-30);
+.dnb-tag--addable {
+  --tag-icon-fill-color: var(--tag-icon-color);
+  --tag-icon-stroke-color: var(--color-white);
 }
-.dnb-tag--removable.dnb-button .dnb-button__text {
-  padding-left: 0.5rem;
+.dnb-tag--addable svg {
+  transform: rotate(45deg);
 }
-.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
-  padding-right: 0;
+.dnb-tag--removable {
+  --tag-icon-fill-color: var(--color-white);
+  --tag-icon-stroke-color: var(--tag-icon-color);
 }
 .dnb-tag__group {
   display: inline-flex;

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

@@ -1 +1 @@
-.dnb-tag.dnb-button{-webkit-appearance:none;appearance:none;background-color:var(--color-black-8)}.dnb-tag.dnb-button.dnb-button--size-small{padding-left:.5rem;padding-right:.5rem}.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon{padding-left:0}.dnb-tag.dnb-button .dnb-button__text{font-size:var(--font-size-x-small);transform:none}.dnb-tag:not(.dnb-tag--interactive){cursor:unset;-webkit-user-select:unset;user-select:unset}.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text{cursor:text}.dnb-tag--interactive.dnb-button{--border-color:var(--color-sea-green);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-black-8);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--interactive.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-black-8);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--interactive.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--interactive.dnb-button[disabled]{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-tag--removable.dnb-button{background-color:var(--color-sea-green);color:var(--color-white)}.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path{fill:var(--color-white)}.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path{stroke:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-tag--removable.dnb-button:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path{fill:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path{stroke:var(--color-white)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path{fill:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path{stroke:var(--color-white)}.dnb-tag--removable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path{fill:var(--color-sea-green)}.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path{stroke:var(--color-white)}.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path{fill:var(--color-mint-green-50)}.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path{stroke:var(--color-sea-green-30)}.dnb-tag--removable.dnb-button .dnb-button__text{padding-left:.5rem}.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon{padding-right:0}.dnb-tag__group{display:inline-flex;flex-wrap:wrap;gap:.5rem}
+.dnb-tag{--tag-icon-color:var(--color-sea-green);--tag-icon-border-color:var(--tag-icon-color)}.dnb-tag.dnb-button{-webkit-appearance:none;appearance:none;background-color:var(--color-black-8);padding-left:.5rem;padding-right:.5rem}.dnb-tag.dnb-button .dnb-button__text{font-size:var(--font-size-x-small);transform:none}.dnb-tag:not(.dnb-tag--interactive){cursor:unset;-webkit-user-select:unset;user-select:unset}.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text{cursor:text}.dnb-tag--interactive.dnb-button{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]){--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);--tag-icon-color:var(--color-emerald-green);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);outline:none}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;--tag-icon-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tag--interactive.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;--tag-icon-color:var(--color-sea-green);background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tag--interactive.dnb-button[disabled]{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-tag--addable.dnb-button,.dnb-tag--removable.dnb-button{--tag-icon-fill:var(--tag-icon-fill-color);--tag-icon-stroke:var(--tag-icon-stroke-color);padding-right:.25rem}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}.dnb-tag--addable.dnb-button:active[disabled],.dnb-tag--removable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--addable.dnb-button:active:not([disabled]),.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}.dnb-tag--addable.dnb-button svg,.dnb-tag--removable.dnb-button svg{border-radius:50%;outline:.0625rem solid var(--tag-icon-border-color);outline-offset:-.0625rem}.dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path,.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path{fill:var(--tag-icon-fill)}.dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path,.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path{stroke:var(--tag-icon-stroke)}.dnb-tag--addable{--tag-icon-fill-color:var(--tag-icon-color);--tag-icon-stroke-color:var(--color-white)}.dnb-tag--addable svg{transform:rotate(45deg)}.dnb-tag--removable{--tag-icon-fill-color:var(--color-white);--tag-icon-stroke-color:var(--tag-icon-color)}.dnb-tag__group{display:inline-flex;flex-wrap:wrap;gap:.5rem}

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

@@ -8,18 +8,15 @@
 @import './themes/tag-mixins.scss';
 
 .dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+
   &.dnb-button {
     appearance: none;
     background-color: var(--color-black-8);
 
-    &.dnb-button--size-small {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-    }
-
-    &.dnb-button--size-small.dnb-button--has-icon {
-      padding-left: 0;
-    }
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 
     .dnb-button__text {
       font-size: var(--font-size-x-small);
@@ -39,14 +36,22 @@
   &--interactive {
     &.dnb-button {
       color: var(--color-sea-green);
+      background-color: var(--color-pistachio);
 
       @include fakeBorder(var(--color-sea-green), 0.0625rem, inset);
-      @include buttonHover(var(--color-sea-green), var(--color-black-8));
-      @include buttonFocus(var(--color-sea-green), var(--color-black-8));
+      @include buttonFocusVisible(
+        $focus-color: var(--color-emerald-green)
+      ) {
+        --tag-icon-color: var(--color-emerald-green);
+      }
+      @include buttonHover() {
+        --tag-icon-color: var(--color-emerald-green);
+      }
       @include buttonActive(
-        var(--color-sea-green),
-        var(--color-mint-green-50)
-      );
+        $background-color: var(--color-mint-green-50)
+      ) {
+        --tag-icon-color: var(--color-sea-green);
+      }
 
       &[disabled] {
         color: var(--color-sea-green-30);
@@ -57,45 +62,32 @@
     }
   }
 
-  &--removable {
+  &--removable,
+  &--addable {
     &.dnb-button {
-      color: var(--color-white);
-      background-color: var(--color-sea-green);
-
-      @include deleteIcon(var(--color-white), var(--color-sea-green));
+      padding-right: 0.25rem;
 
-      @include buttonFocus(var(--color-sea-green), var(--color-white)) {
-        @include deleteIcon();
-      }
-
-      @include buttonHover(var(--color-sea-green), var(--color-white)) {
-        @include deleteIcon();
-      }
-
-      @include buttonActive(
-        var(--color-sea-green),
-        var(--color-mint-green-50)
-      ) {
-        @include deleteIcon();
-      }
-
-      &[disabled] {
-        @include deleteIcon(
-          var(--color-mint-green-50),
-          var(--color-sea-green-30)
-        );
-      }
-
-      .dnb-button__text {
-        padding-left: 0.5rem;
-      }
+      @include tagIcon(
+        var(--tag-icon-fill-color),
+        var(--tag-icon-stroke-color),
+        var(--tag-icon-border-color)
+      );
     }
+  }
 
-    &.dnb-button--size-small.dnb-button--has-icon {
-      padding-right: 0;
+  &--addable {
+    --tag-icon-fill-color: var(--tag-icon-color);
+    --tag-icon-stroke-color: var(--color-white);
+    svg {
+      transform: rotate(45deg);
     }
   }
 
+  &--removable {
+    --tag-icon-fill-color: var(--color-white);
+    --tag-icon-stroke-color: var(--tag-icon-color);
+  }
+
   // Default space between tags
   &__group {
     display: inline-flex;

package/cjs/components/tag/style/themes/tag-mixins.scss

@@ -3,17 +3,35 @@
 *
 */
 
-@mixin deleteIcon(
-  $fillColor: var(--color-sea-green),
-  $strokeColor: var(--color-white)
-) {
+@mixin tagIcon($fillColor, $strokeColor, $borderColor) {
+  --tag-icon-fill: #{$fillColor};
+  --tag-icon-stroke: #{$strokeColor};
+
+  @include focus-visible() {
+    --tag-icon-fill: #{$strokeColor};
+    --tag-icon-stroke: #{$fillColor};
+  }
+
+  @include hover() {
+    --tag-icon-fill: #{$strokeColor};
+    --tag-icon-stroke: #{$fillColor};
+  }
+
+  @include active() {
+    --tag-icon-fill: #{$strokeColor};
+    --tag-icon-stroke: #{$fillColor};
+  }
+
   svg {
+    border-radius: 50%;
+    outline: 0.0625rem solid $borderColor;
+    outline-offset: -0.0625rem;
     .dnb-icon-close-circle-path {
-      fill: $fillColor;
+      fill: var(--tag-icon-fill);
     }
 
     .dnb-icon-close-cross-path {
-      stroke: $strokeColor;
+      stroke: var(--tag-icon-stroke);
     }
   }
 }

package/cjs/components/tooltip/Tooltip.js

@@ -32,7 +32,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function Tooltip(localProps) {
   const context = _react.default.useContext(_Context.default);
   const inherited = (0, _TooltipHelpers.getPropsFromTooltipProp)(localProps);
-  const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _TooltipHelpers.defaultProps), localProps), inherited), context.getTranslation(localProps).Tooltip), context.Tooltip));
+  const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _TooltipHelpers.defaultProps), localProps), inherited), context.getTranslation(localProps)['Tooltip']), context.Tooltip));
   const {
       targetElement,
       targetSelector,

package/cjs/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_TooltipWithEvents","_TooltipHelpers","_withSnakeCaseProps","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Tooltip","localProps","context","React","useContext","Context","inherited","getPropsFromTooltipProp","props","convertSnakeCaseProps","defaultProps","getTranslation","targetElement","targetSelector","className","id","tooltip","size","fixedPosition","skipPortal","noAnimation","showDelay","hideDelay","active","position","arrow","align","params","element","setElement","useState","internalId","makeUniqueId","useEffect","getTargetElement","getRefElement","classes","classnames","createSpacingClasses","attributes","validateDOMAttributes","createElement","children","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport TooltipWithEvents from './TooltipWithEvents'\nimport {\n  defaultProps,\n  getPropsFromTooltipProp,\n  getRefElement,\n  getTargetElement,\n  injectTooltipSemantic,\n} from './TooltipHelpers'\nimport { TooltipAllProps } from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nfunction Tooltip(localProps: TooltipAllProps) {\n  const context = React.useContext(Context)\n\n  const inherited = getPropsFromTooltipProp(localProps)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps({\n    ...defaultProps,\n    ...localProps,\n    ...inherited,\n    ...context.getTranslation(localProps).Tooltip,\n    ...context.Tooltip,\n  })\n\n  const {\n    targetElement,\n    targetSelector,\n    className,\n    id, // eslint-disable-line\n    tooltip, // eslint-disable-line\n    size,\n    fixedPosition, // eslint-disable-line\n    skipPortal, // eslint-disable-line\n    noAnimation, // eslint-disable-line\n    showDelay, // eslint-disable-line\n    hideDelay, // eslint-disable-line\n    active, // eslint-disable-line\n    position, // eslint-disable-line\n    arrow, // eslint-disable-line\n    align, // eslint-disable-line\n    ...params\n  } = props\n\n  const target = targetElement || targetSelector\n\n  const [element, setElement] = React.useState<\n    HTMLElement | React.ReactElement\n  >()\n  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway\n  props.internalId = internalId\n\n  React.useEffect(() => {\n    const element = getTargetElement(getRefElement(target))\n    setElement(element)\n  }, [target])\n\n  const classes = classnames(\n    'dnb-tooltip',\n    size === 'large' && 'dnb-tooltip--large',\n    createSpacingClasses(props),\n    className\n  )\n\n  const attributes = {\n    className: classes,\n    ...params,\n  }\n\n  // also used for code markup simulation\n  validateDOMAttributes(localProps, attributes)\n\n  if (target && !element) {\n    return null\n  }\n\n  return (\n    <TooltipWithEvents target={element} attributes={attributes} {...props}>\n      {props.children}\n    </TooltipWithEvents>\n  )\n}\n\nexport { injectTooltipSemantic }\nexport default Tooltip\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_TooltipWithEvents","_TooltipHelpers","_withSnakeCaseProps","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ownKeys","object","enumerableOnly","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","Tooltip","localProps","context","React","useContext","Context","inherited","getPropsFromTooltipProp","props","convertSnakeCaseProps","defaultProps","getTranslation","targetElement","targetSelector","className","id","tooltip","size","fixedPosition","skipPortal","noAnimation","showDelay","hideDelay","active","position","arrow","align","params","element","setElement","useState","internalId","makeUniqueId","useEffect","getTargetElement","getRefElement","classes","classnames","createSpacingClasses","attributes","validateDOMAttributes","createElement","children","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport TooltipWithEvents from './TooltipWithEvents'\nimport {\n  defaultProps,\n  getPropsFromTooltipProp,\n  getRefElement,\n  getTargetElement,\n  injectTooltipSemantic,\n} from './TooltipHelpers'\nimport { TooltipAllProps } from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nfunction Tooltip(localProps: TooltipAllProps) {\n  const context = React.useContext(Context)\n\n  const inherited = getPropsFromTooltipProp(localProps)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps({\n    ...defaultProps,\n    ...localProps,\n    ...inherited,\n    ...context.getTranslation(localProps)['Tooltip'],\n    ...context.Tooltip,\n  })\n\n  const {\n    targetElement,\n    targetSelector,\n    className,\n    id, // eslint-disable-line\n    tooltip, // eslint-disable-line\n    size,\n    fixedPosition, // eslint-disable-line\n    skipPortal, // eslint-disable-line\n    noAnimation, // eslint-disable-line\n    showDelay, // eslint-disable-line\n    hideDelay, // eslint-disable-line\n    active, // eslint-disable-line\n    position, // eslint-disable-line\n    arrow, // eslint-disable-line\n    align, // eslint-disable-line\n    ...params\n  } = props\n\n  const target = targetElement || targetSelector\n\n  const [element, setElement] = React.useState<\n    HTMLElement | React.ReactElement\n  >()\n  const [internalId] = React.useState(() => props.id || makeUniqueId()) // cause we need an id anyway\n  props.internalId = internalId\n\n  React.useEffect(() => {\n    const element = getTargetElement(getRefElement(target))\n    setElement(element)\n  }, [target])\n\n  const classes = classnames(\n    'dnb-tooltip',\n    size === 'large' && 'dnb-tooltip--large',\n    createSpacingClasses(props),\n    className\n  )\n\n  const attributes = {\n    className: classes,\n    ...params,\n  }\n\n  // also used for code markup simulation\n  validateDOMAttributes(localProps, attributes)\n\n  if (target && !element) {\n    return null\n  }\n\n  return (\n    <TooltipWithEvents target={element} attributes={attributes} {...props}>\n      {props.children}\n    </TooltipWithEvents>\n  )\n}\n\nexport { injectTooltipSemantic }\nexport default Tooltip\n"],"mappings":"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"}

package/cjs/elements/Element.d.ts

@@ -6,12 +6,11 @@ import React from 'react';
 import { SkeletonMethods } from '../components/skeleton/SkeletonHelper';
 import type { SkeletonShow } from '../components/skeleton/Skeleton';
 import type { DynamicElement, SpacingProps } from '../shared/types';
-export type ElementIsType = DynamicElement | React.ReactNode;
 export type ElementInternalProps = {
     /**
      * Defines the Element Type, like "div"
      */
-    as: ElementIsType;
+    as: DynamicElement<unknown>;
 };
 export type ElementProps = {
     skeleton?: SkeletonShow;
@@ -20,7 +19,7 @@ export type ElementProps = {
     innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
 } & SpacingProps;
-export type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
+export type ElementAllProps = ElementProps & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>;
 export declare const defaultProps: {
     skeletonMethod: string;
 };
@@ -33,5 +32,5 @@ declare const Element: React.ForwardRefExoticComponent<{
 } & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceTypeAll;
     innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
-} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref"> & React.RefAttributes<unknown>>;
+} & ElementInternalProps & Omit<React.HTMLProps<HTMLElement>, "ref" | "as"> & React.RefAttributes<unknown>>;
 export default Element;

package/cjs/elements/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_SkeletonHelper","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_extends","assign","bind","arguments","hasOwnProperty","apply","defaultProps","skeletonMethod","exports","Element","React","forwardRef","props","ref","createElement","ElementInstance","innerRef","localProps","context","useContext","Context","extendPropsWithContext","skeleton","className","internalClass","as","rest","Tag","attributes","tagClass","internalClassName","classnames","createSkeletonClass","createSpacingClasses","RegExp","test","String","validateDOMAttributes","skeletonDOMAttributes","_default"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementIsType = DynamicElement | React.ReactNode\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: ElementIsType\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  internalClass?: string\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as as DynamicElement\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":";;;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAIA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAI8C,MAAAM,SAAA;AAAA,SAAAP,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAC,CAAA,MAAAC,MAAA,CAAAC,qBAAA,QAAAC,gBAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAP,MAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAG,gBAAA,CAAAC,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAI,gBAAA,CAAAH,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,uBAAAE,MAAA,CAAAK,SAAA,CAAAC,oBAAA,CAAAC,IAAA,CAAAb,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAY,UAAA,GAAAR,MAAA,CAAAS,IAAA,CAAAf,MAAA,OAAAI,GAAA,EAAAC,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAS,UAAA,CAAAL,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAU,UAAA,CAAAT,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;AAAA,SAAAc,SAAA,IAAAA,QAAA,GAAAV,MAAA,CAAAW,MAAA,GAAAX,MAAA,CAAAW,MAAA,CAAAC,IAAA,eAAAhB,MAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAc,SAAA,CAAAV,MAAA,EAAAJ,CAAA,UAAAL,MAAA,GAAAmB,SAAA,CAAAd,CAAA,YAAAD,GAAA,IAAAJ,MAAA,QAAAM,MAAA,CAAAK,SAAA,CAAAS,cAAA,CAAAP,IAAA,CAAAb,MAAA,EAAAI,GAAA,KAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,gBAAAF,MAAA,YAAAc,QAAA,CAAAK,KAAA,OAAAF,SAAA;AA4BvC,MAAMG,YAAY,GAAG;EAC1BC,cAAc,EAAE;AAClB,CAAC;AAAAC,OAAA,CAAAF,YAAA,GAAAA,YAAA;AAED,MAAMG,OAAO,GAAGC,cAAK,CAACC,UAAU,CAAC,CAACC,KAAsB,EAAEC,GAAG,KAAK;EAChE,OAAO1C,MAAA,CAAAW,OAAA,CAAAgC,aAAA,CAACC,eAAe,EAAAf,QAAA;IAACgB,QAAQ,EAAEH;EAAI,GAAKD,KAAK,CAAG,CAAC;AACtD,CAAC,CAAC;AAEF,SAASG,eAAeA,CAACE,UAA2B,EAAE;EACpD,MAAMC,OAAO,GAAGR,cAAK,CAACS,UAAU,CAACC,gBAAO,CAAC;EACzC,MAAMR,KAAK,GAAG,IAAAS,uCAAsB,EAACJ,UAAU,EAAEX,YAAY,EAAE;IAC7DgB,QAAQ,EAAEJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI;EACrB,CAAC,CAAC;EAEF,MAAM;MACJC,SAAS;MACTC,aAAa;MACbC,EAAE;MACFT,QAAQ;MACRM,QAAQ;MACRf;IAEF,CAAC,GAAGK,KAAK;IADJc,IAAI,GAAA3C,wBAAA,CACL6B,KAAK,EAAAjC,SAAA;EAET,MAAMgD,GAAG,GAAGF,EAAoB;EAChC,MAAMG,UAAU,GAAGF,IAAkB;EAErC,MAAMG,QAAQ,GACZL,aAAa,KAAK,OAAOG,GAAG,KAAK,QAAQ,GAAI,OAAMA,GAAI,EAAC,GAAG,EAAE,CAAC;EAChE,MAAMG,iBAAiB,GAAG,IAAAC,mBAAU,EAElCR,SAAS,EACT,IAAAS,mCAAmB,EAACzB,cAAc,EAAEe,QAAQ,EAAEJ,OAAO,CAAC,EACtD,IAAAe,mCAAoB,EAClBL,UAAU,EACV,OAAOD,GAAG,KAAK,QAAQ,GAAI,OAAMA,GAAI,EAAC,GAAG,IAC3C,CAAC,EAND,CAAC,IAAIO,MAAM,CAAE,GAAEL,QAAS,SAAQ,CAAC,CAACM,IAAI,CAACC,MAAM,CAACb,SAAS,CAAC,CAAC,IAAIM,QAO/D,CAAC;EAED,IAAAQ,sCAAqB,EAAC,IAAI,EAAET,UAAU,CAAC;EAEvC,IAAAU,qCAAqB,EAACV,UAAU,EAAEN,QAAQ,EAAEJ,OAAO,CAAC;EAEpD,IAAI,OAAOS,GAAG,KAAK,UAAU,IAAIX,QAAQ,EAAE;IACzCY,UAAU,CAACf,GAAG,GAAGG,QAAQ;EAC3B;EAEA,OAAO7C,MAAA,CAAAW,OAAA,CAAAgC,aAAA,CAACa,GAAG,EAAA3B,QAAA;IAACuB,SAAS,EAAEO;EAAkB,GAAKF,UAAU,CAAG,CAAC;AAC9D;AAAC,IAAAW,QAAA,GAEc9B,OAAO;AAAAD,OAAA,CAAA1B,OAAA,GAAAyD,QAAA"}
+{"version":3,"file":"Element.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_SpacingHelper","_SkeletonHelper","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_extends","assign","bind","arguments","hasOwnProperty","apply","defaultProps","skeletonMethod","exports","Element","React","forwardRef","props","ref","createElement","ElementInstance","innerRef","localProps","context","useContext","Context","extendPropsWithContext","skeleton","className","internalClass","as","rest","Tag","attributes","tagClass","internalClassName","classnames","createSkeletonClass","createSpacingClasses","RegExp","test","String","validateDOMAttributes","skeletonDOMAttributes","_default"],"sources":["../../../src/elements/Element.tsx"],"sourcesContent":["/**\n * This is mainly a Wrapper, to build more easily HTML Elements\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../shared/Context'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../shared/component-helper'\nimport { createSpacingClasses } from '../components/space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n  SkeletonMethods,\n} from '../components/skeleton/SkeletonHelper'\nimport type { SkeletonShow } from '../components/skeleton/Skeleton'\n\nimport type { DynamicElement, SpacingProps } from '../shared/types'\n\nexport type ElementInternalProps = {\n  /**\n   * Defines the Element Type, like \"div\"\n   */\n  as: DynamicElement<unknown>\n}\n\nexport type ElementProps = {\n  skeleton?: SkeletonShow\n  skeletonMethod?: SkeletonMethods\n  internalClass?: string\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n  children?: React.ReactNode\n} & SpacingProps\n\nexport type ElementAllProps = ElementProps &\n  ElementInternalProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'as'>\n\ntype Attributes = Record<string, unknown>\n\nexport const defaultProps = {\n  skeletonMethod: 'font',\n}\n\nconst Element = React.forwardRef((props: ElementAllProps, ref) => {\n  return <ElementInstance innerRef={ref} {...props} />\n})\n\nfunction ElementInstance(localProps: ElementAllProps) {\n  const context = React.useContext(Context)\n  const props = extendPropsWithContext(localProps, defaultProps, {\n    skeleton: context?.skeleton,\n  })\n\n  const {\n    className,\n    internalClass,\n    as,\n    innerRef,\n    skeleton,\n    skeletonMethod,\n    ...rest\n  } = props\n\n  const Tag = as\n  const attributes = rest as Attributes\n\n  const tagClass =\n    internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '')\n  const internalClassName = classnames(\n    !new RegExp(`${tagClass}(\\\\s|$)`).test(String(className)) && tagClass,\n    className,\n    createSkeletonClass(skeletonMethod, skeleton, context),\n    createSpacingClasses(\n      attributes,\n      typeof Tag === 'string' ? `dnb-${Tag}` : null\n    )\n  )\n\n  validateDOMAttributes(null, attributes)\n\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (typeof Tag !== 'function' && innerRef) {\n    attributes.ref = innerRef\n  }\n\n  return <Tag className={internalClassName} {...attributes} />\n}\n\nexport default Element\n"],"mappings":"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"}

package/cjs/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -2,6 +2,7 @@
 
 .dnb-blockquote {
   --blockquote-padding-top: 1.5rem;
+  --blockquote-padding-bottom: 2rem;
   --blockquote-quote-padding: 5.5rem;
   --blockquote-cite-style: normal;
 

package/cjs/elements/code/style/themes/dnb-code-theme-sbanken.scss

@@ -1,8 +1,10 @@
 .dnb-code {
-  font-family: var(--sb-font-family-default);
+  padding: calc(0.25em / 0.875);
+  font-size: 0.875em;
+  line-height: calc(var(--line-height-xx-small--em) / 0.875);
   background-color: var(--sb-color-blue-light-3);
-
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 0.0625rem var(--sb-color-blue-light-2);
 }
 
 .dnb-pre {