@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.9

package/es/Accordion/Accordion.mjs

@@ -3,11 +3,11 @@ import { styleProps } from "../styles/stylex/props.mjs";
 import { styles } from "./style.mjs";
 import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger } from "./atoms.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Accordion/Accordion.tsx
 const Accordion = ({ className, classNames, defaultValue, gap, hideIndicator, indicatorPlacement = "start", items, keepMounted, multiple = true, onValueChange, ref, style, styles: customStyles, value, variant = "borderless" }) => {
 	return /* @__PURE__ */ jsx(AccordionRoot, {
-		className: clsx(classNames?.root, className),
+		className: clsx$1(classNames?.root, className),
 		defaultValue,
 		hideIndicator,
 		indicatorPlacement,
@@ -38,7 +38,7 @@ const Accordion = ({ className, classNames, defaultValue, gap, hideIndicator, in
 						styles.action,
 						variant === "borderless" ? styles.actionBorderless : styles.actionOutlined,
 						item.alwaysShowAction && styles.actionAlwaysVisible
-					], clsx("accordion-action", classNames?.action), customStyles?.action),
+					], clsx$1("accordion-action", classNames?.action), customStyles?.action),
 					children: item.action
 				})]
 			}), /* @__PURE__ */ jsx(AccordionPanel, {

package/es/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from './atoms';\nimport { styles } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion: FC<AccordionProps> = ({\n  className,\n  classNames,\n  defaultValue,\n  gap,\n  hideIndicator,\n  indicatorPlacement = 'start',\n  items,\n  keepMounted,\n  multiple = true,\n  onValueChange,\n  ref,\n  style,\n  styles: customStyles,\n  value,\n  variant = 'borderless',\n}) => {\n  return (\n    <AccordionRoot\n      className={clsx(classNames?.root, className)}\n      defaultValue={defaultValue}\n      hideIndicator={hideIndicator}\n      indicatorPlacement={indicatorPlacement}\n      multiple={multiple}\n      ref={ref}\n      style={{ gap, ...style, ...customStyles?.root }}\n      value={value}\n      variant={variant}\n      onValueChange={onValueChange ? (next) => onValueChange(next as string[]) : undefined}\n    >\n      {items?.map((item) => (\n        <AccordionItem\n          className={classNames?.item}\n          disabled={item.disabled}\n          key={item.key}\n          style={customStyles?.item}\n          value={item.key}\n        >\n          <AccordionHeader className={classNames?.header} style={customStyles?.header}>\n            <AccordionTrigger className={classNames?.trigger} style={customStyles?.trigger}>\n              {item.title}\n            </AccordionTrigger>\n            {item.action && (\n              <div\n                {...styleProps(\n                  [\n                    styles.action,\n                    variant === 'borderless' ? styles.actionBorderless : styles.actionOutlined,\n                    item.alwaysShowAction && styles.actionAlwaysVisible,\n                  ],\n                  clsx('accordion-action', classNames?.action),\n                  customStyles?.action,\n                )}\n              >\n                {item.action}\n              </div>\n            )}\n          </AccordionHeader>\n          <AccordionPanel\n            className={classNames?.panel}\n            contentClassName={classNames?.content}\n            contentStyle={customStyles?.content}\n            keepMounted={keepMounted}\n            style={customStyles?.panel}\n          >\n            {item.children}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </AccordionRoot>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAiC,EACrC,WACA,YACA,cACA,KACA,eACA,qBAAqB,SACrB,OACA,aACA,WAAW,MACX,eACA,KACA,OACA,QAAQ,cACR,OACA,UAAU,mBACN;CACJ,OACE,oBAAC,eAAD;EACE,WAAW,KAAK,YAAY,MAAM,SAAS;EAC7B;EACC;EACK;EACV;EACL;EACL,OAAO;GAAE;GAAK,GAAG;GAAO,GAAG,cAAc;EAAK;EACvC;EACE;EACT,eAAe,iBAAiB,SAAS,cAAc,IAAgB,IAAI,KAAA;EAE1E,UAAA,OAAO,KAAK,SACX,qBAAC,eAAD;GACE,WAAW,YAAY;GACvB,UAAU,KAAK;GAEf,OAAO,cAAc;GACrB,OAAO,KAAK;GALd,UAAA,CAOE,qBAAC,iBAAD;IAAiB,WAAW,YAAY;IAAQ,OAAO,cAAc;IAArE,UAAA,CACE,oBAAC,kBAAD;KAAkB,WAAW,YAAY;KAAS,OAAO,cAAc;KACpE,UAAA,KAAK;IACU,CAAA,GACjB,KAAK,UACJ,oBAAC,OAAD;KACE,GAAI,WACF;MACE,OAAO;MACP,YAAY,eAAe,OAAO,mBAAmB,OAAO;MAC5D,KAAK,oBAAoB,OAAO;KAClC,GACA,KAAK,oBAAoB,YAAY,MAAM,GAC3C,cAAc,MAChB;KAEC,UAAA,KAAK;IACH,CAAA,CAEQ;GACjB,CAAA,GAAA,oBAAC,gBAAD;IACE,WAAW,YAAY;IACvB,kBAAkB,YAAY;IAC9B,cAAc,cAAc;IACf;IACb,OAAO,cAAc;IAEpB,UAAA,KAAK;GACQ,CAAA,CACH;EAjCR,GAAA,KAAK,GAiCG,CAChB;CACY,CAAA;AAEnB;AAEA,UAAU,cAAc"}
+{"version":3,"file":"Accordion.mjs","names":["clsx"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from './atoms';\nimport { styles } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion: FC<AccordionProps> = ({\n  className,\n  classNames,\n  defaultValue,\n  gap,\n  hideIndicator,\n  indicatorPlacement = 'start',\n  items,\n  keepMounted,\n  multiple = true,\n  onValueChange,\n  ref,\n  style,\n  styles: customStyles,\n  value,\n  variant = 'borderless',\n}) => {\n  return (\n    <AccordionRoot\n      className={clsx(classNames?.root, className)}\n      defaultValue={defaultValue}\n      hideIndicator={hideIndicator}\n      indicatorPlacement={indicatorPlacement}\n      multiple={multiple}\n      ref={ref}\n      style={{ gap, ...style, ...customStyles?.root }}\n      value={value}\n      variant={variant}\n      onValueChange={onValueChange ? (next) => onValueChange(next as string[]) : undefined}\n    >\n      {items?.map((item) => (\n        <AccordionItem\n          className={classNames?.item}\n          disabled={item.disabled}\n          key={item.key}\n          style={customStyles?.item}\n          value={item.key}\n        >\n          <AccordionHeader className={classNames?.header} style={customStyles?.header}>\n            <AccordionTrigger className={classNames?.trigger} style={customStyles?.trigger}>\n              {item.title}\n            </AccordionTrigger>\n            {item.action && (\n              <div\n                {...styleProps(\n                  [\n                    styles.action,\n                    variant === 'borderless' ? styles.actionBorderless : styles.actionOutlined,\n                    item.alwaysShowAction && styles.actionAlwaysVisible,\n                  ],\n                  clsx('accordion-action', classNames?.action),\n                  customStyles?.action,\n                )}\n              >\n                {item.action}\n              </div>\n            )}\n          </AccordionHeader>\n          <AccordionPanel\n            className={classNames?.panel}\n            contentClassName={classNames?.content}\n            contentStyle={customStyles?.content}\n            keepMounted={keepMounted}\n            style={customStyles?.panel}\n          >\n            {item.children}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </AccordionRoot>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;AAiBA,MAAM,aAAiC,EACrC,WACA,YACA,cACA,KACA,eACA,qBAAqB,SACrB,OACA,aACA,WAAW,MACX,eACA,KACA,OACA,QAAQ,cACR,OACA,UAAU,mBACN;CACJ,OACE,oBAAC,eAAD;EACE,WAAWA,OAAK,YAAY,MAAM,SAAS;EAC7B;EACC;EACK;EACV;EACL;EACL,OAAO;GAAE;GAAK,GAAG;GAAO,GAAG,cAAc;EAAK;EACvC;EACE;EACT,eAAe,iBAAiB,SAAS,cAAc,IAAgB,IAAI,KAAA;EAE1E,UAAA,OAAO,KAAK,SACX,qBAAC,eAAD;GACE,WAAW,YAAY;GACvB,UAAU,KAAK;GAEf,OAAO,cAAc;GACrB,OAAO,KAAK;GALd,UAAA,CAOE,qBAAC,iBAAD;IAAiB,WAAW,YAAY;IAAQ,OAAO,cAAc;IAArE,UAAA,CACE,oBAAC,kBAAD;KAAkB,WAAW,YAAY;KAAS,OAAO,cAAc;KACpE,UAAA,KAAK;IACU,CAAA,GACjB,KAAK,UACJ,oBAAC,OAAD;KACE,GAAI,WACF;MACE,OAAO;MACP,YAAY,eAAe,OAAO,mBAAmB,OAAO;MAC5D,KAAK,oBAAoB,OAAO;KAClC,GACAA,OAAK,oBAAoB,YAAY,MAAM,GAC3C,cAAc,MAChB;KAEC,UAAA,KAAK;IACH,CAAA,CAEQ;GACjB,CAAA,GAAA,oBAAC,gBAAD;IACE,WAAW,YAAY;IACvB,kBAAkB,YAAY;IAC9B,cAAc,cAAc;IACf;IACb,OAAO,cAAc;IAEpB,UAAA,KAAK;GACQ,CAAA,CACH;EAjCR,GAAA,KAAK,GAiCG,CAChB;CACY,CAAA;AAEnB;AAEA,UAAU,cAAc"}

package/es/Accordion/atoms.mjs

@@ -5,7 +5,7 @@ import { accordionHeaderMarker, accordionPanelMarker, accordionTriggerMarker } f
 import { accordionStyles, styles } from "./style.mjs";
 import { createContext, use, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { Accordion } from "@base-ui/react/accordion";
 import { ChevronDown, ChevronRight, Play } from "lucide-react";
@@ -72,7 +72,7 @@ const AccordionHeader = ({ className, indicatorPlacement: placementProp, variant
 			variant === "borderless" && styles.headerBorderless,
 			variant === "filled" && styles.headerFilled,
 			inline && styles.headerInline
-		], clsx(inline && "lobe-accordion-header-inline", className)).className,
+		], clsx$1(inline && "lobe-accordion-header-inline", className)).className,
 		...rest
 	});
 };

package/es/Accordion/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseUIAccordion"],"sources":["../../src/Accordion/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight, Play } from 'lucide-react';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  accordionHeaderMarker,\n  accordionPanelMarker,\n  accordionTriggerMarker,\n} from './marker.stylex';\nimport { styles } from './style';\nimport type {\n  AccordionHeaderProps,\n  AccordionIndicatorPlacement,\n  AccordionItemProps,\n  AccordionPanelProps,\n  AccordionRootProps,\n  AccordionTriggerProps,\n  AccordionVariant,\n} from './type';\n\ninterface AccordionContextValue {\n  hideIndicator: boolean;\n  indicatorPlacement: AccordionIndicatorPlacement;\n  variant: AccordionVariant;\n}\n\nconst triggerVariantStyles = {\n  borderless: styles.triggerBorderless,\n  filled: styles.triggerFilled,\n  outlined: styles.triggerOutlined,\n};\n\nconst indicatorPlacementStyles = {\n  end: styles.indicatorEnd,\n  inline: styles.indicatorInline,\n  start: styles.indicatorStart,\n};\n\nconst contentVariantStyles = {\n  borderless: styles.contentBorderless,\n  filled: styles.contentBorderless,\n  outlined: styles.contentOutlined,\n};\n\nconst AccordionContext = createContext<AccordionContextValue>({\n  hideIndicator: false,\n  indicatorPlacement: 'start',\n  variant: 'borderless',\n});\n\nexport const useAccordionContext = () => use(AccordionContext);\n\nexport const AccordionRoot: FC<AccordionRootProps> = ({\n  children,\n  className,\n  hideIndicator = false,\n  indicatorPlacement = 'start',\n  multiple = true,\n  variant = 'borderless',\n  ...rest\n}) => {\n  const contextValue = useMemo(\n    () => ({ hideIndicator, indicatorPlacement, variant }),\n    [hideIndicator, indicatorPlacement, variant],\n  );\n\n  return (\n    <AccordionContext value={contextValue}>\n      <BaseUIAccordion.Root\n        multiple={multiple}\n        className={\n          styleProps([styles.root, variant === 'outlined' && styles.rootOutlined], className)\n            .className\n        }\n        {...rest}\n      >\n        {children}\n      </BaseUIAccordion.Root>\n    </AccordionContext>\n  );\n};\n\nAccordionRoot.displayName = 'AccordionRoot';\n\nexport const AccordionItem: FC<AccordionItemProps> = ({\n  className,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUIAccordion.Item\n      className={\n        styleProps([styles.item, variant === 'outlined' && styles.itemOutlined], className)\n          .className\n      }\n      {...rest}\n    />\n  );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport const AccordionHeader: FC<AccordionHeaderProps> = ({\n  className,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const inline = (placementProp ?? ctx.indicatorPlacement) === 'inline' && variant !== 'outlined';\n\n  return (\n    <BaseUIAccordion.Header\n      className={\n        styleProps(\n          [\n            accordionHeaderMarker,\n            styles.header,\n            variant === 'borderless' && styles.headerBorderless,\n            variant === 'filled' && styles.headerFilled,\n            inline && styles.headerInline,\n          ],\n          clsx(inline && 'lobe-accordion-header-inline', className),\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nAccordionHeader.displayName = 'AccordionHeader';\n\nexport const AccordionTrigger: FC<AccordionTriggerProps> = ({\n  children,\n  className,\n  hideIndicator: hideIndicatorProp,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n  const placement = placementProp ?? ctx.indicatorPlacement;\n\n  const indicator = !hideIndicator && (\n    <span {...stylex.props(styles.indicator, indicatorPlacementStyles[placement])}>\n      {placement === 'start' && <ChevronRight size={16} />}\n      {placement === 'inline' && <Play fill=\"currentColor\" size={7} strokeWidth={1} />}\n      {placement === 'end' && <ChevronDown size={16} />}\n    </span>\n  );\n\n  return (\n    <BaseUIAccordion.Trigger\n      className={\n        styleProps(\n          [accordionTriggerMarker, focusRing.info, styles.trigger, triggerVariantStyles[variant]],\n          className,\n        ).className\n      }\n      {...rest}\n    >\n      {placement === 'start' && indicator}\n      {children}\n      {placement !== 'start' && indicator}\n    </BaseUIAccordion.Trigger>\n  );\n};\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nexport const AccordionPanel: FC<AccordionPanelProps> = ({\n  children,\n  className,\n  contentClassName,\n  contentStyle,\n  hideIndicator: hideIndicatorProp,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n  const placement = placementProp ?? ctx.indicatorPlacement;\n  const indent = !hideIndicator && placement === 'start';\n  const inline = placement === 'inline';\n\n  return (\n    <BaseUIAccordion.Panel\n      className={styleProps([accordionPanelMarker, styles.panel], className).className}\n      {...rest}\n    >\n      <div\n        {...styleProps(\n          [\n            styles.content,\n            contentVariantStyles[variant],\n            inline && variant === 'borderless' && styles.contentInline,\n            indent && variant !== 'outlined' && styles.contentIndent,\n            indent && variant === 'outlined' && styles.contentIndentOutlined,\n          ],\n          contentClassName,\n          contentStyle,\n        )}\n      >\n        {children}\n      </div>\n    </BaseUIAccordion.Panel>\n  );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n\nexport { accordionStyles } from './style';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["BaseUIAccordion","clsx"],"sources":["../../src/Accordion/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight, Play } from 'lucide-react';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport {\n  accordionHeaderMarker,\n  accordionPanelMarker,\n  accordionTriggerMarker,\n} from './marker.stylex';\nimport { styles } from './style';\nimport type {\n  AccordionHeaderProps,\n  AccordionIndicatorPlacement,\n  AccordionItemProps,\n  AccordionPanelProps,\n  AccordionRootProps,\n  AccordionTriggerProps,\n  AccordionVariant,\n} from './type';\n\ninterface AccordionContextValue {\n  hideIndicator: boolean;\n  indicatorPlacement: AccordionIndicatorPlacement;\n  variant: AccordionVariant;\n}\n\nconst triggerVariantStyles = {\n  borderless: styles.triggerBorderless,\n  filled: styles.triggerFilled,\n  outlined: styles.triggerOutlined,\n};\n\nconst indicatorPlacementStyles = {\n  end: styles.indicatorEnd,\n  inline: styles.indicatorInline,\n  start: styles.indicatorStart,\n};\n\nconst contentVariantStyles = {\n  borderless: styles.contentBorderless,\n  filled: styles.contentBorderless,\n  outlined: styles.contentOutlined,\n};\n\nconst AccordionContext = createContext<AccordionContextValue>({\n  hideIndicator: false,\n  indicatorPlacement: 'start',\n  variant: 'borderless',\n});\n\nexport const useAccordionContext = () => use(AccordionContext);\n\nexport const AccordionRoot: FC<AccordionRootProps> = ({\n  children,\n  className,\n  hideIndicator = false,\n  indicatorPlacement = 'start',\n  multiple = true,\n  variant = 'borderless',\n  ...rest\n}) => {\n  const contextValue = useMemo(\n    () => ({ hideIndicator, indicatorPlacement, variant }),\n    [hideIndicator, indicatorPlacement, variant],\n  );\n\n  return (\n    <AccordionContext value={contextValue}>\n      <BaseUIAccordion.Root\n        multiple={multiple}\n        className={\n          styleProps([styles.root, variant === 'outlined' && styles.rootOutlined], className)\n            .className\n        }\n        {...rest}\n      >\n        {children}\n      </BaseUIAccordion.Root>\n    </AccordionContext>\n  );\n};\n\nAccordionRoot.displayName = 'AccordionRoot';\n\nexport const AccordionItem: FC<AccordionItemProps> = ({\n  className,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n\n  return (\n    <BaseUIAccordion.Item\n      className={\n        styleProps([styles.item, variant === 'outlined' && styles.itemOutlined], className)\n          .className\n      }\n      {...rest}\n    />\n  );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport const AccordionHeader: FC<AccordionHeaderProps> = ({\n  className,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const inline = (placementProp ?? ctx.indicatorPlacement) === 'inline' && variant !== 'outlined';\n\n  return (\n    <BaseUIAccordion.Header\n      className={\n        styleProps(\n          [\n            accordionHeaderMarker,\n            styles.header,\n            variant === 'borderless' && styles.headerBorderless,\n            variant === 'filled' && styles.headerFilled,\n            inline && styles.headerInline,\n          ],\n          clsx(inline && 'lobe-accordion-header-inline', className),\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nAccordionHeader.displayName = 'AccordionHeader';\n\nexport const AccordionTrigger: FC<AccordionTriggerProps> = ({\n  children,\n  className,\n  hideIndicator: hideIndicatorProp,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n  const placement = placementProp ?? ctx.indicatorPlacement;\n\n  const indicator = !hideIndicator && (\n    <span {...stylex.props(styles.indicator, indicatorPlacementStyles[placement])}>\n      {placement === 'start' && <ChevronRight size={16} />}\n      {placement === 'inline' && <Play fill=\"currentColor\" size={7} strokeWidth={1} />}\n      {placement === 'end' && <ChevronDown size={16} />}\n    </span>\n  );\n\n  return (\n    <BaseUIAccordion.Trigger\n      className={\n        styleProps(\n          [accordionTriggerMarker, focusRing.info, styles.trigger, triggerVariantStyles[variant]],\n          className,\n        ).className\n      }\n      {...rest}\n    >\n      {placement === 'start' && indicator}\n      {children}\n      {placement !== 'start' && indicator}\n    </BaseUIAccordion.Trigger>\n  );\n};\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nexport const AccordionPanel: FC<AccordionPanelProps> = ({\n  children,\n  className,\n  contentClassName,\n  contentStyle,\n  hideIndicator: hideIndicatorProp,\n  indicatorPlacement: placementProp,\n  variant: variantProp,\n  ...rest\n}) => {\n  const ctx = useAccordionContext();\n  const variant = variantProp ?? ctx.variant;\n  const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n  const placement = placementProp ?? ctx.indicatorPlacement;\n  const indent = !hideIndicator && placement === 'start';\n  const inline = placement === 'inline';\n\n  return (\n    <BaseUIAccordion.Panel\n      className={styleProps([accordionPanelMarker, styles.panel], className).className}\n      {...rest}\n    >\n      <div\n        {...styleProps(\n          [\n            styles.content,\n            contentVariantStyles[variant],\n            inline && variant === 'borderless' && styles.contentInline,\n            indent && variant !== 'outlined' && styles.contentIndent,\n            indent && variant === 'outlined' && styles.contentIndentOutlined,\n          ],\n          contentClassName,\n          contentStyle,\n        )}\n      >\n        {children}\n      </div>\n    </BaseUIAccordion.Panel>\n  );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n\nexport { accordionStyles } from './style';\n"],"mappings":"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"}

package/es/Accordion/style.d.mts

@@ -6,9 +6,9 @@ export declare const accordionStyles: {
   action: string;
   content: string;
   trigger: string;
+  item: string;
   root: string;
   indicator: string;
-  item: string;
   itemOutlined: string;
   rootOutlined: string;
   actionAlwaysVisible: string;

package/es/ActionIcon/ActionIcon.mjs

@@ -6,7 +6,7 @@ import { styles } from "./style.mjs";
 import { calcOutdent, calcSize } from "./utils.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/ActionIcon/ActionIcon.tsx
 const resolveButtonType = (variant) => {
 	if (variant === "filled") return "fill";
@@ -51,7 +51,7 @@ const ActionIconImpl = memo(({ active, className, classNames, color, danger, dis
 	const node = /* @__PURE__ */ jsx(ButtonImpl, {
 		...rest,
 		"aria-label": popupTriggerLabel,
-		className: clsx(classNames?.root, className),
+		className: clsx$1(classNames?.root, className),
 		danger,
 		disabled,
 		htmlType: "button",

package/es/ActionIcon/ActionIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../src/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { MouseEvent, ReactElement, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/Button';\nimport { ButtonImpl } from '@/Button/Button';\nimport Icon from '@/Icon';\nimport type { styleProps } from '@/styles/stylex/props';\nimport Tooltip from '@/Tooltip';\n\nimport { styles } from './style';\nimport type { ActionIconOutdent, ActionIconProps, ActionIconVariant } from './type';\nimport { calcOutdent, calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n  if (variant === 'filled') return 'fill' as const;\n  if (variant === 'outlined') return 'default' as const;\n  return 'text' as const;\n};\n\nconst activeStyles = {\n  borderless: styles.active,\n  filled: styles.activeFill,\n  outlined: styles.activeOutlined,\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n  if (size === 'small') return 'small' as const;\n  if (size === 'large') return 'large' as const;\n  return 'middle' as const;\n};\n\ntype ActionIconImplProps = Omit<ActionIconProps, 'outdent' | 'variant'> & {\n  outdent?: ActionIconOutdent;\n  variant?: ActionIconVariant;\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const ActionIconImpl = memo<ActionIconImplProps>(\n  ({\n    active,\n    className,\n    classNames,\n    color,\n    danger,\n    disabled,\n    fill,\n    fillOpacity,\n    fillRule,\n    focusable,\n    glass,\n    icon,\n    loading,\n    onClick,\n    outdent,\n    ref,\n    shadow,\n    size = 'middle',\n    spin: iconSpinning,\n    style,\n    styles: slotStyles,\n    title,\n    tooltipProps,\n    variant = 'borderless',\n    xstyle,\n    ...rest\n  }) => {\n    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n    const popupTriggerAria = rest as {\n      'aria-expanded'?: unknown;\n      'aria-haspopup'?: unknown;\n      'aria-label'?: string;\n    };\n    const isPopupTrigger =\n      popupTriggerAria['aria-haspopup'] !== undefined ||\n      popupTriggerAria['aria-expanded'] !== undefined;\n    const popupTriggerLabel =\n      popupTriggerAria['aria-label'] ??\n      (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n    const handleClick: ButtonProps['onClick'] = (event) => {\n      onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n    };\n\n    const iconNode = icon ? (\n      <Icon\n        className={classNames?.icon}\n        color={color}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        fillRule={fillRule}\n        focusable={focusable}\n        icon={icon}\n        size={size}\n        spin={iconSpinning}\n        style={{ pointerEvents: 'none', ...slotStyles?.icon }}\n      />\n    ) : undefined;\n\n    const outdentAmount = variant === 'borderless' && outdent ? calcOutdent(size) : undefined;\n    const outdentMargin = outdentAmount\n      ? outdent === 'end'\n        ? { marginInlineEnd: `-${outdentAmount}` }\n        : { marginInlineStart: `-${outdentAmount}` }\n      : undefined;\n\n    const node = (\n      <ButtonImpl\n        {...(rest as unknown as ButtonProps)}\n        aria-label={popupTriggerLabel}\n        className={clsx(classNames?.root, className)}\n        danger={danger}\n        disabled={disabled}\n        htmlType=\"button\"\n        icon={iconNode}\n        loading={loading}\n        ref={ref as unknown as Ref<HTMLButtonElement>}\n        size={resolveButtonSize(size)}\n        tabIndex={disabled ? -1 : 0}\n        type={resolveButtonType(variant)}\n        style={{\n          ...outdentMargin,\n          borderRadius,\n          height: blockSize,\n          width: blockSize,\n          ...slotStyles?.root,\n          ...style,\n        }}\n        xstyle={[\n          styles.root,\n          active && activeStyles[variant],\n          danger && styles.dangerRoot,\n          glass && styles.glass,\n          shadow && styles.shadow,\n          xstyle,\n        ]}\n        onClick={handleClick}\n      />\n    );\n\n    if (!title) return node;\n\n    return (\n      <Tooltip\n        title={title}\n        {...tooltipProps}\n        styles={{\n          ...tooltipProps?.styles,\n          container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n        }}\n      >\n        {node}\n      </Tooltip>\n    );\n  },\n);\n\nActionIconImpl.displayName = 'BaseActionIcon';\n\nconst ActionIcon = ActionIconImpl as unknown as <V extends ActionIconVariant = 'borderless'>(\n  props: ActionIconProps<V>,\n) => ReactElement;\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,eAAe;CACnB,YAAY,OAAO;CACnB,QAAQ,OAAO;CACf,UAAU,OAAO;AACnB;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAQA,MAAa,iBAAiB,MAC3B,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QAAQ,YACR,OACA,cACA,UAAU,cACV,QACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,YAAY;EAAK;CACrD,CAAA,IACC,KAAA;CAEJ,MAAM,gBAAgB,YAAY,gBAAgB,UAAU,YAAY,IAAI,IAAI,KAAA;CAChF,MAAM,gBAAgB,gBAClB,YAAY,QACV,EAAE,iBAAiB,IAAI,gBAAgB,IACvC,EAAE,mBAAmB,IAAI,gBAAgB,IAC3C,KAAA;CAEJ,MAAM,OACJ,oBAAC,YAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,KAAK,YAAY,MAAM,SAAS;EACnC;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL,GAAG;GACH;GACA,QAAQ;GACR,OAAO;GACP,GAAG,YAAY;GACf,GAAG;EACL;EACA,QAAQ;GACN,OAAO;GACP,UAAU,aAAa;GACvB,UAAU,OAAO;GACjB,SAAS,OAAO;GAChB,UAAU,OAAO;GACjB;EACF;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,aAAa"}
+{"version":3,"file":"ActionIcon.mjs","names":["clsx"],"sources":["../../src/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { MouseEvent, ReactElement, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/Button';\nimport { ButtonImpl } from '@/Button/Button';\nimport Icon from '@/Icon';\nimport type { styleProps } from '@/styles/stylex/props';\nimport Tooltip from '@/Tooltip';\n\nimport { styles } from './style';\nimport type { ActionIconOutdent, ActionIconProps, ActionIconVariant } from './type';\nimport { calcOutdent, calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n  if (variant === 'filled') return 'fill' as const;\n  if (variant === 'outlined') return 'default' as const;\n  return 'text' as const;\n};\n\nconst activeStyles = {\n  borderless: styles.active,\n  filled: styles.activeFill,\n  outlined: styles.activeOutlined,\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n  if (size === 'small') return 'small' as const;\n  if (size === 'large') return 'large' as const;\n  return 'middle' as const;\n};\n\ntype ActionIconImplProps = Omit<ActionIconProps, 'outdent' | 'variant'> & {\n  outdent?: ActionIconOutdent;\n  variant?: ActionIconVariant;\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const ActionIconImpl = memo<ActionIconImplProps>(\n  ({\n    active,\n    className,\n    classNames,\n    color,\n    danger,\n    disabled,\n    fill,\n    fillOpacity,\n    fillRule,\n    focusable,\n    glass,\n    icon,\n    loading,\n    onClick,\n    outdent,\n    ref,\n    shadow,\n    size = 'middle',\n    spin: iconSpinning,\n    style,\n    styles: slotStyles,\n    title,\n    tooltipProps,\n    variant = 'borderless',\n    xstyle,\n    ...rest\n  }) => {\n    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n    const popupTriggerAria = rest as {\n      'aria-expanded'?: unknown;\n      'aria-haspopup'?: unknown;\n      'aria-label'?: string;\n    };\n    const isPopupTrigger =\n      popupTriggerAria['aria-haspopup'] !== undefined ||\n      popupTriggerAria['aria-expanded'] !== undefined;\n    const popupTriggerLabel =\n      popupTriggerAria['aria-label'] ??\n      (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n    const handleClick: ButtonProps['onClick'] = (event) => {\n      onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n    };\n\n    const iconNode = icon ? (\n      <Icon\n        className={classNames?.icon}\n        color={color}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        fillRule={fillRule}\n        focusable={focusable}\n        icon={icon}\n        size={size}\n        spin={iconSpinning}\n        style={{ pointerEvents: 'none', ...slotStyles?.icon }}\n      />\n    ) : undefined;\n\n    const outdentAmount = variant === 'borderless' && outdent ? calcOutdent(size) : undefined;\n    const outdentMargin = outdentAmount\n      ? outdent === 'end'\n        ? { marginInlineEnd: `-${outdentAmount}` }\n        : { marginInlineStart: `-${outdentAmount}` }\n      : undefined;\n\n    const node = (\n      <ButtonImpl\n        {...(rest as unknown as ButtonProps)}\n        aria-label={popupTriggerLabel}\n        className={clsx(classNames?.root, className)}\n        danger={danger}\n        disabled={disabled}\n        htmlType=\"button\"\n        icon={iconNode}\n        loading={loading}\n        ref={ref as unknown as Ref<HTMLButtonElement>}\n        size={resolveButtonSize(size)}\n        tabIndex={disabled ? -1 : 0}\n        type={resolveButtonType(variant)}\n        style={{\n          ...outdentMargin,\n          borderRadius,\n          height: blockSize,\n          width: blockSize,\n          ...slotStyles?.root,\n          ...style,\n        }}\n        xstyle={[\n          styles.root,\n          active && activeStyles[variant],\n          danger && styles.dangerRoot,\n          glass && styles.glass,\n          shadow && styles.shadow,\n          xstyle,\n        ]}\n        onClick={handleClick}\n      />\n    );\n\n    if (!title) return node;\n\n    return (\n      <Tooltip\n        title={title}\n        {...tooltipProps}\n        styles={{\n          ...tooltipProps?.styles,\n          container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n        }}\n      >\n        {node}\n      </Tooltip>\n    );\n  },\n);\n\nActionIconImpl.displayName = 'BaseActionIcon';\n\nconst ActionIcon = ActionIconImpl as unknown as <V extends ActionIconVariant = 'borderless'>(\n  props: ActionIconProps<V>,\n) => ReactElement;\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,eAAe;CACnB,YAAY,OAAO;CACnB,QAAQ,OAAO;CACf,UAAU,OAAO;AACnB;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAQA,MAAa,iBAAiB,MAC3B,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QAAQ,YACR,OACA,cACA,UAAU,cACV,QACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,YAAY;EAAK;CACrD,CAAA,IACC,KAAA;CAEJ,MAAM,gBAAgB,YAAY,gBAAgB,UAAU,YAAY,IAAI,IAAI,KAAA;CAChF,MAAM,gBAAgB,gBAClB,YAAY,QACV,EAAE,iBAAiB,IAAI,gBAAgB,IACvC,EAAE,mBAAmB,IAAI,gBAAgB,IAC3C,KAAA;CAEJ,MAAM,OACJ,oBAAC,YAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAWA,OAAK,YAAY,MAAM,SAAS;EACnC;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL,GAAG;GACH;GACA,QAAQ;GACR,OAAO;GACP,GAAG,YAAY;GACf,GAAG;EACL;EACA,QAAQ;GACN,OAAO;GACP,UAAU,aAAa;GACvB,UAAU,OAAO;GACjB,SAAS,OAAO;GAChB,UAAU,OAAO;GACjB;EACF;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,aAAa"}

package/es/Alert/Alert.mjs

@@ -6,7 +6,7 @@ import { alertSummaryMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { AlertTriangle, CheckCircle, ChevronRight, Info, X, XCircle } from "lucide-react";
 //#region src/Alert/Alert.tsx
 const typeIcons = {
@@ -72,7 +72,7 @@ const Alert = memo(({ action, afterClose, banner = false, className, classNames,
 			hasDescription ? styles.detailed : styles.centered,
 			rootVariantStyles[variant],
 			integratedExtra && styles.unifiedRoot
-		], clsx(classNames?.root, classNames?.alert, rootClassName, className), {
+		], clsx$1(classNames?.root, classNames?.alert, rootClassName, className), {
 			...style,
 			...customStyles?.root,
 			...customStyles?.alert
@@ -88,7 +88,7 @@ const Alert = memo(({ action, afterClose, banner = false, className, classNames,
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				...styleProps([styles.content], clsx(classNames?.section, classNames?.content), {
+				...styleProps([styles.content], clsx$1(classNames?.section, classNames?.content), {
 					...customStyles?.section,
 					...customStyles?.content
 				}),
@@ -108,7 +108,7 @@ const Alert = memo(({ action, afterClose, banner = false, className, classNames,
 				...closeButtonProps,
 				"aria-label": closeButtonProps["aria-label"] ?? "Close alert",
 				disabled: closeDisabled,
-				...styleProps([focusRing.info, styles.close], clsx(classNames?.close, closeClassName), {
+				...styleProps([focusRing.info, styles.close], clsx$1(classNames?.close, closeClassName), {
 					...customStyles?.close,
 					...closeStyle
 				}),
@@ -150,7 +150,7 @@ const Alert = memo(({ action, afterClose, banner = false, className, classNames,
 						focusRing.info,
 						styles.extraHeader,
 						isPlainVariant(variant) && styles.extraHeaderPlain
-					], clsx("lobe-alert-extra-header", classNames?.extraHeader), customStyles?.extraHeader),
+					], clsx$1("lobe-alert-extra-header", classNames?.extraHeader), customStyles?.extraHeader),
 					children: [/* @__PURE__ */ jsx(ChevronRight, {
 						"aria-hidden": "true",
 						size: 14,

package/es/Alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":[],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { AlertTriangle, CheckCircle, ChevronRight, Info, X, XCircle } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { alertSummaryMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { AlertCloseConfig, AlertProps, AlertType, AlertVariant } from './type';\n\nconst typeIcons = {\n  error: XCircle,\n  info: Info,\n  secondary: AlertTriangle,\n  success: CheckCircle,\n  warning: AlertTriangle,\n} satisfies Record<AlertType, typeof Info>;\n\nconst toneStyles = {\n  error: styles.toneError,\n  info: styles.toneInfo,\n  secondary: styles.toneSecondary,\n  success: styles.toneSuccess,\n  warning: styles.toneWarning,\n} satisfies Record<AlertType, unknown>;\n\nconst rootVariantStyles = {\n  borderless: styles.plain,\n  filled: styles.soft,\n  outlined: styles.outlined,\n  plain: styles.plain,\n  soft: styles.soft,\n} satisfies Record<AlertVariant, unknown>;\n\nconst integratedVariantStyles = {\n  borderless: styles.extraPlain,\n  filled: styles.soft,\n  outlined: styles.outlined,\n  plain: styles.extraPlain,\n  soft: styles.soft,\n} satisfies Record<AlertVariant, unknown>;\n\nconst isPlainVariant = (variant: AlertVariant) => variant === 'borderless' || variant === 'plain';\n\nconst Alert = memo<AlertProps>(\n  ({\n    action,\n    afterClose,\n    banner = false,\n    className,\n    classNames,\n    closable = false,\n    closeIcon,\n    closeText,\n    colorfulText = false,\n    description,\n    extra,\n    extraDefaultExpand = false,\n    extraIsolate = false,\n    glass = false,\n    icon,\n    iconProps,\n    message,\n    onClose,\n    ref,\n    role = 'alert',\n    rootClassName,\n    showIcon = true,\n    style,\n    styles: customStyles,\n    text,\n    title,\n    type = 'info',\n    variant = 'soft',\n    ...rest\n  }) => {\n    const [closed, setClosed] = useState(false);\n    const [extraExpanded, setExtraExpanded] = useState(extraDefaultExpand);\n    const resolvedTitle = title ?? message;\n    const hasDescription = description !== undefined && description !== null;\n    const integratedExtra = Boolean(extra && !extraIsolate);\n    const closeConfig: AlertCloseConfig = typeof closable === 'object' ? closable : {};\n    const isClosable = Boolean(closable);\n    const {\n      afterClose: configuredAfterClose,\n      closeIcon: configuredCloseIcon,\n      className: closeClassName,\n      disabled: closeDisabled,\n      onClose: configuredOnClose,\n      style: closeStyle,\n      ...closeButtonProps\n    } = closeConfig;\n    const afterCloseRef = useRef(configuredAfterClose ?? afterClose);\n    afterCloseRef.current = configuredAfterClose ?? afterClose;\n\n    useEffect(() => {\n      if (closed) afterCloseRef.current?.();\n    }, [closed]);\n\n    if (closed) return null;\n\n    const handleClose: NonNullable<AlertCloseConfig['onClose']> = (event) => {\n      (configuredOnClose ?? onClose)?.(event);\n      setClosed(true);\n    };\n\n    const root = (\n      <div\n        {...rest}\n        data-alert-type={type}\n        data-alert-variant={variant}\n        ref={ref}\n        role={role}\n        {...styleProps(\n          [\n            toneStyles[type],\n            styles.root,\n            banner && styles.banner,\n            colorfulText ? styles.colorfulText : styles.neutralText,\n            !integratedExtra && glass && styles.glass,\n            hasDescription ? styles.detailed : styles.centered,\n            rootVariantStyles[variant],\n            integratedExtra && styles.unifiedRoot,\n          ],\n          clsx(classNames?.root, classNames?.alert, rootClassName, className),\n          {\n            ...style,\n            ...customStyles?.root,\n            ...customStyles?.alert,\n          },\n        )}\n      >\n        {showIcon && (\n          <span\n            aria-hidden=\"true\"\n            {...styleProps([styles.icon], classNames?.icon, customStyles?.icon)}\n          >\n            <Icon icon={icon ?? typeIcons[type]} size={hasDescription ? 18 : 16} {...iconProps} />\n          </span>\n        )}\n        <div\n          {...styleProps([styles.content], clsx(classNames?.section, classNames?.content), {\n            ...customStyles?.section,\n            ...customStyles?.content,\n          })}\n        >\n          {resolvedTitle !== undefined && resolvedTitle !== null && (\n            <div\n              {...styleProps(\n                [styles.title, hasDescription && styles.titleDetailed],\n                classNames?.title,\n                customStyles?.title,\n              )}\n            >\n              {resolvedTitle}\n            </div>\n          )}\n          {hasDescription && (\n            <div\n              {...styleProps(\n                [styles.description],\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </div>\n          )}\n        </div>\n        {action && (\n          <div\n            {...styleProps(\n              [styles.action, styles.wrappedAction],\n              classNames?.action,\n              customStyles?.action,\n            )}\n          >\n            {action}\n          </div>\n        )}\n        {isClosable && (\n          <button\n            {...closeButtonProps}\n            aria-label={closeButtonProps['aria-label'] ?? 'Close alert'}\n            disabled={closeDisabled}\n            {...styleProps(\n              [focusRing.info, styles.close],\n              clsx(classNames?.close, closeClassName),\n              { ...customStyles?.close, ...closeStyle },\n            )}\n            type=\"button\"\n            onClick={handleClose}\n          >\n            {configuredCloseIcon ?? closeIcon ?? closeText ?? <X size={14} />}\n          </button>\n        )}\n      </div>\n    );\n\n    if (!extra) return root;\n\n    if (extraIsolate) {\n      return (\n        <div\n          {...styleProps([styles.container, toneStyles[type]], classNames?.container, {\n            gap: 8,\n            ...customStyles?.container,\n          })}\n        >\n          {root}\n          {extra}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...styleProps(\n          [\n            styles.container,\n            toneStyles[type],\n            styles.integrated,\n            banner && styles.banner,\n            glass && styles.glass,\n            integratedVariantStyles[variant],\n          ],\n          classNames?.container,\n          customStyles?.container,\n        )}\n      >\n        {root}\n        <div\n          {...styleProps(\n            [\n              styles.extra,\n              banner && styles.extraBanner,\n              isPlainVariant(variant) && styles.extraPlain,\n            ],\n            classNames?.extra,\n            customStyles?.extra,\n          )}\n        >\n          <details\n            open={extraExpanded}\n            onToggle={(event) => setExtraExpanded(event.currentTarget.open)}\n          >\n            <summary\n              {...styleProps(\n                [\n                  alertSummaryMarker,\n                  focusRing.info,\n                  styles.extraHeader,\n                  isPlainVariant(variant) && styles.extraHeaderPlain,\n                ],\n                clsx('lobe-alert-extra-header', classNames?.extraHeader),\n                customStyles?.extraHeader,\n              )}\n            >\n              <ChevronRight\n                aria-hidden=\"true\"\n                size={14}\n                {...styleProps(\n                  [styles.extraIndicator],\n                  classNames?.extraIndicator,\n                  customStyles?.extraIndicator,\n                )}\n              />\n              <span>{text?.detail ?? 'Show Details'}</span>\n            </summary>\n            <div\n              {...styleProps(\n                [styles.extraContent],\n                classNames?.extraContent,\n                customStyles?.extraContent,\n              )}\n            >\n              {extra}\n            </div>\n          </details>\n        </div>\n      </div>\n    );\n  },\n);\n\nAlert.displayName = 'BaseAlert';\n\nexport default Alert;\n"],"mappings":"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"}
+{"version":3,"file":"Alert.mjs","names":["clsx"],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport clsx from 'clsx';\nimport { AlertTriangle, CheckCircle, ChevronRight, Info, X, XCircle } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { alertSummaryMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { AlertCloseConfig, AlertProps, AlertType, AlertVariant } from './type';\n\nconst typeIcons = {\n  error: XCircle,\n  info: Info,\n  secondary: AlertTriangle,\n  success: CheckCircle,\n  warning: AlertTriangle,\n} satisfies Record<AlertType, typeof Info>;\n\nconst toneStyles = {\n  error: styles.toneError,\n  info: styles.toneInfo,\n  secondary: styles.toneSecondary,\n  success: styles.toneSuccess,\n  warning: styles.toneWarning,\n} satisfies Record<AlertType, unknown>;\n\nconst rootVariantStyles = {\n  borderless: styles.plain,\n  filled: styles.soft,\n  outlined: styles.outlined,\n  plain: styles.plain,\n  soft: styles.soft,\n} satisfies Record<AlertVariant, unknown>;\n\nconst integratedVariantStyles = {\n  borderless: styles.extraPlain,\n  filled: styles.soft,\n  outlined: styles.outlined,\n  plain: styles.extraPlain,\n  soft: styles.soft,\n} satisfies Record<AlertVariant, unknown>;\n\nconst isPlainVariant = (variant: AlertVariant) => variant === 'borderless' || variant === 'plain';\n\nconst Alert = memo<AlertProps>(\n  ({\n    action,\n    afterClose,\n    banner = false,\n    className,\n    classNames,\n    closable = false,\n    closeIcon,\n    closeText,\n    colorfulText = false,\n    description,\n    extra,\n    extraDefaultExpand = false,\n    extraIsolate = false,\n    glass = false,\n    icon,\n    iconProps,\n    message,\n    onClose,\n    ref,\n    role = 'alert',\n    rootClassName,\n    showIcon = true,\n    style,\n    styles: customStyles,\n    text,\n    title,\n    type = 'info',\n    variant = 'soft',\n    ...rest\n  }) => {\n    const [closed, setClosed] = useState(false);\n    const [extraExpanded, setExtraExpanded] = useState(extraDefaultExpand);\n    const resolvedTitle = title ?? message;\n    const hasDescription = description !== undefined && description !== null;\n    const integratedExtra = Boolean(extra && !extraIsolate);\n    const closeConfig: AlertCloseConfig = typeof closable === 'object' ? closable : {};\n    const isClosable = Boolean(closable);\n    const {\n      afterClose: configuredAfterClose,\n      closeIcon: configuredCloseIcon,\n      className: closeClassName,\n      disabled: closeDisabled,\n      onClose: configuredOnClose,\n      style: closeStyle,\n      ...closeButtonProps\n    } = closeConfig;\n    const afterCloseRef = useRef(configuredAfterClose ?? afterClose);\n    afterCloseRef.current = configuredAfterClose ?? afterClose;\n\n    useEffect(() => {\n      if (closed) afterCloseRef.current?.();\n    }, [closed]);\n\n    if (closed) return null;\n\n    const handleClose: NonNullable<AlertCloseConfig['onClose']> = (event) => {\n      (configuredOnClose ?? onClose)?.(event);\n      setClosed(true);\n    };\n\n    const root = (\n      <div\n        {...rest}\n        data-alert-type={type}\n        data-alert-variant={variant}\n        ref={ref}\n        role={role}\n        {...styleProps(\n          [\n            toneStyles[type],\n            styles.root,\n            banner && styles.banner,\n            colorfulText ? styles.colorfulText : styles.neutralText,\n            !integratedExtra && glass && styles.glass,\n            hasDescription ? styles.detailed : styles.centered,\n            rootVariantStyles[variant],\n            integratedExtra && styles.unifiedRoot,\n          ],\n          clsx(classNames?.root, classNames?.alert, rootClassName, className),\n          {\n            ...style,\n            ...customStyles?.root,\n            ...customStyles?.alert,\n          },\n        )}\n      >\n        {showIcon && (\n          <span\n            aria-hidden=\"true\"\n            {...styleProps([styles.icon], classNames?.icon, customStyles?.icon)}\n          >\n            <Icon icon={icon ?? typeIcons[type]} size={hasDescription ? 18 : 16} {...iconProps} />\n          </span>\n        )}\n        <div\n          {...styleProps([styles.content], clsx(classNames?.section, classNames?.content), {\n            ...customStyles?.section,\n            ...customStyles?.content,\n          })}\n        >\n          {resolvedTitle !== undefined && resolvedTitle !== null && (\n            <div\n              {...styleProps(\n                [styles.title, hasDescription && styles.titleDetailed],\n                classNames?.title,\n                customStyles?.title,\n              )}\n            >\n              {resolvedTitle}\n            </div>\n          )}\n          {hasDescription && (\n            <div\n              {...styleProps(\n                [styles.description],\n                classNames?.description,\n                customStyles?.description,\n              )}\n            >\n              {description}\n            </div>\n          )}\n        </div>\n        {action && (\n          <div\n            {...styleProps(\n              [styles.action, styles.wrappedAction],\n              classNames?.action,\n              customStyles?.action,\n            )}\n          >\n            {action}\n          </div>\n        )}\n        {isClosable && (\n          <button\n            {...closeButtonProps}\n            aria-label={closeButtonProps['aria-label'] ?? 'Close alert'}\n            disabled={closeDisabled}\n            {...styleProps(\n              [focusRing.info, styles.close],\n              clsx(classNames?.close, closeClassName),\n              { ...customStyles?.close, ...closeStyle },\n            )}\n            type=\"button\"\n            onClick={handleClose}\n          >\n            {configuredCloseIcon ?? closeIcon ?? closeText ?? <X size={14} />}\n          </button>\n        )}\n      </div>\n    );\n\n    if (!extra) return root;\n\n    if (extraIsolate) {\n      return (\n        <div\n          {...styleProps([styles.container, toneStyles[type]], classNames?.container, {\n            gap: 8,\n            ...customStyles?.container,\n          })}\n        >\n          {root}\n          {extra}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...styleProps(\n          [\n            styles.container,\n            toneStyles[type],\n            styles.integrated,\n            banner && styles.banner,\n            glass && styles.glass,\n            integratedVariantStyles[variant],\n          ],\n          classNames?.container,\n          customStyles?.container,\n        )}\n      >\n        {root}\n        <div\n          {...styleProps(\n            [\n              styles.extra,\n              banner && styles.extraBanner,\n              isPlainVariant(variant) && styles.extraPlain,\n            ],\n            classNames?.extra,\n            customStyles?.extra,\n          )}\n        >\n          <details\n            open={extraExpanded}\n            onToggle={(event) => setExtraExpanded(event.currentTarget.open)}\n          >\n            <summary\n              {...styleProps(\n                [\n                  alertSummaryMarker,\n                  focusRing.info,\n                  styles.extraHeader,\n                  isPlainVariant(variant) && styles.extraHeaderPlain,\n                ],\n                clsx('lobe-alert-extra-header', classNames?.extraHeader),\n                customStyles?.extraHeader,\n              )}\n            >\n              <ChevronRight\n                aria-hidden=\"true\"\n                size={14}\n                {...styleProps(\n                  [styles.extraIndicator],\n                  classNames?.extraIndicator,\n                  customStyles?.extraIndicator,\n                )}\n              />\n              <span>{text?.detail ?? 'Show Details'}</span>\n            </summary>\n            <div\n              {...styleProps(\n                [styles.extraContent],\n                classNames?.extraContent,\n                customStyles?.extraContent,\n              )}\n            >\n              {extra}\n            </div>\n          </details>\n        </div>\n      </div>\n    );\n  },\n);\n\nAlert.displayName = 'BaseAlert';\n\nexport default Alert;\n"],"mappings":"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"}

package/es/AutoComplete/AutoComplete.mjs

@@ -8,7 +8,7 @@ import { inputClassNames, rootVariants } from "../Input/style.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { XIcon } from "lucide-react";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 //#region src/AutoComplete/AutoComplete.tsx
@@ -30,7 +30,7 @@ const AutoComplete = memo(({ className, classNames, styles: customStyles, style,
 		},
 		...rest,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(rootVariants({
+			className: clsx$1(rootVariants({
 				shadow,
 				size,
 				variant: mergedVariant
@@ -44,7 +44,7 @@ const AutoComplete = memo(({ className, classNames, styles: customStyles, style,
 					children: prefix
 				}),
 				/* @__PURE__ */ jsx(Autocomplete.Input, {
-					className: clsx(inputClassNames.input, classNames?.input),
+					className: clsx$1(inputClassNames.input, classNames?.input),
 					placeholder,
 					style: customStyles?.input
 				}),
@@ -71,7 +71,7 @@ const AutoComplete = memo(({ className, classNames, styles: customStyles, style,
 				sideOffset: 4,
 				style: zIndex === void 0 ? void 0 : { zIndex },
 				children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
-					className: clsx(styles.popup, classNames?.popup),
+					className: clsx$1(styles.popup, classNames?.popup),
 					style: customStyles?.popup,
 					children: [emptyText && /* @__PURE__ */ jsx(Autocomplete.Empty, {
 						className: styles.empty,
@@ -79,7 +79,7 @@ const AutoComplete = memo(({ className, classNames, styles: customStyles, style,
 					}), /* @__PURE__ */ jsx(Autocomplete.List, {
 						className: styles.list,
 						children: (item) => /* @__PURE__ */ jsx(Autocomplete.Item, {
-							className: clsx(styles.item, classNames?.item),
+							className: clsx$1(styles.item, classNames?.item),
 							disabled: item.disabled,
 							style: customStyles?.item,
 							value: item,

package/es/AutoComplete/AutoComplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles"],"sources":["../../src/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport clsx from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport Icon from '@/Icon';\nimport { inputStyles, inputVariants } from '@/Input';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { useLayerZIndex } from '@/internal/zIndex';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n  ({\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    options = [],\n    onChange,\n    onSearch,\n    allowClear,\n    disabled,\n    placeholder,\n    prefix,\n    suffix,\n    emptyText,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const appElement = useAppElement();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    const items = useMemo<AutoCompleteOption[]>(\n      () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n      [options],\n    );\n\n    return (\n      <Autocomplete.Root\n        openOnInputClick\n        disabled={disabled}\n        itemToStringValue={(item) => (item as AutoCompleteOption).value}\n        items={items}\n        onValueChange={(value) => {\n          onChange?.(value);\n          onSearch?.(value);\n        }}\n        {...rest}\n      >\n        <div\n          className={clsx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n          data-disabled={disabled ? '' : undefined}\n          ref={anchorRef}\n          style={style}\n        >\n          {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n          <Autocomplete.Input\n            className={clsx(inputStyles.input, classNames?.input)}\n            placeholder={placeholder}\n            style={customStyles?.input}\n          />\n          {allowClear && (\n            <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n              <Icon icon={XIcon} size={14} />\n            </Autocomplete.Clear>\n          )}\n          {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n        </div>\n        <Autocomplete.Portal container={appElement ?? undefined}>\n          <Autocomplete.Positioner\n            anchor={anchorRef}\n            className={styles.positioner}\n            collisionPadding={getFloatingCollisionPadding()}\n            ref={positionerRef}\n            sideOffset={4}\n            style={zIndex === undefined ? undefined : { zIndex }}\n          >\n            <Autocomplete.Popup\n              className={clsx(styles.popup, classNames?.popup)}\n              style={customStyles?.popup}\n            >\n              {emptyText && (\n                <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n              )}\n              <Autocomplete.List className={styles.list}>\n                {(item: AutoCompleteOption) => (\n                  <Autocomplete.Item\n                    className={clsx(styles.item, classNames?.item)}\n                    disabled={item.disabled}\n                    key={item.value}\n                    style={customStyles?.item}\n                    value={item}\n                  >\n                    {item.label ?? item.value}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.List>\n            </Autocomplete.Popup>\n          </Autocomplete.Positioner>\n        </Autocomplete.Portal>\n      </Autocomplete.Root>\n    );\n  },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,CAAC,GACX,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,KAAK,eAAe,WAAW,eAA+B,UAAU;CAChF,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI,MAAO,GACvF,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;GACxB,WAAW,KAAK;GAChB,WAAW,KAAK;EAClB;EACA,GAAI;EATN,UAAA,CAWE,qBAAC,OAAD;GACE,WAAW,KAAKA,aAAc;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GAAG,SAAS;GAClF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;GAJT,UAAA;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,gBAAY;KAAO,UAAA;IAAa,CAAA;IAC5D,oBAAC,aAAa,OAAd;KACE,WAAW,KAAKA,gBAAY,OAAO,YAAY,KAAK;KACvC;KACb,OAAO,cAAc;IACtB,CAAA;IACA,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAW,OAAO;KACzD,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;KAAK,CAAA;IACZ,CAAA;IAErB,UAAU,oBAAC,QAAD;KAAM,WAAWA,gBAAY;KAAO,UAAA;IAAa,CAAA;GACzD;EACL,CAAA,GAAA,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;GAC5C,UAAA,oBAAC,aAAa,YAAd;IACE,QAAQ;IACR,WAAW,OAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO;IAEnD,UAAA,qBAAC,aAAa,OAAd;KACE,WAAW,KAAK,OAAO,OAAO,YAAY,KAAK;KAC/C,OAAO,cAAc;KAFvB,UAAA,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAW,OAAO;MAAQ,UAAA;KAA8B,CAAA,GAE9E,oBAAC,aAAa,MAAd;MAAmB,WAAW,OAAO;MACjC,WAAA,SACA,oBAAC,aAAa,MAAd;OACE,WAAW,KAAK,OAAO,MAAM,YAAY,IAAI;OAC7C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;OAEN,UAAA,KAAK,SAAS,KAAK;MACH,GALZ,KAAK,KAKO;KAEJ,CAAA,CACD;;GACG,CAAA;EACN,CAAA,CACJ;;AAEvB,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"AutoComplete.mjs","names":["clsx","inputVariants","inputStyles"],"sources":["../../src/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport clsx from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport Icon from '@/Icon';\nimport { inputStyles, inputVariants } from '@/Input';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { useLayerZIndex } from '@/internal/zIndex';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n  ({\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    options = [],\n    onChange,\n    onSearch,\n    allowClear,\n    disabled,\n    placeholder,\n    prefix,\n    suffix,\n    emptyText,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const appElement = useAppElement();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    const items = useMemo<AutoCompleteOption[]>(\n      () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n      [options],\n    );\n\n    return (\n      <Autocomplete.Root\n        openOnInputClick\n        disabled={disabled}\n        itemToStringValue={(item) => (item as AutoCompleteOption).value}\n        items={items}\n        onValueChange={(value) => {\n          onChange?.(value);\n          onSearch?.(value);\n        }}\n        {...rest}\n      >\n        <div\n          className={clsx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n          data-disabled={disabled ? '' : undefined}\n          ref={anchorRef}\n          style={style}\n        >\n          {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n          <Autocomplete.Input\n            className={clsx(inputStyles.input, classNames?.input)}\n            placeholder={placeholder}\n            style={customStyles?.input}\n          />\n          {allowClear && (\n            <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n              <Icon icon={XIcon} size={14} />\n            </Autocomplete.Clear>\n          )}\n          {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n        </div>\n        <Autocomplete.Portal container={appElement ?? undefined}>\n          <Autocomplete.Positioner\n            anchor={anchorRef}\n            className={styles.positioner}\n            collisionPadding={getFloatingCollisionPadding()}\n            ref={positionerRef}\n            sideOffset={4}\n            style={zIndex === undefined ? undefined : { zIndex }}\n          >\n            <Autocomplete.Popup\n              className={clsx(styles.popup, classNames?.popup)}\n              style={customStyles?.popup}\n            >\n              {emptyText && (\n                <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n              )}\n              <Autocomplete.List className={styles.list}>\n                {(item: AutoCompleteOption) => (\n                  <Autocomplete.Item\n                    className={clsx(styles.item, classNames?.item)}\n                    disabled={item.disabled}\n                    key={item.value}\n                    style={customStyles?.item}\n                    value={item}\n                  >\n                    {item.label ?? item.value}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.List>\n            </Autocomplete.Popup>\n          </Autocomplete.Positioner>\n        </Autocomplete.Portal>\n      </Autocomplete.Root>\n    );\n  },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,CAAC,GACX,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,KAAK,eAAe,WAAW,eAA+B,UAAU;CAChF,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI,MAAO,GACvF,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;GACxB,WAAW,KAAK;GAChB,WAAW,KAAK;EAClB;EACA,GAAI;EATN,UAAA,CAWE,qBAAC,OAAD;GACE,WAAWA,OAAKC,aAAc;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GAAG,SAAS;GAClF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;GAJT,UAAA;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,gBAAY;KAAO,UAAA;IAAa,CAAA;IAC5D,oBAAC,aAAa,OAAd;KACE,WAAWF,OAAKE,gBAAY,OAAO,YAAY,KAAK;KACvC;KACb,OAAO,cAAc;IACtB,CAAA;IACA,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAW,OAAO;KACzD,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;KAAK,CAAA;IACZ,CAAA;IAErB,UAAU,oBAAC,QAAD;KAAM,WAAWA,gBAAY;KAAO,UAAA;IAAa,CAAA;GACzD;EACL,CAAA,GAAA,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;GAC5C,UAAA,oBAAC,aAAa,YAAd;IACE,QAAQ;IACR,WAAW,OAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO;IAEnD,UAAA,qBAAC,aAAa,OAAd;KACE,WAAWF,OAAK,OAAO,OAAO,YAAY,KAAK;KAC/C,OAAO,cAAc;KAFvB,UAAA,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAW,OAAO;MAAQ,UAAA;KAA8B,CAAA,GAE9E,oBAAC,aAAa,MAAd;MAAmB,WAAW,OAAO;MACjC,WAAA,SACA,oBAAC,aAAa,MAAd;OACE,WAAWA,OAAK,OAAO,MAAM,YAAY,IAAI;OAC7C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;OAEN,UAAA,KAAK,SAAS,KAAK;MACH,GALZ,KAAK,KAKO;KAEJ,CAAA,CACD;;GACG,CAAA;EACN,CAAA,CACJ;;AAEvB,CACF;AAEA,aAAa,cAAc"}

package/es/AutoComplete/style.mjs

@@ -1,5 +1,5 @@
 import { menuClassNames, menuStyles } from "../DropdownMenu/style.mjs";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/AutoComplete/style.ts
 const ownStyles = {
@@ -57,7 +57,7 @@ const stableClassNames = {
 	popup: menuClassNames.popup,
 	positioner: menuClassNames.positioner
 };
-const styles = Object.fromEntries(Object.entries(styleArrays).map(([key, value]) => [key, clsx(stylex.props(value).className, stableClassNames[key])]));
+const styles = Object.fromEntries(Object.entries(styleArrays).map(([key, value]) => [key, clsx$1(stylex.props(value).className, stableClassNames[key])]));
 //#endregion
 export { styles };
 

package/es/AutoComplete/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/AutoComplete/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst ownStyles = stylex.create({\n  clear: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  empty: {\n    backgroundColor: 'transparent',\n    cursor: 'default',\n    display: { 'default': 'flex', ':empty': 'none' },\n  },\n  list: {\n    display: { 'default': null, ':empty': 'none' },\n    maxHeight: 'min(320px, var(--available-height))',\n    overflowY: 'auto',\n  },\n  popup: {\n    transition: `opacity 140ms ${cssVar.motionEaseOut}, transform 140ms ${cssVar.motionEaseOut}`,\n    opacity: { 'default': null, ':is([data-starting-style], [data-ending-style])': 0 },\n    transform: {\n      'default': null,\n      ':is([data-starting-style], [data-ending-style])': 'scaleY(0.92)',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    minWidth: 0,\n    width: 'var(--anchor-width)',\n  },\n});\n\nconst styleArrays = {\n  clear: [ownStyles.clear],\n  empty: [menuStyles.item, menuStyles.empty, ownStyles.empty],\n  item: [menuStyles.item],\n  list: [ownStyles.list],\n  popup: [menuStyles.popup, ownStyles.popup],\n  positioner: [menuStyles.positioner],\n};\n\nconst stableClassNames: Partial<Record<keyof typeof styleArrays, string>> = {\n  popup: menuClassNames.popup,\n  positioner: menuClassNames.positioner,\n};\n\nexport const styles = Object.fromEntries(\n  Object.entries(styleArrays).map(([key, value]) => [\n    key,\n    clsx(stylex.props(value).className, stableClassNames[key as keyof typeof styleArrays]),\n  ]),\n) as Record<keyof typeof styleArrays, string>;\n"],"mappings":";;;;AAKA,MAAM,YAAY;CAChB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,cAAc;CAClB,OAAO,CAAC,UAAU,KAAK;CACvB,OAAO;EAAC,WAAW;EAAM,WAAW;EAAO,UAAU;CAAK;CAC1D,MAAM,CAAC,WAAW,IAAI;CACtB,MAAM,CAAC,UAAU,IAAI;CACrB,OAAO,CAAC,WAAW,OAAO,UAAU,KAAK;CACzC,YAAY,CAAC,WAAW,UAAU;AACpC;AACA,MAAM,mBAAsE;CAC1E,OAAO,eAAe;CACtB,YAAY,eAAe;AAC7B;AACA,MAAa,SAAS,OAAO,YAAY,OAAO,QAAQ,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,WAAW,iBAAiB,IAAgC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/AutoComplete/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst ownStyles = stylex.create({\n  clear: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  empty: {\n    backgroundColor: 'transparent',\n    cursor: 'default',\n    display: { 'default': 'flex', ':empty': 'none' },\n  },\n  list: {\n    display: { 'default': null, ':empty': 'none' },\n    maxHeight: 'min(320px, var(--available-height))',\n    overflowY: 'auto',\n  },\n  popup: {\n    transition: `opacity 140ms ${cssVar.motionEaseOut}, transform 140ms ${cssVar.motionEaseOut}`,\n    opacity: { 'default': null, ':is([data-starting-style], [data-ending-style])': 0 },\n    transform: {\n      'default': null,\n      ':is([data-starting-style], [data-ending-style])': 'scaleY(0.92)',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    minWidth: 0,\n    width: 'var(--anchor-width)',\n  },\n});\n\nconst styleArrays = {\n  clear: [ownStyles.clear],\n  empty: [menuStyles.item, menuStyles.empty, ownStyles.empty],\n  item: [menuStyles.item],\n  list: [ownStyles.list],\n  popup: [menuStyles.popup, ownStyles.popup],\n  positioner: [menuStyles.positioner],\n};\n\nconst stableClassNames: Partial<Record<keyof typeof styleArrays, string>> = {\n  popup: menuClassNames.popup,\n  positioner: menuClassNames.positioner,\n};\n\nexport const styles = Object.fromEntries(\n  Object.entries(styleArrays).map(([key, value]) => [\n    key,\n    clsx(stylex.props(value).className, stableClassNames[key as keyof typeof styleArrays]),\n  ]),\n) as Record<keyof typeof styleArrays, string>;\n"],"mappings":";;;;AAKA,MAAM,YAAY;CAChB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,cAAc;CAClB,OAAO,CAAC,UAAU,KAAK;CACvB,OAAO;EAAC,WAAW;EAAM,WAAW;EAAO,UAAU;CAAK;CAC1D,MAAM,CAAC,WAAW,IAAI;CACtB,MAAM,CAAC,UAAU,IAAI;CACrB,OAAO,CAAC,WAAW,OAAO,UAAU,KAAK;CACzC,YAAY,CAAC,WAAW,UAAU;AACpC;AACA,MAAM,mBAAsE;CAC1E,OAAO,eAAe;CACtB,YAAY,eAAe;AAC7B;AACA,MAAa,SAAS,OAAO,YAAY,OAAO,QAAQ,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAKA,OAAK,OAAO,MAAM,KAAK,CAAC,CAAC,WAAW,iBAAiB,IAAgC,CAAC,CAAC,CAAC"}

package/es/Avatar/Avatar.mjs

@@ -10,7 +10,7 @@ import { styles } from "./style.mjs";
 import { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar } from "./utils.mjs";
 import { memo, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { Loader2 } from "lucide-react";
 import { getEmoji } from "@lobehub/fluent-emoji";
 //#region src/Avatar/Avatar.tsx
@@ -57,7 +57,7 @@ const AvatarImpl = memo(({ alt, animation, avatar, background, bordered, bordere
 			variantStyles[variant],
 			shadow && styles.shadow,
 			xstyle
-		], clsx(className, classNames?.root)).className,
+		], clsx$1(className, classNames?.root)).className,
 		style: {
 			backgroundColor: isUrlOrElement && !isImgError || emoji ? background : background || cssVar.colorBorder,
 			borderRadius: shape === "circle" ? "50%" : size < 24 ? "33%" : Math.max(size / 6, 2),

package/es/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport { type AvatarProps } from './type';\nimport {\n  calculateEmojiSize,\n  formatAvatarText,\n  hasValidBackground,\n  isDefaultAntAvatar,\n} from './utils';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\ntype AvatarImplProps = AvatarProps & {\n  contentXstyle?: Parameters<typeof styleProps>[0];\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const AvatarImpl = memo<AvatarImplProps>(\n  ({\n    alt,\n    animation,\n    avatar,\n    background,\n    bordered,\n    borderedColor,\n    className,\n    classNames,\n    crossOrigin,\n    draggable = false,\n    emojiScaleWithBackground = true,\n    loading,\n    ref,\n    shadow,\n    shape = 'square',\n    size = 48,\n    sliceText = true,\n    style,\n    styles: customStyles,\n    title,\n    tooltipProps,\n    unoptimized,\n    variant = 'borderless',\n    xstyle,\n    contentXstyle,\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const [isImgError, setIsImgError] = useState(false);\n\n    const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\n\n    const emoji = useMemo(\n      () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\n      [avatar, isStringAvatar, isUrlOrElement],\n    );\n\n    const text = isUrlOrElement ? title : typeof avatar === 'string' ? avatar : undefined;\n\n    const imgAlt = alt || title || 'avatar';\n\n    const hasBackground = hasValidBackground(background);\n    const showImage = isUrlOrElement && isStringAvatar && !isImgError;\n    const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : (\n          formatAvatarText(text || title, sliceText)\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        className={\n          styleProps(\n            [styles.root, variantStyles[variant], shadow && styles.shadow, xstyle],\n            clsx(className, classNames?.root),\n          ).className\n        }\n        style={{\n          backgroundColor:\n            (isUrlOrElement && !isImgError) || emoji\n              ? background\n              : background || cssVar.colorBorder,\n          borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\n          boxShadow: bordered\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: safeReadableColor(background || cssVar.colorBorder),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          height: size,\n          width: size,\n          ...style,\n          ...customStyles?.root,\n        }}\n      >\n        {loading && (\n          <Center\n            flex={'none'}\n            height={'100%'}\n            width={'100%'}\n            {...styleProps(styles.loading, classNames?.loading, customStyles?.loading)}\n          >\n            <Icon spin icon={Loader2} />\n          </Center>\n        )}\n        {typeof avatar === 'string' && showImage && (\n          <img\n            alt={imgAlt}\n            crossOrigin={crossOrigin}\n            draggable={draggable}\n            height={size}\n            loading={'lazy'}\n            src={avatar}\n            width={size}\n            {...styleProps(styles.img, classNames?.img, customStyles?.img)}\n            onError={() => setIsImgError(true)}\n          />\n        )}\n        {!showImage && (\n          <span\n            {...styleProps(\n              [styles.content, contentXstyle],\n              classNames?.content,\n              customStyles?.content,\n            )}\n          >\n            {showElement ? avatar : customAvatar}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nAvatarImpl.displayName = 'Avatar';\n\nconst Avatar = AvatarImpl as (props: AvatarProps) => ReactNode;\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;AACpB;AAOA,MAAa,aAAa,MACvB,EACC,KACA,WACA,QACA,YACA,UACA,eACA,WACA,YACA,aACA,YAAY,OACZ,2BAA2B,MAC3B,SACA,KACA,QACA,QAAQ,UACR,OAAO,IACP,YAAY,MACZ,OACA,QAAQ,cACR,OACA,cACA,aACA,UAAU,cACV,QACA,eACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,iBAAiB,cAAc,mBAAmB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzE,MAAM,QAAQ,cACL,UAAU,kBAAkB,CAAC,iBAAiB,SAAS,MAAM,IAAI,KAAA,GACxE;EAAC;EAAQ;EAAgB;CAAc,CACzC;CAEA,MAAM,OAAO,iBAAiB,QAAQ,OAAO,WAAW,WAAW,SAAS,KAAA;CAE5E,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,mBAAmB,UAAU;CACnD,MAAM,YAAY,kBAAkB,kBAAkB,CAAC;CACvD,MAAM,cAAc,kBAAkB,CAAC,kBAAkB,CAAC;CAE1D,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WACE,WACE;GAAC,OAAO;GAAM,cAAc;GAAU,UAAU,OAAO;GAAQ;EAAM,GACrE,KAAK,WAAW,YAAY,IAAI,CAClC,CAAC,CAAC;EAEJ,OAAO;GACL,iBACG,kBAAkB,CAAC,cAAe,QAC/B,aACA,cAAc,OAAO;GAC3B,cAAc,UAAU,WAAW,QAAQ,OAAO,KAAK,QAAQ,KAAK,IAAI,OAAO,GAAG,CAAC;GACnF,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;GACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;GACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,QAAQ;GACR,OAAO;GACP,GAAG;GACH,GAAG,cAAc;EACnB;EAzBF,UAAA;GA2BG,WACC,oBAAC,QAAD;IACE,MAAM;IACN,QAAQ;IACR,OAAO;IACP,GAAI,WAAW,OAAO,SAAS,YAAY,SAAS,cAAc,OAAO;IAEzE,UAAA,oBAAC,MAAD;KAAM,MAAA;KAAK,MAAM;IAAU,CAAA;GACrB,CAAA;GAET,OAAO,WAAW,YAAY,aAC7B,oBAAC,OAAD;IACE,KAAK;IACQ;IACF;IACX,QAAQ;IACR,SAAS;IACT,KAAK;IACL,OAAO;IACP,GAAI,WAAW,OAAO,KAAK,YAAY,KAAK,cAAc,GAAG;IAC7D,eAAe,cAAc,IAAI;GAClC,CAAA;GAEF,CAAC,aACA,oBAAC,QAAD;IACE,GAAI,WACF,CAAC,OAAO,SAAS,aAAa,GAC9B,YAAY,SACZ,cAAc,OAChB;IAEC,UAAA,cAAc,SAAS;GACpB,CAAA;EAEL;;AAET,CACF;AAEA,WAAW,cAAc;AAEzB,MAAM,SAAS"}
+{"version":3,"file":"Avatar.mjs","names":["clsx"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport clsx from 'clsx';\nimport { Loader2 } from 'lucide-react';\nimport { memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport { type AvatarProps } from './type';\nimport {\n  calculateEmojiSize,\n  formatAvatarText,\n  hasValidBackground,\n  isDefaultAntAvatar,\n} from './utils';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\ntype AvatarImplProps = AvatarProps & {\n  contentXstyle?: Parameters<typeof styleProps>[0];\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const AvatarImpl = memo<AvatarImplProps>(\n  ({\n    alt,\n    animation,\n    avatar,\n    background,\n    bordered,\n    borderedColor,\n    className,\n    classNames,\n    crossOrigin,\n    draggable = false,\n    emojiScaleWithBackground = true,\n    loading,\n    ref,\n    shadow,\n    shape = 'square',\n    size = 48,\n    sliceText = true,\n    style,\n    styles: customStyles,\n    title,\n    tooltipProps,\n    unoptimized,\n    variant = 'borderless',\n    xstyle,\n    contentXstyle,\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const [isImgError, setIsImgError] = useState(false);\n\n    const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\n\n    const emoji = useMemo(\n      () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\n      [avatar, isStringAvatar, isUrlOrElement],\n    );\n\n    const text = isUrlOrElement ? title : typeof avatar === 'string' ? avatar : undefined;\n\n    const imgAlt = alt || title || 'avatar';\n\n    const hasBackground = hasValidBackground(background);\n    const showImage = isUrlOrElement && isStringAvatar && !isImgError;\n    const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : (\n          formatAvatarText(text || title, sliceText)\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        className={\n          styleProps(\n            [styles.root, variantStyles[variant], shadow && styles.shadow, xstyle],\n            clsx(className, classNames?.root),\n          ).className\n        }\n        style={{\n          backgroundColor:\n            (isUrlOrElement && !isImgError) || emoji\n              ? background\n              : background || cssVar.colorBorder,\n          borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\n          boxShadow: bordered\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: safeReadableColor(background || cssVar.colorBorder),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          height: size,\n          width: size,\n          ...style,\n          ...customStyles?.root,\n        }}\n      >\n        {loading && (\n          <Center\n            flex={'none'}\n            height={'100%'}\n            width={'100%'}\n            {...styleProps(styles.loading, classNames?.loading, customStyles?.loading)}\n          >\n            <Icon spin icon={Loader2} />\n          </Center>\n        )}\n        {typeof avatar === 'string' && showImage && (\n          <img\n            alt={imgAlt}\n            crossOrigin={crossOrigin}\n            draggable={draggable}\n            height={size}\n            loading={'lazy'}\n            src={avatar}\n            width={size}\n            {...styleProps(styles.img, classNames?.img, customStyles?.img)}\n            onError={() => setIsImgError(true)}\n          />\n        )}\n        {!showImage && (\n          <span\n            {...styleProps(\n              [styles.content, contentXstyle],\n              classNames?.content,\n              customStyles?.content,\n            )}\n          >\n            {showElement ? avatar : customAvatar}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nAvatarImpl.displayName = 'Avatar';\n\nconst Avatar = AvatarImpl as (props: AvatarProps) => ReactNode;\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;AACpB;AAOA,MAAa,aAAa,MACvB,EACC,KACA,WACA,QACA,YACA,UACA,eACA,WACA,YACA,aACA,YAAY,OACZ,2BAA2B,MAC3B,SACA,KACA,QACA,QAAQ,UACR,OAAO,IACP,YAAY,MACZ,OACA,QAAQ,cACR,OACA,cACA,aACA,UAAU,cACV,QACA,eACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,iBAAiB,cAAc,mBAAmB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzE,MAAM,QAAQ,cACL,UAAU,kBAAkB,CAAC,iBAAiB,SAAS,MAAM,IAAI,KAAA,GACxE;EAAC;EAAQ;EAAgB;CAAc,CACzC;CAEA,MAAM,OAAO,iBAAiB,QAAQ,OAAO,WAAW,WAAW,SAAS,KAAA;CAE5E,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,mBAAmB,UAAU;CACnD,MAAM,YAAY,kBAAkB,kBAAkB,CAAC;CACvD,MAAM,cAAc,kBAAkB,CAAC,kBAAkB,CAAC;CAE1D,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WACE,WACE;GAAC,OAAO;GAAM,cAAc;GAAU,UAAU,OAAO;GAAQ;EAAM,GACrEA,OAAK,WAAW,YAAY,IAAI,CAClC,CAAC,CAAC;EAEJ,OAAO;GACL,iBACG,kBAAkB,CAAC,cAAe,QAC/B,aACA,cAAc,OAAO;GAC3B,cAAc,UAAU,WAAW,QAAQ,OAAO,KAAK,QAAQ,KAAK,IAAI,OAAO,GAAG,CAAC;GACnF,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;GACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;GACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,QAAQ;GACR,OAAO;GACP,GAAG;GACH,GAAG,cAAc;EACnB;EAzBF,UAAA;GA2BG,WACC,oBAAC,QAAD;IACE,MAAM;IACN,QAAQ;IACR,OAAO;IACP,GAAI,WAAW,OAAO,SAAS,YAAY,SAAS,cAAc,OAAO;IAEzE,UAAA,oBAAC,MAAD;KAAM,MAAA;KAAK,MAAM;IAAU,CAAA;GACrB,CAAA;GAET,OAAO,WAAW,YAAY,aAC7B,oBAAC,OAAD;IACE,KAAK;IACQ;IACF;IACX,QAAQ;IACR,SAAS;IACT,KAAK;IACL,OAAO;IACP,GAAI,WAAW,OAAO,KAAK,YAAY,KAAK,cAAc,GAAG;IAC7D,eAAe,cAAc,IAAI;GAClC,CAAA;GAEF,CAAC,aACA,oBAAC,QAAD;IACE,GAAI,WACF,CAAC,OAAO,SAAS,aAAa,GAC9B,YAAY,SACZ,cAAc,OAChB;IAEC,UAAA,cAAc,SAAS;GACpB,CAAA;EAEL;;AAET,CACF;AAEA,WAAW,cAAc;AAEzB,MAAM,SAAS"}

package/es/Avatar/AvatarGroup/index.mjs

@@ -5,7 +5,7 @@ import { AvatarImpl } from "../Avatar.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Avatar/AvatarGroup/index.tsx
 const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, shadow, size = 48, background, animation, draggable, classNames, shape, styles: customStyles, onClick, ref, zIndexReverse, ...rest }) => {
 	const avatars = max ? items.slice(0, max) : items;
@@ -30,7 +30,7 @@ const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, s
 		children: [avatars.map((avatar, index) => {
 			const { key, style: avatarStyle, className: avatarClassName, ...restAvatarProps } = avatar;
 			return /* @__PURE__ */ jsx(AvatarImpl, {
-				className: clsx(classNames?.avatar, avatarClassName),
+				className: clsx$1(classNames?.avatar, avatarClassName),
 				xstyle: styles.avatar,
 				style: {
 					marginLeft: index === 0 ? 0 : gapValue,

package/es/Avatar/AvatarGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","Avatar"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { AvatarImpl as Avatar } from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={clsx(classNames?.avatar, avatarClassName)}\n              key={key}\n              xstyle={styles.avatar}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={classNames?.count}\n            contentXstyle={styles.count}\n            sliceText={false}\n            xstyle={styles.avatar}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAACC,YAAD;IACE,WAAW,KAAK,YAAY,QAAQ,eAAe;IAEnD,QAAQ,OAAO;IACf,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAXM,GAWN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAACA,YAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,YAAY;GACvB,eAAe,OAAO;GACtB,WAAW;GACX,QAAQ,OAAO;GACf,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox","Avatar","clsx"],"sources":["../../../src/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { AvatarImpl as Avatar } from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={clsx(classNames?.avatar, avatarClassName)}\n              key={key}\n              xstyle={styles.avatar}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={classNames?.count}\n            contentXstyle={styles.count}\n            sliceText={false}\n            xstyle={styles.avatar}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAACC,YAAD;IACE,WAAWC,OAAK,YAAY,QAAQ,eAAe;IAEnD,QAAQ,OAAO;IACf,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAXM,GAWN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAACD,YAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,YAAY;GACvB,eAAe,OAAO;GACtB,WAAW;GACX,QAAQ,OAAO;GACf,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/Breadcrumb/Breadcrumb.mjs

@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronRight } from "lucide-react";
 //#region src/Breadcrumb/Breadcrumb.tsx
@@ -33,7 +33,7 @@ const Breadcrumb = memo(({ className, classNames, items, ref, separator, style,
 		"aria-label": "breadcrumb",
 		ref,
 		...rest,
-		...styleProps(styles.root, clsx("lobe-breadcrumb", className), style),
+		...styleProps(styles.root, clsx$1("lobe-breadcrumb", className), style),
 		children: /* @__PURE__ */ jsx("ol", {
 			...stylex.props(styles.list),
 			children: items.map((item, index) => {

package/es/Breadcrumb/Breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nconst renderTitle = (item: BreadcrumbItem): ReactNode => {\n  if (item.href) {\n    return (\n      <A {...stylex.props(styles.link)} href={item.href} onClick={item.onClick}>\n        {item.title}\n      </A>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <button {...stylex.props(styles.button)} type=\"button\" onClick={item.onClick}>\n        {item.title}\n      </button>\n    );\n  }\n\n  return item.title;\n};\n\nconst Breadcrumb = memo<BreadcrumbProps>(\n  ({ className, classNames, items, ref, separator, style, styles: customStyles, ...rest }) => {\n    const separatorNode = separator ?? <Icon icon={ChevronRight} size={14} />;\n\n    return (\n      <nav\n        aria-label=\"breadcrumb\"\n        ref={ref}\n        {...rest}\n        {...styleProps(styles.root, clsx('lobe-breadcrumb', className), style)}\n      >\n        <ol {...stylex.props(styles.list)}>\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n\n            return (\n              <li\n                aria-current={isLast ? 'page' : undefined}\n                key={item.key ?? index}\n                {...styleProps(styles.item, classNames?.item, customStyles?.item)}\n              >\n                {renderTitle(item)}\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    {...styleProps(\n                      styles.separator,\n                      classNames?.separator,\n                      customStyles?.separator,\n                    )}\n                  >\n                    {separatorNode}\n                  </span>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,eAAe,SAAoC;CACvD,IAAI,KAAK,MACP,OAAO,oBAAC,GAAD;EAAG,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,MAAM,KAAK;EAAM,SAAS,KAAK;EACnE,UAAA,KAAK;CACL,CAAA;CAEP,IAAI,KAAK,SACP,OAAO,oBAAC,UAAD;EAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;EAAG,MAAK;EAAS,SAAS,KAAK;EACvE,UAAA,KAAK;CACA,CAAA;CAEZ,OAAO,KAAK;AACd;AACA,MAAM,aAAa,MAAuB,EACxC,WACA,YACA,OACA,KACA,WACA,OACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,gBAAgB,aAAa,oBAAC,MAAD;EAAM,MAAM;EAAc,MAAM;CAAK,CAAA;CACxE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAkB;EAAK,GAAI;EAAM,GAAI,WAAW,OAAO,MAAM,KAAK,mBAAmB,SAAS,GAAG,KAAK;EACvH,UAAA,oBAAC,MAAD;GAAI,GAAI,OAAO,MAAM,OAAO,IAAI;GAC7B,UAAA,MAAM,KAAK,MAAM,UAAU;IAC9B,MAAM,SAAS,UAAU,MAAM,SAAS;IACxC,OAAO,qBAAC,MAAD;KAAI,gBAAc,SAAS,SAAS,KAAA;KAAmC,GAAI,WAAW,OAAO,MAAM,YAAY,MAAM,cAAc,IAAI;KAAvI,UAAA,CACE,YAAY,IAAI,GAChB,CAAC,UAAU,oBAAC,QAAD;MAAM,eAAY;MAAO,GAAI,WAAW,OAAO,WAAW,YAAY,WAAW,cAAc,SAAS;MAC/G,UAAA;KACG,CAAA,CACN;IALiD,GAAA,KAAK,OAAO,KAK7D;GACZ,CAAC;EACK,CAAA;CACD,CAAA;AACX,CAAC;AACD,WAAW,cAAc"}
+{"version":3,"file":"Breadcrumb.mjs","names":["clsx"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nconst renderTitle = (item: BreadcrumbItem): ReactNode => {\n  if (item.href) {\n    return (\n      <A {...stylex.props(styles.link)} href={item.href} onClick={item.onClick}>\n        {item.title}\n      </A>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <button {...stylex.props(styles.button)} type=\"button\" onClick={item.onClick}>\n        {item.title}\n      </button>\n    );\n  }\n\n  return item.title;\n};\n\nconst Breadcrumb = memo<BreadcrumbProps>(\n  ({ className, classNames, items, ref, separator, style, styles: customStyles, ...rest }) => {\n    const separatorNode = separator ?? <Icon icon={ChevronRight} size={14} />;\n\n    return (\n      <nav\n        aria-label=\"breadcrumb\"\n        ref={ref}\n        {...rest}\n        {...styleProps(styles.root, clsx('lobe-breadcrumb', className), style)}\n      >\n        <ol {...stylex.props(styles.list)}>\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n\n            return (\n              <li\n                aria-current={isLast ? 'page' : undefined}\n                key={item.key ?? index}\n                {...styleProps(styles.item, classNames?.item, customStyles?.item)}\n              >\n                {renderTitle(item)}\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    {...styleProps(\n                      styles.separator,\n                      classNames?.separator,\n                      customStyles?.separator,\n                    )}\n                  >\n                    {separatorNode}\n                  </span>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,eAAe,SAAoC;CACvD,IAAI,KAAK,MACP,OAAO,oBAAC,GAAD;EAAG,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,MAAM,KAAK;EAAM,SAAS,KAAK;EACnE,UAAA,KAAK;CACL,CAAA;CAEP,IAAI,KAAK,SACP,OAAO,oBAAC,UAAD;EAAQ,GAAI,OAAO,MAAM,OAAO,MAAM;EAAG,MAAK;EAAS,SAAS,KAAK;EACvE,UAAA,KAAK;CACA,CAAA;CAEZ,OAAO,KAAK;AACd;AACA,MAAM,aAAa,MAAuB,EACxC,WACA,YACA,OACA,KACA,WACA,OACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,gBAAgB,aAAa,oBAAC,MAAD;EAAM,MAAM;EAAc,MAAM;CAAK,CAAA;CACxE,OAAO,oBAAC,OAAD;EAAK,cAAW;EAAkB;EAAK,GAAI;EAAM,GAAI,WAAW,OAAO,MAAMA,OAAK,mBAAmB,SAAS,GAAG,KAAK;EACvH,UAAA,oBAAC,MAAD;GAAI,GAAI,OAAO,MAAM,OAAO,IAAI;GAC7B,UAAA,MAAM,KAAK,MAAM,UAAU;IAC9B,MAAM,SAAS,UAAU,MAAM,SAAS;IACxC,OAAO,qBAAC,MAAD;KAAI,gBAAc,SAAS,SAAS,KAAA;KAAmC,GAAI,WAAW,OAAO,MAAM,YAAY,MAAM,cAAc,IAAI;KAAvI,UAAA,CACE,YAAY,IAAI,GAChB,CAAC,UAAU,oBAAC,QAAD;MAAM,eAAY;MAAO,GAAI,WAAW,OAAO,WAAW,YAAY,WAAW,cAAc,SAAS;MAC/G,UAAA;KACG,CAAA,CACN;IALiD,GAAA,KAAK,OAAO,KAK7D;GACZ,CAAC;EACK,CAAA;CACD,CAAA;AACX,CAAC;AACD,WAAW,cAAc"}

package/es/Button/Button.mjs

@@ -36,7 +36,7 @@ const resolveVariantCls = ({ danger, ghost, type }) => {
 		case "primary": return danger ? styles.dangerSolid : styles.variantPrimary;
 		case "dashed": return danger ? [styles.variantDashed, styles.dangerOutlined] : styles.variantDashed;
 		case "fill": return danger ? styles.dangerFill : styles.variantFill;
-		case "text": return danger ? [styles.variantText, styles.dangerInline] : styles.variantText;
+		case "text": return danger ? [styles.variantText, styles.dangerText] : styles.variantText;
 		case "link": return danger ? [styles.variantLink, styles.dangerInline] : styles.variantLink;
 		default: return danger ? [styles.variantDefault, styles.dangerOutlined] : styles.variantDefault;
 	}

package/es/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ButtonOutdent, ButtonProps, ButtonType } from './type';\n\nconst resolveIconNode = (node: ReactNode | IconProps['icon'] | undefined | null) => {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n};\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}) => {\n  // `text` and `link` already drop the surface, so `ghost` there would only cost them\n  // their own traits (link's zero inline padding).\n  if (ghost && type !== 'text' && type !== 'link') {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? [styles.variantDashed, styles.dangerOutlined] : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? [styles.variantText, styles.dangerInline] : styles.variantText;\n    }\n    case 'link': {\n      return danger ? [styles.variantLink, styles.dangerInline] : styles.variantLink;\n    }\n    default: {\n      return danger ? [styles.variantDefault, styles.dangerOutlined] : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\ntype ButtonImplProps = Omit<ButtonProps, 'outdent' | 'type'> & {\n  outdent?: ButtonOutdent;\n  type?: ButtonType;\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nconst ButtonImpl = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  outdent,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  xstyle,\n  ...rest\n}: ButtonImplProps) => {\n  const Motion = useMotionComponent();\n  const isInteractionDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const outdentCls =\n    type === 'text' && outdent\n      ? outdent === 'end'\n        ? styles.outdentEnd\n        : styles.outdentStart\n      : undefined;\n\n  const composedClassName = styleProps(\n    [\n      styles.base,\n      focusRing.info,\n      sizeCls,\n      variantCls,\n      shapeCls,\n      block && styles.block,\n      iconPosition === 'end' && styles.iconEnd,\n      iconOnlySizeCls,\n      outdentCls,\n      xstyle,\n    ],\n    className,\n  ).className;\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      {...styleProps(\n        [\n          styles.iconBox,\n          styles.spinnerSlot,\n          iconPosition === 'end' && styles.spinnerSlotEnd,\n          loading && styles.spinnerSlotShow,\n        ],\n        classNames?.icon,\n        userStyles?.icon,\n      )}\n    >\n      <span {...stylex.props(styles.spinner)} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span {...styleProps(styles.iconBox, classNames?.icon, userStyles?.icon)}>\n        {resolveIconNode(icon)}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isInteractionDisabled\n    ? {}\n    : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isInteractionDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-busy={loading || undefined}\n        aria-disabled={isInteractionDisabled || undefined}\n        href={disabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isInteractionDisabled) {\n      e.preventDefault();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      aria-busy={loading || undefined}\n      aria-disabled={isInteractionDisabled || undefined}\n      className={composedClassName}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={handleButtonClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButtonImpl.displayName = 'BaseButton';\n\nexport { ButtonImpl };\n\nconst Button = ButtonImpl as <T extends ButtonType = 'default'>(\n  props: ButtonProps<T>,\n) => ReactElement;\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ButtonOutdent, ButtonProps, ButtonType } from './type';\n\nconst resolveIconNode = (node: ReactNode | IconProps['icon'] | undefined | null) => {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n};\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}) => {\n  // `text` and `link` already drop the surface, so `ghost` there would only cost them\n  // their own traits (link's zero inline padding).\n  if (ghost && type !== 'text' && type !== 'link') {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? [styles.variantDashed, styles.dangerOutlined] : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? [styles.variantText, styles.dangerText] : styles.variantText;\n    }\n    case 'link': {\n      return danger ? [styles.variantLink, styles.dangerInline] : styles.variantLink;\n    }\n    default: {\n      return danger ? [styles.variantDefault, styles.dangerOutlined] : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\ntype ButtonImplProps = Omit<ButtonProps, 'outdent' | 'type'> & {\n  outdent?: ButtonOutdent;\n  type?: ButtonType;\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nconst ButtonImpl = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  outdent,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  xstyle,\n  ...rest\n}: ButtonImplProps) => {\n  const Motion = useMotionComponent();\n  const isInteractionDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const outdentCls =\n    type === 'text' && outdent\n      ? outdent === 'end'\n        ? styles.outdentEnd\n        : styles.outdentStart\n      : undefined;\n\n  const composedClassName = styleProps(\n    [\n      styles.base,\n      focusRing.info,\n      sizeCls,\n      variantCls,\n      shapeCls,\n      block && styles.block,\n      iconPosition === 'end' && styles.iconEnd,\n      iconOnlySizeCls,\n      outdentCls,\n      xstyle,\n    ],\n    className,\n  ).className;\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      {...styleProps(\n        [\n          styles.iconBox,\n          styles.spinnerSlot,\n          iconPosition === 'end' && styles.spinnerSlotEnd,\n          loading && styles.spinnerSlotShow,\n        ],\n        classNames?.icon,\n        userStyles?.icon,\n      )}\n    >\n      <span {...stylex.props(styles.spinner)} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span {...styleProps(styles.iconBox, classNames?.icon, userStyles?.icon)}>\n        {resolveIconNode(icon)}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isInteractionDisabled\n    ? {}\n    : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isInteractionDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-busy={loading || undefined}\n        aria-disabled={isInteractionDisabled || undefined}\n        href={disabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isInteractionDisabled) {\n      e.preventDefault();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      aria-busy={loading || undefined}\n      aria-disabled={isInteractionDisabled || undefined}\n      className={composedClassName}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={handleButtonClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButtonImpl.displayName = 'BaseButton';\n\nexport { ButtonImpl };\n\nconst Button = ButtonImpl as <T extends ButtonType = 'default'>(\n  props: ButtonProps<T>,\n) => ReactElement;\n\nexport default Button;\n"],"mappings":"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"}