@entur/button 3.4.1 → 4.0.0-beta-automat.0

package/dist/SecondarySquareButton.d.ts

@@ -5,6 +5,10 @@ type SecondarySquareButtonBaseProps = {
     children: React.ReactNode;
     /** Ekstra klassenavn */
     className?: string;
+    /** Størrelsen på knappen
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
     /** Deaktivering av knappen
      * @default false
      */

package/dist/SquareButton.d.ts

@@ -1,12 +1,18 @@
 import { PolymorphicComponentPropsWithRef } from '../../utils';
 import * as React from 'react';
+/** @deprecated use variant="secondary" with size="small" instead */
+declare const tertiary = "tertiary";
 export type SquareButtonBaseProps = {
     /** Tekst og ikon */
     children: React.ReactNode;
     /** Ekstra klassenavn */
     className?: string;
-    /** En type knapp */
-    variant?: 'success' | 'secondary' | 'tertiary';
+    /** Knappens uttrykk */
+    variant?: 'success' | 'secondary' | typeof tertiary;
+    /** Størrelsen på knappen
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
     /** Deaktivering av knappen
      * @default false
      */

package/dist/SuccessSquareButton.d.ts

@@ -5,6 +5,10 @@ type SuccessSquareButtonBaseProps = {
     children: React.ReactNode;
     /** Ekstra klassenavn */
     className?: string;
+    /** Størrelsen på knappen
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
     /** Deaktivering av knappen
      * @default false
      */

package/dist/TertiarySquareButton.d.ts

@@ -19,5 +19,6 @@ type TertiarySquareButtonBaseProps = {
 export type TertiarySquareButtonProps<T extends React.ElementType> = PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;
 export type TertiarySquareButtonComponent = <T extends React.ElementType = typeof defaultElement>(props: TertiarySquareButtonProps<T>) => React.ReactElement | null;
 declare const defaultElement = "button";
+/** @deprecated use SecondarySquareButton with size="small" instead */
 export declare const TertiarySquareButton: TertiarySquareButtonComponent;
 export {};

package/dist/button.cjs.js

@@ -157,6 +157,7 @@ const SquareButton = React__namespace.forwardRef(
     disabled = false,
     loading = false,
     variant = "secondary",
+    size = "medium",
     ...rest
   }, ref) => {
     const Element = as || defaultElement$3;
@@ -167,7 +168,9 @@ const SquareButton = React__namespace.forwardRef(
           "eds-square-button",
           `eds-square-button--${variant}`,
           {
-            "eds-square-button--loading": loading
+            "eds-square-button--loading": loading,
+            // Untill TertiarySquareButton is deleted we need to exclude it manually
+            [`eds-square-button--size-${size}`]: variant !== "tertiary"
           },
           className
         ),

package/dist/button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n  /** Farge og uttrykk på knappen */\n  variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n  /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n   * @default \"button\"\n   */\n  as?: string | React.ElementType;\n  /**\n   * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n   */\n  'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      variant = 'primary',\n      size = 'medium',\n      loading,\n      className,\n      disabled = false,\n      width = 'auto',\n      'aria-label': ariaLabel,\n      ...rest\n    }: ButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const ariaLabelValue = () => {\n      if (ariaLabel) return ariaLabel;\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    return (\n      <Element\n        className={cx(\n          'eds-button',\n          {\n            [`eds-button--variant-${variant}`]: variant,\n            [`eds-button--size-${size}`]: size,\n            'eds-button--width-fluid': width === 'fluid',\n            'eds-button--loading': loading,\n            'eds-button--leading-icon': hasLeadingIcon,\n            'eds-button--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-label={ariaLabelValue()}\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-button__loading-dots\" />\n        ) : (\n          children\n        )}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: PrimaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SecondaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SuccessButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NegativeButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: TertiaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    return (\n      <Button\n        as={Element}\n        {...props}\n        ref={ref}\n        variant=\"tertiary\"\n        size=\"small\"\n      />\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n  /** To eller flere Button-komponenter */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** HTML-elementet eller React-komponenten som lages\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n  as: Element = 'div',\n  className,\n  ...rest\n}) => {\n  return (\n    <Element className={classNames('eds-button-group', className)} {...rest} />\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n  /** Beskrivende tekst for skjermlesere */\n  'aria-label': string;\n  /** Ikon eller ikon-og-tekst */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback når knappen klikkes */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Størrelse på knappen\n   * @default \"medium\"\n   */\n  size?: 'medium' | 'small';\n  [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n  className,\n  children,\n  size = 'medium',\n  ...rest\n}) => {\n  return (\n    <button\n      className={classNames(\n        'eds-floating-button',\n        { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n        { 'eds-floating-button--small': size === 'small' },\n        className,\n      )}\n      type=\"button\"\n      {...rest}\n    >\n      {wrapStringsInSpans(children)}\n    </button>\n  );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n  React.Children.map(children, child =>\n    typeof child === 'string' ? <span>{child}</span> : child,\n  );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\nexport type SquareButtonBaseProps = {\n  /** Tekst og ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En type knapp */\n  variant?: 'success' | 'secondary' | 'tertiary';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      loading = false,\n      variant = 'secondary',\n      ...rest\n    }: SquareButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    return (\n      <Element\n        className={classNames(\n          'eds-square-button',\n          `eds-square-button--${variant}`,\n          {\n            'eds-square-button--loading': loading,\n          },\n          className,\n        )}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {React.Children.map(children, child => {\n          if (typeof child === 'string') {\n            return <span className=\"eds-square-button__label\">{child}</span>;\n          }\n          return (\n            <span className=\"eds-square-button__button\">\n              {loading ? (\n                <LoadingDots className=\"eds-square-button__loading-dots\" />\n              ) : (\n                child\n              )}\n            </span>\n          );\n        })}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SecondarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SuccessSquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: TertiarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n      // @ts-expect-error TS error seems to stem from how the props are built up\n    ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n  );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n  /** Ikonet som du vil ha inne i knappen */\n  children: React.ReactNode;\n  /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n  'aria-label'?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager knappen\n   * @default 'button'\n   */\n  as?: React.ElementType;\n  /**Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      disabled = false,\n      size = 'medium',\n      as,\n      loading,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const IconWithAriaHidden = React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        // @ts-expect-error aria-hidden does, in fact, exist\n        return React.cloneElement(child, { 'aria-hidden': true });\n      }\n      return child;\n    });\n\n    const iconButtonElement = (\n      <Element\n        className={classNames(\n          'eds-icon-button',\n          className,\n          {\n            'eds-icon-button--disabled': disabled,\n          },\n          `eds-icon-button--size-${size}`,\n        )}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-busy={loading}\n        ref={ref}\n        {...rest}\n      >\n        {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n      </Element>\n    );\n\n    if (disabled) {\n      return (\n        <div className=\"eds-icon-button--disabled__wrapper\">\n          {iconButtonElement}\n        </div>\n      );\n    }\n    return <>{iconButtonElement}</>;\n  },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","React","jsx","cx","LoadingDots","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"button.cjs.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n  /** Farge og uttrykk på knappen */\n  variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n  /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n   * @default \"button\"\n   */\n  as?: string | React.ElementType;\n  /**\n   * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n   */\n  'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      variant = 'primary',\n      size = 'medium',\n      loading,\n      className,\n      disabled = false,\n      width = 'auto',\n      'aria-label': ariaLabel,\n      ...rest\n    }: ButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const ariaLabelValue = () => {\n      if (ariaLabel) return ariaLabel;\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    return (\n      <Element\n        className={cx(\n          'eds-button',\n          {\n            [`eds-button--variant-${variant}`]: variant,\n            [`eds-button--size-${size}`]: size,\n            'eds-button--width-fluid': width === 'fluid',\n            'eds-button--loading': loading,\n            'eds-button--leading-icon': hasLeadingIcon,\n            'eds-button--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-label={ariaLabelValue()}\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-button__loading-dots\" />\n        ) : (\n          children\n        )}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: PrimaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SecondaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SuccessButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NegativeButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: TertiaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    return (\n      <Button\n        as={Element}\n        {...props}\n        ref={ref}\n        variant=\"tertiary\"\n        size=\"small\"\n      />\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n  /** To eller flere Button-komponenter */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** HTML-elementet eller React-komponenten som lages\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n  as: Element = 'div',\n  className,\n  ...rest\n}) => {\n  return (\n    <Element className={classNames('eds-button-group', className)} {...rest} />\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n  /** Beskrivende tekst for skjermlesere */\n  'aria-label': string;\n  /** Ikon eller ikon-og-tekst */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback når knappen klikkes */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Størrelse på knappen\n   * @default \"medium\"\n   */\n  size?: 'medium' | 'small';\n  [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n  className,\n  children,\n  size = 'medium',\n  ...rest\n}) => {\n  return (\n    <button\n      className={classNames(\n        'eds-floating-button',\n        { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n        { 'eds-floating-button--small': size === 'small' },\n        className,\n      )}\n      type=\"button\"\n      {...rest}\n    >\n      {wrapStringsInSpans(children)}\n    </button>\n  );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n  React.Children.map(children, child =>\n    typeof child === 'string' ? <span>{child}</span> : child,\n  );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\n/** @deprecated use variant=\"secondary\" with size=\"small\" instead */\nconst tertiary = 'tertiary';\n\nexport type SquareButtonBaseProps = {\n  /** Tekst og ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Knappens uttrykk */\n  variant?: 'success' | 'secondary' | typeof tertiary;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      loading = false,\n      variant = 'secondary',\n      size = 'medium',\n      ...rest\n    }: SquareButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    return (\n      <Element\n        className={classNames(\n          'eds-square-button',\n          `eds-square-button--${variant}`,\n          {\n            'eds-square-button--loading': loading,\n            // Untill TertiarySquareButton is deleted we need to exclude it manually\n            [`eds-square-button--size-${size}`]: variant !== 'tertiary',\n          },\n          className,\n        )}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {React.Children.map(children, child => {\n          if (typeof child === 'string') {\n            return <span className=\"eds-square-button__label\">{child}</span>;\n          }\n          return (\n            <span className=\"eds-square-button__button\">\n              {loading ? (\n                <LoadingDots className=\"eds-square-button__loading-dots\" />\n              ) : (\n                child\n              )}\n            </span>\n          );\n        })}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SecondarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SuccessSquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondarySquareButton with size=\"small\" instead */\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: TertiarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n      // @ts-expect-error TS error seems to stem from how the props are built up\n    ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n  );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n  /** Ikonet som du vil ha inne i knappen */\n  children: React.ReactNode;\n  /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n  'aria-label'?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager knappen\n   * @default 'button'\n   */\n  as?: React.ElementType;\n  /**Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      disabled = false,\n      size = 'medium',\n      as,\n      loading,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const IconWithAriaHidden = React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        // @ts-expect-error aria-hidden does, in fact, exist\n        return React.cloneElement(child, { 'aria-hidden': true });\n      }\n      return child;\n    });\n\n    const iconButtonElement = (\n      <Element\n        className={classNames(\n          'eds-icon-button',\n          className,\n          {\n            'eds-icon-button--disabled': disabled,\n          },\n          `eds-icon-button--size-${size}`,\n        )}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-busy={loading}\n        ref={ref}\n        {...rest}\n      >\n        {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n      </Element>\n    );\n\n    if (disabled) {\n      return (\n        <div className=\"eds-icon-button--disabled__wrapper\">\n          {iconButtonElement}\n        </div>\n      );\n    }\n    return <>{iconButtonElement}</>;\n  },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","React","jsx","cx","LoadingDots","warnAboutMissingStyles"],"mappings":"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"}

package/dist/button.esm.js

@@ -139,6 +139,7 @@ const SquareButton = React.forwardRef(
     disabled = false,
     loading = false,
     variant = "secondary",
+    size = "medium",
     ...rest
   }, ref) => {
     const Element = as || defaultElement$3;
@@ -149,7 +150,9 @@ const SquareButton = React.forwardRef(
           "eds-square-button",
           `eds-square-button--${variant}`,
           {
-            "eds-square-button--loading": loading
+            "eds-square-button--loading": loading,
+            // Untill TertiarySquareButton is deleted we need to exclude it manually
+            [`eds-square-button--size-${size}`]: variant !== "tertiary"
           },
           className
         ),

package/dist/button.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.esm.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n  /** Farge og uttrykk på knappen */\n  variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n  /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n   * @default \"button\"\n   */\n  as?: string | React.ElementType;\n  /**\n   * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n   */\n  'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      variant = 'primary',\n      size = 'medium',\n      loading,\n      className,\n      disabled = false,\n      width = 'auto',\n      'aria-label': ariaLabel,\n      ...rest\n    }: ButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const ariaLabelValue = () => {\n      if (ariaLabel) return ariaLabel;\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    return (\n      <Element\n        className={cx(\n          'eds-button',\n          {\n            [`eds-button--variant-${variant}`]: variant,\n            [`eds-button--size-${size}`]: size,\n            'eds-button--width-fluid': width === 'fluid',\n            'eds-button--loading': loading,\n            'eds-button--leading-icon': hasLeadingIcon,\n            'eds-button--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-label={ariaLabelValue()}\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-button__loading-dots\" />\n        ) : (\n          children\n        )}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: PrimaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SecondaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SuccessButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NegativeButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: TertiaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    return (\n      <Button\n        as={Element}\n        {...props}\n        ref={ref}\n        variant=\"tertiary\"\n        size=\"small\"\n      />\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n  /** To eller flere Button-komponenter */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** HTML-elementet eller React-komponenten som lages\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n  as: Element = 'div',\n  className,\n  ...rest\n}) => {\n  return (\n    <Element className={classNames('eds-button-group', className)} {...rest} />\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n  /** Beskrivende tekst for skjermlesere */\n  'aria-label': string;\n  /** Ikon eller ikon-og-tekst */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback når knappen klikkes */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Størrelse på knappen\n   * @default \"medium\"\n   */\n  size?: 'medium' | 'small';\n  [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n  className,\n  children,\n  size = 'medium',\n  ...rest\n}) => {\n  return (\n    <button\n      className={classNames(\n        'eds-floating-button',\n        { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n        { 'eds-floating-button--small': size === 'small' },\n        className,\n      )}\n      type=\"button\"\n      {...rest}\n    >\n      {wrapStringsInSpans(children)}\n    </button>\n  );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n  React.Children.map(children, child =>\n    typeof child === 'string' ? <span>{child}</span> : child,\n  );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\nexport type SquareButtonBaseProps = {\n  /** Tekst og ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En type knapp */\n  variant?: 'success' | 'secondary' | 'tertiary';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      loading = false,\n      variant = 'secondary',\n      ...rest\n    }: SquareButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    return (\n      <Element\n        className={classNames(\n          'eds-square-button',\n          `eds-square-button--${variant}`,\n          {\n            'eds-square-button--loading': loading,\n          },\n          className,\n        )}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {React.Children.map(children, child => {\n          if (typeof child === 'string') {\n            return <span className=\"eds-square-button__label\">{child}</span>;\n          }\n          return (\n            <span className=\"eds-square-button__button\">\n              {loading ? (\n                <LoadingDots className=\"eds-square-button__loading-dots\" />\n              ) : (\n                child\n              )}\n            </span>\n          );\n        })}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SecondarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SuccessSquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: TertiarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n      // @ts-expect-error TS error seems to stem from how the props are built up\n    ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n  );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n  /** Ikonet som du vil ha inne i knappen */\n  children: React.ReactNode;\n  /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n  'aria-label'?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager knappen\n   * @default 'button'\n   */\n  as?: React.ElementType;\n  /**Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      disabled = false,\n      size = 'medium',\n      as,\n      loading,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const IconWithAriaHidden = React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        // @ts-expect-error aria-hidden does, in fact, exist\n        return React.cloneElement(child, { 'aria-hidden': true });\n      }\n      return child;\n    });\n\n    const iconButtonElement = (\n      <Element\n        className={classNames(\n          'eds-icon-button',\n          className,\n          {\n            'eds-icon-button--disabled': disabled,\n          },\n          `eds-icon-button--size-${size}`,\n        )}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-busy={loading}\n        ref={ref}\n        {...rest}\n      >\n        {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n      </Element>\n    );\n\n    if (disabled) {\n      return (\n        <div className=\"eds-icon-button--disabled__wrapper\">\n          {iconButtonElement}\n        </div>\n      );\n    }\n    return <>{iconButtonElement}</>;\n  },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","cx","React"],"mappings":"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"}
+{"version":3,"file":"button.esm.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n  /** Farge og uttrykk på knappen */\n  variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n  /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n   * @default \"button\"\n   */\n  as?: string | React.ElementType;\n  /**\n   * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n   */\n  'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      variant = 'primary',\n      size = 'medium',\n      loading,\n      className,\n      disabled = false,\n      width = 'auto',\n      'aria-label': ariaLabel,\n      ...rest\n    }: ButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    const childrenArray = React.Children.toArray(children);\n    const hasLeadingIcon =\n      childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n    const hasTrailingIcon =\n      childrenArray.length > 1 &&\n      typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n    const ariaLabelWhenLoading = childrenArray\n      .filter(child => typeof child === 'string')\n      .join(' ');\n\n    const ariaLabelValue = () => {\n      if (ariaLabel) return ariaLabel;\n      if (loading) return ariaLabelWhenLoading;\n      return undefined;\n    };\n\n    return (\n      <Element\n        className={cx(\n          'eds-button',\n          {\n            [`eds-button--variant-${variant}`]: variant,\n            [`eds-button--size-${size}`]: size,\n            'eds-button--width-fluid': width === 'fluid',\n            'eds-button--loading': loading,\n            'eds-button--leading-icon': hasLeadingIcon,\n            'eds-button--trailing-icon': hasTrailingIcon,\n          },\n          className,\n        )}\n        ref={ref}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-label={ariaLabelValue()}\n        {...rest}\n      >\n        {loading ? (\n          <LoadingDots className=\"eds-button__loading-dots\" />\n        ) : (\n          children\n        )}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: PrimaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SecondaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: SuccessButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NegativeButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BaseButtonProps\n    return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n  },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Bredden på knappen.\n   * @default 'auto'\n   */\n  width?: 'fluid' | 'auto';\n  /** Innholdet i knappen */\n  children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: TertiaryButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = props.as || defaultElement;\n    return (\n      <Button\n        as={Element}\n        {...props}\n        ref={ref}\n        variant=\"tertiary\"\n        size=\"small\"\n      />\n    );\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n  /** To eller flere Button-komponenter */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** HTML-elementet eller React-komponenten som lages\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n  as: Element = 'div',\n  className,\n  ...rest\n}) => {\n  return (\n    <Element className={classNames('eds-button-group', className)} {...rest} />\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n  /** Beskrivende tekst for skjermlesere */\n  'aria-label': string;\n  /** Ikon eller ikon-og-tekst */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Callback når knappen klikkes */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Størrelse på knappen\n   * @default \"medium\"\n   */\n  size?: 'medium' | 'small';\n  [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n  className,\n  children,\n  size = 'medium',\n  ...rest\n}) => {\n  return (\n    <button\n      className={classNames(\n        'eds-floating-button',\n        { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n        { 'eds-floating-button--small': size === 'small' },\n        className,\n      )}\n      type=\"button\"\n      {...rest}\n    >\n      {wrapStringsInSpans(children)}\n    </button>\n  );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n  React.Children.map(children, child =>\n    typeof child === 'string' ? <span>{child}</span> : child,\n  );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\n/** @deprecated use variant=\"secondary\" with size=\"small\" instead */\nconst tertiary = 'tertiary';\n\nexport type SquareButtonBaseProps = {\n  /** Tekst og ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Knappens uttrykk */\n  variant?: 'success' | 'secondary' | typeof tertiary;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      loading = false,\n      variant = 'secondary',\n      size = 'medium',\n      ...rest\n    }: SquareButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n    return (\n      <Element\n        className={classNames(\n          'eds-square-button',\n          `eds-square-button--${variant}`,\n          {\n            'eds-square-button--loading': loading,\n            // Untill TertiarySquareButton is deleted we need to exclude it manually\n            [`eds-square-button--size-${size}`]: variant !== 'tertiary',\n          },\n          className,\n        )}\n        aria-busy={loading}\n        disabled={disabled}\n        aria-disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {React.Children.map(children, child => {\n          if (typeof child === 'string') {\n            return <span className=\"eds-square-button__label\">{child}</span>;\n          }\n          return (\n            <span className=\"eds-square-button__button\">\n              {loading ? (\n                <LoadingDots className=\"eds-square-button__loading-dots\" />\n              ) : (\n                child\n              )}\n            </span>\n          );\n        })}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SecondarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: SuccessSquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n    ) => {\n      const Element: React.ElementType = props.as || defaultElement;\n      return (\n        // @ts-expect-error type error due to props not being BaseButtonProps\n        <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n      );\n    },\n  );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n  /** Tekst og ikon, ikon og tekst, eller bare ikon */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n  /** DOM-elementet knappen rendres som */\n  as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondarySquareButton with size=\"small\" instead */\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n  React.forwardRef(\n    <T extends React.ElementType = typeof defaultElement>(\n      props: TertiarySquareButtonProps<T>,\n      ref: PolymorphicRef<T>,\n      // @ts-expect-error TS error seems to stem from how the props are built up\n    ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n  );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n  /** Ikonet som du vil ha inne i knappen */\n  children: React.ReactNode;\n  /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n  'aria-label'?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Deaktivering av knappen\n   * @default false\n   */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager knappen\n   * @default 'button'\n   */\n  as?: React.ElementType;\n  /**Størrelsen på knappen\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n   * @default false\n   */\n  loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      disabled = false,\n      size = 'medium',\n      as,\n      loading,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const IconWithAriaHidden = React.Children.map(children, child => {\n      if (React.isValidElement(child)) {\n        // @ts-expect-error aria-hidden does, in fact, exist\n        return React.cloneElement(child, { 'aria-hidden': true });\n      }\n      return child;\n    });\n\n    const iconButtonElement = (\n      <Element\n        className={classNames(\n          'eds-icon-button',\n          className,\n          {\n            'eds-icon-button--disabled': disabled,\n          },\n          `eds-icon-button--size-${size}`,\n        )}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-busy={loading}\n        ref={ref}\n        {...rest}\n      >\n        {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n      </Element>\n    );\n\n    if (disabled) {\n      return (\n        <div className=\"eds-icon-button--disabled__wrapper\">\n          {iconButtonElement}\n        </div>\n      );\n    }\n    return <>{iconButtonElement}</>;\n  },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","cx","React"],"mappings":";;;;;;AA0CA,MAAMA,mBAAiB;AAWhB,MAAM,SAA0B,MAAM;AAAA,EAC3C,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAMA;AACzC,UAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,iBACJ,cAAc,SAAS,KAAK,OAAO,cAAc,CAAC,MAAM;AAC1D,UAAM,kBACJ,cAAc,SAAS,KACvB,OAAO,cAAc,cAAc,SAAS,CAAC,MAAM;AAErD,UAAM,uBAAuB,cAC1B,OAAO,CAAA,UAAS,OAAO,UAAU,QAAQ,EACzC,KAAK,GAAG;AAEX,UAAM,iBAAiB,MAAM;AAC3B,UAAI,UAAW,QAAO;AACtB,UAAI,QAAS,QAAO;AACpB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAAA,UACT;AAAA,UACA;AAAA,YACE,CAAC,uBAAuB,OAAO,EAAE,GAAG;AAAA,YACpC,CAAC,oBAAoB,IAAI,EAAE,GAAG;AAAA,YAC9B,2BAA2B,UAAU;AAAA,YACrC,uBAAuB;AAAA,YACvB,4BAA4B;AAAA,YAC5B,6BAA6B;AAAA,UAAA;AAAA,UAE/B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,eAAA;AAAA,QACX,GAAG;AAAA,QAEH,UAAA,UACC,oBAAC,aAAA,EAAY,WAAU,4BAA2B,IAElD;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AChFA,MAAMD,mBAAiB;AAEhB,MAAM,gBAAwCE,eAAM;AAAA,EACzD,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,WAAU;AAAA,EACrE;AACF;ACXA,MAAMA,mBAAiB;AAEhB,MAAM,kBAA4CE,eAAM;AAAA,EAC7D,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,aAAY;AAAA,EACvE;AACF;ACXA,MAAMA,mBAAiB;AAEhB,MAAM,gBAAwCE,eAAM;AAAA,EACzD,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,WAAU;AAAA,EACrE;AACF;ACXA,MAAMA,mBAAiB;AAEhB,MAAM,iBAA0CE,eAAM;AAAA,EAC3D,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,YAAW;AAAA,EACtE;AACF;ACXA,MAAMA,mBAAiB;AAGhB,MAAM,iBAA0CE,eAAM;AAAA,EAC3D,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAC/C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACH,GAAG;AAAA,QACJ;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF;ACvCO,MAAM,cAA0C,CAAC;AAAA,EACtD,IAAI,UAAU;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,WAAQ,WAAW,WAAW,oBAAoB,SAAS,GAAI,GAAG,MAAM;AAE7E;ACJO,MAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCE,eAAM,SAAS,MAAM,QAAQ,IAAI,EAAA;AAAA,QACpE,EAAE,8BAA8B,SAAS,QAAA;AAAA,QACzC;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH,6BAAmB,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,MAAM,qBAAqB,CAAC,aAC1BA,eAAM,SAAS;AAAA,EAAI;AAAA,EAAU,WAC3B,OAAO,UAAU,WAAW,oBAAC,QAAA,EAAM,iBAAM,IAAU;AACrD;ACJF,MAAMF,mBAAiB;AAEhB,MAAM,eAAsC,MAAM;AAAA,EACvD,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAMA;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,OAAO;AAAA,UAC7B;AAAA,YACE,8BAA8B;AAAA;AAAA,YAE9B,CAAC,2BAA2B,IAAI,EAAE,GAAG,YAAY;AAAA,UAAA;AAAA,UAEnD;AAAA,QAAA;AAAA,QAEF,aAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH,UAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS;AACrC,cAAI,OAAO,UAAU,UAAU;AAC7B,mBAAO,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,OAAM;AAAA,UAC3D;AACA,iBACE,oBAAC,QAAA,EAAK,WAAU,6BACb,UAAA,8BACE,aAAA,EAAY,WAAU,kCAAA,CAAkC,IAEzD,MAAA,CAEJ;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AC7DA,MAAMA,mBAAiB;AAEhB,MAAM,wBACXE,eAAM;AAAA,EACJ,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAC/C;AAAA;AAAA,MAEE,oBAAC,gBAAa,IAAI,SAAS,KAAW,GAAG,OAAO,SAAQ,YAAA,CAAY;AAAA;AAAA,EAExE;AACF;ACdF,MAAMA,mBAAiB;AAEhB,MAAM,sBACXE,eAAM;AAAA,EACJ,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAC/C;AAAA;AAAA,MAEE,oBAAC,gBAAa,IAAI,SAAS,KAAW,GAAG,OAAO,SAAQ,UAAA,CAAU;AAAA;AAAA,EAEtE;AACF;ACbK,MAAM,uBACXE,eAAM;AAAA,EACJ,CACE,OACA,QAEG,oBAAC,gBAAa,KAAW,GAAG,OAAO,SAAQ,WAAA,CAAW;AAC7D;ACTF,MAAM,iBAAiB;AAWhB,MAAM,aAAkCA,eAAM;AAAA,EACnD,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAM;AAEzC,UAAM,qBAAqBA,eAAM,SAAS,IAAI,UAAU,CAAA,UAAS;AAC/D,UAAIA,eAAM,eAAe,KAAK,GAAG;AAE/B,eAAOA,eAAM,aAAa,OAAO,EAAE,eAAe,MAAM;AAAA,MAC1D;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,oBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,YACE,6BAA6B;AAAA,UAAA;AAAA,UAE/B,yBAAyB,IAAI;AAAA,QAAA;AAAA,QAE/B;AAAA,QACA,iBAAe;AAAA,QACf,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH,UAAA,UAAU,oBAAC,aAAA,CAAA,CAAY,oCAAQ,UAAA,mBAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAIvD,QAAI,UAAU;AACZ,aACE,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,mBACH;AAAA,IAEJ;AACA,2CAAU,UAAA,kBAAA,CAAkB;AAAA,EAC9B;AACF;AC3FA,uBAAuB,QAAQ;"}

