@helsenorge/designsystem-react 15.7.1 → 16.0.0

package/lib/Button.js

@@ -26,7 +26,7 @@ var checkOnlyIconAria = (onlyIcon, ariaLabel, devEnv) => {
 	if (devEnv && onlyIcon && (ariaLabel === void 0 || ariaLabel === "")) console.error(/* @__PURE__ */ new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav"));
 };
 var Button = (props) => {
-	const { ariaLabel, id, children, wrapperClassName, className, arrow, concept = "normal", disabled = false, ellipsis = false, fluid = false, htmlMarkup = "button", onColor = "onlight", onBlur, onClick, size = "medium", variant = "fill", href, tabIndex, testId, target, type = "button", textClassName, textPosition = "left", ref, ...restProps } = props;
+	const { ariaLabel, id, children, wrapperClassName, className, arrow, concept = "normal", disabled = false, ellipsis = false, fluid = false, htmlMarkup = "button", onColor = "onlight", onBlur, onClick, size = "normal", variant = "fill", href, tabIndex, testId, target, type = "button", textClassName, textPosition = "left", ref, ...restProps } = props;
 	const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));
 	const { refObject, isHovered } = usePseudoClasses(ref);
 	const buttonContentRef = useRef(null);
@@ -46,7 +46,7 @@ var Button = (props) => {
 	const buttonWrapperClasses = classNames(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
 	const buttonClasses = classNames(buttonStyles.button, {
 		[buttonStyles["button--destructive"]]: destructive,
-		[buttonStyles["button--medium"]]: !large,
+		[buttonStyles["button--normal"]]: !large,
 		[buttonStyles["button--large-non-borderless"]]: large && !largeBorderless,
 		[buttonStyles["button--large-borderless"]]: largeBorderless,
 		[buttonStyles["button--outline"]]: outlineVariant,

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  /** Ref that is passed to the component */\n  ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n  if ((isBorderless && large) || (mobile && large)) {\n    return IconSize.Small;\n  }\n\n  if (large) {\n    return IconSize.Medium;\n  }\n\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    // eslint-disable-next-line no-console\n    console.error(new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav'));\n  }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ref,\n    ...restProps\n  } = props;\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(ref);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive;\n  const largeBorderless = large && borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--medium']]: !large,\n      [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n      [buttonStyles['button--large-borderless']]: largeBorderless,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): React.ReactNode => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): React.ReactNode => {\n    const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n    return (\n      <span className={buttonClasses}>\n        {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n        {renderButtonContent()}\n        {hasArrow\n          ? renderIcon(\n              <Icon svgIcon={ArrowRight} />,\n              iconSize,\n              classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n            )\n          : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n        {hasUURightArrow && (\n          <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n            {'  →'}\n          </span>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.RefObject<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'normal' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  /** Ref that is passed to the component */\n  ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n  if ((isBorderless && large) || (mobile && large)) {\n    return IconSize.Small;\n  }\n\n  if (large) {\n    return IconSize.Medium;\n  }\n\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    // eslint-disable-next-line no-console\n    console.error(new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav'));\n  }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'normal',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ref,\n    ...restProps\n  } = props;\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(ref);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive;\n  const largeBorderless = large && borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n      [buttonStyles['button--large-borderless']]: largeBorderless,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): React.ReactNode => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): React.ReactNode => {\n    const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n    return (\n      <span className={buttonClasses}>\n        {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n        {renderButtonContent()}\n        {hasArrow\n          ? renderIcon(\n              <Icon svgIcon={ArrowRight} />,\n              iconSize,\n              classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n            )\n          : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n        {hasUURightArrow && (\n          <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n            {'  →'}\n          </span>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.RefObject<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}