@vibe/button 4.0.0-alpha.1 → 4.0.0-beta.0

package/dist/Button/Button.d.ts

@@ -1,86 +1,86 @@
-import React, { type AriaAttributes } from "react";
-import { type SubIcon } from "@vibe/icon";
-import { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from "./Button.types";
-import { type VibeComponentProps } from "@vibe/shared";
-export interface ButtonProps extends VibeComponentProps {
-    children: React.ReactNode;
-    /** Custom class names to pass to the component */
-    className?: string;
-    activeButtonClassName?: string;
-    /** The button's kind */
-    kind?: ButtonType;
-    /** Callback function to run when the button is clicked */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Blur on button click */
-    blurOnMouseUp?: boolean;
-    /** Name of the button - for form submit usages  */
-    name?: string;
-    /** The button's size */
-    size?: ButtonSize;
-    /** The button's color */
-    color?: ButtonColor;
-    /** The button's type */
-    type?: ButtonInputType;
-    /** Whether the button should be disabled or not */
-    disabled?: boolean;
-    /** Icon to place on the right */
-    rightIcon?: SubIcon;
-    /** Icon to place on the left */
-    leftIcon?: SubIcon;
-    /** the success props are used when you have async action and wants to display a success message */
-    success?: boolean;
-    /** Success icon name */
-    successIcon?: SubIcon;
-    /** Success text */
-    successText?: string;
-    /** loading boolean which switches the text to a loader */
-    loading?: boolean;
-    /** className which is applied to loader container **/
-    loaderClassName?: string;
-    style?: React.CSSProperties;
-    /** displays the active state */
-    active?: boolean;
-    /** id to pass to the button */
-    id?: string;
-    /** adds 8px margin to the right */
-    marginRight?: boolean;
-    /** adds 8px margin to the left */
-    marginLeft?: boolean;
-    /** element id to describe the button accordingly */
-    "aria-labelledby"?: string;
-    /** aria label to provide important when providing only Icon */
-    "aria-label"?: string;
-    /** aria for a button popup */
-    "aria-haspopup"?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
-    /** aria to be set if the popup is open */
-    "aria-expanded"?: boolean;
-    /** aria controls - receives id for the controlled region */
-    "aria-controls"?: string;
-    "aria-describedby"?: AriaAttributes["aria-describedby"];
-    /**
-     * aria to be used for screen reader to know if the button is hidden
-     */
-    "aria-hidden"?: AriaAttributes["aria-hidden"];
-    /**
-     * Indicates the current "pressed" state of toggle buttons
-     */
-    "aria-pressed"?: AriaAttributes["aria-pressed"];
-    /** On Button Focus callback */
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    /** On Button Blur callback */
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    rightFlat?: boolean;
-    leftFlat?: boolean;
-    preventClickAnimation?: boolean;
-    noSidePadding?: boolean;
-    /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */
-    defaultTextColorOnPrimaryColor?: string;
-    "data-testid"?: string;
-    /** Change the focus indicator from around the button to within it */
-    insetFocus?: boolean;
-    /** Specifies the tab order of an element */
-    tabIndex?: number;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default Button;
+import React, { type AriaAttributes } from "react";
+import { type SubIcon } from "@vibe/icon";
+import { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from "./Button.types";
+import { type VibeComponentProps } from "@vibe/shared";
+export interface ButtonProps extends VibeComponentProps {
+    children: React.ReactNode;
+    /** Custom class names to pass to the component */
+    className?: string;
+    activeButtonClassName?: string;
+    /** The button's kind */
+    kind?: ButtonType;
+    /** Callback function to run when the button is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Blur on button click */
+    blurOnMouseUp?: boolean;
+    /** Name of the button - for form submit usages  */
+    name?: string;
+    /** The button's size */
+    size?: ButtonSize;
+    /** The button's color */
+    color?: ButtonColor;
+    /** The button's type */
+    type?: ButtonInputType;
+    /** Whether the button should be disabled or not */
+    disabled?: boolean;
+    /** Icon to place on the right */
+    rightIcon?: SubIcon;
+    /** Icon to place on the left */
+    leftIcon?: SubIcon;
+    /** the success props are used when you have async action and wants to display a success message */
+    success?: boolean;
+    /** Success icon name */
+    successIcon?: SubIcon;
+    /** Success text */
+    successText?: string;
+    /** loading boolean which switches the text to a loader */
+    loading?: boolean;
+    /** className which is applied to loader container **/
+    loaderClassName?: string;
+    style?: React.CSSProperties;
+    /** displays the active state */
+    active?: boolean;
+    /** id to pass to the button */
+    id?: string;
+    /** adds 8px margin to the right */
+    marginRight?: boolean;
+    /** adds 8px margin to the left */
+    marginLeft?: boolean;
+    /** element id to describe the button accordingly */
+    "aria-labelledby"?: string;
+    /** aria label to provide important when providing only Icon */
+    "aria-label"?: string;
+    /** aria for a button popup */
+    "aria-haspopup"?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
+    /** aria to be set if the popup is open */
+    "aria-expanded"?: boolean;
+    /** aria controls - receives id for the controlled region */
+    "aria-controls"?: string;
+    "aria-describedby"?: AriaAttributes["aria-describedby"];
+    /**
+     * aria to be used for screen reader to know if the button is hidden
+     */
+    "aria-hidden"?: AriaAttributes["aria-hidden"];
+    /**
+     * Indicates the current "pressed" state of toggle buttons
+     */
+    "aria-pressed"?: AriaAttributes["aria-pressed"];
+    /** On Button Focus callback */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** On Button Blur callback */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    rightFlat?: boolean;
+    leftFlat?: boolean;
+    preventClickAnimation?: boolean;
+    noSidePadding?: boolean;
+    /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */
+    defaultTextColorOnPrimaryColor?: string;
+    "data-testid"?: string;
+    /** Change the focus indicator from around the button to within it */
+    insetFocus?: boolean;
+    /** Specifies the tab order of an element */
+    tabIndex?: number;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId, type VibeComponentProps, ComponentDefaultTestId, ComponentVibeId } from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  \"aria-labelledby\"?: string;\n  /** aria label to provide important when providing only Icon */\n  \"aria-label\"?: string;\n  /** aria for a button popup */\n  \"aria-haspopup\"?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  \"aria-expanded\"?: boolean;\n  /** aria controls - receives id for the controlled region */\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind = \"primary\",\n      onClick = NOOP,\n      name,\n      size = \"medium\",\n      color = \"primary\",\n      disabled = false,\n      rightIcon = null,\n      leftIcon = null,\n      success = false,\n      successText = \"\",\n      successIcon = null,\n      style,\n      loading: isLoading = false,\n      loaderClassName,\n      active = false,\n      activeButtonClassName,\n      id,\n      marginRight = false,\n      marginLeft = false,\n      type = \"button\",\n      onMouseDown = NOOP,\n      \"aria-label\": ariaLabel,\n      rightFlat = false,\n      leftFlat = false,\n      preventClickAnimation = false,\n      noSidePadding = false,\n      onFocus = NOOP,\n      onBlur = NOOP,\n      \"aria-labelledby\": ariaLabelledBy,\n      defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp = true,\n      \"data-testid\": dataTestId,\n      insetFocus = false,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: tabIndex ?? (disabled || ariaHidden ? -1 : undefined),\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabelledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return 16;\n          default:\n            return 20;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              type=\"font\"\n              icon={leftIcon}\n              size={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              type=\"font\"\n              icon={rightIcon}\n              size={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                type=\"font\"\n                icon={successIcon}\n                size={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabelledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaExpanded","ariaHasPopup","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","undefined","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId, type VibeComponentProps, ComponentDefaultTestId, ComponentVibeId } from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  \"aria-labelledby\"?: string;\n  /** aria label to provide important when providing only Icon */\n  \"aria-label\"?: string;\n  /** aria for a button popup */\n  \"aria-haspopup\"?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  \"aria-expanded\"?: boolean;\n  /** aria controls - receives id for the controlled region */\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind = \"primary\",\n      onClick = NOOP,\n      name,\n      size = \"medium\",\n      color = \"primary\",\n      disabled = false,\n      rightIcon = null,\n      leftIcon = null,\n      success = false,\n      successText = \"\",\n      successIcon = null,\n      style,\n      loading: isLoading = false,\n      loaderClassName,\n      active = false,\n      activeButtonClassName,\n      id,\n      marginRight = false,\n      marginLeft = false,\n      type = \"button\",\n      onMouseDown = NOOP,\n      \"aria-label\": ariaLabel,\n      rightFlat = false,\n      leftFlat = false,\n      preventClickAnimation = false,\n      noSidePadding = false,\n      onFocus = NOOP,\n      onBlur = NOOP,\n      \"aria-labelledby\": ariaLabelledBy,\n      defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp = true,\n      \"data-testid\": dataTestId,\n      insetFocus = false,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: tabIndex ?? (disabled || ariaHidden ? -1 : undefined),\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabelledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return 16;\n          default:\n            return 20;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              type=\"font\"\n              icon={leftIcon}\n              size={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              type=\"font\"\n              icon={rightIcon}\n              size={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                type=\"font\"\n                icon={successIcon}\n                size={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabelledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaExpanded","ariaHasPopup","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","undefined","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign"],"mappings":"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"}

package/dist/Button/Button.module.scss.js

@@ -1,2 +1,2 @@
-var o={button:"button_f7439c4668","focus-visible":"focus-visible_b9390e7de1",loader:"loader_db7909be39",loaderSvg:"loaderSvg_2a5b8a15d6",textPlaceholder:"textPlaceholder_4d2df95d0f",success:"success_38488d76b0",successContent:"successContent_75ad7f583a",marginRight:"marginRight_4006417eb3",marginLeft:"marginLeft_b0643c4840",rightFlat:"rightFlat_40333ca40d",leftFlat:"leftFlat_14c9e86b5e",preventClickAnimation:"preventClickAnimation_307f4b13f6",leftIcon:"leftIcon_4006417eb3",rightIcon:"rightIcon_b0643c4840",sizeXxs:"sizeXxs_49d4e68447",sizeXs:"sizeXs_a6519fd8a4",sizeSmall:"sizeSmall_99b138f946",sizeMedium:"sizeMedium_e313607379",sizeLarge:"sizeLarge_eee09650ba",kindPrimary:"kindPrimary_4a5b3cc12f",colorPrimary:"colorPrimary_6229472493",colorBrand:"colorBrand_099b56dff0",colorPrimaryActive:"colorPrimaryActive_ac43625878",colorBrandActive:"colorBrandActive_52db7c9bff",colorPositive:"colorPositive_086247c4eb",colorPositiveActive:"colorPositiveActive_cb1d0f3435",colorNegative:"colorNegative_73297820da",colorNegativeActive:"colorNegativeActive_cb1d0f3435",colorInverted:"colorInverted_2e4503370f",colorInvertedActive:"colorInvertedActive_cb1d0f3435",disabled:"disabled_5086da8122",colorOnPrimaryColor:"colorOnPrimaryColor_4be5859237",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_6e0a8a4bcf",colorFixedLight:"colorFixedLight_59d4ab7df9",colorFixedLightActive:"colorFixedLightActive_307f4b13f6",colorFixedDark:"colorFixedDark_eb09f6877e",colorFixedDarkActive:"colorFixedDarkActive_4ce2ed1aec",colorOnInvertedBackground:"colorOnInvertedBackground_e6ececa7fc",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_0f714214ac",kindSecondary:"kindSecondary_fc798f25bd",kindTertiary:"kindTertiary_817d8f98c5",noSidePadding:"noSidePadding_046e877cc1",insetFocusStyle:"insetFocusStyle_729cc35a51"};!function(o){const r="s_id-216fe7e3e8d5_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button_f7439c4668 {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button_f7439c4668:focus-visible, .button_f7439c4668.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_f7439c4668:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.button_f7439c4668 .loader_db7909be39 {\n  height: 100%;\n}\n.button_f7439c4668 .loader_db7909be39 .loaderSvg_2a5b8a15d6 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_f7439c4668 .textPlaceholder_4d2df95d0f {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_f7439c4668.success_38488d76b0 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_f7439c4668.success_38488d76b0 .successContent_75ad7f583a {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_4006417eb3 {\n  margin-inline-end: var(--space-8);\n}\n.marginLeft_b0643c4840 {\n  margin-inline-start: var(--space-8);\n}\n.rightFlat_40333ca40d {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n.leftFlat_14c9e86b5e {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n.button_f7439c4668:active:not(.preventClickAnimation_307f4b13f6) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_f7439c4668 .leftIcon_4006417eb3 {\n  margin-inline-end: var(--space-8);\n}\n.button_f7439c4668 .rightIcon_b0643c4840 {\n  margin-inline-start: var(--space-8);\n}\n.sizeXxs_49d4e68447 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--space-4);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs_a6519fd8a4 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall_99b138f946 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall_99b138f946 .loader_db7909be39 {\n  top: 7px;\n}\n.sizeMedium_e313607379 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--space-8) var(--space-16);\n  height: 40px;\n}\n.sizeLarge_eee09650ba {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--space-24);\n  height: 48px;\n}\n.kindPrimary_4a5b3cc12f {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_4a5b3cc12f.colorPrimary_6229472493 {\n  background: var(--primary-color);\n}\n.kindPrimary_4a5b3cc12f.colorBrand_099b56dff0 {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_4a5b3cc12f.colorPrimaryActive_ac43625878,\n.kindPrimary_4a5b3cc12f.colorPrimary_6229472493:hover,\n.kindPrimary_4a5b3cc12f.colorPrimary_6229472493:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_4a5b3cc12f.colorBrandActive_52db7c9bff,\n.kindPrimary_4a5b3cc12f.colorBrand_099b56dff0:hover,\n.kindPrimary_4a5b3cc12f.colorBrand_099b56dff0:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_4a5b3cc12f.colorPositive_086247c4eb {\n  background: var(--positive-color);\n}\n.kindPrimary_4a5b3cc12f.colorPositiveActive_cb1d0f3435,\n.kindPrimary_4a5b3cc12f.colorPositive_086247c4eb:hover,\n.kindPrimary_4a5b3cc12f.colorPositive_086247c4eb:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_4a5b3cc12f.colorNegative_73297820da {\n  background: var(--negative-color);\n}\n.kindPrimary_4a5b3cc12f.colorNegativeActive_cb1d0f3435,\n.kindPrimary_4a5b3cc12f.colorNegative_73297820da:hover,\n.kindPrimary_4a5b3cc12f.colorNegative_73297820da:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_4a5b3cc12f.colorInverted_2e4503370f {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_4a5b3cc12f.colorInvertedActive_cb1d0f3435,\n.kindPrimary_4a5b3cc12f.colorInverted_2e4503370f:hover,\n.kindPrimary_4a5b3cc12f.colorInverted_2e4503370f:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_4a5b3cc12f.button_f7439c4668.colorInverted_2e4503370f.disabled_5086da8122 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237 {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColorActive_6e0a8a4bcf,\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:hover,\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColorActive_6e0a8a4bcf:focus-visible, .kindPrimary_4a5b3cc12f.colorOnPrimaryColorActive_6e0a8a4bcf.focus-visible_b9390e7de1,\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:hover:focus-visible,\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:hover.focus-visible_b9390e7de1,\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:focus:focus-visible,\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColorActive_6e0a8a4bcf:focus:not(.focus-visible_b9390e7de1),\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:hover:focus:not(.focus-visible_b9390e7de1),\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindPrimary_4a5b3cc12f.colorOnPrimaryColor_4be5859237.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_4a5b3cc12f.colorFixedLightActive_307f4b13f6,\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:hover,\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_4a5b3cc12f.colorFixedLightActive_307f4b13f6:focus-visible, .kindPrimary_4a5b3cc12f.colorFixedLightActive_307f4b13f6.focus-visible_b9390e7de1,\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:hover:focus-visible,\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:hover.focus-visible_b9390e7de1,\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:focus:focus-visible,\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_4a5b3cc12f.colorFixedLightActive_307f4b13f6:focus:not(.focus-visible_b9390e7de1),\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:hover:focus:not(.focus-visible_b9390e7de1),\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindPrimary_4a5b3cc12f.colorFixedLight_59d4ab7df9.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_4a5b3cc12f.colorFixedDarkActive_4ce2ed1aec,\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:hover,\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_4a5b3cc12f.colorFixedDarkActive_4ce2ed1aec:focus-visible, .kindPrimary_4a5b3cc12f.colorFixedDarkActive_4ce2ed1aec.focus-visible_b9390e7de1,\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:hover:focus-visible,\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:hover.focus-visible_b9390e7de1,\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:focus:focus-visible,\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_4a5b3cc12f.colorFixedDarkActive_4ce2ed1aec:focus:not(.focus-visible_b9390e7de1),\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:hover:focus:not(.focus-visible_b9390e7de1),\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindPrimary_4a5b3cc12f.colorFixedDark_eb09f6877e.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_4a5b3cc12f.colorOnInvertedBackground_e6ececa7fc {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_4a5b3cc12f.colorOnInvertedBackgroundActive_0f714214ac,\n.kindPrimary_4a5b3cc12f.colorOnInvertedBackground_e6ececa7fc:hover,\n.kindPrimary_4a5b3cc12f.colorOnInvertedBackground_e6ececa7fc:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_4a5b3cc12f.button_f7439c4668.colorOnInvertedBackground_e6ececa7fc.disabled_5086da8122 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_4a5b3cc12f.button_f7439c4668.disabled_5086da8122 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_fc798f25bd {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_fc798f25bd.sizeSmall_99b138f946 {\n  line-height: 22px;\n}\n.kindSecondary_fc798f25bd.sizeMedium_e313607379 {\n  line-height: 22px;\n}\n.kindSecondary_fc798f25bd.sizeLarge_eee09650ba {\n  line-height: 22px;\n}\n.kindSecondary_fc798f25bd.colorPrimaryActive_ac43625878 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_fc798f25bd.colorPrimaryActive_ac43625878:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_fc798f25bd.colorBrandActive_52db7c9bff {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_fc798f25bd.colorBrandActive_52db7c9bff,\n.kindSecondary_fc798f25bd.colorBrandActive_52db7c9bff:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_fc798f25bd.colorPrimary_6229472493:hover:not(.colorPrimaryActive_ac43625878),\n.kindSecondary_fc798f25bd.colorPrimary_6229472493:focus:not(.colorPrimaryActive_ac43625878) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_fc798f25bd.colorBrand_099b56dff0:hover:not(.colorBrandActive_52db7c9bff),\n.kindSecondary_fc798f25bd.colorBrand_099b56dff0:focus:not(.colorBrandActive_52db7c9bff) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_fc798f25bd.colorPositive_086247c4eb {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_fc798f25bd.colorPositiveActive_cb1d0f3435,\n.kindSecondary_fc798f25bd.colorPositive_086247c4eb:hover,\n.kindSecondary_fc798f25bd.colorPositive_086247c4eb:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_fc798f25bd.colorNegative_73297820da {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_fc798f25bd.colorNegativeActive_cb1d0f3435,\n.kindSecondary_fc798f25bd.colorNegative_73297820da:hover,\n.kindSecondary_fc798f25bd.colorNegative_73297820da:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_fc798f25bd.colorInverted_2e4503370f {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_fc798f25bd.colorInvertedActive_cb1d0f3435,\n.kindSecondary_fc798f25bd.colorInverted_2e4503370f:hover,\n.kindSecondary_fc798f25bd.colorInverted_2e4503370f:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_fc798f25bd.colorInverted_2e4503370f.disabled_5086da8122 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237 {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_fc798f25bd.colorOnPrimaryColorActive_6e0a8a4bcf,\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:hover,\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_fc798f25bd.colorOnPrimaryColorActive_6e0a8a4bcf:focus-visible, .kindSecondary_fc798f25bd.colorOnPrimaryColorActive_6e0a8a4bcf.focus-visible_b9390e7de1,\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:hover:focus-visible,\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:hover.focus-visible_b9390e7de1,\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:focus:focus-visible,\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_fc798f25bd.colorOnPrimaryColorActive_6e0a8a4bcf:focus:not(.focus-visible_b9390e7de1),\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:hover:focus:not(.focus-visible_b9390e7de1),\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindSecondary_fc798f25bd.colorOnPrimaryColor_4be5859237.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_fc798f25bd.colorFixedLightActive_307f4b13f6,\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:hover,\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_fc798f25bd.colorFixedLightActive_307f4b13f6:focus-visible, .kindSecondary_fc798f25bd.colorFixedLightActive_307f4b13f6.focus-visible_b9390e7de1,\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:hover:focus-visible,\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:hover.focus-visible_b9390e7de1,\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:focus:focus-visible,\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_fc798f25bd.colorFixedLightActive_307f4b13f6:focus:not(.focus-visible_b9390e7de1),\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:hover:focus:not(.focus-visible_b9390e7de1),\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_fc798f25bd.colorFixedDarkActive_4ce2ed1aec,\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:hover,\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_fc798f25bd.colorFixedDarkActive_4ce2ed1aec:focus-visible, .kindSecondary_fc798f25bd.colorFixedDarkActive_4ce2ed1aec.focus-visible_b9390e7de1,\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:hover:focus-visible,\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:hover.focus-visible_b9390e7de1,\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:focus:focus-visible,\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_fc798f25bd.colorFixedDarkActive_4ce2ed1aec:focus:not(.focus-visible_b9390e7de1),\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:hover:focus:not(.focus-visible_b9390e7de1),\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindSecondary_fc798f25bd.colorOnInvertedBackground_e6ececa7fc {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_fc798f25bd.colorOnInvertedBackgroundActive_0f714214ac,\n.kindSecondary_fc798f25bd.colorOnInvertedBackground_e6ececa7fc:hover,\n.kindSecondary_fc798f25bd.colorOnInvertedBackground_e6ececa7fc:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_fc798f25bd.colorOnInvertedBackground_e6ececa7fc.disabled_5086da8122 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_fc798f25bd.colorFixedLight_59d4ab7df9.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_fc798f25bd.colorFixedDark_eb09f6877e.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_fc798f25bd.disabled_5086da8122 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_fc798f25bd.disabled_5086da8122:hover {\n  background-color: transparent;\n}\n.kindTertiary_817d8f98c5 {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_817d8f98c5.colorPrimaryActive_ac43625878 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_817d8f98c5.colorPrimaryActive_ac43625878:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_817d8f98c5.colorBrandActive_52db7c9bff {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_817d8f98c5.colorBrandActive_52db7c9bff,\n.kindTertiary_817d8f98c5.colorBrandActive_52db7c9bff:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_817d8f98c5.colorPrimary_6229472493:hover:not(.colorPrimaryActive_ac43625878),\n.kindTertiary_817d8f98c5.colorPrimary_6229472493:focus:not(.colorPrimaryActive_ac43625878) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_817d8f98c5.colorBrand_099b56dff0:hover:not(.colorBrandActive_52db7c9bff),\n.kindTertiary_817d8f98c5.colorBrand_099b56dff0:focus:not(.colorBrandActive_52db7c9bff) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_817d8f98c5.colorPositive_086247c4eb {\n  color: var(--positive-color);\n}\n.kindTertiary_817d8f98c5.colorPositiveActive_cb1d0f3435,\n.kindTertiary_817d8f98c5.colorPositive_086247c4eb:hover,\n.kindTertiary_817d8f98c5.colorPositive_086247c4eb:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_817d8f98c5.colorNegative_73297820da {\n  color: var(--negative-color);\n}\n.kindTertiary_817d8f98c5.colorNegativeActive_cb1d0f3435,\n.kindTertiary_817d8f98c5.colorNegative_73297820da:hover,\n.kindTertiary_817d8f98c5.colorNegative_73297820da:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_817d8f98c5.colorInverted_2e4503370f {\n  color: var(--primary-text-color);\n}\n.kindTertiary_817d8f98c5.colorInvertedActive_cb1d0f3435,\n.kindTertiary_817d8f98c5.colorInverted_2e4503370f:hover,\n.kindTertiary_817d8f98c5.colorInverted_2e4503370f:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_817d8f98c5.colorInverted_2e4503370f.disabled_5086da8122 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237 {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_817d8f98c5.colorOnPrimaryColorActive_6e0a8a4bcf,\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:hover,\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_817d8f98c5.colorOnPrimaryColorActive_6e0a8a4bcf:focus-visible, .kindTertiary_817d8f98c5.colorOnPrimaryColorActive_6e0a8a4bcf.focus-visible_b9390e7de1,\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:hover:focus-visible,\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:hover.focus-visible_b9390e7de1,\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:focus:focus-visible,\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_817d8f98c5.colorOnPrimaryColorActive_6e0a8a4bcf:focus:not(.focus-visible_b9390e7de1),\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:hover:focus:not(.focus-visible_b9390e7de1),\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindTertiary_817d8f98c5.colorOnPrimaryColor_4be5859237.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_817d8f98c5.colorFixedLightActive_307f4b13f6,\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:hover,\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_817d8f98c5.colorFixedLightActive_307f4b13f6:focus-visible, .kindTertiary_817d8f98c5.colorFixedLightActive_307f4b13f6.focus-visible_b9390e7de1,\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:hover:focus-visible,\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:hover.focus-visible_b9390e7de1,\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:focus:focus-visible,\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_817d8f98c5.colorFixedLightActive_307f4b13f6:focus:not(.focus-visible_b9390e7de1),\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:hover:focus:not(.focus-visible_b9390e7de1),\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindTertiary_817d8f98c5.colorFixedLight_59d4ab7df9.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_817d8f98c5.colorFixedDarkActive_4ce2ed1aec,\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:hover,\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_817d8f98c5.colorFixedDarkActive_4ce2ed1aec:focus-visible, .kindTertiary_817d8f98c5.colorFixedDarkActive_4ce2ed1aec.focus-visible_b9390e7de1,\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:hover:focus-visible,\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:hover.focus-visible_b9390e7de1,\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:focus:focus-visible,\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:focus.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_817d8f98c5.colorFixedDarkActive_4ce2ed1aec:focus:not(.focus-visible_b9390e7de1),\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:hover:focus:not(.focus-visible_b9390e7de1),\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e:focus:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.kindTertiary_817d8f98c5.colorFixedDark_eb09f6877e.disabled_5086da8122 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_817d8f98c5.colorOnInvertedBackground_e6ececa7fc {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_817d8f98c5.colorOnInvertedBackgroundActive_0f714214ac,\n.kindTertiary_817d8f98c5.colorOnInvertedBackground_e6ececa7fc:hover,\n.kindTertiary_817d8f98c5.colorOnInvertedBackground_e6ececa7fc:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_817d8f98c5.colorOnInvertedBackground_e6ececa7fc.disabled_5086da8122 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_817d8f98c5.disabled_5086da8122 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_817d8f98c5.disabled_5086da8122:hover {\n  background-color: transparent;\n}\n.noSidePadding_046e877cc1 {\n  padding-inline: 0;\n}\n.button_f7439c4668.insetFocusStyle_729cc35a51:focus-visible, .button_f7439c4668.insetFocusStyle_729cc35a51.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_f7439c4668.insetFocusStyle_729cc35a51:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}");export{o as default};
+var o={button:"button_9514c05f38","focus-visible":"focus-visible_1fc42a4a92",loader:"loader_46c0e34bf4",loaderSvg:"loaderSvg_e3e735d606",textPlaceholder:"textPlaceholder_bde93f9115",success:"success_2e2bc9cd36",successContent:"successContent_39a044a65e",marginRight:"marginRight_bb563918b5",marginLeft:"marginLeft_14785ab5b7",rightFlat:"rightFlat_9476a4903e",leftFlat:"leftFlat_0eb27baf0d",preventClickAnimation:"preventClickAnimation_bba57d5d70",leftIcon:"leftIcon_bb563918b5",rightIcon:"rightIcon_14785ab5b7",sizeXxs:"sizeXxs_ceb35b28b4",sizeXs:"sizeXs_9f5e6f0daa",sizeSmall:"sizeSmall_8f7777896b",sizeMedium:"sizeMedium_6b56752418",sizeLarge:"sizeLarge_2bb434bb45",kindPrimary:"kindPrimary_22741d60c9",colorPrimary:"colorPrimary_390cbb27d6",colorBrand:"colorBrand_8f4d565c27",colorPrimaryActive:"colorPrimaryActive_8870933bc0",colorBrandActive:"colorBrandActive_d1c4a34995",colorPositive:"colorPositive_9e21b5cee6",colorPositiveActive:"colorPositiveActive_671387cf96",colorNegative:"colorNegative_69ab58213e",colorNegativeActive:"colorNegativeActive_671387cf96",colorInverted:"colorInverted_ebc0ce5273",colorInvertedActive:"colorInvertedActive_671387cf96",disabled:"disabled_fe4e36c678",colorOnPrimaryColor:"colorOnPrimaryColor_430841269a",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_6fb21324ad",colorFixedLight:"colorFixedLight_b4d2130125",colorFixedLightActive:"colorFixedLightActive_bba57d5d70",colorFixedDark:"colorFixedDark_1a9aaa7db6",colorFixedDarkActive:"colorFixedDarkActive_18f554427d",colorOnInvertedBackground:"colorOnInvertedBackground_4417fa3b41",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_66476b297a",kindSecondary:"kindSecondary_5c7f925966",kindTertiary:"kindTertiary_4d8937914a",noSidePadding:"noSidePadding_0c149df2c1",insetFocusStyle:"insetFocusStyle_5ec7fa89eb"};!function(o){const r="s_id-216fe7e3e8d5_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const i=document.createElement("style");i.id=r,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button_9514c05f38 {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button_9514c05f38:focus-visible, .button_9514c05f38.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_9514c05f38:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.button_9514c05f38 .loader_46c0e34bf4 {\n  height: 100%;\n}\n.button_9514c05f38 .loader_46c0e34bf4 .loaderSvg_e3e735d606 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_9514c05f38 .textPlaceholder_bde93f9115 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_9514c05f38.success_2e2bc9cd36 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_9514c05f38.success_2e2bc9cd36 .successContent_39a044a65e {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_bb563918b5 {\n  margin-inline-end: var(--space-8);\n}\n.marginLeft_14785ab5b7 {\n  margin-inline-start: var(--space-8);\n}\n.rightFlat_9476a4903e {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n.leftFlat_0eb27baf0d {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n.button_9514c05f38:active:not(.preventClickAnimation_bba57d5d70) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_9514c05f38 .leftIcon_bb563918b5 {\n  margin-inline-end: var(--space-8);\n}\n.button_9514c05f38 .rightIcon_14785ab5b7 {\n  margin-inline-start: var(--space-8);\n}\n.sizeXxs_ceb35b28b4 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--space-4);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs_9f5e6f0daa {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall_8f7777896b {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall_8f7777896b .loader_46c0e34bf4 {\n  top: 7px;\n}\n.sizeMedium_6b56752418 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--space-8) var(--space-16);\n  height: 40px;\n}\n.sizeLarge_2bb434bb45 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--space-24);\n  height: 48px;\n}\n.kindPrimary_22741d60c9 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_22741d60c9.colorPrimary_390cbb27d6 {\n  background: var(--primary-color);\n}\n.kindPrimary_22741d60c9.colorBrand_8f4d565c27 {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_22741d60c9.colorPrimaryActive_8870933bc0,\n.kindPrimary_22741d60c9.colorPrimary_390cbb27d6:hover,\n.kindPrimary_22741d60c9.colorPrimary_390cbb27d6:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_22741d60c9.colorBrandActive_d1c4a34995,\n.kindPrimary_22741d60c9.colorBrand_8f4d565c27:hover,\n.kindPrimary_22741d60c9.colorBrand_8f4d565c27:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_22741d60c9.colorPositive_9e21b5cee6 {\n  background: var(--positive-color);\n}\n.kindPrimary_22741d60c9.colorPositiveActive_671387cf96,\n.kindPrimary_22741d60c9.colorPositive_9e21b5cee6:hover,\n.kindPrimary_22741d60c9.colorPositive_9e21b5cee6:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_22741d60c9.colorNegative_69ab58213e {\n  background: var(--negative-color);\n}\n.kindPrimary_22741d60c9.colorNegativeActive_671387cf96,\n.kindPrimary_22741d60c9.colorNegative_69ab58213e:hover,\n.kindPrimary_22741d60c9.colorNegative_69ab58213e:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_22741d60c9.colorInverted_ebc0ce5273 {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_22741d60c9.colorInvertedActive_671387cf96,\n.kindPrimary_22741d60c9.colorInverted_ebc0ce5273:hover,\n.kindPrimary_22741d60c9.colorInverted_ebc0ce5273:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_22741d60c9.button_9514c05f38.colorInverted_ebc0ce5273.disabled_fe4e36c678 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_22741d60c9.colorOnPrimaryColorActive_6fb21324ad,\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:hover,\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_22741d60c9.colorOnPrimaryColorActive_6fb21324ad:focus-visible, .kindPrimary_22741d60c9.colorOnPrimaryColorActive_6fb21324ad.focus-visible_1fc42a4a92,\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:hover:focus-visible,\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:hover.focus-visible_1fc42a4a92,\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:focus:focus-visible,\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_22741d60c9.colorOnPrimaryColorActive_6fb21324ad:focus:not(.focus-visible_1fc42a4a92),\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindPrimary_22741d60c9.colorOnPrimaryColor_430841269a.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125 {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_22741d60c9.colorFixedLightActive_bba57d5d70,\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:hover,\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_22741d60c9.colorFixedLightActive_bba57d5d70:focus-visible, .kindPrimary_22741d60c9.colorFixedLightActive_bba57d5d70.focus-visible_1fc42a4a92,\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:hover:focus-visible,\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:hover.focus-visible_1fc42a4a92,\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:focus:focus-visible,\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_22741d60c9.colorFixedLightActive_bba57d5d70:focus:not(.focus-visible_1fc42a4a92),\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindPrimary_22741d60c9.colorFixedLight_b4d2130125.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_22741d60c9.colorFixedDarkActive_18f554427d,\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:hover,\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_22741d60c9.colorFixedDarkActive_18f554427d:focus-visible, .kindPrimary_22741d60c9.colorFixedDarkActive_18f554427d.focus-visible_1fc42a4a92,\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:hover:focus-visible,\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:hover.focus-visible_1fc42a4a92,\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:focus:focus-visible,\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_22741d60c9.colorFixedDarkActive_18f554427d:focus:not(.focus-visible_1fc42a4a92),\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindPrimary_22741d60c9.colorFixedDark_1a9aaa7db6.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_22741d60c9.colorOnInvertedBackground_4417fa3b41 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_22741d60c9.colorOnInvertedBackgroundActive_66476b297a,\n.kindPrimary_22741d60c9.colorOnInvertedBackground_4417fa3b41:hover,\n.kindPrimary_22741d60c9.colorOnInvertedBackground_4417fa3b41:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_22741d60c9.button_9514c05f38.colorOnInvertedBackground_4417fa3b41.disabled_fe4e36c678 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_22741d60c9.button_9514c05f38.disabled_fe4e36c678 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_5c7f925966 {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_5c7f925966.sizeSmall_8f7777896b {\n  line-height: 22px;\n}\n.kindSecondary_5c7f925966.sizeMedium_6b56752418 {\n  line-height: 22px;\n}\n.kindSecondary_5c7f925966.sizeLarge_2bb434bb45 {\n  line-height: 22px;\n}\n.kindSecondary_5c7f925966.colorPrimaryActive_8870933bc0 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_5c7f925966.colorPrimaryActive_8870933bc0:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_5c7f925966.colorBrandActive_d1c4a34995 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_5c7f925966.colorBrandActive_d1c4a34995,\n.kindSecondary_5c7f925966.colorBrandActive_d1c4a34995:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_5c7f925966.colorPrimary_390cbb27d6:hover:not(.colorPrimaryActive_8870933bc0),\n.kindSecondary_5c7f925966.colorPrimary_390cbb27d6:focus:not(.colorPrimaryActive_8870933bc0) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_5c7f925966.colorBrand_8f4d565c27:hover:not(.colorBrandActive_d1c4a34995),\n.kindSecondary_5c7f925966.colorBrand_8f4d565c27:focus:not(.colorBrandActive_d1c4a34995) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_5c7f925966.colorPositive_9e21b5cee6 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_5c7f925966.colorPositiveActive_671387cf96,\n.kindSecondary_5c7f925966.colorPositive_9e21b5cee6:hover,\n.kindSecondary_5c7f925966.colorPositive_9e21b5cee6:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_5c7f925966.colorNegative_69ab58213e {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_5c7f925966.colorNegativeActive_671387cf96,\n.kindSecondary_5c7f925966.colorNegative_69ab58213e:hover,\n.kindSecondary_5c7f925966.colorNegative_69ab58213e:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_5c7f925966.colorInverted_ebc0ce5273 {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_5c7f925966.colorInvertedActive_671387cf96,\n.kindSecondary_5c7f925966.colorInverted_ebc0ce5273:hover,\n.kindSecondary_5c7f925966.colorInverted_ebc0ce5273:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_5c7f925966.colorInverted_ebc0ce5273.disabled_fe4e36c678 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_5c7f925966.colorOnPrimaryColorActive_6fb21324ad,\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:hover,\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_5c7f925966.colorOnPrimaryColorActive_6fb21324ad:focus-visible, .kindSecondary_5c7f925966.colorOnPrimaryColorActive_6fb21324ad.focus-visible_1fc42a4a92,\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:hover:focus-visible,\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:hover.focus-visible_1fc42a4a92,\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:focus:focus-visible,\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_5c7f925966.colorOnPrimaryColorActive_6fb21324ad:focus:not(.focus-visible_1fc42a4a92),\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindSecondary_5c7f925966.colorOnPrimaryColor_430841269a.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125 {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_5c7f925966.colorFixedLightActive_bba57d5d70,\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:hover,\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_5c7f925966.colorFixedLightActive_bba57d5d70:focus-visible, .kindSecondary_5c7f925966.colorFixedLightActive_bba57d5d70.focus-visible_1fc42a4a92,\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:hover:focus-visible,\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:hover.focus-visible_1fc42a4a92,\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:focus:focus-visible,\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_5c7f925966.colorFixedLightActive_bba57d5d70:focus:not(.focus-visible_1fc42a4a92),\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_5c7f925966.colorFixedDarkActive_18f554427d,\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:hover,\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_5c7f925966.colorFixedDarkActive_18f554427d:focus-visible, .kindSecondary_5c7f925966.colorFixedDarkActive_18f554427d.focus-visible_1fc42a4a92,\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:hover:focus-visible,\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:hover.focus-visible_1fc42a4a92,\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:focus:focus-visible,\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_5c7f925966.colorFixedDarkActive_18f554427d:focus:not(.focus-visible_1fc42a4a92),\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindSecondary_5c7f925966.colorOnInvertedBackground_4417fa3b41 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_5c7f925966.colorOnInvertedBackgroundActive_66476b297a,\n.kindSecondary_5c7f925966.colorOnInvertedBackground_4417fa3b41:hover,\n.kindSecondary_5c7f925966.colorOnInvertedBackground_4417fa3b41:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_5c7f925966.colorOnInvertedBackground_4417fa3b41.disabled_fe4e36c678 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_5c7f925966.colorFixedLight_b4d2130125.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_5c7f925966.colorFixedDark_1a9aaa7db6.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_5c7f925966.disabled_fe4e36c678 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_5c7f925966.disabled_fe4e36c678:hover {\n  background-color: transparent;\n}\n.kindTertiary_4d8937914a {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_4d8937914a.colorPrimaryActive_8870933bc0 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_4d8937914a.colorPrimaryActive_8870933bc0:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_4d8937914a.colorBrandActive_d1c4a34995 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_4d8937914a.colorBrandActive_d1c4a34995,\n.kindTertiary_4d8937914a.colorBrandActive_d1c4a34995:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_4d8937914a.colorPrimary_390cbb27d6:hover:not(.colorPrimaryActive_8870933bc0),\n.kindTertiary_4d8937914a.colorPrimary_390cbb27d6:focus:not(.colorPrimaryActive_8870933bc0) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_4d8937914a.colorBrand_8f4d565c27:hover:not(.colorBrandActive_d1c4a34995),\n.kindTertiary_4d8937914a.colorBrand_8f4d565c27:focus:not(.colorBrandActive_d1c4a34995) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_4d8937914a.colorPositive_9e21b5cee6 {\n  color: var(--positive-color);\n}\n.kindTertiary_4d8937914a.colorPositiveActive_671387cf96,\n.kindTertiary_4d8937914a.colorPositive_9e21b5cee6:hover,\n.kindTertiary_4d8937914a.colorPositive_9e21b5cee6:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_4d8937914a.colorNegative_69ab58213e {\n  color: var(--negative-color);\n}\n.kindTertiary_4d8937914a.colorNegativeActive_671387cf96,\n.kindTertiary_4d8937914a.colorNegative_69ab58213e:hover,\n.kindTertiary_4d8937914a.colorNegative_69ab58213e:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_4d8937914a.colorInverted_ebc0ce5273 {\n  color: var(--primary-text-color);\n}\n.kindTertiary_4d8937914a.colorInvertedActive_671387cf96,\n.kindTertiary_4d8937914a.colorInverted_ebc0ce5273:hover,\n.kindTertiary_4d8937914a.colorInverted_ebc0ce5273:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_4d8937914a.colorInverted_ebc0ce5273.disabled_fe4e36c678 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_4d8937914a.colorOnPrimaryColorActive_6fb21324ad,\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:hover,\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_4d8937914a.colorOnPrimaryColorActive_6fb21324ad:focus-visible, .kindTertiary_4d8937914a.colorOnPrimaryColorActive_6fb21324ad.focus-visible_1fc42a4a92,\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:hover:focus-visible,\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:hover.focus-visible_1fc42a4a92,\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:focus:focus-visible,\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_4d8937914a.colorOnPrimaryColorActive_6fb21324ad:focus:not(.focus-visible_1fc42a4a92),\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindTertiary_4d8937914a.colorOnPrimaryColor_430841269a.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125 {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_4d8937914a.colorFixedLightActive_bba57d5d70,\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:hover,\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_4d8937914a.colorFixedLightActive_bba57d5d70:focus-visible, .kindTertiary_4d8937914a.colorFixedLightActive_bba57d5d70.focus-visible_1fc42a4a92,\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:hover:focus-visible,\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:hover.focus-visible_1fc42a4a92,\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:focus:focus-visible,\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_4d8937914a.colorFixedLightActive_bba57d5d70:focus:not(.focus-visible_1fc42a4a92),\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindTertiary_4d8937914a.colorFixedLight_b4d2130125.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_4d8937914a.colorFixedDarkActive_18f554427d,\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:hover,\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_4d8937914a.colorFixedDarkActive_18f554427d:focus-visible, .kindTertiary_4d8937914a.colorFixedDarkActive_18f554427d.focus-visible_1fc42a4a92,\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:hover:focus-visible,\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:hover.focus-visible_1fc42a4a92,\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:focus:focus-visible,\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:focus.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_4d8937914a.colorFixedDarkActive_18f554427d:focus:not(.focus-visible_1fc42a4a92),\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:hover:focus:not(.focus-visible_1fc42a4a92),\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6:focus:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}\n.kindTertiary_4d8937914a.colorFixedDark_1a9aaa7db6.disabled_fe4e36c678 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_4d8937914a.colorOnInvertedBackground_4417fa3b41 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_4d8937914a.colorOnInvertedBackgroundActive_66476b297a,\n.kindTertiary_4d8937914a.colorOnInvertedBackground_4417fa3b41:hover,\n.kindTertiary_4d8937914a.colorOnInvertedBackground_4417fa3b41:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_4d8937914a.colorOnInvertedBackground_4417fa3b41.disabled_fe4e36c678 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_4d8937914a.disabled_fe4e36c678 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_4d8937914a.disabled_fe4e36c678:hover {\n  background-color: transparent;\n}\n.noSidePadding_0c149df2c1 {\n  padding-inline: 0;\n}\n.button_9514c05f38.insetFocusStyle_5ec7fa89eb:focus-visible, .button_9514c05f38.insetFocusStyle_5ec7fa89eb.focus-visible_1fc42a4a92 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_9514c05f38.insetFocusStyle_5ec7fa89eb:focus:not(.focus-visible_1fc42a4a92) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-export type ButtonType = "primary" | "secondary" | "tertiary";
-export type ButtonInputType = "button" | "submit" | "reset";
-export type ButtonColor = "primary" | "positive" | "negative" | "inverted" | "on-primary-color" | "on-inverted-background" | "brand" | "fixed-light" | "fixed-dark";
-export type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
+export type ButtonType = "primary" | "secondary" | "tertiary";
+export type ButtonInputType = "button" | "submit" | "reset";
+export type ButtonColor = "primary" | "positive" | "negative" | "inverted" | "on-primary-color" | "on-inverted-background" | "brand" | "fixed-light" | "fixed-dark";
+export type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";

package/dist/Button/helper/dom-helpers.d.ts

@@ -1,2 +1,2 @@
-export declare const TRANSPARENT_COLOR = "rgba(0, 0, 0, 0)";
-export declare function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string;
+export declare const TRANSPARENT_COLOR = "rgba(0, 0, 0, 0)";
+export declare function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string;

package/dist/Button/helper/useButtonLoading.d.ts

@@ -1,5 +1,5 @@
-export declare function useButtonLoading({ isLoading }: {
-    isLoading: boolean;
-}): {
-    loading: boolean;
-};
+export declare function useButtonLoading({ isLoading }: {
+    isLoading: boolean;
+}): {
+    loading: boolean;
+};

package/dist/Button/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Button, type ButtonProps } from "./Button";
-export * from "./Button.types";
+export { default as Button, type ButtonProps } from "./Button";
+export * from "./Button.types";

package/dist/index.d.ts

@@ -1 +1 @@
-export * from "./Button";
+export * from "./Button";

package/dist/mocked_classnames/Button/Button.d.ts

@@ -1,86 +1,86 @@
-import React, { type AriaAttributes } from "react";
-import { type SubIcon } from "@vibe/icon";
-import { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from "./Button.types";
-import { type VibeComponentProps } from "@vibe/shared";
-export interface ButtonProps extends VibeComponentProps {
-    children: React.ReactNode;
-    /** Custom class names to pass to the component */
-    className?: string;
-    activeButtonClassName?: string;
-    /** The button's kind */
-    kind?: ButtonType;
-    /** Callback function to run when the button is clicked */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Blur on button click */
-    blurOnMouseUp?: boolean;
-    /** Name of the button - for form submit usages  */
-    name?: string;
-    /** The button's size */
-    size?: ButtonSize;
-    /** The button's color */
-    color?: ButtonColor;
-    /** The button's type */
-    type?: ButtonInputType;
-    /** Whether the button should be disabled or not */
-    disabled?: boolean;
-    /** Icon to place on the right */
-    rightIcon?: SubIcon;
-    /** Icon to place on the left */
-    leftIcon?: SubIcon;
-    /** the success props are used when you have async action and wants to display a success message */
-    success?: boolean;
-    /** Success icon name */
-    successIcon?: SubIcon;
-    /** Success text */
-    successText?: string;
-    /** loading boolean which switches the text to a loader */
-    loading?: boolean;
-    /** className which is applied to loader container **/
-    loaderClassName?: string;
-    style?: React.CSSProperties;
-    /** displays the active state */
-    active?: boolean;
-    /** id to pass to the button */
-    id?: string;
-    /** adds 8px margin to the right */
-    marginRight?: boolean;
-    /** adds 8px margin to the left */
-    marginLeft?: boolean;
-    /** element id to describe the button accordingly */
-    "aria-labelledby"?: string;
-    /** aria label to provide important when providing only Icon */
-    "aria-label"?: string;
-    /** aria for a button popup */
-    "aria-haspopup"?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
-    /** aria to be set if the popup is open */
-    "aria-expanded"?: boolean;
-    /** aria controls - receives id for the controlled region */
-    "aria-controls"?: string;
-    "aria-describedby"?: AriaAttributes["aria-describedby"];
-    /**
-     * aria to be used for screen reader to know if the button is hidden
-     */
-    "aria-hidden"?: AriaAttributes["aria-hidden"];
-    /**
-     * Indicates the current "pressed" state of toggle buttons
-     */
-    "aria-pressed"?: AriaAttributes["aria-pressed"];
-    /** On Button Focus callback */
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    /** On Button Blur callback */
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    rightFlat?: boolean;
-    leftFlat?: boolean;
-    preventClickAnimation?: boolean;
-    noSidePadding?: boolean;
-    /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */
-    defaultTextColorOnPrimaryColor?: string;
-    "data-testid"?: string;
-    /** Change the focus indicator from around the button to within it */
-    insetFocus?: boolean;
-    /** Specifies the tab order of an element */
-    tabIndex?: number;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default Button;
+import React, { type AriaAttributes } from "react";
+import { type SubIcon } from "@vibe/icon";
+import { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from "./Button.types";
+import { type VibeComponentProps } from "@vibe/shared";
+export interface ButtonProps extends VibeComponentProps {
+    children: React.ReactNode;
+    /** Custom class names to pass to the component */
+    className?: string;
+    activeButtonClassName?: string;
+    /** The button's kind */
+    kind?: ButtonType;
+    /** Callback function to run when the button is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Blur on button click */
+    blurOnMouseUp?: boolean;
+    /** Name of the button - for form submit usages  */
+    name?: string;
+    /** The button's size */
+    size?: ButtonSize;
+    /** The button's color */
+    color?: ButtonColor;
+    /** The button's type */
+    type?: ButtonInputType;
+    /** Whether the button should be disabled or not */
+    disabled?: boolean;
+    /** Icon to place on the right */
+    rightIcon?: SubIcon;
+    /** Icon to place on the left */
+    leftIcon?: SubIcon;
+    /** the success props are used when you have async action and wants to display a success message */
+    success?: boolean;
+    /** Success icon name */
+    successIcon?: SubIcon;
+    /** Success text */
+    successText?: string;
+    /** loading boolean which switches the text to a loader */
+    loading?: boolean;
+    /** className which is applied to loader container **/
+    loaderClassName?: string;
+    style?: React.CSSProperties;
+    /** displays the active state */
+    active?: boolean;
+    /** id to pass to the button */
+    id?: string;
+    /** adds 8px margin to the right */
+    marginRight?: boolean;
+    /** adds 8px margin to the left */
+    marginLeft?: boolean;
+    /** element id to describe the button accordingly */
+    "aria-labelledby"?: string;
+    /** aria label to provide important when providing only Icon */
+    "aria-label"?: string;
+    /** aria for a button popup */
+    "aria-haspopup"?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
+    /** aria to be set if the popup is open */
+    "aria-expanded"?: boolean;
+    /** aria controls - receives id for the controlled region */
+    "aria-controls"?: string;
+    "aria-describedby"?: AriaAttributes["aria-describedby"];
+    /**
+     * aria to be used for screen reader to know if the button is hidden
+     */
+    "aria-hidden"?: AriaAttributes["aria-hidden"];
+    /**
+     * Indicates the current "pressed" state of toggle buttons
+     */
+    "aria-pressed"?: AriaAttributes["aria-pressed"];
+    /** On Button Focus callback */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** On Button Blur callback */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    rightFlat?: boolean;
+    leftFlat?: boolean;
+    preventClickAnimation?: boolean;
+    noSidePadding?: boolean;
+    /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */
+    defaultTextColorOnPrimaryColor?: string;
+    "data-testid"?: string;
+    /** Change the focus indicator from around the button to within it */
+    insetFocus?: boolean;
+    /** Specifies the tab order of an element */
+    tabIndex?: number;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/mocked_classnames/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId, type VibeComponentProps, ComponentDefaultTestId, ComponentVibeId } from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  \"aria-labelledby\"?: string;\n  /** aria label to provide important when providing only Icon */\n  \"aria-label\"?: string;\n  /** aria for a button popup */\n  \"aria-haspopup\"?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  \"aria-expanded\"?: boolean;\n  /** aria controls - receives id for the controlled region */\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind = \"primary\",\n      onClick = NOOP,\n      name,\n      size = \"medium\",\n      color = \"primary\",\n      disabled = false,\n      rightIcon = null,\n      leftIcon = null,\n      success = false,\n      successText = \"\",\n      successIcon = null,\n      style,\n      loading: isLoading = false,\n      loaderClassName,\n      active = false,\n      activeButtonClassName,\n      id,\n      marginRight = false,\n      marginLeft = false,\n      type = \"button\",\n      onMouseDown = NOOP,\n      \"aria-label\": ariaLabel,\n      rightFlat = false,\n      leftFlat = false,\n      preventClickAnimation = false,\n      noSidePadding = false,\n      onFocus = NOOP,\n      onBlur = NOOP,\n      \"aria-labelledby\": ariaLabelledBy,\n      defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp = true,\n      \"data-testid\": dataTestId,\n      insetFocus = false,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: tabIndex ?? (disabled || ariaHidden ? -1 : undefined),\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabelledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return 16;\n          default:\n            return 20;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              type=\"font\"\n              icon={leftIcon}\n              size={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              type=\"font\"\n              icon={rightIcon}\n              size={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                type=\"font\"\n                icon={successIcon}\n                size={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabelledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaExpanded","ariaHasPopup","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","undefined","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId, type VibeComponentProps, ComponentDefaultTestId, ComponentVibeId } from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  \"aria-labelledby\"?: string;\n  /** aria label to provide important when providing only Icon */\n  \"aria-label\"?: string;\n  /** aria for a button popup */\n  \"aria-haspopup\"?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  \"aria-expanded\"?: boolean;\n  /** aria controls - receives id for the controlled region */\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind = \"primary\",\n      onClick = NOOP,\n      name,\n      size = \"medium\",\n      color = \"primary\",\n      disabled = false,\n      rightIcon = null,\n      leftIcon = null,\n      success = false,\n      successText = \"\",\n      successIcon = null,\n      style,\n      loading: isLoading = false,\n      loaderClassName,\n      active = false,\n      activeButtonClassName,\n      id,\n      marginRight = false,\n      marginLeft = false,\n      type = \"button\",\n      onMouseDown = NOOP,\n      \"aria-label\": ariaLabel,\n      rightFlat = false,\n      leftFlat = false,\n      preventClickAnimation = false,\n      noSidePadding = false,\n      onFocus = NOOP,\n      onBlur = NOOP,\n      \"aria-labelledby\": ariaLabelledBy,\n      defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp = true,\n      \"data-testid\": dataTestId,\n      insetFocus = false,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: tabIndex ?? (disabled || ariaHidden ? -1 : undefined),\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabelledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return 16;\n          default:\n            return 20;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              type=\"font\"\n              icon={leftIcon}\n              size={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              type=\"font\"\n              icon={rightIcon}\n              size={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                type=\"font\"\n                icon={successIcon}\n                size={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabelledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaExpanded","ariaHasPopup","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","undefined","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign"],"mappings":"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"}

package/dist/mocked_classnames/Button/Button.module.scss.js

@@ -1,2 +1,2 @@
-var o={button:"button","focus-visible":"focus-visible",loader:"loader",loaderSvg:"loaderSvg",textPlaceholder:"textPlaceholder",success:"success",successContent:"successContent",marginRight:"marginRight",marginLeft:"marginLeft",rightFlat:"rightFlat",leftFlat:"leftFlat",preventClickAnimation:"preventClickAnimation",leftIcon:"leftIcon",rightIcon:"rightIcon",sizeXxs:"sizeXxs",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",kindPrimary:"kindPrimary",colorPrimary:"colorPrimary",colorBrand:"colorBrand",colorPrimaryActive:"colorPrimaryActive",colorBrandActive:"colorBrandActive",colorPositive:"colorPositive",colorPositiveActive:"colorPositiveActive",colorNegative:"colorNegative",colorNegativeActive:"colorNegativeActive",colorInverted:"colorInverted",colorInvertedActive:"colorInvertedActive",disabled:"disabled",colorOnPrimaryColor:"colorOnPrimaryColor",colorOnPrimaryColorActive:"colorOnPrimaryColorActive",colorFixedLight:"colorFixedLight",colorFixedLightActive:"colorFixedLightActive",colorFixedDark:"colorFixedDark",colorFixedDarkActive:"colorFixedDarkActive",colorOnInvertedBackground:"colorOnInvertedBackground",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive",kindSecondary:"kindSecondary",kindTertiary:"kindTertiary",noSidePadding:"noSidePadding",insetFocusStyle:"insetFocusStyle"};!function(o){const r="s_id-216fe7e3e8d5_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const i=document.createElement("style");i.id=r,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button:focus-visible, .button.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button:focus:not(.focus-visible) {\n  outline: none;\n}\n.button .loader {\n  height: 100%;\n}\n.button .loader .loaderSvg {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button .textPlaceholder {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button.success {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button.success .successContent {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight {\n  margin-inline-end: var(--space-8);\n}\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}\n.rightFlat {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n.leftFlat {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n.button:active:not(.preventClickAnimation) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button .leftIcon {\n  margin-inline-end: var(--space-8);\n}\n.button .rightIcon {\n  margin-inline-start: var(--space-8);\n}\n.sizeXxs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--space-4);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall .loader {\n  top: 7px;\n}\n.sizeMedium {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--space-8) var(--space-16);\n  height: 40px;\n}\n.sizeLarge {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--space-24);\n  height: 48px;\n}\n.kindPrimary {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorPrimary {\n  background: var(--primary-color);\n}\n.kindPrimary.colorBrand {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary.colorPrimaryActive,\n.kindPrimary.colorPrimary:hover,\n.kindPrimary.colorPrimary:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary.colorBrandActive,\n.kindPrimary.colorBrand:hover,\n.kindPrimary.colorBrand:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary.colorPositive {\n  background: var(--positive-color);\n}\n.kindPrimary.colorPositiveActive,\n.kindPrimary.colorPositive:hover,\n.kindPrimary.colorPositive:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary.colorNegative {\n  background: var(--negative-color);\n}\n.kindPrimary.colorNegativeActive,\n.kindPrimary.colorNegative:hover,\n.kindPrimary.colorNegative:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary.colorInverted {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary.colorInvertedActive,\n.kindPrimary.colorInverted:hover,\n.kindPrimary.colorInverted:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary.button.colorInverted.disabled {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary.colorOnPrimaryColor {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary.colorOnPrimaryColorActive,\n.kindPrimary.colorOnPrimaryColor:hover,\n.kindPrimary.colorOnPrimaryColor:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorOnPrimaryColorActive:focus-visible, .kindPrimary.colorOnPrimaryColorActive.focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover:focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover.focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus:focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorFixedLight {\n  background: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedLightActive,\n.kindPrimary.colorFixedLight:hover,\n.kindPrimary.colorFixedLight:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorFixedLightActive:focus-visible, .kindPrimary.colorFixedLightActive.focus-visible,\n.kindPrimary.colorFixedLight:hover:focus-visible,\n.kindPrimary.colorFixedLight:hover.focus-visible,\n.kindPrimary.colorFixedLight:focus:focus-visible,\n.kindPrimary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedLightActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDark {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDarkActive,\n.kindPrimary.colorFixedDark:hover,\n.kindPrimary.colorFixedDark:focus {\n  filter: brightness(125%);\n}\n.kindPrimary.colorFixedDarkActive:focus-visible, .kindPrimary.colorFixedDarkActive.focus-visible,\n.kindPrimary.colorFixedDark:hover:focus-visible,\n.kindPrimary.colorFixedDark:hover.focus-visible,\n.kindPrimary.colorFixedDark:focus:focus-visible,\n.kindPrimary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary.colorOnInvertedBackground {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary.colorOnInvertedBackgroundActive,\n.kindPrimary.colorOnInvertedBackground:hover,\n.kindPrimary.colorOnInvertedBackground:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary.button.colorOnInvertedBackground.disabled {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary.button.disabled {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary.sizeSmall {\n  line-height: 22px;\n}\n.kindSecondary.sizeMedium {\n  line-height: 22px;\n}\n.kindSecondary.sizeLarge {\n  line-height: 22px;\n}\n.kindSecondary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary.colorBrandActive,\n.kindSecondary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorBrand:hover:not(.colorBrandActive),\n.kindSecondary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorPositive {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary.colorPositiveActive,\n.kindSecondary.colorPositive:hover,\n.kindSecondary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary.colorNegative {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary.colorNegativeActive,\n.kindSecondary.colorNegative:hover,\n.kindSecondary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary.colorInverted {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary.colorInvertedActive,\n.kindSecondary.colorInverted:hover,\n.kindSecondary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorInverted.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary.colorOnPrimaryColorActive,\n.kindSecondary.colorOnPrimaryColor:hover,\n.kindSecondary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorOnPrimaryColorActive:focus-visible, .kindSecondary.colorOnPrimaryColorActive.focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover:focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover.focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus:focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary.colorFixedLight {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedLightActive,\n.kindSecondary.colorFixedLight:hover,\n.kindSecondary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorFixedLightActive:focus-visible, .kindSecondary.colorFixedLightActive.focus-visible,\n.kindSecondary.colorFixedLight:hover:focus-visible,\n.kindSecondary.colorFixedLight:hover.focus-visible,\n.kindSecondary.colorFixedLight:focus:focus-visible,\n.kindSecondary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedLightActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorFixedDark {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.colorFixedDarkActive,\n.kindSecondary.colorFixedDark:hover,\n.kindSecondary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary.colorFixedDarkActive:focus-visible, .kindSecondary.colorFixedDarkActive.focus-visible,\n.kindSecondary.colorFixedDark:hover:focus-visible,\n.kindSecondary.colorFixedDark:hover.focus-visible,\n.kindSecondary.colorFixedDark:focus:focus-visible,\n.kindSecondary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnInvertedBackground {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary.colorOnInvertedBackgroundActive,\n.kindSecondary.colorOnInvertedBackground:hover,\n.kindSecondary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindSecondary.colorOnInvertedBackground.disabled {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary.disabled:hover {\n  background-color: transparent;\n}\n.kindTertiary {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary.colorBrandActive,\n.kindTertiary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorBrand:hover:not(.colorBrandActive),\n.kindTertiary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorPositive {\n  color: var(--positive-color);\n}\n.kindTertiary.colorPositiveActive,\n.kindTertiary.colorPositive:hover,\n.kindTertiary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary.colorNegative {\n  color: var(--negative-color);\n}\n.kindTertiary.colorNegativeActive,\n.kindTertiary.colorNegative:hover,\n.kindTertiary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary.colorInverted {\n  color: var(--primary-text-color);\n}\n.kindTertiary.colorInvertedActive,\n.kindTertiary.colorInverted:hover,\n.kindTertiary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorInverted.disabled {\n  color: var(--disabled-text-color);\n}\n.kindTertiary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorOnPrimaryColorActive,\n.kindTertiary.colorOnPrimaryColor:hover,\n.kindTertiary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorOnPrimaryColorActive:focus-visible, .kindTertiary.colorOnPrimaryColorActive.focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover:focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover.focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus:focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorFixedLight {\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedLightActive,\n.kindTertiary.colorFixedLight:hover,\n.kindTertiary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorFixedLightActive:focus-visible, .kindTertiary.colorFixedLightActive.focus-visible,\n.kindTertiary.colorFixedLight:hover:focus-visible,\n.kindTertiary.colorFixedLight:hover.focus-visible,\n.kindTertiary.colorFixedLight:focus:focus-visible,\n.kindTertiary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedLightActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedDark {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorFixedDarkActive,\n.kindTertiary.colorFixedDark:hover,\n.kindTertiary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary.colorFixedDarkActive:focus-visible, .kindTertiary.colorFixedDarkActive.focus-visible,\n.kindTertiary.colorFixedDark:hover:focus-visible,\n.kindTertiary.colorFixedDark:hover.focus-visible,\n.kindTertiary.colorFixedDark:focus:focus-visible,\n.kindTertiary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorOnInvertedBackground {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.colorOnInvertedBackgroundActive,\n.kindTertiary.colorOnInvertedBackground:hover,\n.kindTertiary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindTertiary.colorOnInvertedBackground.disabled {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.disabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary.disabled:hover {\n  background-color: transparent;\n}\n.noSidePadding {\n  padding-inline: 0;\n}\n.button.insetFocusStyle:focus-visible, .button.insetFocusStyle.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button.insetFocusStyle:focus:not(.focus-visible) {\n  outline: none;\n}");export{o as default};
+var o={button:"button","focus-visible":"focus-visible",loader:"loader",loaderSvg:"loaderSvg",textPlaceholder:"textPlaceholder",success:"success",successContent:"successContent",marginRight:"marginRight",marginLeft:"marginLeft",rightFlat:"rightFlat",leftFlat:"leftFlat",preventClickAnimation:"preventClickAnimation",leftIcon:"leftIcon",rightIcon:"rightIcon",sizeXxs:"sizeXxs",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",kindPrimary:"kindPrimary",colorPrimary:"colorPrimary",colorBrand:"colorBrand",colorPrimaryActive:"colorPrimaryActive",colorBrandActive:"colorBrandActive",colorPositive:"colorPositive",colorPositiveActive:"colorPositiveActive",colorNegative:"colorNegative",colorNegativeActive:"colorNegativeActive",colorInverted:"colorInverted",colorInvertedActive:"colorInvertedActive",disabled:"disabled",colorOnPrimaryColor:"colorOnPrimaryColor",colorOnPrimaryColorActive:"colorOnPrimaryColorActive",colorFixedLight:"colorFixedLight",colorFixedLightActive:"colorFixedLightActive",colorFixedDark:"colorFixedDark",colorFixedDarkActive:"colorFixedDarkActive",colorOnInvertedBackground:"colorOnInvertedBackground",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive",kindSecondary:"kindSecondary",kindTertiary:"kindTertiary",noSidePadding:"noSidePadding",insetFocusStyle:"insetFocusStyle"};!function(o){const r="s_id-216fe7e3e8d5_4_0_0-alpha_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const i=document.createElement("style");i.id=r,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button:focus-visible, .button.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button:focus:not(.focus-visible) {\n  outline: none;\n}\n.button .loader {\n  height: 100%;\n}\n.button .loader .loaderSvg {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button .textPlaceholder {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button.success {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button.success .successContent {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight {\n  margin-inline-end: var(--space-8);\n}\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}\n.rightFlat {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n.leftFlat {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n.button:active:not(.preventClickAnimation) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button .leftIcon {\n  margin-inline-end: var(--space-8);\n}\n.button .rightIcon {\n  margin-inline-start: var(--space-8);\n}\n.sizeXxs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--space-4);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--space-4) var(--space-8);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall .loader {\n  top: 7px;\n}\n.sizeMedium {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--space-8) var(--space-16);\n  height: 40px;\n}\n.sizeLarge {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--space-24);\n  height: 48px;\n}\n.kindPrimary {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorPrimary {\n  background: var(--primary-color);\n}\n.kindPrimary.colorBrand {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary.colorPrimaryActive,\n.kindPrimary.colorPrimary:hover,\n.kindPrimary.colorPrimary:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary.colorBrandActive,\n.kindPrimary.colorBrand:hover,\n.kindPrimary.colorBrand:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary.colorPositive {\n  background: var(--positive-color);\n}\n.kindPrimary.colorPositiveActive,\n.kindPrimary.colorPositive:hover,\n.kindPrimary.colorPositive:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary.colorNegative {\n  background: var(--negative-color);\n}\n.kindPrimary.colorNegativeActive,\n.kindPrimary.colorNegative:hover,\n.kindPrimary.colorNegative:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary.colorInverted {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary.colorInvertedActive,\n.kindPrimary.colorInverted:hover,\n.kindPrimary.colorInverted:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary.button.colorInverted.disabled {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary.colorOnPrimaryColor {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary.colorOnPrimaryColorActive,\n.kindPrimary.colorOnPrimaryColor:hover,\n.kindPrimary.colorOnPrimaryColor:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorOnPrimaryColorActive:focus-visible, .kindPrimary.colorOnPrimaryColorActive.focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover:focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover.focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus:focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorFixedLight {\n  background: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedLightActive,\n.kindPrimary.colorFixedLight:hover,\n.kindPrimary.colorFixedLight:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorFixedLightActive:focus-visible, .kindPrimary.colorFixedLightActive.focus-visible,\n.kindPrimary.colorFixedLight:hover:focus-visible,\n.kindPrimary.colorFixedLight:hover.focus-visible,\n.kindPrimary.colorFixedLight:focus:focus-visible,\n.kindPrimary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedLightActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDark {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDarkActive,\n.kindPrimary.colorFixedDark:hover,\n.kindPrimary.colorFixedDark:focus {\n  filter: brightness(125%);\n}\n.kindPrimary.colorFixedDarkActive:focus-visible, .kindPrimary.colorFixedDarkActive.focus-visible,\n.kindPrimary.colorFixedDark:hover:focus-visible,\n.kindPrimary.colorFixedDark:hover.focus-visible,\n.kindPrimary.colorFixedDark:focus:focus-visible,\n.kindPrimary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary.colorOnInvertedBackground {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary.colorOnInvertedBackgroundActive,\n.kindPrimary.colorOnInvertedBackground:hover,\n.kindPrimary.colorOnInvertedBackground:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary.button.colorOnInvertedBackground.disabled {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary.button.disabled {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary.sizeSmall {\n  line-height: 22px;\n}\n.kindSecondary.sizeMedium {\n  line-height: 22px;\n}\n.kindSecondary.sizeLarge {\n  line-height: 22px;\n}\n.kindSecondary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary.colorBrandActive,\n.kindSecondary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorBrand:hover:not(.colorBrandActive),\n.kindSecondary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorPositive {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary.colorPositiveActive,\n.kindSecondary.colorPositive:hover,\n.kindSecondary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary.colorNegative {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary.colorNegativeActive,\n.kindSecondary.colorNegative:hover,\n.kindSecondary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary.colorInverted {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary.colorInvertedActive,\n.kindSecondary.colorInverted:hover,\n.kindSecondary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorInverted.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary.colorOnPrimaryColorActive,\n.kindSecondary.colorOnPrimaryColor:hover,\n.kindSecondary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorOnPrimaryColorActive:focus-visible, .kindSecondary.colorOnPrimaryColorActive.focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover:focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover.focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus:focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary.colorFixedLight {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedLightActive,\n.kindSecondary.colorFixedLight:hover,\n.kindSecondary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorFixedLightActive:focus-visible, .kindSecondary.colorFixedLightActive.focus-visible,\n.kindSecondary.colorFixedLight:hover:focus-visible,\n.kindSecondary.colorFixedLight:hover.focus-visible,\n.kindSecondary.colorFixedLight:focus:focus-visible,\n.kindSecondary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedLightActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorFixedDark {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.colorFixedDarkActive,\n.kindSecondary.colorFixedDark:hover,\n.kindSecondary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary.colorFixedDarkActive:focus-visible, .kindSecondary.colorFixedDarkActive.focus-visible,\n.kindSecondary.colorFixedDark:hover:focus-visible,\n.kindSecondary.colorFixedDark:hover.focus-visible,\n.kindSecondary.colorFixedDark:focus:focus-visible,\n.kindSecondary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnInvertedBackground {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary.colorOnInvertedBackgroundActive,\n.kindSecondary.colorOnInvertedBackground:hover,\n.kindSecondary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindSecondary.colorOnInvertedBackground.disabled {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary.disabled:hover {\n  background-color: transparent;\n}\n.kindTertiary {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary.colorBrandActive,\n.kindTertiary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorBrand:hover:not(.colorBrandActive),\n.kindTertiary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorPositive {\n  color: var(--positive-color);\n}\n.kindTertiary.colorPositiveActive,\n.kindTertiary.colorPositive:hover,\n.kindTertiary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary.colorNegative {\n  color: var(--negative-color);\n}\n.kindTertiary.colorNegativeActive,\n.kindTertiary.colorNegative:hover,\n.kindTertiary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary.colorInverted {\n  color: var(--primary-text-color);\n}\n.kindTertiary.colorInvertedActive,\n.kindTertiary.colorInverted:hover,\n.kindTertiary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorInverted.disabled {\n  color: var(--disabled-text-color);\n}\n.kindTertiary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorOnPrimaryColorActive,\n.kindTertiary.colorOnPrimaryColor:hover,\n.kindTertiary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorOnPrimaryColorActive:focus-visible, .kindTertiary.colorOnPrimaryColorActive.focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover:focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover.focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus:focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorFixedLight {\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedLightActive,\n.kindTertiary.colorFixedLight:hover,\n.kindTertiary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorFixedLightActive:focus-visible, .kindTertiary.colorFixedLightActive.focus-visible,\n.kindTertiary.colorFixedLight:hover:focus-visible,\n.kindTertiary.colorFixedLight:hover.focus-visible,\n.kindTertiary.colorFixedLight:focus:focus-visible,\n.kindTertiary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedLightActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedDark {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorFixedDarkActive,\n.kindTertiary.colorFixedDark:hover,\n.kindTertiary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary.colorFixedDarkActive:focus-visible, .kindTertiary.colorFixedDarkActive.focus-visible,\n.kindTertiary.colorFixedDark:hover:focus-visible,\n.kindTertiary.colorFixedDark:hover.focus-visible,\n.kindTertiary.colorFixedDark:focus:focus-visible,\n.kindTertiary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorOnInvertedBackground {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.colorOnInvertedBackgroundActive,\n.kindTertiary.colorOnInvertedBackground:hover,\n.kindTertiary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindTertiary.colorOnInvertedBackground.disabled {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.disabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary.disabled:hover {\n  background-color: transparent;\n}\n.noSidePadding {\n  padding-inline: 0;\n}\n.button.insetFocusStyle:focus-visible, .button.insetFocusStyle.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button.insetFocusStyle:focus:not(.focus-visible) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/mocked_classnames/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-export type ButtonType = "primary" | "secondary" | "tertiary";
-export type ButtonInputType = "button" | "submit" | "reset";
-export type ButtonColor = "primary" | "positive" | "negative" | "inverted" | "on-primary-color" | "on-inverted-background" | "brand" | "fixed-light" | "fixed-dark";
-export type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
+export type ButtonType = "primary" | "secondary" | "tertiary";
+export type ButtonInputType = "button" | "submit" | "reset";
+export type ButtonColor = "primary" | "positive" | "negative" | "inverted" | "on-primary-color" | "on-inverted-background" | "brand" | "fixed-light" | "fixed-dark";
+export type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";

package/dist/mocked_classnames/Button/helper/dom-helpers.d.ts

@@ -1,2 +1,2 @@
-export declare const TRANSPARENT_COLOR = "rgba(0, 0, 0, 0)";
-export declare function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string;
+export declare const TRANSPARENT_COLOR = "rgba(0, 0, 0, 0)";
+export declare function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string;

package/dist/mocked_classnames/Button/helper/useButtonLoading.d.ts

@@ -1,5 +1,5 @@
-export declare function useButtonLoading({ isLoading }: {
-    isLoading: boolean;
-}): {
-    loading: boolean;
-};
+export declare function useButtonLoading({ isLoading }: {
+    isLoading: boolean;
+}): {
+    loading: boolean;
+};

package/dist/mocked_classnames/Button/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Button, type ButtonProps } from "./Button";
-export * from "./Button.types";
+export { default as Button, type ButtonProps } from "./Button";
+export * from "./Button.types";

package/dist/mocked_classnames/index.d.ts

@@ -1 +1 @@
-export * from "./Button";
+export * from "./Button";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/button",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-beta.0",
   "description": "Vibe sub-package for button components",
   "repository": {
     "type": "git",
@@ -38,20 +38,21 @@
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@vibe/icon": "^4.0.0-alpha.1",
-    "@vibe/loader": "^4.0.0-alpha.1",
-    "@vibe/shared": "^4.0.0-alpha.1",
+    "@vibe/icon": "^4.0.0-beta.0",
+    "@vibe/loader": "^4.0.0-beta.0",
+    "@vibe/shared": "^4.0.0-beta.0",
+    "@vibe/style": "^4.0.0-beta.0",
     "classnames": "^2.5.1",
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
-    "@vibe/config": "^4.0.0-alpha.1",
-    "@vibe/icons": "^4.0.0-alpha.1",
+    "@vibe/config": "^4.0.0-beta.0",
+    "@vibe/icons": "^4.0.0-beta.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
@@ -69,5 +70,5 @@
       "../../../node_modules/@vibe/config/.eslintrc.cjs"
     ]
   },
-  "gitHead": "f305f32bdfb00f167f742efbfab14414fa23a167"
+  "gitHead": "91790ad83a8f09e257c21dd0d0abfe9eaecf9e82"
 }