package/dist/styles.css

@@ -372,6 +372,7 @@
   --basecolors-text-disabled:#6e6f73;
   --basecolors-text-disabledalt:#b6b8ba;
   --basecolors-text-highlight:#ff5959;
+  --basecolors-text-highlightalt:#ffbf9e;
   --basecolors-text-light:#ffffff;
   --basecolors-text-subdued:#626493;
   --basecolors-text-subduedalt:#d9dae8;
@@ -438,45 +439,178 @@
   --basecolors-text-disabled:#b6b8ba;
   --basecolors-text-disabledalt:#b6b8ba;
   --basecolors-text-highlight:#ff9494;
+  --basecolors-text-highlightalt:#ffbf9e;
   --basecolors-text-light:#e5e5e9;
   --basecolors-text-subdued:#b3b4bd;
   --basecolors-text-subduedalt:#b3b4bd;
 }
+/*
+ * Typography Display Modes
+ * 
+ * This system allows you to control typography scaling based on view size.
+ * Use the vie-mode attribute to switch between different typography scales:
+ * 
+ * - Compact: [data-view-mode='compact'] or no attribute (responsive)
+ * - Display: [data-view-mode='display'] for big screens, kiosks, etc.
+ * 
+ * Usage:
+ * <html data-view-mode="display"> or <div data-view-mode="display">
+ * 
+ * The system automatically handles responsive behavior within each mode.
+ */
+:root,
+[data-view-mode=standard]{
+  /* number */
+  --font-line-height-body-xs:var(--size-8);
+  --font-line-height-body-s:var(--size-9);
+  --font-line-height-body-m:var(--size-10);
+  --font-line-height-body-lg:var(--size-11);
+  --font-line-height-body-xl:var(--size-12);
+  --font-line-height-heading-xs:var(--size-8);
+  --font-line-height-heading-s:var(--size-9);
+  --font-line-height-heading-m:var(--size-10);
+  --font-line-height-heading-lg:var(--size-11);
+  --font-line-height-heading-xl:var(--size-13);
+  --font-line-height-heading-2xl:var(--size-15);
+  --font-line-height-label-s:var(--size-8);
+  --font-line-height-label-m:var(--size-9);
+  --font-line-height-label-lg:var(--size-10);
+  --font-paragraph-spacing-body-xs:var(--size-5);
+  --font-paragraph-spacing-body-s:var(--size-6);
+  --font-paragraph-spacing-body-m:var(--size-8);
+  --font-paragraph-spacing-body-lg:var(--size-10);
+  --font-paragraph-spacing-body-xl:var(--size-10);
+  --font-paragraph-spacing-heading-xs:var(--size-5);
+  --font-paragraph-spacing-heading-m:var(--size-6);
+  --font-paragraph-spacing-heading-s:var(--size-6);
+  --font-paragraph-spacing-heading-lg:var(--size-8);
+  --font-paragraph-spacing-heading-xl:var(--size-9);
+  --font-paragraph-spacing-heading-2xl:var(--size-10);
+  --font-size-body-xs:var(--size-6);
+  --font-size-body-s:var(--size-7);
+  --font-size-body-m:var(--size-8);
+  --font-size-body-lg:var(--size-9);
+  --font-size-body-xl:var(--size-10);
+  --font-size-heading-xs:var(--size-7);
+  --font-size-heading-s:var(--size-8);
+  --font-size-heading-m:var(--size-9);
+  --font-size-heading-lg:var(--size-10);
+  --font-size-heading-xl:var(--size-12);
+  --font-size-heading-2xl:var(--size-14);
+  --font-size-label-s:var(--size-7);
+  --font-size-label-m:var(--size-8);
+  --font-size-label-lg:var(--size-9);
+  /* string */
+  --font-family-nationale:nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
+}
 
