@lobehub/ui 4.30.2 → 4.32.0

package/es/Popover/context.d.mts

@@ -1,11 +1,11 @@
-import * as react66 from "react";
+import * as react30 from "react";
 import { ReactNode } from "react";
 
 //#region src/Popover/context.d.ts
 type PopoverContextValue = {
   close: () => void;
 };
-declare const PopoverProvider: react66.NamedExoticComponent<{
+declare const PopoverProvider: react30.NamedExoticComponent<{
   children: ReactNode;
   value: PopoverContextValue;
 }>;

package/es/SearchBar/SearchBar.d.mts

@@ -1,8 +1,8 @@
 import { SearchBarProps } from "./type.mjs";
-import * as react61 from "react";
+import * as react20 from "react";
 
 //#region src/SearchBar/SearchBar.d.ts
-declare const SearchBar: react61.NamedExoticComponent<SearchBarProps>;
+declare const SearchBar: react20.NamedExoticComponent<SearchBarProps>;
 //#endregion
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.mts.map

package/es/SearchBar/SearchBar.mjs

@@ -8,13 +8,13 @@ import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { LucideLoader2, Search } from "lucide-react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 //#region src/SearchBar/SearchBar.tsx
 const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInputChange, placeholder, enableShortKey, shortKey = "mod+k", onSearch, loading, style, onChange, onBlur, onPressEnter, onFocus, styles: { input: inputStyle, shortKey: shortKeyStyle } = {}, classNames: { input: inputClassName, shortKey: shortKeyClassName } = {}, ...rest }) => {
-	const [inputValue, setInputValue] = useControlledState(defaultValue, {
+	const [inputValue, setInputValue] = useMergeState(defaultValue, {
 		defaultValue,
 		onChange: onInputChange,
 		value

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["inputReference: any","Spotlight","Input","Icon","Hotkey"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { styles } from './style';\nimport type { SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          placeholder={placeholder ?? 'Type keywords...'}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            className={cx(styles.tag, shortKeyClassName)}\n            compact\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,mBAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAMA,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC;EAAI,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;;GAClD,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IACC;IACA,WAAW;IACX,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,aAAa,eAAe;IAC5B,QACE,oBAACC;KACC,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;MACzB;IAEJ,KAAK;IACL,OAAO;IACP,OAAO;IACP,GAAI;KACJ;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAACC;IACC,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C;IACA,MAAM;IACN,OAAO;KACP;;GAEA;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"SearchBar.mjs","names":["useControlledState","inputReference: any","Spotlight","Input","Icon","Hotkey"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { styles } from './style';\nimport type { SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          placeholder={placeholder ?? 'Type keywords...'}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            className={cx(styles.tag, shortKeyClassName)}\n            compact\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAMC,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC;EAAI,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;;GAClD,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IACC;IACA,WAAW;IACX,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,aAAa,eAAe;IAC5B,QACE,oBAACC;KACC,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;MACzB;IAEJ,KAAK;IACL,OAAO;IACP,OAAO;IACP,GAAI;KACJ;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAACC;IACC,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C;IACA,MAAM;IACN,OAAO;KACP;;GAEA;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/Segmented/Segmented.d.mts

@@ -1,8 +1,8 @@
 import { SegmentedProps } from "./type.mjs";
-import * as react3 from "react";
+import * as react22 from "react";
 
 //#region src/Segmented/Segmented.d.ts
-declare const Segmented: react3.NamedExoticComponent<SegmentedProps>;
+declare const Segmented: react22.NamedExoticComponent<SegmentedProps>;
 //#endregion
 export { Segmented };
 //# sourceMappingURL=Segmented.d.mts.map

package/es/Select/Select.d.mts

@@ -1,8 +1,11 @@
 import { SelectProps } from "./type.mjs";
-import * as react1 from "react";
+import * as react14 from "react";
 
 //#region src/Select/Select.d.ts
-declare const Input: react1.NamedExoticComponent<SelectProps>;
+/**
+ * @deprecated Use `LobeSelect` instead.
+ */
+declare const Select: react14.NamedExoticComponent<SelectProps>;
 //#endregion
-export { Input };
+export { Select };
 //# sourceMappingURL=Select.d.mts.map

package/es/Select/Select.mjs

@@ -9,7 +9,10 @@ import { cx, useThemeMode } from "antd-style";
 import { ChevronDownIcon } from "lucide-react";
 
 //#region src/Select/Select.tsx
-const Input$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {
+/**
+* @deprecated Use `LobeSelect` instead.
+*/
+const Select$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
 	return /* @__PURE__ */ jsx(Select, {
 		className: cx(variants({
@@ -30,8 +33,8 @@ const Input$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, class
 		...rest
 	});
 });
-Input$1.displayName = "Input";
-var Select_default = Input$1;
+Select$1.displayName = "Select";
+var Select_default = Select$1;
 
 //#endregion
 export { Select_default as default };

package/es/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["Input","AntSelect","Icon"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as AntSelect } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport type { SelectProps } from './type';\n\nconst Input = memo<SelectProps>(\n  ({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntSelect\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        ref={ref}\n        suffixIcon={\n          <Icon\n            icon={suffixIcon || ChevronDownIcon}\n            size={'small'}\n            {...suffixIconProps}\n            style={{\n              pointerEvents: 'none',\n              ...suffixIconProps?.style,\n            }}\n          />\n        }\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        {...rest}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EAAE,KAAK,SAAS,iBAAiB,YAAY,QAAQ,WAAW,GAAG,WAAW;CAC7E,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,YACE,oBAACC;GACC,MAAM,cAAc;GACpB,MAAM;GACN,GAAI;GACJ,OAAO;IACL,eAAe;IACf,GAAG,iBAAiB;IACrB;IACD;EAEJ,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAGP;AAED,QAAM,cAAc;AAEpB,qBAAeF"}
+{"version":3,"file":"Select.mjs","names":["Select","AntSelect","Icon"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as AntSelect } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport type { SelectProps } from './type';\n\n/**\n * @deprecated Use `LobeSelect` instead.\n */\nconst Select = memo<SelectProps>(\n  ({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntSelect\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        ref={ref}\n        suffixIcon={\n          <Icon\n            icon={suffixIcon || ChevronDownIcon}\n            size={'small'}\n            {...suffixIconProps}\n            style={{\n              pointerEvents: 'none',\n              ...suffixIconProps?.style,\n            }}\n          />\n        }\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        {...rest}\n      />\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAMA,WAAS,MACZ,EAAE,KAAK,SAAS,iBAAiB,YAAY,QAAQ,WAAW,GAAG,WAAW;CAC7E,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACI;EACL,YACE,oBAACC;GACC,MAAM,cAAc;GACpB,MAAM;GACN,GAAI;GACJ,OAAO;IACL,eAAe;IACf,GAAG,iBAAiB;IACrB;IACD;EAEJ,SAAS,YAAY,aAAa,WAAW;EAC7C,GAAI;GACJ;EAGP;AAED,SAAO,cAAc;AAErB,qBAAeF"}

package/es/Select/index.d.mts

@@ -1,3 +1,3 @@
 import { SelectProps } from "./type.mjs";
-import { Input } from "./Select.mjs";
-export { SelectProps, Input as default };
+import { Select } from "./Select.mjs";
+export { SelectProps, Select as default };

package/es/SideNav/SideNav.d.mts

@@ -1,8 +1,8 @@
 import { SideNavProps } from "./type.mjs";
-import * as react0 from "react";
+import * as react11 from "react";
 
 //#region src/SideNav/SideNav.d.ts
-declare const SideNav: react0.NamedExoticComponent<SideNavProps>;
+declare const SideNav: react11.NamedExoticComponent<SideNavProps>;
 //#endregion
 export { SideNav };
 //# sourceMappingURL=SideNav.d.mts.map

package/es/SliderWithInput/SliderWithInput.d.mts

@@ -1,8 +1,8 @@
 import { SliderWithInputProps } from "./type.mjs";
-import * as react0 from "react";
+import * as react18 from "react";
 
 //#region src/SliderWithInput/SliderWithInput.d.ts
-declare const SliderWithInput: react0.NamedExoticComponent<SliderWithInputProps>;
+declare const SliderWithInput: react18.NamedExoticComponent<SliderWithInputProps>;
 //#endregion
 export { SliderWithInput };
 //# sourceMappingURL=SliderWithInput.d.mts.map

package/es/SortableList/components/DragHandle.d.mts

@@ -1,9 +1,9 @@
 import { ActionIconProps } from "../../ActionIcon/type.mjs";
 import "../../ActionIcon/index.mjs";
-import * as react121 from "react";
+import * as react90 from "react";
 
 //#region src/SortableList/components/DragHandle.d.ts
-declare const DragHandle: react121.NamedExoticComponent<ActionIconProps>;
+declare const DragHandle: react90.NamedExoticComponent<ActionIconProps>;
 //#endregion
 export { DragHandle };
 //# sourceMappingURL=DragHandle.d.mts.map

package/es/SortableList/components/SortableItem.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import * as react119 from "react";
+import * as react88 from "react";
 import "@dnd-kit/core";
 
 //#region src/SortableList/components/SortableItem.d.ts
@@ -9,7 +9,7 @@ interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
   id: string | number;
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-declare const SortableItem: react119.NamedExoticComponent<SortableItemProps>;
+declare const SortableItem: react88.NamedExoticComponent<SortableItemProps>;
 //#endregion
 export { SortableItem };
 //# sourceMappingURL=SortableItem.d.mts.map

package/es/ThemeProvider/ThemeProvider.d.mts

@@ -1,8 +1,8 @@
 import { ThemeProviderProps } from "./type.mjs";
-import * as react37 from "react";
+import * as react15 from "react";
 
 //#region src/ThemeProvider/ThemeProvider.d.ts
-declare const ThemeProvider: react37.NamedExoticComponent<ThemeProviderProps>;
+declare const ThemeProvider: react15.NamedExoticComponent<ThemeProviderProps>;
 //#endregion
 export { ThemeProvider };
 //# sourceMappingURL=ThemeProvider.d.mts.map

package/es/Toast/Toast.mjs

@@ -2,7 +2,7 @@
 
 import Icon_default from "../Icon/Icon.mjs";
 import { useToastContext } from "./context.mjs";
-import { rootVariants, styles } from "./style.mjs";
+import { actionVariants, rootVariants, styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cssVar, cx } from "antd-style";
@@ -31,10 +31,13 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 	const toastData = toast.data;
 	const type = toastData?.type ?? "default";
 	const closable = toastData?.closable ?? true;
+	const hideCloseButton = toastData?.hideCloseButton ?? false;
+	const showCloseButton = closable && !hideCloseButton;
 	const icon = toastData?.icon;
 	const title = toast.title ?? toastData?.title;
 	const description = toast.description ?? toastData?.description;
 	const actionProps = toast.actionProps ?? toastData?.actionProps;
+	const actions = toastData?.actions;
 	const iconColor = typeColors[type];
 	const IconComponent = icon ?? typeIcons[type];
 	const isLoading = type === "loading";
@@ -51,6 +54,25 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 			})
 		});
 	};
+	const renderActions = () => {
+		if (actions && actions.length > 0) return /* @__PURE__ */ jsx("div", {
+			className: cx(styles.actions, classNames?.actions),
+			style: customStyles?.actions,
+			children: actions.map((action, index) => /* @__PURE__ */ jsx(Toast.Action, {
+				className: cx(actionVariants({ variant: action.variant ?? "primary" }), classNames?.action),
+				onClick: action.onClick,
+				style: customStyles?.action,
+				...action.props,
+				children: action.label
+			}, index))
+		});
+		if (actionProps) return /* @__PURE__ */ jsx(Toast.Action, {
+			className: cx(actionVariants({ variant: "primary" }), classNames?.action),
+			style: customStyles?.action,
+			...actionProps
+		});
+		return null;
+	};
 	return /* @__PURE__ */ jsx(Toast.Root, {
 		className: cx(rootVariants({ position }), classNames?.root),
 		style: {
@@ -59,21 +81,26 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 		},
 		swipeDirection,
 		toast,
-		children: /* @__PURE__ */ jsxs(Toast.Content, {
+		children: /* @__PURE__ */ jsx(Toast.Content, {
 			className: cx(styles.content, classNames?.content),
 			style: customStyles?.content,
-			children: [/* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsxs("div", {
 				className: styles.toastBody,
 				children: [renderIcon(), /* @__PURE__ */ jsxs("div", {
-					style: {
-						flex: 1,
-						minWidth: 0
-					},
+					className: styles.contentArea,
 					children: [
-						title && /* @__PURE__ */ jsx(Toast.Title, {
-							className: cx(styles.title, classNames?.title),
-							style: customStyles?.title,
-							children: title
+						/* @__PURE__ */ jsxs("div", {
+							className: styles.titleRow,
+							children: [title && /* @__PURE__ */ jsx(Toast.Title, {
+								className: cx(styles.title, classNames?.title),
+								style: customStyles?.title,
+								children: title
+							}), showCloseButton && /* @__PURE__ */ jsx(Toast.Close, {
+								"aria-label": "Close",
+								className: cx(styles.close, classNames?.close),
+								style: customStyles?.close,
+								children: /* @__PURE__ */ jsx(X, { size: 14 })
+							})]
 						}),
 						description && /* @__PURE__ */ jsx(Toast.Description, {
 							className: cx(styles.description, classNames?.description),
@@ -83,19 +110,10 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 							},
 							children: description
 						}),
-						actionProps && /* @__PURE__ */ jsx(Toast.Action, {
-							className: cx(styles.action, classNames?.action),
-							style: customStyles?.action,
-							...actionProps
-						})
+						renderActions()
 					]
 				})]
-			}), closable && /* @__PURE__ */ jsx(Toast.Close, {
-				"aria-label": "Close",
-				className: cx(styles.close, classNames?.close),
-				style: customStyles?.close,
-				children: /* @__PURE__ */ jsx(X, { size: 14 })
-			})]
+			})
 		})
 	});
 });

package/es/Toast/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","names":["typeIcons: Record<ToastType, typeof Info>","typeColors: Record<ToastType, string>","Icon","BaseToast"],"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { type ReactNode, memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { rootVariants, styles } from './style';\nimport type { ToastOptions, ToastProps, ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n  default: Info,\n  error: XCircle,\n  info: Info,\n  loading: Loader2,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n  default: cssVar.colorText,\n  error: cssVar.colorError,\n  info: cssVar.colorInfo,\n  loading: cssVar.colorPrimary,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n  const { position, swipeDirection } = useToastContext();\n  const toastData = toast.data as ToastOptions | undefined;\n  const type = toastData?.type ?? 'default';\n  const closable = toastData?.closable ?? true;\n  const icon = toastData?.icon;\n  const title = toast.title ?? toastData?.title;\n  const description = toast.description ?? toastData?.description;\n  const actionProps = toast.actionProps ?? toastData?.actionProps;\n\n  const iconColor = typeColors[type];\n  const IconComponent = icon ?? typeIcons[type];\n  const isLoading = type === 'loading';\n\n  const renderIcon = (): ReactNode => {\n    if (!IconComponent) return null;\n    return (\n      <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n        <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n      </div>\n    );\n  };\n\n  return (\n    <BaseToast.Root\n      className={cx(rootVariants({ position }), classNames?.root)}\n      style={{\n        ...customStyles?.root,\n        ...toastData?.style,\n      }}\n      swipeDirection={swipeDirection}\n      toast={toast}\n    >\n      <BaseToast.Content\n        className={cx(styles.content, classNames?.content)}\n        style={customStyles?.content}\n      >\n        <div className={styles.toastBody}>\n          {renderIcon()}\n          <div style={{ flex: 1, minWidth: 0 }}>\n            {title && (\n              <BaseToast.Title\n                className={cx(styles.title, classNames?.title)}\n                style={customStyles?.title}\n              >\n                {title}\n              </BaseToast.Title>\n            )}\n            {description && (\n              <BaseToast.Description\n                className={cx(styles.description, classNames?.description)}\n                style={{\n                  marginBlockStart: title ? 4 : 0,\n                  ...customStyles?.description,\n                }}\n              >\n                {description}\n              </BaseToast.Description>\n            )}\n            {actionProps && (\n              <BaseToast.Action\n                className={cx(styles.action, classNames?.action)}\n                style={customStyles?.action}\n                {...actionProps}\n              />\n            )}\n          </div>\n        </div>\n        {closable && (\n          <BaseToast.Close\n            aria-label=\"Close\"\n            className={cx(styles.close, classNames?.close)}\n            style={customStyles?.close}\n          >\n            <X size={14} />\n          </BaseToast.Close>\n        )}\n      </BaseToast.Content>\n    </BaseToast.Root>\n  );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,YAA4C;CAChD,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACV;AAED,MAAMC,aAAwC;CAC5C,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,MAAM,OAAO;CACb,SAAS,OAAO;CAChB,SAAS,OAAO;CAChB,SAAS,OAAO;CACjB;AAED,MAAM,YAAY,MAAkB,EAAE,OAAO,YAAY,QAAQ,mBAAmB;CAClF,MAAM,EAAE,UAAU,mBAAmB,iBAAiB;CACtD,MAAM,YAAY,MAAM;CACxB,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,WAAW,WAAW,YAAY;CACxC,MAAM,OAAO,WAAW;CACxB,MAAM,QAAQ,MAAM,SAAS,WAAW;CACxC,MAAM,cAAc,MAAM,eAAe,WAAW;CACpD,MAAM,cAAc,MAAM,eAAe,WAAW;CAEpD,MAAM,YAAY,WAAW;CAC7B,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,YAAY,SAAS;CAE3B,MAAM,mBAA8B;AAClC,MAAI,CAAC,cAAe,QAAO;AAC3B,SACE,oBAAC;GAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAACC;IAAK,OAAO;IAAW,MAAM;IAAe,MAAM;IAAI,MAAM;KAAa;IACtE;;AAIV,QACE,oBAACC,MAAU;EACT,WAAW,GAAG,aAAa,EAAE,UAAU,CAAC,EAAE,YAAY,KAAK;EAC3D,OAAO;GACL,GAAG,cAAc;GACjB,GAAG,WAAW;GACf;EACe;EACT;YAEP,qBAACA,MAAU;GACT,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAClD,OAAO,cAAc;cAErB,qBAAC;IAAI,WAAW,OAAO;eACpB,YAAY,EACb,qBAAC;KAAI,OAAO;MAAE,MAAM;MAAG,UAAU;MAAG;;MACjC,SACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C,OAAO,cAAc;iBAEpB;QACe;MAEnB,eACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,aAAa,YAAY,YAAY;OAC1D,OAAO;QACL,kBAAkB,QAAQ,IAAI;QAC9B,GAAG,cAAc;QAClB;iBAEA;QACqB;MAEzB,eACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,QAAQ,YAAY,OAAO;OAChD,OAAO,cAAc;OACrB,GAAI;QACJ;;MAEA;KACF,EACL,YACC,oBAACA,MAAU;IACT,cAAW;IACX,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IAC9C,OAAO,cAAc;cAErB,oBAAC,KAAE,MAAM,KAAM;KACC;IAEF;GACL;EAEnB;AAEF,UAAU,cAAc;AAExB,oBAAe"}
+{"version":3,"file":"Toast.mjs","names":["typeIcons: Record<ToastType, typeof Info>","typeColors: Record<ToastType, string>","Icon","BaseToast"],"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { type ReactNode, memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport type { ToastOptions, ToastProps, ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n  default: Info,\n  error: XCircle,\n  info: Info,\n  loading: Loader2,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n  default: cssVar.colorText,\n  error: cssVar.colorError,\n  info: cssVar.colorInfo,\n  loading: cssVar.colorPrimary,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n  const { position, swipeDirection } = useToastContext();\n  const toastData = toast.data as ToastOptions | undefined;\n  const type = toastData?.type ?? 'default';\n  const closable = toastData?.closable ?? true;\n  const hideCloseButton = toastData?.hideCloseButton ?? false;\n  const showCloseButton = closable && !hideCloseButton;\n  const icon = toastData?.icon;\n  const title = toast.title ?? toastData?.title;\n  const description = toast.description ?? toastData?.description;\n  const actionProps = toast.actionProps ?? toastData?.actionProps;\n  const actions = toastData?.actions;\n\n  const iconColor = typeColors[type];\n  const IconComponent = icon ?? typeIcons[type];\n  const isLoading = type === 'loading';\n\n  const renderIcon = (): ReactNode => {\n    if (!IconComponent) return null;\n    return (\n      <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n        <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n      </div>\n    );\n  };\n\n  const renderActions = (): ReactNode => {\n    if (actions && actions.length > 0) {\n      return (\n        <div className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n          {actions.map((action, index) => (\n            <BaseToast.Action\n              className={cx(\n                actionVariants({ variant: action.variant ?? 'primary' }),\n                classNames?.action,\n              )}\n              key={index}\n              onClick={action.onClick}\n              style={customStyles?.action}\n              {...action.props}\n            >\n              {action.label}\n            </BaseToast.Action>\n          ))}\n        </div>\n      );\n    }\n    if (actionProps) {\n      return (\n        <BaseToast.Action\n          className={cx(actionVariants({ variant: 'primary' }), classNames?.action)}\n          style={customStyles?.action}\n          {...actionProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <BaseToast.Root\n      className={cx(rootVariants({ position }), classNames?.root)}\n      style={{\n        ...customStyles?.root,\n        ...toastData?.style,\n      }}\n      swipeDirection={swipeDirection}\n      toast={toast}\n    >\n      <BaseToast.Content\n        className={cx(styles.content, classNames?.content)}\n        style={customStyles?.content}\n      >\n        <div className={styles.toastBody}>\n          {renderIcon()}\n          <div className={styles.contentArea}>\n            <div className={styles.titleRow}>\n              {title && (\n                <BaseToast.Title\n                  className={cx(styles.title, classNames?.title)}\n                  style={customStyles?.title}\n                >\n                  {title}\n                </BaseToast.Title>\n              )}\n              {showCloseButton && (\n                <BaseToast.Close\n                  aria-label=\"Close\"\n                  className={cx(styles.close, classNames?.close)}\n                  style={customStyles?.close}\n                >\n                  <X size={14} />\n                </BaseToast.Close>\n              )}\n            </div>\n            {description && (\n              <BaseToast.Description\n                className={cx(styles.description, classNames?.description)}\n                style={{\n                  marginBlockStart: title ? 4 : 0,\n                  ...customStyles?.description,\n                }}\n              >\n                {description}\n              </BaseToast.Description>\n            )}\n            {renderActions()}\n          </div>\n        </div>\n      </BaseToast.Content>\n    </BaseToast.Root>\n  );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,YAA4C;CAChD,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACV;AAED,MAAMC,aAAwC;CAC5C,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,MAAM,OAAO;CACb,SAAS,OAAO;CAChB,SAAS,OAAO;CAChB,SAAS,OAAO;CACjB;AAED,MAAM,YAAY,MAAkB,EAAE,OAAO,YAAY,QAAQ,mBAAmB;CAClF,MAAM,EAAE,UAAU,mBAAmB,iBAAiB;CACtD,MAAM,YAAY,MAAM;CACxB,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,WAAW,WAAW,YAAY;CACxC,MAAM,kBAAkB,WAAW,mBAAmB;CACtD,MAAM,kBAAkB,YAAY,CAAC;CACrC,MAAM,OAAO,WAAW;CACxB,MAAM,QAAQ,MAAM,SAAS,WAAW;CACxC,MAAM,cAAc,MAAM,eAAe,WAAW;CACpD,MAAM,cAAc,MAAM,eAAe,WAAW;CACpD,MAAM,UAAU,WAAW;CAE3B,MAAM,YAAY,WAAW;CAC7B,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,YAAY,SAAS;CAE3B,MAAM,mBAA8B;AAClC,MAAI,CAAC,cAAe,QAAO;AAC3B,SACE,oBAAC;GAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAACC;IAAK,OAAO;IAAW,MAAM;IAAe,MAAM;IAAI,MAAM;KAAa;IACtE;;CAIV,MAAM,sBAAiC;AACrC,MAAI,WAAW,QAAQ,SAAS,EAC9B,QACE,oBAAC;GAAI,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAAE,OAAO,cAAc;aAC3E,QAAQ,KAAK,QAAQ,UACpB,oBAACC,MAAU;IACT,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,WAAW,WAAW,CAAC,EACxD,YAAY,OACb;IAED,SAAS,OAAO;IAChB,OAAO,cAAc;IACrB,GAAI,OAAO;cAEV,OAAO;MALH,MAMY,CACnB;IACE;AAGV,MAAI,YACF,QACE,oBAACA,MAAU;GACT,WAAW,GAAG,eAAe,EAAE,SAAS,WAAW,CAAC,EAAE,YAAY,OAAO;GACzE,OAAO,cAAc;GACrB,GAAI;IACJ;AAGN,SAAO;;AAGT,QACE,oBAACA,MAAU;EACT,WAAW,GAAG,aAAa,EAAE,UAAU,CAAC,EAAE,YAAY,KAAK;EAC3D,OAAO;GACL,GAAG,cAAc;GACjB,GAAG,WAAW;GACf;EACe;EACT;YAEP,oBAACA,MAAU;GACT,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAClD,OAAO,cAAc;aAErB,qBAAC;IAAI,WAAW,OAAO;eACpB,YAAY,EACb,qBAAC;KAAI,WAAW,OAAO;;MACrB,qBAAC;OAAI,WAAW,OAAO;kBACpB,SACC,oBAACA,MAAU;QACT,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;QAC9C,OAAO,cAAc;kBAEpB;SACe,EAEnB,mBACC,oBAACA,MAAU;QACT,cAAW;QACX,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;QAC9C,OAAO,cAAc;kBAErB,oBAAC,KAAE,MAAM,KAAM;SACC;QAEhB;MACL,eACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,aAAa,YAAY,YAAY;OAC1D,OAAO;QACL,kBAAkB,QAAQ,IAAI;QAC9B,GAAG,cAAc;QAClB;iBAEA;QACqB;MAEzB,eAAe;;MACZ;KACF;IACY;GACL;EAEnB;AAEF,UAAU,cAAc;AAExB,oBAAe"}

package/es/Toast/imperative.d.mts

@@ -1,5 +1,5 @@
 import { ToastAPI, ToastPosition } from "./type.mjs";
-import * as react31 from "react";
+import * as react9 from "react";
 
 //#region src/Toast/imperative.d.ts
 declare const toast: ToastAPI;
@@ -31,14 +31,14 @@ interface ToastHostProps {
    */
   swipeDirection?: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];
 }
-declare const ToastHost: react31.MemoExoticComponent<({
+declare const ToastHost: react9.MemoExoticComponent<({
   root,
   className,
   duration,
   limit,
   position,
   swipeDirection
-}: ToastHostProps) => react31.ReactPortal | null>;
+}: ToastHostProps) => react9.ReactPortal | null>;
 declare const useToast: () => ToastAPI;
 //#endregion
 export { TOAST_CONTAINER_ATTR, ToastHost, ToastHostProps, toast, useToast };

package/es/Toast/index.d.mts

@@ -1,3 +1,3 @@
-import { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./type.mjs";
+import { ToastAPI, ToastAction, ToastActionVariant, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./type.mjs";
 import { TOAST_CONTAINER_ATTR, ToastHost, ToastHostProps, toast, useToast } from "./imperative.mjs";
-export { TOAST_CONTAINER_ATTR, ToastAPI, ToastHost, type ToastHostProps, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType, toast, useToast };
+export { TOAST_CONTAINER_ATTR, ToastAPI, ToastAction, ToastActionVariant, ToastHost, type ToastHostProps, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType, toast, useToast };

package/es/Toast/style.mjs

@@ -7,11 +7,11 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     cursor: pointer;
 
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
 
     height: 28px;
-    margin-block-start: 8px;
     padding-inline: 12px;
     border: none;
     border-radius: ${cssVar$1.borderRadiusSM};
@@ -19,11 +19,50 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     font-size: 12px;
     font-weight: 500;
     line-height: 1;
+
+    transition:
+      background 0.2s,
+      color 0.2s;
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+  `,
+	actionDanger: css$1`
     color: ${cssVar$1.colorTextLightSolid};
+    background: ${cssVar$1.colorError};
 
-    background: ${cssVar$1.colorPrimary};
+    &:hover {
+      background: ${cssVar$1.colorErrorHover};
+    }
+
+    &:active {
+      background: ${cssVar$1.colorErrorActive};
+    }
 
-    transition: background 0.2s;
+    &:focus-visible {
+      outline-color: ${cssVar$1.colorErrorBorder};
+    }
+  `,
+	actionGhost: css$1`
+    border: 1px solid ${cssVar$1.colorBorder};
+    color: ${cssVar$1.colorText};
+    background: transparent;
+
+    &:hover {
+      border-color: ${cssVar$1.colorPrimary};
+      color: ${cssVar$1.colorPrimary};
+    }
+
+    &:active {
+      border-color: ${cssVar$1.colorPrimaryActive};
+      color: ${cssVar$1.colorPrimaryActive};
+    }
+  `,
+	actionPrimary: css$1`
+    color: ${cssVar$1.colorTextLightSolid};
+    background: ${cssVar$1.colorPrimary};
 
     &:hover {
       background: ${cssVar$1.colorPrimaryHover};
@@ -32,25 +71,53 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     &:active {
       background: ${cssVar$1.colorPrimaryActive};
     }
+  `,
+	actionSecondary: css$1`
+    color: ${cssVar$1.colorText};
+    background: ${cssVar$1.colorFillSecondary};
+
+    &:hover {
+      background: ${cssVar$1.colorFillTertiary};
+    }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
-      outline-offset: 1px;
+    &:active {
+      background: ${cssVar$1.colorFill};
+    }
+  `,
+	actionText: css$1`
+    color: ${cssVar$1.colorPrimary};
+    background: transparent;
+
+    &:hover {
+      background: ${cssVar$1.colorFillTertiary};
+    }
+
+    &:active {
+      background: ${cssVar$1.colorFillSecondary};
     }
+  `,
+	actions: css$1`
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    gap: 8px;
+    align-items: center;
+    align-self: flex-end;
+    justify-content: flex-end;
+
+    margin-block-start: 8px;
   `,
 	close: css$1`
     cursor: pointer;
 
-    position: absolute;
-    inset-block-start: 8px;
-    inset-inline-end: 8px;
-
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
 
     width: 20px;
     height: 20px;
+    margin-inline-start: auto;
     padding: 0;
     border: none;
     border-radius: ${cssVar$1.borderRadiusSM};
@@ -79,6 +146,12 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
       pointer-events: auto;
       opacity: 1;
     }
+  `,
+	contentArea: css$1`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
   `,
 	description: css$1`
     margin: 0;
@@ -111,7 +184,6 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     height: var(--toast-collapsed-height);
     padding-block: 12px;
     padding-inline: 16px;
-    padding-inline-end: 32px;
     border-radius: ${cssVar$1.borderRadiusLG};
 
     color: ${cssVar$1.colorText};
@@ -222,6 +294,11 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     font-weight: 500;
     line-height: 1.5;
     color: ${cssVar$1.colorText};
+  `,
+	titleRow: css$1`
+    display: flex;
+    gap: 8px;
+    align-items: center;
   `,
 	toastBody: css$1`
     display: flex;
@@ -290,7 +367,17 @@ const rootVariants = cva(styles.root, {
 		"top-right": styles.rootTop
 	} }
 });
+const actionVariants = cva(styles.action, {
+	defaultVariants: { variant: "primary" },
+	variants: { variant: {
+		danger: styles.actionDanger,
+		ghost: styles.actionGhost,
+		primary: styles.actionPrimary,
+		secondary: styles.actionSecondary,
+		text: styles.actionText
+	} }
+});
 
 //#endregion
-export { rootVariants, styles, viewportVariants };
+export { actionVariants, rootVariants, styles, viewportVariants };
 //# sourceMappingURL=style.mjs.map

package/es/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    margin-block-start: 8px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorTextLightSolid};\n\n    background: ${cssVar.colorPrimary};\n\n    transition: background 0.2s;\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 8px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    padding-inline-end: 32px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1100;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;;;;;;;;;;;qBAWQA,SAAO,eAAe;;;;;aAK9BA,SAAO,oBAAoB;;kBAEtBA,SAAO,aAAa;;;;;oBAKlBA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,OAAO,KAAG;;;;;;;;;;;;;;;qBAeSA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;CAI5C,SAAS,KAAG;;;;;;;;;;;;;;CAeZ,aAAa,KAAG;;;;aAILA,SAAO,mBAAmB;;CAGrC,MAAM,KAAG;;;;;;CAOT,MAAM,KAAG;;;;;;;;;;;;;;;;;;;;qBAoBUA,SAAO,eAAe;;aAE9BA,SAAO,UAAU;;kBAEZA,SAAO,gBAAgB;;;qCAGJA,SAAO,aAAa;4CACbA,SAAO,aAAa;4CACpBA,SAAO,aAAa;0CACtBA,SAAO,aAAa;4CAClBA,SAAO,aAAa;6CACnBA,SAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,KAAG;;;;;;aAMCA,SAAO,UAAU;;CAG5B,WAAW,KAAG;;;;;CAMd,UAAU,KAAG;;;;;;;;;;;;;CAcb,gBAAgB,KAAG;;;;;CAMnB,oBAAoB,KAAG;;;;CAKvB,qBAAqB,KAAG;;;;CAKxB,aAAa,KAAG;;;;;CAMhB,iBAAiB,KAAG;;;;CAKpB,kBAAkB,KAAG;;;;CAItB,EAAE;AAEH,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1100;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;;;;;;;;;;;qBAWQA,SAAO,eAAe;;;;;;;;;;;2BAWhBA,SAAO,mBAAmB;;;;CAKnD,cAAc,KAAG;aACNA,SAAO,oBAAoB;kBACtBA,SAAO,WAAW;;;oBAGhBA,SAAO,gBAAgB;;;;oBAIvBA,SAAO,iBAAiB;;;;uBAIrBA,SAAO,iBAAiB;;;CAI7C,aAAa,KAAG;wBACMA,SAAO,YAAY;aAC9BA,SAAO,UAAU;;;;sBAIRA,SAAO,aAAa;eAC3BA,SAAO,aAAa;;;;sBAIbA,SAAO,mBAAmB;eACjCA,SAAO,mBAAmB;;;CAIvC,eAAe,KAAG;aACPA,SAAO,oBAAoB;kBACtBA,SAAO,aAAa;;;oBAGlBA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;CAI5C,iBAAiB,KAAG;aACTA,SAAO,UAAU;kBACZA,SAAO,mBAAmB;;;oBAGxBA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,UAAU;;;CAInC,YAAY,KAAG;aACJA,SAAO,aAAa;;;;oBAIbA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;CAI5C,SAAS,KAAG;;;;;;;;;;;CAYZ,OAAO,KAAG;;;;;;;;;;;;;qBAaSA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;CAI5C,SAAS,KAAG;;;;;;;;;;;;;;CAeZ,aAAa,KAAG;;;;;;CAOhB,aAAa,KAAG;;;;aAILA,SAAO,mBAAmB;;CAGrC,MAAM,KAAG;;;;;;CAOT,MAAM,KAAG;;;;;;;;;;;;;;;;;;;qBAmBUA,SAAO,eAAe;;aAE9BA,SAAO,UAAU;;kBAEZA,SAAO,gBAAgB;;;qCAGJA,SAAO,aAAa;4CACbA,SAAO,aAAa;4CACpBA,SAAO,aAAa;0CACtBA,SAAO,aAAa;4CAClBA,SAAO,aAAa;6CACnBA,SAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,KAAG;;;;;;aAMCA,SAAO,UAAU;;CAG5B,UAAU,KAAG;;;;;CAMb,WAAW,KAAG;;;;;CAMd,UAAU,KAAG;;;;;;;;;;;;;CAcb,gBAAgB,KAAG;;;;;CAMnB,oBAAoB,KAAG;;;;CAKvB,qBAAqB,KAAG;;;;CAKxB,aAAa,KAAG;;;;;CAMhB,iBAAiB,KAAG;;;;CAKpB,kBAAkB,KAAG;;;;CAItB,EAAE;AAEH,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;EACd,EACF;CACF,CAAC"}