@lobehub/ui 5.14.0 → 5.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/base-ui/ScrollArea/ScrollArea.mjs +9 -2
- package/es/base-ui/ScrollArea/ScrollArea.mjs.map +1 -1
- package/es/base-ui/ScrollArea/type.d.mts +9 -0
- package/es/base-ui/Toast/Toast.mjs +2 -1
- package/es/base-ui/Toast/Toast.mjs.map +1 -1
- package/es/base-ui/Toast/style.mjs +6 -3
- package/es/base-ui/Toast/style.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,14 @@
|
|
|
2
2
|
import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./atoms.mjs";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/base-ui/ScrollArea/ScrollArea.tsx
|
|
5
|
-
const ScrollArea = ({ children, contentProps, corner = false, cornerProps, scrollFade = false, scrollbarProps, thumbProps, viewportProps, ...rest }) => {
|
|
5
|
+
const ScrollArea = ({ children, contentProps, corner = false, cornerProps, disableContentFit = false, scrollFade = false, scrollbarProps, thumbProps, viewportProps, ...rest }) => {
|
|
6
|
+
const mergedContentProps = disableContentFit ? {
|
|
7
|
+
...contentProps,
|
|
8
|
+
style: {
|
|
9
|
+
minWidth: 0,
|
|
10
|
+
...contentProps?.style
|
|
11
|
+
}
|
|
12
|
+
} : contentProps;
|
|
6
13
|
return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
|
|
7
14
|
...rest,
|
|
8
15
|
children: [
|
|
@@ -10,7 +17,7 @@ const ScrollArea = ({ children, contentProps, corner = false, cornerProps, scrol
|
|
|
10
17
|
scrollFade,
|
|
11
18
|
...viewportProps,
|
|
12
19
|
children: /* @__PURE__ */ jsx(ScrollAreaContent, {
|
|
13
|
-
...
|
|
20
|
+
...mergedContentProps,
|
|
14
21
|
children
|
|
15
22
|
})
|
|
16
23
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n ScrollAreaContent,\n ScrollAreaCorner,\n ScrollAreaRoot,\n ScrollAreaScrollbar,\n ScrollAreaThumb,\n ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nexport const ScrollArea: FC<ScrollAreaProps> = ({\n children,\n contentProps,\n corner = false,\n cornerProps,\n scrollFade = false,\n scrollbarProps,\n thumbProps,\n viewportProps,\n ...rest\n}) => {\n return (\n <ScrollAreaRoot {...rest}>\n <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n <ScrollAreaContent {...
|
|
1
|
+
{"version":3,"file":"ScrollArea.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n ScrollAreaContent,\n ScrollAreaCorner,\n ScrollAreaRoot,\n ScrollAreaScrollbar,\n ScrollAreaThumb,\n ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nexport const ScrollArea: FC<ScrollAreaProps> = ({\n children,\n contentProps,\n corner = false,\n cornerProps,\n disableContentFit = false,\n scrollFade = false,\n scrollbarProps,\n thumbProps,\n viewportProps,\n ...rest\n}) => {\n const mergedContentProps = disableContentFit\n ? { ...contentProps, style: { minWidth: 0, ...contentProps?.style } }\n : contentProps;\n\n return (\n <ScrollAreaRoot {...rest}>\n <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n <ScrollAreaContent {...mergedContentProps}>{children}</ScrollAreaContent>\n </ScrollAreaViewport>\n <ScrollAreaScrollbar {...scrollbarProps}>\n <ScrollAreaThumb {...thumbProps} />\n </ScrollAreaScrollbar>\n {corner && <ScrollAreaCorner {...cornerProps} />}\n </ScrollAreaRoot>\n );\n};\n"],"mappings":";;;;AAcA,MAAa,cAAmC,EAC9C,UACA,cACA,SAAS,OACT,aACA,oBAAoB,OACpB,aAAa,OACb,gBACA,YACA,eACA,GAAG,WACC;CACJ,MAAM,qBAAqB,oBACvB;EAAE,GAAG;EAAc,OAAO;GAAE,UAAU;GAAG,GAAG,cAAc;GAAO;EAAE,GACnE;AAEJ,QACE,qBAAC,gBAAD;EAAgB,GAAI;YAApB;GACE,oBAAC,oBAAD;IAAgC;IAAY,GAAI;cAC9C,oBAAC,mBAAD;KAAmB,GAAI;KAAqB;KAA6B,CAAA;IACtD,CAAA;GACrB,oBAAC,qBAAD;IAAqB,GAAI;cACvB,oBAAC,iBAAD,EAAiB,GAAI,YAAc,CAAA;IACf,CAAA;GACrB,UAAU,oBAAC,kBAAD,EAAkB,GAAI,aAAe,CAAA;GACjC"}
|
|
@@ -7,6 +7,15 @@ interface ScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {
|
|
|
7
7
|
contentProps?: Omit<ScrollAreaContentProps, 'children'>;
|
|
8
8
|
corner?: boolean;
|
|
9
9
|
cornerProps?: ScrollAreaCornerProps;
|
|
10
|
+
/**
|
|
11
|
+
* Override Base UI's default `min-width: fit-content` on the content node by
|
|
12
|
+
* setting `min-width: 0`. Use this when an unbreakable wide child (e.g. a
|
|
13
|
+
* `<pre>` code block) would otherwise propagate its intrinsic width up the
|
|
14
|
+
* ancestor chain and stretch the scroll container past its parent.
|
|
15
|
+
*
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
disableContentFit?: boolean;
|
|
10
19
|
scrollbarProps?: Omit<ScrollAreaScrollbarProps, 'children'>;
|
|
11
20
|
/**
|
|
12
21
|
* Enable gradient scroll fade on the viewport edges.
|
|
@@ -39,6 +39,7 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
|
|
|
39
39
|
const iconColor = typeColors[type];
|
|
40
40
|
const IconComponent = icon ?? typeIcons[type];
|
|
41
41
|
const isLoading = type === "loading";
|
|
42
|
+
const standaloneDescriptionClassName = cx(styles.description, styles.descriptionStandalone, classNames?.description);
|
|
42
43
|
const renderIcon = () => {
|
|
43
44
|
if (!IconComponent) return null;
|
|
44
45
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -108,7 +109,7 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
|
|
|
108
109
|
})] }) : description && /* @__PURE__ */ jsxs("div", {
|
|
109
110
|
className: styles.titleRow,
|
|
110
111
|
children: [/* @__PURE__ */ jsx(Toast.Description, {
|
|
111
|
-
className:
|
|
112
|
+
className: standaloneDescriptionClassName,
|
|
112
113
|
style: customStyles?.description,
|
|
113
114
|
children: description
|
|
114
115
|
}), showCloseButton && /* @__PURE__ */ jsx(Toast.Close, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/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 { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport { type ToastOptions, type ToastProps, type 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 key={index}\n style={customStyles?.action}\n className={cx(\n actionVariants({ variant: action.variant ?? 'primary' }),\n classNames?.action,\n )}\n onClick={action.onClick}\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 swipeDirection={swipeDirection}\n toast={toast}\n style={{\n ...customStyles?.root,\n ...toastData?.style,\n }}\n >\n <BaseToast.Content\n className={cx(styles.content, classNames?.content)}\n style={customStyles?.content}\n >\n <div className={title ? styles.toastBody : styles.toastBodyCenter}>\n {renderIcon()}\n <div className={styles.contentArea}>\n {title ? (\n <>\n <div className={styles.titleRow}>\n <BaseToast.Title\n className={cx(styles.title, classNames?.title)}\n style={customStyles?.title}\n >\n {title}\n </BaseToast.Title>\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: 4,\n ...customStyles?.description,\n }}\n >\n {description}\n </BaseToast.Description>\n )}\n </>\n ) : (\n description && (\n <div className={styles.titleRow}>\n <BaseToast.Description\n className={
|
|
1
|
+
{"version":3,"file":"Toast.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/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 { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport { type ToastOptions, type ToastProps, type 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 const standaloneDescriptionClassName = cx(\n styles.description,\n styles.descriptionStandalone,\n classNames?.description,\n );\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 key={index}\n style={customStyles?.action}\n className={cx(\n actionVariants({ variant: action.variant ?? 'primary' }),\n classNames?.action,\n )}\n onClick={action.onClick}\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 swipeDirection={swipeDirection}\n toast={toast}\n style={{\n ...customStyles?.root,\n ...toastData?.style,\n }}\n >\n <BaseToast.Content\n className={cx(styles.content, classNames?.content)}\n style={customStyles?.content}\n >\n <div className={title ? styles.toastBody : styles.toastBodyCenter}>\n {renderIcon()}\n <div className={styles.contentArea}>\n {title ? (\n <>\n <div className={styles.titleRow}>\n <BaseToast.Title\n className={cx(styles.title, classNames?.title)}\n style={customStyles?.title}\n >\n {title}\n </BaseToast.Title>\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: 4,\n ...customStyles?.description,\n }}\n >\n {description}\n </BaseToast.Description>\n )}\n </>\n ) : (\n description && (\n <div className={styles.titleRow}>\n <BaseToast.Description\n className={standaloneDescriptionClassName}\n style={customStyles?.description}\n >\n {description}\n </BaseToast.Description>\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 )\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,MAAM,YAA4C;CAChD,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACV;AAED,MAAM,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;CAC3B,MAAM,iCAAiC,GACrC,OAAO,aACP,OAAO,uBACP,YAAY,YACb;CAED,MAAM,mBAA8B;AAClC,MAAI,CAAC,cAAe,QAAO;AAC3B,SACE,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAAC,MAAD;IAAM,OAAO;IAAW,MAAM;IAAe,MAAM;IAAI,MAAM;IAAa,CAAA;GACtE,CAAA;;CAIV,MAAM,sBAAiC;AACrC,MAAI,WAAW,QAAQ,SAAS,EAC9B,QACE,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAAE,OAAO,cAAc;aAC3E,QAAQ,KAAK,QAAQ,UACpB,oBAACA,MAAU,QAAX;IAEE,OAAO,cAAc;IACrB,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,WAAW,WAAW,CAAC,EACxD,YAAY,OACb;IACD,SAAS,OAAO;IAChB,GAAI,OAAO;cAEV,OAAO;IACS,EAVZ,MAUY,CACnB;GACE,CAAA;AAGV,MAAI,YACF,QACE,oBAACA,MAAU,QAAX;GACE,WAAW,GAAG,eAAe,EAAE,SAAS,WAAW,CAAC,EAAE,YAAY,OAAO;GACzE,OAAO,cAAc;GACrB,GAAI;GACJ,CAAA;AAGN,SAAO;;AAGT,QACE,oBAACA,MAAU,MAAX;EACE,WAAW,GAAG,aAAa,EAAE,UAAU,CAAC,EAAE,YAAY,KAAK;EAC3C;EACT;EACP,OAAO;GACL,GAAG,cAAc;GACjB,GAAG,WAAW;GACf;YAED,oBAACA,MAAU,SAAX;GACE,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAClD,OAAO,cAAc;aAErB,qBAAC,OAAD;IAAK,WAAW,QAAQ,OAAO,YAAY,OAAO;cAAlD,CACG,YAAY,EACb,qBAAC,OAAD;KAAK,WAAW,OAAO;eAAvB,CACG,QACC,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,OAAD;MAAK,WAAW,OAAO;gBAAvB,CACE,oBAACA,MAAU,OAAX;OACE,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C,OAAO,cAAc;iBAEpB;OACe,CAAA,EACjB,mBACC,oBAACA,MAAU,OAAX;OACE,cAAW;OACX,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C,OAAO,cAAc;iBAErB,oBAAC,GAAD,EAAG,MAAM,IAAM,CAAA;OACC,CAAA,CAEhB;SACL,eACC,oBAACA,MAAU,aAAX;MACE,WAAW,GAAG,OAAO,aAAa,YAAY,YAAY;MAC1D,OAAO;OACL,kBAAkB;OAClB,GAAG,cAAc;OAClB;gBAEA;MACqB,CAAA,CAEzB,EAAA,CAAA,GAEH,eACE,qBAAC,OAAD;MAAK,WAAW,OAAO;gBAAvB,CACE,oBAACA,MAAU,aAAX;OACE,WAAW;OACX,OAAO,cAAc;iBAEpB;OACqB,CAAA,EACvB,mBACC,oBAACA,MAAU,OAAX;OACE,cAAW;OACX,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C,OAAO,cAAc;iBAErB,oBAAC,GAAD,EAAG,MAAM,IAAM,CAAA;OACC,CAAA,CAEhB;SAGT,eAAe,CACZ;OACF;;GACY,CAAA;EACL,CAAA;EAEnB;AAEF,UAAU,cAAc"}
|
|
@@ -121,7 +121,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
121
121
|
border: none;
|
|
122
122
|
border-radius: ${cssVar.borderRadiusSM};
|
|
123
123
|
|
|
124
|
-
color: ${cssVar.
|
|
124
|
+
color: ${cssVar.colorTextSecondary};
|
|
125
125
|
|
|
126
126
|
background: transparent;
|
|
127
127
|
|
|
@@ -157,6 +157,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
157
157
|
font-size: 13px;
|
|
158
158
|
line-height: 1.5;
|
|
159
159
|
color: ${cssVar.colorTextSecondary};
|
|
160
|
+
`,
|
|
161
|
+
descriptionStandalone: css`
|
|
162
|
+
color: ${cssVar.colorText};
|
|
160
163
|
`,
|
|
161
164
|
icon: css`
|
|
162
165
|
display: flex;
|
|
@@ -297,7 +300,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
297
300
|
titleRow: css`
|
|
298
301
|
display: flex;
|
|
299
302
|
gap: 8px;
|
|
300
|
-
align-items:
|
|
303
|
+
align-items: flex-start;
|
|
301
304
|
`,
|
|
302
305
|
toastBody: css`
|
|
303
306
|
display: flex;
|
|
@@ -307,7 +310,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
307
310
|
toastBodyCenter: css`
|
|
308
311
|
display: flex;
|
|
309
312
|
gap: 12px;
|
|
310
|
-
align-items:
|
|
313
|
+
align-items: flex-start;
|
|
311
314
|
`,
|
|
312
315
|
viewport: css`
|
|
313
316
|
position: fixed;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/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 toastBodyCenter: css`\n display: flex;\n gap: 12px;\n align-items: center;\n `,\n\n viewport: css`\n position: fixed;\n z-index: 100000;\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,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;;2BAWhB,OAAO,mBAAmB;;;;CAKnD,cAAc,GAAG;aACN,OAAO,oBAAoB;kBACtB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;;uBAIrB,OAAO,iBAAiB;;;CAI7C,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,oBAAoB;kBACtB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;qBAmBU,OAAO,eAAe;;aAE9B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;qCAGJ,OAAO,aAAa;4CACb,OAAO,aAAa;4CACpB,OAAO,aAAa;0CACtB,OAAO,aAAa;4CAClB,OAAO,aAAa;6CACnB,OAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/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.colorTextSecondary};\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 descriptionStandalone: css`\n color: ${cssVar.colorText};\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: flex-start;\n `,\n\n toastBody: css`\n display: flex;\n gap: 12px;\n align-items: flex-start;\n `,\n\n toastBodyCenter: css`\n display: flex;\n gap: 12px;\n align-items: flex-start;\n `,\n\n viewport: css`\n position: fixed;\n z-index: 100000;\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":"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"}
|