-:root{
-  --eds-button:1;
-}a.eds-button{
-  display:-webkit-box;
-  display:-webkit-flex;
-  display:-moz-box;
-  display:flex;
-  -webkit-box-align:center;
-  -webkit-align-items:center;
-     -moz-box-align:center;
-          align-items:center;
-  -webkit-box-pack:center;
-  -webkit-justify-content:center;
-     -moz-box-pack:center;
-          justify-content:center;
+[data-view-mode=compact]{
+  /* number */
+  --font-line-height-body-xs:var(--size-8);
+  --font-line-height-body-s:var(--size-9);
+  --font-line-height-body-lg:var(--size-10);
+  --font-line-height-body-m:var(--size-10);
+  --font-line-height-body-xl:var(--size-11);
+  --font-line-height-heading-s:var(--size-8);
+  --font-line-height-heading-xs:var(--size-8);
+  --font-line-height-heading-m:var(--size-9);
+  --font-line-height-heading-lg:var(--size-10);
+  --font-line-height-heading-xl:var(--size-11);
+  --font-line-height-heading-2xl:var(--size-12);
+  --font-line-height-label-m:var(--size-8);
+  --font-line-height-label-s:var(--size-8);
+  --font-line-height-label-lg:var(--size-9);
+  --font-paragraph-spacing-body-xs:var(--size-5);
+  --font-paragraph-spacing-body-s:var(--size-6);
+  --font-paragraph-spacing-body-m:var(--size-8);
+  --font-paragraph-spacing-body-lg:var(--size-9);
+  --font-paragraph-spacing-body-xl:var(--size-9);
+  --font-paragraph-spacing-heading-s:var(--size-5);
+  --font-paragraph-spacing-heading-xs:var(--size-5);
+  --font-paragraph-spacing-heading-lg:var(--size-6);
+  --font-paragraph-spacing-heading-m:var(--size-6);
+  --font-paragraph-spacing-heading-2xl:var(--size-8);
+  --font-paragraph-spacing-heading-xl:var(--size-8);
+  --font-size-body-xs:var(--size-6);
+  --font-size-body-s:var(--size-7);
+  --font-size-body-lg:var(--size-8);
+  --font-size-body-m:var(--size-8);
+  --font-size-body-xl:var(--size-9);
+  --font-size-heading-xs:var(--size-6);
+  --font-size-heading-s:var(--size-7);
+  --font-size-heading-m:var(--size-8);
+  --font-size-heading-lg:var(--size-9);
+  --font-size-heading-xl:var(--size-10);
+  --font-size-heading-2xl:var(--size-11);
+  --font-size-label-s:var(--size-7);
+  --font-size-label-m:var(--size-8);
+  --font-size-label-lg:var(--size-9);
+  /* string */
+  --font-family-nationale:nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
 }
-a.eds-button .eds-icon{
-  position:static;
-  position:initial;
+
+[data-view-mode=display]{
+  /* number */
+  --font-line-height-body-xs:var(--size-11);
+  --font-line-height-body-s:var(--size-12);
+  --font-line-height-body-m:var(--size-15);
+  --font-line-height-body-lg:var(--size-18);
+  --font-line-height-body-xl:var(--size-19);
+  --font-line-height-heading-xs:var(--size-11);
+  --font-line-height-heading-s:var(--size-13);
+  --font-line-height-heading-m:var(--size-15);
+  --font-line-height-heading-lg:var(--size-18);
+  --font-line-height-heading-xl:var(--size-20);
+  --font-line-height-heading-2xl:var(--size-21);
+  --font-line-height-label-s:var(--size-11);
+  --font-line-height-label-m:var(--size-13);
+  --font-line-height-label-lg:var(--size-15);
+  --font-paragraph-spacing-body-xs:var(--size-9);
+  --font-paragraph-spacing-body-s:var(--size-10);
+  --font-paragraph-spacing-body-m:var(--size-12);
+  --font-paragraph-spacing-body-lg:var(--size-14);
+  --font-paragraph-spacing-body-xl:var(--size-16);
+  --font-paragraph-spacing-heading-xs:var(--size-6);
+  --font-paragraph-spacing-heading-s:var(--size-8);
+  --font-paragraph-spacing-heading-m:var(--size-9);
+  --font-paragraph-spacing-heading-lg:var(--size-10);
+  --font-paragraph-spacing-heading-xl:var(--size-12);
+  --font-paragraph-spacing-heading-2xl:var(--size-13);
+  --font-size-body-xs:var(--size-9);
+  --font-size-body-s:var(--size-10);
+  --font-size-body-m:var(--size-12);
+  --font-size-body-lg:var(--size-14);
+  --font-size-body-xl:var(--size-16);
+  --font-size-heading-xs:var(--size-10);
+  --font-size-heading-s:var(--size-12);
+  --font-size-heading-m:var(--size-14);
+  --font-size-heading-lg:var(--size-16);
+  --font-size-heading-xl:var(--size-19);
+  --font-size-heading-2xl:var(--size-20);
+  --font-size-label-s:var(--size-10);
+  --font-size-label-m:var(--size-12);
+  --font-size-label-lg:var(--size-14);
+  /* string */
+  --font-family-nationale:nationale;
+  --font-weight-body:500;
+  --font-weight-heading:600;
 }
 
-.eds-button{
-  min-width:9.5rem;
+:root{
+  --eds-button:1;
+}.eds-button{
+  min-width:var(--components-button-height-horizontalcontent-medium);
   width:-webkit-max-content;
   width:-moz-max-content;
   width:max-content;
-  min-height:3rem;
-  height:-webkit-fit-content;
-  height:-moz-fit-content;
-  height:fit-content;
-  -webkit-border-radius:0.25rem;
-     -moz-border-radius:0.25rem;
-          border-radius:0.25rem;
-  font-size:inherit;
+  height:var(--components-button-height-horizontalcontent-medium);
+  -webkit-border-radius:var(--components-button-radius-medium);
+     -moz-border-radius:var(--components-button-radius-medium);
+          border-radius:var(--components-button-radius-medium);
   cursor:pointer;
   display:inline-block;
   -webkit-appearance:none;
@@ -484,59 +618,86 @@ a.eds-button .eds-icon{
           appearance:none;
   -webkit-text-decoration:none;
   text-decoration:none;
-  padding:0 1rem;
-  font-size:1rem;
-  line-height:1.5rem;
+  overflow-x:hidden;
+  -o-text-overflow:ellipsis;
+     text-overflow:ellipsis;
+  white-space:nowrap;
+  padding-inline:var(--components-button-inlinepadding-medium);
+  font-size:var(--font-size-body-m, var(--size-8));
+  line-height:var(--font-line-height-body-m, var(--size-10));
   font-weight:500;
+  font-weight:var(--font-weight-body, 500);
   text-align:center;
   font-family:inherit;
   position:relative;
-  vertical-align:top;
+  vertical-align:middle;
   background-color:var(--eds-button-background);
-  border:0.125rem solid var(--eds-button-border);
+  border:var(--components-button-border-medium) solid var(--eds-button-border);
   color:var(--eds-button-text);
 }
-.eds-button:hover{
+.eds-button:where(:hover){
   background-color:var(--eds-button-background-hover);
 }
-.eds-button:active{
+.eds-button:where(:active){
   background-color:var(--eds-button-background-active);
   border-color:var(--eds-button-border-active);
   color:var(--eds-button-text-active);
 }
-.eds-button:focus-visible{
+.eds-button:where(:focus-visible){
   outline:2px solid #181c56;
   outline-color:var(--basecolors-stroke-focus-standard);
   outline-offset:0.125rem;
 }
-.eds-contrast .eds-button:focus-visible{
+:where(.eds-contrast) .eds-button:where(:focus-visible){
   outline-color:var(--basecolors-stroke-focus-contrast);
 }
-.eds-button > .eds-button__loading-dots{
+.eds-button > :where(.eds-button__loading-dots){
   width:100%;
 }
-.eds-button > .eds-button__loading-dots .eds-loading-dots__dot{
+.eds-button > :where(.eds-button__loading-dots) :where(.eds-loading-dots__dot){
   background:var(--eds-button-text);
 }
-.eds-button .eds-icon{
-  position:relative;
-  top:0.2em;
+.eds-button :where(.eds-icon){
+  vertical-align:middle;
+  margin-bottom:0.1em;
 }
-.eds-button--leading-icon .eds-icon{
-  margin-right:0.75rem;
+.eds-button--trailing-icon :where(.eds-icon:last-child){
+  margin-left:var(--components-button-gap-medium);
 }
-.eds-button--trailing-icon .eds-icon{
-  margin-left:0.75rem;
+.eds-button--trailing-icon:where(.eds-button--size-small) :where(.eds-icon:last-child){
+  margin-left:var(--components-button-gap-small);
+}
+.eds-button--trailing-icon:where(.eds-button--size-large) :where(.eds-icon:last-child){
+  margin-left:var(--components-button-gap-large);
+}
+.eds-button--leading-icon :where(.eds-icon:first-child){
+  margin-right:var(--components-button-gap-medium);
+}
+.eds-button--leading-icon:where(.eds-button--size-small) :where(.eds-icon:first-child){
+  margin-right:var(--components-button-gap-small);
+}
+.eds-button--leading-icon:where(.eds-button--size-large) :where(.eds-icon:first-child){
+  margin-right:var(--components-button-gap-large);
 }
 .eds-button--size-small{
-  min-width:5.75rem;
-  min-height:2rem;
-  font-size:0.875rem;
-  line-height:1.375rem;
+  height:var(--components-button-height-horizontalcontent-small);
+  -webkit-border-radius:var(--components-button-radius-small);
+     -moz-border-radius:var(--components-button-radius-small);
+          border-radius:var(--components-button-radius-small);
+  padding-inline:var(--components-button-inlinepadding-small);
+  font-size:var(--font-size-body-s, var(--size-7));
+  line-height:var(--font-line-height-body-s, var(--size-9));
+  border:var(--components-button-border-small) solid var(--eds-button-border);
 }
 .eds-button--size-large{
-  min-width:11.75rem;
-  min-height:3.75rem;
+  height:var(--components-button-height-horizontalcontent-large);
+  -webkit-border-radius:var(--components-button-radius-large);
+     -moz-border-radius:var(--components-button-radius-large);
+          border-radius:var(--components-button-radius-large);
+  padding-inline:var(--components-button-inlinepadding-large);
+  font-size:var(--font-size-body-xl, var(--size-10));
+  line-height:var(--font-line-height-body-xl, var(--size-12));
+  border:var(--components-button-border-large) solid var(--eds-button-border);
 }
 .eds-button--width-fluid{
   width:100%;
@@ -550,7 +711,7 @@ a.eds-button .eds-icon{
   --eds-button-border:transparent;
   --eds-button-border-active:transparent;
 }
-.eds-contrast .eds-button--variant-primary{
+:where(.eds-contrast) .eds-button--variant-primary{
   --eds-button-background:var(--components-button-primary-contrast-default);
   --eds-button-text:var(--components-button-primary-contrast-text);
   --eds-button-text-active:var(--components-button-primary-contrast-text);
@@ -568,7 +729,7 @@ a.eds-button .eds-icon{
   --eds-button-border:var(--components-button-secondary-standard-border);
   --eds-button-border-active:var(--components-button-secondary-standard-border-active);
 }
-.eds-contrast .eds-button--variant-secondary{
+:where(.eds-contrast) .eds-button--variant-secondary{
   --eds-button-background:var(--components-button-secondary-contrast-default);
   --eds-button-text:var(--components-button-secondary-contrast-text);
   --eds-button-text-active:var(--components-button-secondary-contrast-text-active);
@@ -586,7 +747,7 @@ a.eds-button .eds-icon{
   --eds-button-border:var(--components-button-success-standard-border);
   --eds-button-border-active:var(--components-button-success-standard-border);
 }
-.eds-contrast .eds-button--variant-success{
+:where(.eds-contrast) .eds-button--variant-success{
   --eds-button-background:var(--components-button-success-contrast-default);
   --eds-button-text:var(--components-button-success-contrast-text);
   --eds-button-text-active:var(--components-button-success-contrast-text);
@@ -604,7 +765,7 @@ a.eds-button .eds-icon{
   --eds-button-border:var(--components-button-negative-standard-border);
   --eds-button-border-active:var(--components-button-negative-standard-border);
 }
-.eds-contrast .eds-button--variant-negative{
+:where(.eds-contrast) .eds-button--variant-negative{
   --eds-button-background:var(--components-button-negative-contrast-default);
   --eds-button-text:var(--components-button-negative-contrast-text);
   --eds-button-text-active:var(--components-button-negative-contrast-text-active);
@@ -625,49 +786,61 @@ a.eds-button .eds-icon{
   padding:0 0.75rem;
   min-width:6rem;
 }
-.eds-button--variant-tertiary:hover{
+.eds-button--variant-tertiary:where(:hover){
   background-color:rgb(206.4, 211.8, 237.6);
 }
-.eds-button--variant-tertiary:active{
+.eds-button--variant-tertiary:where(:active){
   background-color:#aeb7e2;
 }
-.eds-button--variant-tertiary.eds-button--leading-icon .eds-icon{
-  margin-right:0.5rem;
-}
-.eds-button--variant-tertiary.eds-button--trailing-icon .eds-icon{
-  margin-left:0.5rem;
-}
-.eds-contrast .eds-button--variant-tertiary{
+:where(.eds-contrast) .eds-button--variant-tertiary{
   background-color:transparent;
   color:#ffffff;
   border-color:#aeb7e2;
 }
-.eds-contrast .eds-button--variant-tertiary > .eds-button__loading-dots .eds-loading-dots__dot{
+:where(.eds-contrast) .eds-button--variant-tertiary > :where(.eds-button__loading-dots) :where(.eds-loading-dots__dot){
   background:#ffffff;
 }
-.eds-contrast .eds-button--variant-tertiary:hover{
+:where(.eds-contrast) .eds-button--variant-tertiary:where(:hover){
   background-color:rgba(174, 183, 226, 0.2);
 }
-.eds-contrast .eds-button--variant-tertiary:active{
+:where(.eds-contrast) .eds-button--variant-tertiary:where(:active){
   background:#aeb7e2;
   color:#181c56;
 }
-.eds-contrast .eds-button--variant-tertiary:active > .eds-button__loading-dots .eds-loading-dots__dot{
+:where(.eds-contrast) .eds-button--variant-tertiary:where(:active) > :where(.eds-button__loading-dots) :where(.eds-loading-dots__dot){
   background:#181c56;
 }
-.eds-button[disabled].eds-button--loading{
+.eds-button:where([disabled]):where(.eds-button--loading){
   pointer-events:none;
 }
-.eds-button[disabled]:not(.eds-button--loading){
+.eds-button:where([disabled]):where(:not(.eds-button--loading)){
   background:var(--components-button-disabled-standard-fill);
   color:var(--components-button-disabled-standard-text-disabled);
   border-color:transparent;
   cursor:not-allowed;
 }
-.eds-contrast .eds-button[disabled]:not(.eds-button--loading){
+:where(.eds-contrast) .eds-button:where([disabled]):where(:not(.eds-button--loading)){
   background-color:var(--components-button-disabled-contrast-fill);
   color:var(--components-button-disabled-contrast-text-disabled);
   border-color:transparent;
+}
+.eds-button:where(a){
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+     -moz-box-pack:center;
+          justify-content:center;
+}
+.eds-button:where(a) :where(.eds-icon){
+  position:static;
+  position:initial;
 }.eds-button-group .eds-button{
   margin-right:0.75rem;
   margin-bottom:0.75rem;
@@ -775,11 +948,8 @@ a.eds-button .eds-icon{
           appearance:none;
   background:transparent;
   border:0;
-  -webkit-border-radius:0.25rem;
-     -moz-border-radius:0.25rem;
-          border-radius:0.25rem;
   cursor:pointer;
-  font-size:1rem;
+  font-size:var(--font-size-body-m);
   display:-webkit-inline-box;
   display:-webkit-inline-flex;
   display:-moz-inline-box;
@@ -794,50 +964,138 @@ a.eds-button .eds-icon{
   -webkit-text-decoration:none;
   text-decoration:none;
 }
-.eds-square-button:focus-visible{
+.eds-square-button--size-small{
+  font-size:var(--font-size-body-s);
+}
+.eds-square-button--size-small :where(.eds-square-button__button){
+  height:var(--components-button-height-horizontalcontent-small);
+  width:var(--components-button-height-horizontalcontent-small);
+  border-width:var(--components-button-border-small);
+  -webkit-border-radius:var(--components-button-radius-small);
+     -moz-border-radius:var(--components-button-radius-small);
+          border-radius:var(--components-button-radius-small);
+}
+.eds-square-button--size-small :where(.eds-square-button__label) + :where(.eds-square-button__button),
+.eds-square-button--size-small :where(.eds-square-button__button) + :where(.eds-square-button__label){
+  margin-left:var(--components-button-gap-small);
+}
+.eds-square-button--size-medium :where(.eds-square-button__button){
+  height:var(--components-button-height-horizontalcontent-medium);
+  width:var(--components-button-height-horizontalcontent-medium);
+  border-width:var(--components-button-border-medium);
+  -webkit-border-radius:var(--components-button-radius-medium);
+     -moz-border-radius:var(--components-button-radius-medium);
+          border-radius:var(--components-button-radius-medium);
+}
+.eds-square-button--size-large{
+  font-size:var(--font-size-body-xl);
+}
+.eds-square-button--size-large :where(.eds-square-button__button){
+  height:var(--components-button-height-horizontalcontent-large);
+  width:var(--components-button-height-horizontalcontent-large);
+  border-width:var(--components-button-border-large);
+  -webkit-border-radius:var(--components-button-radius-large);
+     -moz-border-radius:var(--components-button-radius-large);
+          border-radius:var(--components-button-radius-large);
+}
+.eds-square-button--size-large :where(.eds-square-button__label) + :where(.eds-square-button__button),
+.eds-square-button--size-large :where(.eds-square-button__button) + :where(.eds-square-button__label){
+  margin-left:var(--components-button-gap-large);
+}
+.eds-square-button--secondary{
+  --button-background:var(--components-button-squaresecondary-standard-default);
+  --border-color:var(--components-button-squaresecondary-standard-border);
+  --icon-color:var(--components-button-squaresecondary-standard-icon);
+  --label-color:var(--components-button-squaresecondary-standard-text);
+}
+.eds-square-button--secondary:where(:hover){
+  --button-background:var(--components-button-squaresecondary-standard-hover);
+}
+.eds-square-button--secondary:where(:active){
+  --button-background:var(--components-button-squaresecondary-standard-active);
+  --border-color:var(--components-button-squaresecondary-standard-border-active);
+  --icon-color:var(--components-button-squaresecondary-standard-icon-active);
+}
+:where(.eds-contrast) .eds-square-button--secondary{
+  --button-background:var(--components-button-squaresecondary-contrast-default);
+  --border-color:var(--components-button-squaresecondary-contrast-border);
+  --icon-color:var(--components-button-squaresecondary-contrast-icon-default);
+  --label-color:var(--components-button-squaresecondary-contrast-label);
+}
+:where(.eds-contrast) .eds-square-button--secondary:where(:hover){
+  --button-background:var(--components-button-squaresecondary-contrast-hover);
+  --icon-color:var(--components-button-squaresecondary-contrast-icon-hover);
+}
+:where(.eds-contrast) .eds-square-button--secondary:where(:active){
+  --button-background:var(--components-button-squaresecondary-contrast-active);
+  --border-color:var(--components-button-squaresecondary-contrast-border-active);
+  --icon-color:var(--components-button-squaresecondary-contrast-icon-active);
+}
+.eds-square-button--success{
+  --button-background:var(--components-button-squaresuccess-standard-default);
+  --border-color:var(--components-button-squaresuccess-standard-border);
+  --icon-color:var(--components-button-squaresuccess-standard-icon);
+  --label-color:var(--components-button-squaresuccess-standard-label);
+}
+.eds-square-button--success:where(:hover){
+  --button-background:var(--components-button-squaresuccess-standard-hover);
+}
+.eds-square-button--success:where(:active){
+  --button-background:var(--components-button-squaresuccess-standard-active);
+}
+:where(.eds-contrast) .eds-square-button--success{
+  --button-background:var(--components-button-squaresuccess-contrast-default);
+  --border-color:var(--components-button-squaresuccess-contrast-border);
+  --icon-color:var(--components-button-squaresuccess-contrast-icon);
+  --label-color:var(--components-button-squaresuccess-contrast-label);
+}
+:where(.eds-contrast) .eds-square-button--success:where(:hover){
+  --button-background:var(--components-button-squaresuccess-contrast-hover);
+}
+:where(.eds-contrast) .eds-square-button--success:where(:active){
+  --button-background:var(--components-button-squaresuccess-contrast-active);
+}
+.eds-square-button--loading{
+  opacity:1;
+}
+.eds-square-button:where(:focus-visible){
   outline:none;
 }
-.eds-square-button:focus-visible .eds-square-button__button{
+.eds-square-button:where(:focus-visible) :where(.eds-square-button__button){
   outline:2px solid #181c56;
   outline-color:var(--basecolors-stroke-focus-standard);
   outline-offset:0.125rem;
 }
-.eds-contrast .eds-square-button:focus-visible .eds-square-button__button{
+:where(.eds-contrast) .eds-square-button:where(:focus-visible) :where(.eds-square-button__button){
   outline-color:var(--basecolors-stroke-focus-contrast);
 }
-.eds-square-button[disabled]:not(.eds-square-button--loading){
+.eds-square-button:where([disabled]):where(:not(.eds-square-button--loading)){
   cursor:not-allowed;
 }
-.eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button,
-.eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__button:hover{
+.eds-square-button:where([disabled]):where(:not(.eds-square-button--loading)) :where(.eds-square-button__button),
+.eds-square-button:where([disabled]):where(:not(.eds-square-button--loading)) :where(.eds-square-button__button:hover){
   border-color:var(--basecolors-stroke-disabled);
   border-style:dashed;
   background-color:transparent;
   color:var(--basecolors-text-disabled);
 }
-.eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label,
-.eds-square-button[disabled]:not(.eds-square-button--loading) .eds-square-button__label:hover{
+.eds-square-button:where([disabled]):where(:not(.eds-square-button--loading)) :where(.eds-square-button__label),
+.eds-square-button:where([disabled]):where(:not(.eds-square-button--loading)) :where(.eds-square-button__label:hover){
   color:var(--basecolors-text-disabled);
 }
-.eds-square-button.eds-square-button--loading{
-  opacity:1;
-}
 .eds-square-button__button{
   -webkit-box-align:center;
   -webkit-align-items:center;
      -moz-box-align:center;
           align-items:center;
   background-color:var(--button-background);
-  border:0.125rem solid var(--border-color);
-  -webkit-border-radius:0.25rem;
-     -moz-border-radius:0.25rem;
-          border-radius:0.25rem;
+  border:var(--components-button-border-medium) solid var(--border-color);
   color:var(--icon-color);
   display:-webkit-inline-box;
   display:-webkit-inline-flex;
   display:-moz-inline-box;
   display:inline-flex;
-  height:3rem;
+  height:var(--components-button-height-horizontalcontent-medium);
   -webkit-box-pack:center;
   -webkit-justify-content:center;
      -moz-box-pack:center;
@@ -849,70 +1107,17 @@ a.eds-button .eds-icon{
   text-decoration:none;
   vertical-align:top;
   position:relative;
-  width:3rem;
+  width:var(--components-button-height-horizontalcontent-medium);
 }
 .eds-square-button__label{
   color:var(--label-color);
 }
-.eds-square-button__label + .eds-square-button__button, .eds-square-button__button + .eds-square-button__label{
-  margin-left:1rem;
+.eds-square-button__label + :where(.eds-square-button__button), .eds-square-button__button + :where(.eds-square-button__label){
+  margin-left:var(--components-button-gap-medium);
 }
-.eds-square-button .eds-square-button__loading-dots .eds-loading-dots__dot{
+.eds-square-button__loading-dots :where(.eds-loading-dots__dot){
   background:var(--icon-color);
 }
-.eds-square-button--secondary{
-  --button-background:var(--components-button-squaresecondary-standard-default);
-  --border-color:var(--components-button-squaresecondary-standard-border);
-  --icon-color:var(--components-button-squaresecondary-standard-icon);
-  --label-color:var(--components-button-squaresecondary-standard-text);
-}
-.eds-square-button--secondary:hover{
-  --button-background:var(--components-button-squaresecondary-standard-hover);
-}
-.eds-square-button--secondary:active{
-  --button-background:var(--components-button-squaresecondary-standard-active);
-  --border-color:var(--components-button-squaresecondary-standard-border-active);
-  --icon-color:var(--components-button-squaresecondary-standard-icon-active);
-}
-.eds-contrast .eds-square-button--secondary{
-  --button-background:var(--components-button-squaresecondary-contrast-default);
-  --border-color:var(--components-button-squaresecondary-contrast-border);
-  --icon-color:var(--components-button-squaresecondary-contrast-icon-default);
-  --label-color:var(--components-button-squaresecondary-contrast-label);
-}
-.eds-contrast .eds-square-button--secondary:hover{
-  --button-background:var(--components-button-squaresecondary-contrast-hover);
-  --icon-color:var(--components-button-squaresecondary-contrast-icon-hover);
-}
-.eds-contrast .eds-square-button--secondary:active{
-  --button-background:var(--components-button-squaresecondary-contrast-active);
-  --border-color:var(--components-button-squaresecondary-contrast-border-active);
-  --icon-color:var(--components-button-squaresecondary-contrast-icon-active);
-}
-.eds-square-button--success{
-  --button-background:var(--components-button-squaresuccess-standard-default);
-  --border-color:var(--components-button-squaresuccess-standard-border);
-  --icon-color:var(--components-button-squaresuccess-standard-icon);
-  --label-color:var(--components-button-squaresuccess-standard-label);
-}
-.eds-square-button--success:hover{
-  --button-background:var(--components-button-squaresuccess-standard-hover);
-}
-.eds-square-button--success:active{
-  --button-background:var(--components-button-squaresuccess-standard-active);
-}
-.eds-contrast .eds-square-button--success{
-  --button-background:var(--components-button-squaresuccess-contrast-default);
-  --border-color:var(--components-button-squaresuccess-contrast-border);
-  --icon-color:var(--components-button-squaresuccess-contrast-icon);
-  --label-color:var(--components-button-squaresuccess-contrast-label);
-}
-.eds-contrast .eds-square-button--success:hover{
-  --button-background:var(--components-button-squaresuccess-contrast-hover);
-}
-.eds-contrast .eds-square-button--success:active{
-  --button-background:var(--components-button-squaresuccess-contrast-active);
-}
 .eds-square-button--tertiary{
   --button-background:var(--components-button-squaresecondary-standard-default);
   --border-color:var(--components-button-squaresecondary-standard-border);
@@ -951,6 +1156,9 @@ a.eds-button .eds-icon{
   height:2rem;
   width:2rem;
   border-width:0.0625rem;
+  -webkit-border-radius:0.25rem;
+     -moz-border-radius:0.25rem;
+          border-radius:0.25rem;
 }.eds-icon-button{
   border:0.125rem solid transparent;
   -webkit-border-radius:0.25rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/button",
-  "version": "3.4.1",
+  "version": "4.0.0-beta-automat.0",
   "license": "EUPL-1.2",
   "main": "dist/button.cjs.js",
   "module": "dist/button.esm.js",
@@ -27,8 +27,8 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/loader": "^0.6.1",
-    "@entur/tokens": "^3.21.1",
+    "@entur/loader": "^0.6.2-beta-automat.0",
+    "@entur/tokens": "^3.22.0-beta-automat.0",
     "@entur/utils": "^0.13.1",
     "classnames": "^2.5.1"
   },
@@ -45,5 +45,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "fc1996af692ebbe6c00454abf846cf61e0fe6231"
+  "gitHead": "7d0d14cd6fd5cf4b7ef3c2a3aa7e3536ac51900d"
 }