@vibe/core 4.5.6 → 4.6.0-alpha-1900b.0

package/dist/base/dist/BaseInput/BaseInput.module.scss.js

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_4e637d0ffe",small:"small_f20c7a64b5",medium:"medium_9faf35356c",large:"large_eb4f237b49",rightThinnerPadding:"rightThinnerPadding_402c5ad3a2",input:"input_ce904588fb",success:"success_2fa597349b",readOnly:"readOnly_f0ffe20fe8",disabled:"disabled_7212199488",error:"error_9d53669f93"};!function(e){var r="s_id-b69634d43ba7_4_0_4";if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;var o=document.createElement("style");o.id=r,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.wrapper_4e637d0ffe {\n  width: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  padding-block: var(--space-8);\n  padding-inline: var(--space-12) var(--space-4);\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  outline: none;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: var(--secondary-background-color);\n  transition: border-color var(--motion-productive-medium) ease-in;\n}\n.wrapper_4e637d0ffe.small_f20c7a64b5 {\n  min-height: 32px;\n  height: 32px;\n  padding-inline-start: var(--space-8);\n  gap: var(--space-4);\n  font: var(--font-text2-normal);\n}\n.wrapper_4e637d0ffe.medium_9faf35356c {\n  min-height: 40px;\n  height: 40px;\n}\n.wrapper_4e637d0ffe.large_eb4f237b49 {\n  min-height: 48px;\n  height: 48px;\n  padding-block: var(--space-8);\n}\n.wrapper_4e637d0ffe.rightThinnerPadding_402c5ad3a2 {\n  padding-inline-end: var(--space-16);\n}\n.wrapper_4e637d0ffe:hover {\n  border-color: var(--primary-text-color);\n}\n@supports selector(:has(*)) {\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:active, .input_ce904588fb:focus) {\n    border-color: var(--primary-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:-moz-read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:-moz-read-only) .input_ce904588fb {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:read-only) .input_ce904588fb {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:disabled) {\n    cursor: not-allowed;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n    color: var(--disabled-text-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb:disabled) .input_ce904588fb {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_4e637d0ffe.success_2fa597349b {\n    border-color: var(--positive-color);\n  }\n  .wrapper_4e637d0ffe.success_2fa597349b:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_4e637d0ffe.success_2fa597349b:has(.input_ce904588fb:active, .input_ce904588fb:focus) {\n    border-color: var(--positive-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb[aria-invalid=true]) {\n    border-color: var(--negative-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb[aria-invalid=true]):hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_4e637d0ffe:has(.input_ce904588fb[aria-invalid=true]):has(.input_ce904588fb:active, .input_ce904588fb:focus) {\n    border-color: var(--negative-color);\n  }\n}\n@supports not selector(:has(*)) {\n  .wrapper_4e637d0ffe:focus-within {\n    border-color: var(--primary-color);\n  }\n  .wrapper_4e637d0ffe.readOnly_f0ffe20fe8 {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_4e637d0ffe.readOnly_f0ffe20fe8 .input_ce904588fb {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_4e637d0ffe.disabled_7212199488 {\n    cursor: not-allowed;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_4e637d0ffe.disabled_7212199488 .input_ce904588fb {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_4e637d0ffe.success_2fa597349b {\n    border-color: var(--positive-color);\n  }\n  .wrapper_4e637d0ffe.success_2fa597349b:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_4e637d0ffe.success_2fa597349b:focus-within {\n    border-color: var(--positive-color);\n  }\n  .wrapper_4e637d0ffe.error_9d53669f93 {\n    border-color: var(--negative-color);\n  }\n  .wrapper_4e637d0ffe.error_9d53669f93:hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_4e637d0ffe.error_9d53669f93:focus-within {\n    border-color: var(--negative-color);\n  }\n}\n.wrapper_4e637d0ffe .input_ce904588fb {\n  all: unset;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  outline: none;\n}\n.wrapper_4e637d0ffe .input_ce904588fb::-moz-placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.wrapper_4e637d0ffe .input_ce904588fb::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.wrapper_4e637d0ffe .input_ce904588fb:disabled::-moz-placeholder {\n  color: var(--disabled-text-color);\n}\n.wrapper_4e637d0ffe .input_ce904588fb:disabled::placeholder {\n  color: var(--disabled-text-color);\n}");export{e as default};
+var r={wrapper:"wrapper_1cda95c9eb",small:"small_ab5f3a8355",medium:"medium_b64b5f5acc",large:"large_2ac12b47c5",rightThinnerPadding:"rightThinnerPadding_7302f6fc5a",input:"input_77b3bcc95a",success:"success_2bbe50cb12",readOnly:"readOnly_9efc97cae4",disabled:"disabled_aa8f65a0e3",error:"error_292aad68f0"};!function(r){var e="s_id-b69634d43ba7_4_0_3";if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;var a=document.createElement("style");a.id=e,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(r))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=r)}("/* stylelint-disable */\n/* stylelint-enable */\n.wrapper_1cda95c9eb {\n  width: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  padding-block: var(--space-8);\n  padding-inline: var(--space-12) var(--space-4);\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  outline: none;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: var(--secondary-background-color);\n  transition: border-color var(--motion-productive-medium) ease-in;\n}\n.wrapper_1cda95c9eb.small_ab5f3a8355 {\n  min-height: 32px;\n  height: 32px;\n  padding-inline-start: var(--space-8);\n  gap: var(--space-4);\n  font: var(--font-text2-normal);\n}\n.wrapper_1cda95c9eb.medium_b64b5f5acc {\n  min-height: 40px;\n  height: 40px;\n}\n.wrapper_1cda95c9eb.large_2ac12b47c5 {\n  min-height: 48px;\n  height: 48px;\n  padding-block: var(--space-8);\n}\n.wrapper_1cda95c9eb.rightThinnerPadding_7302f6fc5a {\n  padding-inline-end: var(--space-16);\n}\n.wrapper_1cda95c9eb:hover {\n  border-color: var(--primary-text-color);\n}\n@supports selector(:has(*)) {\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:active, .input_77b3bcc95a:focus) {\n    border-color: var(--primary-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:-moz-read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:-moz-read-only) .input_77b3bcc95a {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:read-only) .input_77b3bcc95a {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:disabled) {\n    cursor: not-allowed;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n    color: var(--disabled-text-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a:disabled) .input_77b3bcc95a {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_1cda95c9eb.success_2bbe50cb12 {\n    border-color: var(--positive-color);\n  }\n  .wrapper_1cda95c9eb.success_2bbe50cb12:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_1cda95c9eb.success_2bbe50cb12:has(.input_77b3bcc95a:active, .input_77b3bcc95a:focus) {\n    border-color: var(--positive-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a[aria-invalid=true]) {\n    border-color: var(--negative-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a[aria-invalid=true]):hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_1cda95c9eb:has(.input_77b3bcc95a[aria-invalid=true]):has(.input_77b3bcc95a:active, .input_77b3bcc95a:focus) {\n    border-color: var(--negative-color);\n  }\n}\n@supports not selector(:has(*)) {\n  .wrapper_1cda95c9eb:focus-within {\n    border-color: var(--primary-color);\n  }\n  .wrapper_1cda95c9eb.readOnly_9efc97cae4 {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_1cda95c9eb.readOnly_9efc97cae4 .input_77b3bcc95a {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_1cda95c9eb.disabled_aa8f65a0e3 {\n    cursor: not-allowed;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_1cda95c9eb.disabled_aa8f65a0e3 .input_77b3bcc95a {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_1cda95c9eb.success_2bbe50cb12 {\n    border-color: var(--positive-color);\n  }\n  .wrapper_1cda95c9eb.success_2bbe50cb12:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_1cda95c9eb.success_2bbe50cb12:focus-within {\n    border-color: var(--positive-color);\n  }\n  .wrapper_1cda95c9eb.error_292aad68f0 {\n    border-color: var(--negative-color);\n  }\n  .wrapper_1cda95c9eb.error_292aad68f0:hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_1cda95c9eb.error_292aad68f0:focus-within {\n    border-color: var(--negative-color);\n  }\n}\n.wrapper_1cda95c9eb .input_77b3bcc95a {\n  all: unset;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  outline: none;\n}\n.wrapper_1cda95c9eb .input_77b3bcc95a::-moz-placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.wrapper_1cda95c9eb .input_77b3bcc95a::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.wrapper_1cda95c9eb .input_77b3bcc95a:disabled::-moz-placeholder {\n  color: var(--disabled-text-color);\n}\n.wrapper_1cda95c9eb .input_77b3bcc95a:disabled::placeholder {\n  color: var(--disabled-text-color);\n}");export{r as default};
 //# sourceMappingURL=BaseInput.module.scss.js.map

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+import { type SubIcon } from "@vibe/icon";
+import { type ButtonValue } from "./ButtonGroupConstants";
+import { type ButtonType, type ButtonSize } from "@vibe/button";
+import { type VibeComponentProps } from "../../types";
+import { type MoveBy } from "../../types/MoveBy";
+import { type TooltipPositions } from "@vibe/tooltip";
+type ButtonGroupOption = {
+    icon?: SubIcon;
+    leftIcon?: SubIcon;
+    "aria-label"?: string;
+    subText?: string;
+    value: ButtonValue;
+    text: string;
+    disabled?: boolean;
+    tooltipContent?: string;
+};
+export interface ButtonGroupProps extends VibeComponentProps {
+    /**
+     * The list of button options.
+     */
+    options: Array<ButtonGroupOption>;
+    /**
+     * The currently selected button value.
+     */
+    value?: ButtonValue;
+    /**
+     * Callback fired when a button is selected.
+     */
+    onSelect?: (value: ButtonValue, name: string) => void;
+    /**
+     * The size of the buttons.
+     */
+    size?: ButtonSize;
+    /**
+     * The style variant of the buttons.
+     */
+    kind?: Extract<ButtonType, "secondary" | "tertiary">;
+    /**
+     * The name of the button group.
+     */
+    name?: string;
+    /**
+     * If true, disables all buttons in the group.
+     */
+    disabled?: boolean;
+    /**
+     * The label of the button group for accessibility.
+     */
+    groupAriaLabel?: string;
+    /**
+     * The position of the tooltip relative to the button.
+     */
+    tooltipPosition?: TooltipPositions;
+    /**
+     * The delay in milliseconds before the tooltip hides.
+     */
+    tooltipHideDelay?: number;
+    /**
+     * The delay in milliseconds before the tooltip shows.
+     */
+    tooltipShowDelay?: number;
+    /**
+     * CSS selector for the tooltip container.
+     */
+    tooltipContainerSelector?: string;
+    /**
+     * Adjusts the tooltip position.
+     */
+    tooltipMoveBy?: MoveBy;
+    /**
+     * The content inside the button group.
+     */
+    children?: React.ReactNode;
+    /**
+     * If true, makes the button group take the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, removes focus from the button after clicking.
+     */
+    blurOnMouseUp?: boolean;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ButtonGroup;

package/dist/components/ButtonGroup/ButtonGroupConstants.d.ts

@@ -0,0 +1 @@
+export type ButtonValue = string | number;

package/dist/components/ButtonGroup/ButtonWrapper.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { type ButtonProps } from "@vibe/button";
+import { type MoveBy } from "../../types/MoveBy";
+import { type TooltipPositions } from "@vibe/tooltip";
+export interface ButtonWrapperProps extends ButtonProps {
+    /**
+     * The content of the tooltip.
+     */
+    tooltipContent?: string;
+    /**
+     * The position of the tooltip relative to the button.
+     */
+    tooltipPosition?: TooltipPositions;
+    /**
+     * The delay in milliseconds before the tooltip hides.
+     */
+    tooltipHideDelay?: number;
+    /**
+     * The delay in milliseconds before the tooltip shows.
+     */
+    tooltipShowDelay?: number;
+    /**
+     * CSS selector for the tooltip container.
+     */
+    tooltipContainerSelector?: string;
+    /**
+     * Adjusts the tooltip position.
+     */
+    tooltipMoveBy?: MoveBy;
+    /**
+     * If true, makes the button take the full width of its container.
+     */
+    fullWidth?: boolean;
+}
+export declare const ButtonWrapper: ({ tooltipContent, tooltipPosition, tooltipHideDelay, tooltipShowDelay, tooltipContainerSelector, tooltipMoveBy, fullWidth, className, ...otherProps }: ButtonWrapperProps) => React.JSX.Element;

package/dist/components/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { default as ButtonGroup, type ButtonGroupProps } from "./ButtonGroup";

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import { type VibeComponentProps } from "../../types";
+export interface CheckBoxProps extends VibeComponentProps {
+    /**
+     * Class name applied to the checkbox element.
+     */
+    checkboxClassName?: string;
+    /**
+     * Class name applied to the label element.
+     */
+    labelClassName?: string;
+    /**
+     * The label of the checkbox for accessibility.
+     */
+    "aria-label"?: string;
+    /**
+     * The content displayed next to the checkbox.
+     */
+    label?: React.ReactNode | Array<React.ReactNode>;
+    /**
+     * The ID of an element describing the checkbox.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Callback fired when the checkbox value changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * If true, controls the checked state of the checkbox.
+     */
+    checked?: boolean;
+    /**
+     * If true, displays an indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * If true, the checkbox automatically receives focus.
+     */
+    autoFocus?: boolean;
+    /**
+     * If true, the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The initial checked state of the checkbox.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The value submitted with the form when checked.
+     */
+    value?: string;
+    /**
+     * The name of the checkbox, used for form submission.
+     */
+    name?: string;
+    /**
+     * The tab order of the checkbox.
+     */
+    tabIndex?: number;
+    /**
+     * If true, uses separate labels with htmlFor/id association instead of wrapping the input.
+     * If using this the id prop is required for it to function correctly.
+     */
+    separateLabel?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckBoxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/Checkbox/hooks/useSupportFirefoxLabelClick.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+export declare function useSupportFirefoxLabelClick({ inputRef }: {
+    inputRef: React.RefObject<HTMLInputElement>;
+}): {
+    onClickCapture: (e: React.MouseEvent) => void;
+};

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as Checkbox, type CheckBoxProps as CheckboxProps } from "./Checkbox";

package/dist/components/Chips/Chips.d.ts

@@ -3,20 +3,38 @@ import { type ElementAllowedColor } from "../../types/Colors";
 import { type AvatarType } from "../Avatar";
 import { type ElementContent, type VibeComponentProps } from "../../types";
 import { type SubIcon } from "@vibe/icon";
-import { type ChipsSize } from "./Chips.types";
+import { type ChipsVariant, type ChipsSize } from "./Chips.types";
 export interface ChipsProps extends VibeComponentProps {
     /**
      * The text or content displayed inside the chip.
      */
     label?: ElementContent;
+    /**
+     * Visual and behavioral variant of the chip.
+     * - `default` — standard chip (colors, optional remove / click)
+     * - `readOnly` — display only; no interaction
+     * - `filterable` — primary theme only; default / hover / pressed states
+     */
+    variant?: ChipsVariant;
     /**
      * If true, the chip is disabled.
      */
     disabled?: boolean;
     /**
-     * If true, the chip is read-only and cannot be deleted.
+     * If true, the chip is read-only and cannot be deleted or interacted with.
+     * Prefer `variant="readOnly"` for new usage.
      */
     readOnly?: boolean;
+    /**
+     * When `variant="filterable"`, shows the pressed (selected) state.
+     */
+    pressed?: boolean;
+    /**
+     * The size of the chip.
+     * - `medium` — default (24px height)
+     * - `small` — 20px height, 12px text
+     */
+    size?: ChipsSize;
     /**
      * A React element displayed on the right side.
      */
@@ -59,6 +77,7 @@ export interface ChipsProps extends VibeComponentProps {
     avatarClassName?: string;
     /**
      * The background color of the chip.
+     * Ignored when `variant="filterable"` (always primary).
      */
     color?: Exclude<ElementAllowedColor, "dark_indigo" | "blackish">;
     /**
@@ -88,11 +107,15 @@ export interface ChipsProps extends VibeComponentProps {
     /**
      * The label of the chip for accessibility.
      */
-    "aria-label"?: string;
+    ariaLabel?: string;
     /**
      * If true, indicates that the chip has a popup.
      */
-    "aria-haspopup"?: boolean;
+    ariaHasPopup?: boolean;
+    /**
+     * If true, disables all click behaviors.
+     */
+    disableClickableBehavior?: boolean;
     /**
      * If true, displays a border around the chip.
      */
@@ -105,10 +128,6 @@ export interface ChipsProps extends VibeComponentProps {
      * If true, removes the default margin from the chip.
      */
     noMargin?: boolean;
-    /**
-     * The size of the chip.
-     */
-    size?: ChipsSize;
 }
 declare const Chips: React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLDivElement>>;
 export default Chips;

package/dist/components/Chips/Chips.types.d.ts

@@ -1 +1,2 @@
-export type ChipsSize = "small" | "medium";
+export type ChipsVariant = "default" | "readOnly" | "filterable";
+export type ChipsSize = "medium" | "small";

package/dist/components/Chips/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Chips, type ChipsProps } from "./Chips";
-export * from "./Chips.types";
+export type { ChipsVariant, ChipsSize } from "./Chips.types";

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { type DividerDirection } from "./Divider.types";
+import { type VibeComponentProps } from "../../types";
+export interface DividerProps extends VibeComponentProps {
+    /**
+     * The direction of the divider.
+     */
+    direction?: DividerDirection;
+    /**
+     * If true, removes margin from the divider.
+     */
+    withoutMargin?: boolean;
+}
+declare const Divider: ({ className, withoutMargin, direction, id, "data-testid": dataTestId }: DividerProps) => React.JSX.Element;
+export default Divider;

package/dist/components/Divider/Divider.types.d.ts

@@ -0,0 +1 @@
+export type DividerDirection = "vertical" | "horizontal";

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Divider, type DividerProps } from "./Divider";
+export * from "./Divider.types";

package/dist/components/Dropdown/hooks/useDropdownCombobox.d.ts

@@ -118,12 +118,14 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -147,7 +149,6 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -161,6 +162,8 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
         unselectable?: "on" | "off" | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -236,7 +239,7 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
         onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement>;
         onChange?: import("react").FormEventHandler<HTMLInputElement>;
         onChangeCapture?: import("react").FormEventHandler<HTMLInputElement>;
-        onBeforeInput?: import("react").FormEventHandler<HTMLInputElement>;
+        onBeforeInput?: import("react").InputEventHandler<HTMLInputElement>;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLInputElement>;
         onInput?: import("react").FormEventHandler<HTMLInputElement>;
         onInputCapture?: import("react").FormEventHandler<HTMLInputElement>;
@@ -285,8 +288,6 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
         onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onRateChange?: import("react").ReactEventHandler<HTMLInputElement>;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
-        onResize?: import("react").ReactEventHandler<HTMLInputElement>;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onSeeked?: import("react").ReactEventHandler<HTMLInputElement>;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onSeeking?: import("react").ReactEventHandler<HTMLInputElement>;

package/dist/components/Dropdown/hooks/useDropdownMultiCombobox.d.ts

@@ -120,12 +120,14 @@ declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string,
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -149,7 +151,6 @@ declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string,
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -163,6 +164,8 @@ declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string,
         unselectable?: "on" | "off" | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -238,7 +241,7 @@ declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string,
         onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement>;
         onChange?: import("react").FormEventHandler<HTMLInputElement>;
         onChangeCapture?: import("react").FormEventHandler<HTMLInputElement>;
-        onBeforeInput?: import("react").FormEventHandler<HTMLInputElement>;
+        onBeforeInput?: import("react").InputEventHandler<HTMLInputElement>;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLInputElement>;
         onInput?: import("react").FormEventHandler<HTMLInputElement>;
         onInputCapture?: import("react").FormEventHandler<HTMLInputElement>;
@@ -287,8 +290,6 @@ declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string,
         onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onRateChange?: import("react").ReactEventHandler<HTMLInputElement>;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
-        onResize?: import("react").ReactEventHandler<HTMLInputElement>;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onSeeked?: import("react").ReactEventHandler<HTMLInputElement>;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onSeeking?: import("react").ReactEventHandler<HTMLInputElement>;

package/dist/components/FormattedNumber/FormattedNumber.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { type VibeComponentProps } from "../../types";
+export interface FormattedNumberProps extends VibeComponentProps {
+    /**
+     * The numeric value to format.
+     */
+    value?: number | string;
+    /**
+     * The text displayed before the number.
+     */
+    prefix?: string;
+    /**
+     * The text displayed after the number.
+     */
+    suffix?: string;
+    /**
+     * The text displayed when no value is provided.
+     */
+    emptyPlaceHolder?: string;
+    /**
+     * The number of decimal places to display (0 ~ 20).
+     */
+    decimalPrecision?: number;
+    /**
+     * If true, formats the number into a compact notation.
+     */
+    compact?: boolean;
+    /**
+     * The locale used for formatting (Unicode BCP 47 locale identifier).
+     */
+    local?: string;
+    /**
+     * If true, reverses the order of the prefix and suffix.
+     */
+    rtl?: boolean;
+}
+declare const FormattedNumber: React.ForwardRefExoticComponent<FormattedNumberProps & React.RefAttributes<HTMLDivElement>>;
+export default FormattedNumber;

package/dist/components/FormattedNumber/FormattedNumberHelpers.d.ts

@@ -0,0 +1,4 @@
+export declare const validateValue: (value: number | string) => boolean;
+export declare const customPropTypes: Readonly<{
+    range: (min: number, max: number) => (props: Record<string, number>, propName: string, componentName: string) => Error;
+}>;

package/dist/components/FormattedNumber/index.d.ts

@@ -0,0 +1 @@
+export { default as FormattedNumber, type FormattedNumberProps } from "./FormattedNumber";

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type SegmentedControlProps } from "./SegmentedControl.types";
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export default SegmentedControl;

package/dist/components/SegmentedControl/SegmentedControl.types.d.ts

@@ -0,0 +1,48 @@
+import { type SubIcon } from "@vibe/icon";
+import { type VibeComponentProps } from "../../types";
+export type SegmentedControlSize = "xs" | "small" | "medium" | "large";
+export type SegmentedControlOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: SubIcon;
+    tooltip?: string;
+};
+export interface SegmentedControlProps extends VibeComponentProps {
+    /**
+     * The list of segment options.
+     */
+    options: SegmentedControlOption[];
+    /**
+     * The currently selected segment value (controlled).
+     */
+    value?: string;
+    /**
+     * The default selected segment value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the selected segment changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The size of the segmented control.
+     */
+    size?: SegmentedControlSize;
+    /**
+     * If true, disables the entire segmented control.
+     */
+    disabled?: boolean;
+    /**
+     * If true, makes the segmented control take the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Accessible label for the radiogroup.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of the element that labels the radiogroup.
+     */
+    "aria-labelledby"?: string;
+}

package/dist/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize } from "./SegmentedControl.types";

package/dist/components/TextField/TextField.d.ts

@@ -57,7 +57,11 @@ export interface TextFieldProps extends VibeComponentProps {
     /**
      * The primary icon displayed inside the text field.
      */
-    icon?: string | React.FunctionComponent | null;
+    iconName?: string | React.FunctionComponent | null;
+    /**
+     * Position of the primary icon inside the text field.
+     */
+    iconPosition?: "left" | "right";
     /**
      * The secondary icon displayed inside the text field.
      */
@@ -110,13 +114,12 @@ export interface TextFieldProps extends VibeComponentProps {
      */
     activeDescendant?: string;
     /**
-     * Accessible label for the primary icon.
+     * Icon labels for accessibility.
      */
-    iconLabel?: string;
-    /**
-     * Accessible label for the secondary icon.
-     */
-    secondaryIconLabel?: string;
+    iconsNames?: {
+        primary: string;
+        secondary: string;
+    };
     /**
      * The type of the text field.
      */

package/dist/components/Toast/Toast.d.ts

@@ -52,6 +52,10 @@ export interface ToastProps extends VibeComponentProps {
      * The aria-label for the close button.
      */
     closeButtonAriaLabel?: string;
+    /**
+     * If true, renders the toast in place (for gallery previews) instead of fixed at the top.
+     */
+    inline?: boolean;
 }
-declare const Toast: ({ open, loading, autoHideDuration, type, icon, hideIcon, action: deprecatedAction, actions, children, closeable, onClose, className, id, closeButtonAriaLabel, "data-testid": dataTestId }: ToastProps) => React.JSX.Element;
+declare const Toast: ({ open, loading, autoHideDuration, type, icon, hideIcon, action: deprecatedAction, actions, children, closeable, onClose, className, id, closeButtonAriaLabel, inline, "data-testid": dataTestId }: ToastProps) => React.JSX.Element;
 export default Toast;

package/dist/components/button/dist/Button/Button.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useRef as a,useEffect as i,useCallback as r,useMemo as n}from"react";import{camelCase as s}from"es-toolkit";import l from"classnames";import{getParentBackgroundColorNotTransparent as d,TRANSPARENT_COLOR as c}from"./helper/dom-helpers.js";import u from"./Button.module.scss.js";import{useButtonLoading as m}from"./helper/useButtonLoading.js";import p from"../../../icon/dist/Icon/Icon.js";import f from"../../../loader/dist/Loader/Loader.js";import{useMergeRef as v}from"../../../../shared/dist/hooks/useMergeRef.js";import{getStyle as g}from"../../../../shared/dist/utils/typesciptCssModulesHelper.js";import{getTestId as b}from"../../../../shared/dist/tests/test-ids-utils.js";import{ComponentDefaultTestId as y,ComponentVibeId as h}from"../../../../shared/dist/tests/constants.js";import{NOOP as N}from"../../../../shared/dist/utils/function-utils.js";var j=o((function(o,j){var x=o.className,C=o.children,E=o.kind,k=void 0===E?"primary":E,F=o.onClick,B=void 0===F?N:F,I=o.name,O=o.size,P=void 0===O?"medium":O,T=o.color,L=void 0===T?"primary":T,S=o.disabled,M=void 0!==S&&S,R=o.rightIcon,z=void 0===R?null:R,A=o.leftIcon,D=void 0===A?null:A,U=o.success,w=void 0!==U&&U,_=o.successText,H=void 0===_?"":_,q=o.successIcon,G=void 0===q?null:q,J=o.style,K=o.loading,Q=void 0!==K&&K,V=o.loaderClassName,W=o.active,X=void 0!==W&&W,Y=o.activeButtonClassName,Z=o.id,$=o.marginRight,ee=void 0!==$&&$,te=o.marginLeft,oe=void 0!==te&&te,ae=o.type,ie=void 0===ae?"button":ae,re=o.onMouseDown,ne=void 0===re?N:re,se=o["aria-label"],le=o.rightFlat,de=void 0!==le&&le,ce=o.leftFlat,ue=void 0!==ce&&ce,me=o.preventClickAnimation,pe=void 0!==me&&me,fe=o.noSidePadding,ve=void 0!==fe&&fe,ge=o.onFocus,be=void 0===ge?N:ge,ye=o.onBlur,he=void 0===ye?N:ye,Ne=o["aria-labelledby"],je=o.defaultTextColorOnPrimaryColor,xe=void 0===je?c:je,Ce=o["aria-expanded"],Ee=o["aria-haspopup"],ke=o["aria-controls"],Fe=o["aria-describedby"],Be=o["aria-hidden"],Ie=o["aria-pressed"],Oe=o.blurOnMouseUp,Pe=void 0===Oe||Oe,Te=o["data-testid"],Le=o.insetFocus,Se=void 0!==Le&&Le,Me=o.tabIndex,Re=a(null),ze=v(j,Re),Ae=m({isLoading:Q}).loading;i((function(){if(("on-primary-color"===L||"fixed-light"===L)&&"primary"===k&&Re.current){var e=Re.current;e.style.color=d(e,xe)}}),[k,Re,L,xe]);var De=r((function(){var e=Re.current;!M&&e&&Pe&&e.blur()}),[M,Re,Pe]),Ue=r((function(e){M||Ae||w?e.preventDefault():B&&B(e)}),[B,M,Ae,w]),we=r((function(e){M||Ae||w?e.preventDefault():ne&&ne(e)}),[ne,M,Ae,w]),_e=n((function(){var t,o=w?"positive":L;return l(x,u.button,g(u,s("size-"+P)),g(u,s("kind-"+k)),g(u,s("color-"+o)),(e(e(e(e(e(e(e(e(e(e(t={},u.success,w),g(u,s("color-"+o+"-active")),X),Y,X),u.marginRight,ee),u.marginLeft,oe),u.rightFlat,de),u.leftFlat,ue),u.preventClickAnimation,pe),u.noSidePadding,ve),u.disabled,M),e(t,u.insetFocusStyle,Se)))}),[w,L,x,P,k,X,Y,ee,oe,de,ue,pe,ve,M,Se]),He=n((function(){return{ref:ze,type:ie,className:_e,name:I,onMouseUp:De,style:J,onClick:Ue,id:Z,onFocus:be,onBlur:he,tabIndex:null!=Me?Me:M||Be?-1:void 0,"data-testid":Te||b(y.BUTTON,Z),"data-vibe":h.BUTTON,onMouseDown:we,"aria-disabled":M,"aria-busy":Ae,"aria-labelledby":Ne,"aria-label":se,"aria-haspopup":Ee,"aria-expanded":Ce,"aria-controls":ke,"aria-describedby":Fe,"aria-hidden":Be,"aria-pressed":Ie}}),[ze,ie,_e,I,De,J,Ue,Z,be,he,Me,Te,we,M,Ae,Ne,se,Ee,Ce,ke,Fe,Be,Ie]),qe=r((function(e){if("function"==typeof e)switch(P){case"xxs":case"xs":return 16;default:return 20}}),[P]),Ge=n((function(){return t.Children.toArray(C).some(Boolean)}),[C]),Je=n((function(){return t.createElement(t.Fragment,null,D?t.createElement(p,{type:"font",icon:D,size:qe(D),className:l(e({},u.leftIcon,Ge)),ignoreFocusStyle:!0}):null,C,z?t.createElement(p,{type:"font",icon:z,size:qe(z),className:l(e({},u.rightIcon,Ge)),ignoreFocusStyle:!0}):null)}),[C,Ge,qe,D,z]);return Ae?t.createElement("button",Object.assign({},He,{key:Z+"-loading"}),t.createElement("span",{className:l(u.loader,V)},t.createElement(f,{className:u.loaderSvg}),t.createElement("span",{"aria-hidden":!0,className:u.textPlaceholder},Je))):w?t.createElement("button",Object.assign({},He,{key:Z+"-success"}),t.createElement("span",{className:u.successContent},G?t.createElement(p,{type:"font",icon:G,size:qe(G),className:l(e({},u.leftIcon,!!H)),ignoreFocusStyle:!0}):null,H),t.createElement("span",{"aria-hidden":"true",className:u.textPlaceholder},Je)):t.createElement("button",Object.assign({},He,{key:Z+"-button"}),Je)}));export{j as default};
+import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useRef as a,useEffect as i,useCallback as r,useMemo as n}from"react";import{camelCase as s}from"es-toolkit";import l from"classnames";import{getParentBackgroundColorNotTransparent as d,TRANSPARENT_COLOR as c}from"./helper/dom-helpers.js";import u from"./Button.module.scss.js";import{useButtonLoading as m}from"./helper/useButtonLoading.js";import p from"../../../icon/dist/Icon/Icon.js";import f from"../../../loader/dist/Loader/Loader.js";import{useMergeRef as v}from"../../../../shared/dist/hooks/useMergeRef.js";import{getStyle as g}from"../../../../shared/dist/utils/typesciptCssModulesHelper.js";import{getTestId as b}from"../../../../shared/dist/tests/test-ids-utils.js";import{ComponentDefaultTestId as h,ComponentVibeId as y}from"../../../../shared/dist/tests/constants.js";import{NOOP as j}from"../../../../shared/dist/utils/function-utils.js";var N=o((function(o,N){var x=o.className,C=o.children,E=o.kind,k=void 0===E?"primary":E,F=o.onClick,B=void 0===F?j:F,I=o.name,L=o.size,O=void 0===L?"medium":L,P=o.color,T=void 0===P?"primary":P,S=o.disabled,R=void 0!==S&&S,M=o.rightIcon,z=void 0===M?null:M,A=o.leftIcon,D=void 0===A?null:A,U=o.success,w=void 0!==U&&U,_=o.successText,H=void 0===_?"":_,q=o.successIcon,G=void 0===q?null:q,J=o.style,K=o.loading,Q=void 0!==K&&K,V=o.loaderClassName,W=o.active,X=void 0!==W&&W,Y=o.activeButtonClassName,Z=o.id,$=o.marginRight,ee=void 0!==$&&$,te=o.marginLeft,oe=void 0!==te&&te,ae=o.type,ie=void 0===ae?"button":ae,re=o.onMouseDown,ne=void 0===re?j:re,se=o["aria-label"],le=o.rightFlat,de=void 0!==le&&le,ce=o.leftFlat,ue=void 0!==ce&&ce,me=o.preventClickAnimation,pe=void 0!==me&&me,fe=o.noSidePadding,ve=void 0!==fe&&fe,ge=o.onFocus,be=void 0===ge?j:ge,he=o.onBlur,ye=void 0===he?j:he,je=o["aria-labelledby"],Ne=o.defaultTextColorOnPrimaryColor,xe=void 0===Ne?c:Ne,Ce=o["aria-expanded"],Ee=o["aria-haspopup"],ke=o["aria-controls"],Fe=o["aria-describedby"],Be=o["aria-hidden"],Ie=o["aria-pressed"],Le=o.blurOnMouseUp,Oe=void 0===Le||Le,Pe=o["data-testid"],Te=o.insetFocus,Se=void 0!==Te&&Te,Re=o.tabIndex,Me=a(null),ze=v(N,Me),Ae=m({isLoading:Q}).loading;i((function(){if(("on-primary-color"===T||"fixed-light"===T)&&"primary"===k&&Me.current){var e=Me.current;e.style.color=d(e,xe)}}),[k,Me,T,xe]);var De=r((function(){var e=Me.current;!R&&e&&Oe&&e.blur()}),[R,Me,Oe]),Ue=r((function(e){R||Ae||w?e.preventDefault():B&&B(e)}),[B,R,Ae,w]),we=r((function(e){R||Ae||w?e.preventDefault():ne&&ne(e)}),[ne,R,Ae,w]),_e=n((function(){return t.Children.toArray(C).some(Boolean)}),[C]),He=n((function(){var t,o=w?"positive":T;return l(x,u.button,g(u,s("size-"+O)),g(u,s("kind-"+k)),g(u,s("color-"+o)),(e(e(e(e(e(e(e(e(e(e(t={},u.success,w),g(u,s("color-"+o+"-active")),X),Y,X),u.marginRight,ee),u.marginLeft,oe),u.rightFlat,de),u.leftFlat,ue),u.preventClickAnimation,pe),u.noSidePadding,ve),u.disabled,R),e(e(e(t,u.insetFocusStyle,Se),u.hasLeftIcon,!!D&&_e),u.hasRightIcon,!!z&&_e)))}),[w,T,x,O,k,X,D,z,_e,Y,ee,oe,de,ue,pe,ve,R,Se]),qe=n((function(){return{ref:ze,type:ie,className:He,name:I,onMouseUp:De,style:J,onClick:Ue,id:Z,onFocus:be,onBlur:ye,tabIndex:null!=Re?Re:R||Be?-1:void 0,"data-testid":Pe||b(h.BUTTON,Z),"data-vibe":y.BUTTON,onMouseDown:we,"aria-disabled":R,"aria-busy":Ae,"aria-labelledby":je,"aria-label":se,"aria-haspopup":Ee,"aria-expanded":Ce,"aria-controls":ke,"aria-describedby":Fe,"aria-hidden":Be,"aria-pressed":Ie}}),[ze,ie,He,I,De,J,Ue,Z,be,ye,Re,Pe,we,R,Ae,je,se,Ee,Ce,ke,Fe,Be,Ie]),Ge=r((function(e){if("function"==typeof e)switch(O){case"xxs":case"xs":return 16;default:return 20}}),[O]),Je=n((function(){return t.createElement(t.Fragment,null,D?t.createElement(p,{type:"font",icon:D,size:Ge(D),ignoreFocusStyle:!0}):null,C,z?t.createElement(p,{type:"font",icon:z,size:Ge(z),ignoreFocusStyle:!0}):null)}),[C,Ge,D,z]);return Ae?t.createElement("button",Object.assign({},qe,{key:Z+"-loading"}),t.createElement("span",{className:l(u.loader,V)},t.createElement(f,{className:u.loaderSvg}),t.createElement("span",{"aria-hidden":!0,className:u.textPlaceholder},Je))):w?t.createElement("button",Object.assign({},qe,{key:Z+"-success"}),t.createElement("span",{className:u.successContent},G?t.createElement(p,{type:"font",icon:G,size:Ge(G),ignoreFocusStyle:!0}):null,H),t.createElement("span",{"aria-hidden":"true",className:u.textPlaceholder},Je)):t.createElement("button",Object.assign({},qe,{key:Z+"-button"}),Je)}));export{N as default};
 //# sourceMappingURL=Button.js.map