@aloudata/aloudata-design 3.0.17 → 3.0.18-beta.0

package/dist/Popover/index.js

@@ -95,7 +95,7 @@ function Popover(props) {
 				align,
 				sideOffset,
 				alignOffset,
-				className: cn("ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-p-3 tw-outline-none", "tw-animate-in tw-fade-in-0 tw-zoom-in-95", overlayClassName),
+				className: cn("ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-p-3 tw-outline-none", "tw-animate-in tw-fade-in-0 tw-zoom-in-95", overlayClassName),
 				style: {
 					boxShadow: "var(--elevation-bottom-bottom-sm)",
 					backgroundColor: color,
@@ -114,7 +114,7 @@ function Popover(props) {
 						className: "ald-popover-inner-content ant-popover-inner-content",
 						children: content
 					}),
-					arrow && /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { style: { fill: "var(--alias-colors-bg-skeleton-subtler, #fff)" } })
+					arrow && /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { style: { fill: "var(--background-default)" } })
 				]
 			})
 		})]

package/dist/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React from 'react';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\ntype TriggerType = 'hover' | 'click' | 'focus';\n\nexport interface PopoverProps {\n  content?: React.ReactNode;\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  trigger?: TriggerType | TriggerType[];\n  rootClassName?: string;\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom';\n  overlayClassName?: string;\n  overlayStyle?: React.CSSProperties;\n  overlayInnerStyle?: React.CSSProperties;\n  color?: string;\n  align?: {\n    offset?: [number, number];\n    [key: string]: any;\n  };\n  arrow?: boolean;\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  className?: string;\n  style?: React.CSSProperties;\n  getPopupContainer?: () => HTMLElement;\n  zIndex?: number;\n}\n\nconst placementMap: Record<\n  string,\n  PopoverPrimitive.PopoverContentProps['side']\n> = {\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  topLeft: 'top',\n  topRight: 'top',\n  bottomLeft: 'bottom',\n  bottomRight: 'bottom',\n  leftTop: 'left',\n  leftBottom: 'left',\n  rightTop: 'right',\n  rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n  {\n    topLeft: 'start',\n    topRight: 'end',\n    bottomLeft: 'start',\n    bottomRight: 'end',\n    leftTop: 'start',\n    leftBottom: 'end',\n    rightTop: 'start',\n    rightBottom: 'end',\n  };\n\nconst DEFAULT_SIDE_OFFSET = 4;\n\nfunction normalizeTrigger(trigger: PopoverProps['trigger']): Set<TriggerType> {\n  if (Array.isArray(trigger)) return new Set(trigger);\n  if (trigger) return new Set([trigger]);\n  return new Set<TriggerType>(['hover']);\n}\n\nfunction getPopoverOffsets(\n  side: PopoverPrimitive.PopoverContentProps['side'],\n  offset?: [number, number],\n) {\n  if (!offset) {\n    return {\n      alignOffset: undefined,\n      sideOffset: DEFAULT_SIDE_OFFSET,\n    };\n  }\n\n  const [x = 0, y = 0] = offset;\n  switch (side) {\n    case 'left':\n      return {\n        alignOffset: y,\n        sideOffset: -x,\n      };\n    case 'right':\n      return {\n        alignOffset: y,\n        sideOffset: x,\n      };\n    case 'bottom':\n      return {\n        alignOffset: x,\n        sideOffset: y,\n      };\n    case 'top':\n    default:\n      return {\n        alignOffset: x,\n        sideOffset: -y,\n      };\n  }\n}\n\nfunction Popover(props: PopoverProps) {\n  const {\n    content,\n    title,\n    children,\n    open,\n    defaultOpen,\n    onOpenChange,\n    trigger = 'hover',\n    placement = 'top',\n    overlayClassName,\n    overlayStyle,\n    overlayInnerStyle,\n    color,\n    align: popupAlign,\n    arrow = false,\n    getPopupContainer,\n    zIndex,\n  } = props;\n\n  const containerRef = React.useRef<HTMLElement | undefined>(\n    getPopupContainer?.(),\n  );\n\n  const [hoverOpen, setHoverOpen] = React.useState(false);\n  const triggers = normalizeTrigger(trigger);\n\n  const isControlled = open !== undefined;\n  const isHoverTrigger = triggers.has('hover');\n  const isOpen = isControlled\n    ? open\n    : isHoverTrigger\n    ? hoverOpen\n    : triggers.size === 0\n    ? false\n    : undefined;\n\n  const handleOpenChange = (val: boolean) => {\n    if (!isControlled && isHoverTrigger) {\n      setHoverOpen(val);\n    }\n    onOpenChange?.(val);\n  };\n\n  const side = placementMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n  const popupZIndex = useFloatingPopupZIndex(zIndex);\n  const { alignOffset, sideOffset } = getPopoverOffsets(\n    side,\n    popupAlign?.offset,\n  );\n\n  const triggerChild = React.isValidElement(children) ? (\n    children\n  ) : (\n    <span>{children}</span>\n  );\n\n  if (triggers.size === 0 && !isControlled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <PopoverPrimitive.Root\n      open={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={handleOpenChange}\n    >\n      <PopoverPrimitive.Trigger asChild>\n        {isHoverTrigger ? (\n          <span\n            onMouseEnter={() => handleOpenChange(true)}\n            onMouseLeave={() => handleOpenChange(false)}\n          >\n            {triggerChild}\n          </span>\n        ) : (\n          triggerChild\n        )}\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal container={containerRef.current}>\n        <PopoverPrimitive.Content\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n          // antd 兼容：保留 ant-popover-inner class，消费方 CSS 可能通过该选择器自定义内边距、背景等样式\n          className={cn(\n            'ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-p-3 tw-outline-none',\n            'tw-animate-in tw-fade-in-0 tw-zoom-in-95',\n            overlayClassName,\n          )}\n          style={{\n            boxShadow: 'var(--elevation-bottom-bottom-sm)',\n            backgroundColor: color,\n            zIndex: popupZIndex,\n            ...overlayStyle,\n            ...overlayInnerStyle,\n          }}\n          onMouseEnter={\n            isHoverTrigger ? () => handleOpenChange(true) : undefined\n          }\n          onMouseLeave={\n            isHoverTrigger ? () => handleOpenChange(false) : undefined\n          }\n        >\n          {title && (\n            <div className=\"ald-popover-title tw-mb-2 tw-text-sm tw-font-medium tw-text-[var(--content-primary)]\">\n              {title}\n            </div>\n          )}\n          {content && (\n            // antd 兼容：保留 ant-popover-inner-content class，消费方 CSS 可能通过该选择器自定义样式\n            <div className=\"ald-popover-inner-content ant-popover-inner-content\">\n              {content}\n            </div>\n          )}\n          {arrow && (\n            <PopoverPrimitive.Arrow\n              style={{ fill: 'var(--alias-colors-bg-skeleton-subtler, #fff)' }}\n            />\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport default Popover;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport React from 'react';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\ntype TriggerType = 'hover' | 'click' | 'focus';\n\nexport interface PopoverProps {\n  content?: React.ReactNode;\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  trigger?: TriggerType | TriggerType[];\n  rootClassName?: string;\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom';\n  overlayClassName?: string;\n  overlayStyle?: React.CSSProperties;\n  overlayInnerStyle?: React.CSSProperties;\n  color?: string;\n  align?: {\n    offset?: [number, number];\n    [key: string]: any;\n  };\n  arrow?: boolean;\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  className?: string;\n  style?: React.CSSProperties;\n  getPopupContainer?: () => HTMLElement;\n  zIndex?: number;\n}\n\nconst placementMap: Record<\n  string,\n  PopoverPrimitive.PopoverContentProps['side']\n> = {\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  topLeft: 'top',\n  topRight: 'top',\n  bottomLeft: 'bottom',\n  bottomRight: 'bottom',\n  leftTop: 'left',\n  leftBottom: 'left',\n  rightTop: 'right',\n  rightBottom: 'right',\n};\n\nconst alignMap: Record<string, PopoverPrimitive.PopoverContentProps['align']> =\n  {\n    topLeft: 'start',\n    topRight: 'end',\n    bottomLeft: 'start',\n    bottomRight: 'end',\n    leftTop: 'start',\n    leftBottom: 'end',\n    rightTop: 'start',\n    rightBottom: 'end',\n  };\n\nconst DEFAULT_SIDE_OFFSET = 4;\n\nfunction normalizeTrigger(trigger: PopoverProps['trigger']): Set<TriggerType> {\n  if (Array.isArray(trigger)) return new Set(trigger);\n  if (trigger) return new Set([trigger]);\n  return new Set<TriggerType>(['hover']);\n}\n\nfunction getPopoverOffsets(\n  side: PopoverPrimitive.PopoverContentProps['side'],\n  offset?: [number, number],\n) {\n  if (!offset) {\n    return {\n      alignOffset: undefined,\n      sideOffset: DEFAULT_SIDE_OFFSET,\n    };\n  }\n\n  const [x = 0, y = 0] = offset;\n  switch (side) {\n    case 'left':\n      return {\n        alignOffset: y,\n        sideOffset: -x,\n      };\n    case 'right':\n      return {\n        alignOffset: y,\n        sideOffset: x,\n      };\n    case 'bottom':\n      return {\n        alignOffset: x,\n        sideOffset: y,\n      };\n    case 'top':\n    default:\n      return {\n        alignOffset: x,\n        sideOffset: -y,\n      };\n  }\n}\n\nfunction Popover(props: PopoverProps) {\n  const {\n    content,\n    title,\n    children,\n    open,\n    defaultOpen,\n    onOpenChange,\n    trigger = 'hover',\n    placement = 'top',\n    overlayClassName,\n    overlayStyle,\n    overlayInnerStyle,\n    color,\n    align: popupAlign,\n    arrow = false,\n    getPopupContainer,\n    zIndex,\n  } = props;\n\n  const containerRef = React.useRef<HTMLElement | undefined>(\n    getPopupContainer?.(),\n  );\n\n  const [hoverOpen, setHoverOpen] = React.useState(false);\n  const triggers = normalizeTrigger(trigger);\n\n  const isControlled = open !== undefined;\n  const isHoverTrigger = triggers.has('hover');\n  const isOpen = isControlled\n    ? open\n    : isHoverTrigger\n    ? hoverOpen\n    : triggers.size === 0\n    ? false\n    : undefined;\n\n  const handleOpenChange = (val: boolean) => {\n    if (!isControlled && isHoverTrigger) {\n      setHoverOpen(val);\n    }\n    onOpenChange?.(val);\n  };\n\n  const side = placementMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n  const popupZIndex = useFloatingPopupZIndex(zIndex);\n  const { alignOffset, sideOffset } = getPopoverOffsets(\n    side,\n    popupAlign?.offset,\n  );\n\n  const triggerChild = React.isValidElement(children) ? (\n    children\n  ) : (\n    <span>{children}</span>\n  );\n\n  if (triggers.size === 0 && !isControlled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <PopoverPrimitive.Root\n      open={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={handleOpenChange}\n    >\n      <PopoverPrimitive.Trigger asChild>\n        {isHoverTrigger ? (\n          <span\n            onMouseEnter={() => handleOpenChange(true)}\n            onMouseLeave={() => handleOpenChange(false)}\n          >\n            {triggerChild}\n          </span>\n        ) : (\n          triggerChild\n        )}\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal container={containerRef.current}>\n        <PopoverPrimitive.Content\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n          // antd 兼容：保留 ant-popover-inner class，消费方 CSS 可能通过该选择器自定义内边距、背景等样式\n          className={cn(\n            'ald-popover ant-popover-inner tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-p-3 tw-outline-none',\n            'tw-animate-in tw-fade-in-0 tw-zoom-in-95',\n            overlayClassName,\n          )}\n          style={{\n            boxShadow: 'var(--elevation-bottom-bottom-sm)',\n            backgroundColor: color,\n            zIndex: popupZIndex,\n            ...overlayStyle,\n            ...overlayInnerStyle,\n          }}\n          onMouseEnter={\n            isHoverTrigger ? () => handleOpenChange(true) : undefined\n          }\n          onMouseLeave={\n            isHoverTrigger ? () => handleOpenChange(false) : undefined\n          }\n        >\n          {title && (\n            <div className=\"ald-popover-title tw-mb-2 tw-text-sm tw-font-medium tw-text-[var(--content-primary)]\">\n              {title}\n            </div>\n          )}\n          {content && (\n            // antd 兼容：保留 ant-popover-inner-content class，消费方 CSS 可能通过该选择器自定义样式\n            <div className=\"ald-popover-inner-content ant-popover-inner-content\">\n              {content}\n            </div>\n          )}\n          {arrow && (\n            <PopoverPrimitive.Arrow\n              style={{ fill: 'var(--background-default)' }}\n            />\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/Progress/index.js

@@ -32,7 +32,7 @@ var Progress_default = forwardRef(function Progress(props, ref) {
 		if (loadingState === ELoadingState.LOADED) setLoadingState(ELoadingState.IDLE);
 	}, [loadingState]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("ald-progress-bar tw-relative tw-h-[2px] tw-w-full tw-overflow-hidden", loadingState !== ELoadingState.IDLE && "ald-progress-bar-show-bg tw-bg-[var(--background-informative-subtle)]", className),
+		className: cn("ald-progress-bar tw-relative tw-h-[2px] tw-w-full tw-overflow-hidden", loadingState !== ELoadingState.IDLE && "ald-progress-bar-show-bg tw-bg-[var(--background-neutral-subtle)]", className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("ald-progress-bar-inner tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-0 tw-bg-[var(--action-primary-normal)]", loadingState === ELoadingState.LOADING && "ald-progress-bar-show-loading tw-animate-[progress-loading_2s_ease-in-out_forwards]", loadingState === ELoadingState.LOADED && "ald-progress-bar-hide-loading tw-animate-[progress-loaded_0.5s_ease-out_forwards]"),
 			onAnimationEnd

package/dist/Progress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Progress/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport './progress.css';\n\nenum ELoadingState {\n  IDLE = 'IDLE',\n  LOADING = 'LOADING',\n  LOADED = 'LOADED',\n}\n\nexport default forwardRef(function Progress(props: IProps, ref) {\n  const { loading, className } = props;\n  const [loadingState, setLoadingState] = useState(ELoadingState.IDLE);\n  const [key, setKey] = useState(0);\n\n  useImperativeHandle(ref, () => ({\n    restart() {\n      setKey((prev) => prev + 1);\n    },\n  }));\n\n  useEffect(() => {\n    if (loadingState !== ELoadingState.IDLE) {\n      if (loadingState === ELoadingState.LOADING && !loading) {\n        setLoadingState(ELoadingState.LOADED);\n      }\n      return;\n    }\n    const DELAY_TIME = 200;\n    const timer = setTimeout(() => {\n      if (loading) {\n        setLoadingState(ELoadingState.LOADING);\n      }\n    }, DELAY_TIME);\n\n    return () => {\n      if (timer) {\n        clearTimeout(timer);\n      }\n    };\n  }, [loading, loadingState]);\n\n  const onAnimationEnd = useCallback(() => {\n    if (loadingState === ELoadingState.LOADED) {\n      setLoadingState(ELoadingState.IDLE);\n    }\n  }, [loadingState]);\n\n  return (\n    <div\n      key={key}\n      className={cn(\n        'ald-progress-bar tw-relative tw-h-[2px] tw-w-full tw-overflow-hidden',\n        loadingState !== ELoadingState.IDLE &&\n          'ald-progress-bar-show-bg tw-bg-[var(--background-informative-subtle)]',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'ald-progress-bar-inner tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-0 tw-bg-[var(--action-primary-normal)]',\n          loadingState === ELoadingState.LOADING &&\n            'ald-progress-bar-show-loading tw-animate-[progress-loading_2s_ease-in-out_forwards]',\n          loadingState === ELoadingState.LOADED &&\n            'ald-progress-bar-hide-loading tw-animate-[progress-loaded_0.5s_ease-out_forwards]',\n        )}\n        onAnimationEnd={onAnimationEnd}\n      />\n    </div>\n  );\n});\n\nexport interface IProps {\n  loading: boolean;\n  className?: string;\n}\n\nexport interface IProgressRef {\n  restart: () => void;\n}\n"],"mappings":";;;;;AAUA,IAAK,gBAAL,yBAAA,eAAA;AACE,eAAA,UAAA;AACA,eAAA,aAAA;AACA,eAAA,YAAA;;EAHG,iBAAA,EAAA,CAIJ;AAED,IAAA,mBAAe,WAAW,SAAS,SAAS,OAAe,KAAK;CAC9D,MAAM,EAAE,SAAS,cAAc;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc,KAAK;CACpE,MAAM,CAAC,KAAK,UAAU,SAAS,EAAE;AAEjC,qBAAoB,YAAY,EAC9B,UAAU;AACR,UAAQ,SAAS,OAAO,EAAE;IAE7B,EAAE;AAEH,iBAAgB;AACd,MAAI,iBAAiB,cAAc,MAAM;AACvC,OAAI,iBAAiB,cAAc,WAAW,CAAC,QAC7C,iBAAgB,cAAc,OAAO;AAEvC;;EAGF,MAAM,QAAQ,iBAAiB;AAC7B,OAAI,QACF,iBAAgB,cAAc,QAAQ;KAHvB,IAKL;AAEd,eAAa;AACX,OAAI,MACF,cAAa,MAAM;;IAGtB,CAAC,SAAS,aAAa,CAAC;CAE3B,MAAM,iBAAiB,kBAAkB;AACvC,MAAI,iBAAiB,cAAc,OACjC,iBAAgB,cAAc,KAAK;IAEpC,CAAC,aAAa,CAAC;AAElB,QACE,oBAAC,OAAD;EAEE,WAAW,GACT,wEACA,iBAAiB,cAAc,QAC7B,yEACF,UACD;YAED,oBAAC,OAAD;GACE,WAAW,GACT,+GACA,iBAAiB,cAAc,WAC7B,uFACF,iBAAiB,cAAc,UAC7B,oFACH;GACe;GAChB,CAAA;EACE,EAlBC,IAkBD;EAER"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Progress/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport './progress.css';\n\nenum ELoadingState {\n  IDLE = 'IDLE',\n  LOADING = 'LOADING',\n  LOADED = 'LOADED',\n}\n\nexport default forwardRef(function Progress(props: IProps, ref) {\n  const { loading, className } = props;\n  const [loadingState, setLoadingState] = useState(ELoadingState.IDLE);\n  const [key, setKey] = useState(0);\n\n  useImperativeHandle(ref, () => ({\n    restart() {\n      setKey((prev) => prev + 1);\n    },\n  }));\n\n  useEffect(() => {\n    if (loadingState !== ELoadingState.IDLE) {\n      if (loadingState === ELoadingState.LOADING && !loading) {\n        setLoadingState(ELoadingState.LOADED);\n      }\n      return;\n    }\n    const DELAY_TIME = 200;\n    const timer = setTimeout(() => {\n      if (loading) {\n        setLoadingState(ELoadingState.LOADING);\n      }\n    }, DELAY_TIME);\n\n    return () => {\n      if (timer) {\n        clearTimeout(timer);\n      }\n    };\n  }, [loading, loadingState]);\n\n  const onAnimationEnd = useCallback(() => {\n    if (loadingState === ELoadingState.LOADED) {\n      setLoadingState(ELoadingState.IDLE);\n    }\n  }, [loadingState]);\n\n  return (\n    <div\n      key={key}\n      className={cn(\n        'ald-progress-bar tw-relative tw-h-[2px] tw-w-full tw-overflow-hidden',\n        loadingState !== ELoadingState.IDLE &&\n          'ald-progress-bar-show-bg tw-bg-[var(--background-neutral-subtle)]',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'ald-progress-bar-inner tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-0 tw-bg-[var(--action-primary-normal)]',\n          loadingState === ELoadingState.LOADING &&\n            'ald-progress-bar-show-loading tw-animate-[progress-loading_2s_ease-in-out_forwards]',\n          loadingState === ELoadingState.LOADED &&\n            'ald-progress-bar-hide-loading tw-animate-[progress-loaded_0.5s_ease-out_forwards]',\n        )}\n        onAnimationEnd={onAnimationEnd}\n      />\n    </div>\n  );\n});\n\nexport interface IProps {\n  loading: boolean;\n  className?: string;\n}\n\nexport interface IProgressRef {\n  restart: () => void;\n}\n"],"mappings":";;;;;AAUA,IAAK,gBAAL,yBAAA,eAAA;AACE,eAAA,UAAA;AACA,eAAA,aAAA;AACA,eAAA,YAAA;;EAHG,iBAAA,EAAA,CAIJ;AAED,IAAA,mBAAe,WAAW,SAAS,SAAS,OAAe,KAAK;CAC9D,MAAM,EAAE,SAAS,cAAc;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc,KAAK;CACpE,MAAM,CAAC,KAAK,UAAU,SAAS,EAAE;AAEjC,qBAAoB,YAAY,EAC9B,UAAU;AACR,UAAQ,SAAS,OAAO,EAAE;IAE7B,EAAE;AAEH,iBAAgB;AACd,MAAI,iBAAiB,cAAc,MAAM;AACvC,OAAI,iBAAiB,cAAc,WAAW,CAAC,QAC7C,iBAAgB,cAAc,OAAO;AAEvC;;EAGF,MAAM,QAAQ,iBAAiB;AAC7B,OAAI,QACF,iBAAgB,cAAc,QAAQ;KAHvB,IAKL;AAEd,eAAa;AACX,OAAI,MACF,cAAa,MAAM;;IAGtB,CAAC,SAAS,aAAa,CAAC;CAE3B,MAAM,iBAAiB,kBAAkB;AACvC,MAAI,iBAAiB,cAAc,OACjC,iBAAgB,cAAc,KAAK;IAEpC,CAAC,aAAa,CAAC;AAElB,QACE,oBAAC,OAAD;EAEE,WAAW,GACT,wEACA,iBAAiB,cAAc,QAC7B,qEACF,UACD;YAED,oBAAC,OAAD;GACE,WAAW,GACT,+GACA,iBAAiB,cAAc,WAC7B,uFACF,iBAAiB,cAAc,UAC7B,oFACH;GACe;GAChB,CAAA;EACE,EAlBC,IAkBD;EAER"}

package/dist/RenameInput/index.js

@@ -41,9 +41,9 @@ var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle,
 		} else setIsEdit(false);
 	}, [propsIsEdit]);
 	if (isEdit && !readonly) return /* @__PURE__ */ jsxs("div", {
-		className: "ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-transparent",
+		className: "ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-[var(--action-ghost-normal)]",
 		children: [/* @__PURE__ */ jsx("input", {
-			className: cn(className, "ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]", "hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]", "focus:tw-border focus:tw-border-solid focus:tw-border-[var(--interaction-border-selected)] focus:tw-shadow-[0_0_0_1px_var(--interaction-focus-default)]"),
+			className: cn(className, "ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]", "hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]", "focus:tw-border focus:tw-border-solid focus:tw-border-[var(--border-brand-strong)] focus:tw-shadow-[0_0_0_1px_var(--border-brand-strong)]"),
 			style: {
 				...fontStyle,
 				width
@@ -72,13 +72,13 @@ var RenameInput = ({ value: propsValue, onConfirm, className, width, fontStyle,
 			}
 		}), /* @__PURE__ */ jsx("div", {
 			ref: divRef,
-			className: "ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-transparent tw-p-0 tw-text-[13px] tw-font-normal",
+			className: "ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-[var(--action-ghost-normal)] tw-p-0 tw-text-[13px] tw-font-normal",
 			style: fontStyle,
 			children: value
 		})]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(className, "ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-transparent tw-p-[2px] tw-text-[13px]"),
+		className: cn(className, "ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-[var(--action-ghost-normal)] tw-p-[2px] tw-text-[13px]"),
 		style: fontStyle,
 		onMouseMove: () => {
 			setIsEdit(true);

package/dist/RenameInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/RenameInput/index.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\n\ninterface IProps {\n  value: string;\n  onConfirm?: (value: string) => void;\n  onError?: (value: string) => void;\n  className?: string;\n  width?: number;\n  fontStyle?: CSSProperties;\n  /**\n   * @deprecated 如果要控制编辑态请使用 isEdit\n   */\n  focus?: boolean;\n  isEdit?: boolean;\n  maxLength?: number;\n  distance?: [left: number, right: number];\n  validateValue?: (value: string) => boolean;\n  readonly?: boolean;\n}\n\nconst defaultWidth = 20;\n\nconst PADDING_WIDTH = 4;\n\nconst RenameInput = ({\n  value: propsValue,\n  onConfirm,\n  className,\n  width,\n  fontStyle,\n  maxLength,\n  validateValue,\n  onError,\n  readonly = false,\n  isEdit: propsIsEdit = false,\n}: IProps) => {\n  const [isEdit, setIsEdit] = useState<boolean>(propsIsEdit);\n  const [value, setValue] = useState(propsValue);\n\n  useEffect(() => {\n    setValue(propsValue);\n  }, [propsValue]);\n\n  const divRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleBlur = useCallback(() => {\n    onConfirm?.(value);\n    inputRef.current?.blur();\n  }, [onConfirm, value]);\n\n  useEffect(() => {\n    if (!width && divRef.current && inputRef.current) {\n      const tempWidth = divRef.current?.offsetWidth || defaultWidth;\n      inputRef.current.style.width = tempWidth + PADDING_WIDTH + 'px';\n    }\n  }, [width, value, isEdit]);\n\n  useEffect(() => {\n    if (isEdit) {\n      setValue(propsValue);\n    }\n  }, [isEdit, propsValue]);\n\n  useEffect(() => {\n    if (propsIsEdit) {\n      setIsEdit(true);\n      setTimeout(() => {\n        if (inputRef.current) {\n          inputRef.current.focus();\n          inputRef.current.select();\n        }\n      }, 100);\n    } else {\n      setIsEdit(false);\n    }\n  }, [propsIsEdit]);\n\n  if (isEdit && !readonly) {\n    return (\n      <div className=\"ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-transparent\">\n        <input\n          className={cn(\n            className,\n            'ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]',\n            'hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]',\n            'focus:tw-border focus:tw-border-solid focus:tw-border-[var(--interaction-border-selected)] focus:tw-shadow-[0_0_0_1px_var(--interaction-focus-default)]',\n          )}\n          style={{\n            ...fontStyle,\n            width,\n          }}\n          value={value}\n          ref={inputRef}\n          onChange={(e) => setValue(e.target.value)}\n          onBlur={(e) => {\n            if (!validateValue || validateValue(e.target.value.trim())) {\n              handleBlur();\n            } else {\n              onError?.(value);\n              setValue(propsValue);\n            }\n            setIsEdit(false);\n          }}\n          onFocus={() => {\n            inputRef.current?.select();\n          }}\n          maxLength={maxLength}\n          onKeyUp={(e) => {\n            if (e.key === 'Enter') {\n              if (\n                !validateValue ||\n                validateValue(inputRef.current?.value.trim() || '')\n              ) {\n                inputRef.current?.blur();\n              } else {\n                onError?.(inputRef.current?.value.trim() || '');\n                setValue(propsValue);\n              }\n            }\n          }}\n        />\n        <div\n          ref={divRef}\n          className=\"ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-transparent tw-p-0 tw-text-[13px] tw-font-normal\"\n          style={fontStyle}\n        >\n          {value}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        'ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-transparent tw-p-[2px] tw-text-[13px]',\n      )}\n      style={fontStyle}\n      onMouseMove={() => {\n        setIsEdit(true);\n        setValue(propsValue);\n      }}\n      onClick={() => {\n        inputRef.current?.select();\n      }}\n    >\n      {propsValue}\n    </div>\n  );\n};\n\nexport default RenameInput;\n"],"mappings":";;;;AA2BA,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAEtB,IAAM,eAAe,EACnB,OAAO,YACP,WACA,WACA,OACA,WACA,WACA,eACA,SACA,WAAW,OACX,QAAQ,cAAc,YACV;CACZ,MAAM,CAAC,QAAQ,aAAa,SAAkB,YAAY;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAS,WAAW;AAE9C,iBAAgB;AACd,WAAS,WAAW;IACnB,CAAC,WAAW,CAAC;CAEhB,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,aAAa,kBAAkB;AACnC,cAAY,MAAM;AAClB,WAAS,SAAS,MAAM;IACvB,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,CAAC,SAAS,OAAO,WAAW,SAAS,SAAS;GAChD,MAAM,YAAY,OAAO,SAAS,eAAe;AACjD,YAAS,QAAQ,MAAM,QAAQ,YAAY,gBAAgB;;IAE5D;EAAC;EAAO;EAAO;EAAO,CAAC;AAE1B,iBAAgB;AACd,MAAI,OACF,UAAS,WAAW;IAErB,CAAC,QAAQ,WAAW,CAAC;AAExB,iBAAgB;AACd,MAAI,aAAa;AACf,aAAU,KAAK;AACf,oBAAiB;AACf,QAAI,SAAS,SAAS;AACpB,cAAS,QAAQ,OAAO;AACxB,cAAS,QAAQ,QAAQ;;MAE1B,IAAI;QAEP,WAAU,MAAM;IAEjB,CAAC,YAAY,CAAC;AAEjB,KAAI,UAAU,CAAC,SACb,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD;GACE,WAAW,GACT,WACA,0GACA,wFACA,0JACD;GACD,OAAO;IACL,GAAG;IACH;IACD;GACM;GACP,KAAK;GACL,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,SAAS,MAAM;AACb,QAAI,CAAC,iBAAiB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC,CACxD,aAAY;SACP;AACL,eAAU,MAAM;AAChB,cAAS,WAAW;;AAEtB,cAAU,MAAM;;GAElB,eAAe;AACb,aAAS,SAAS,QAAQ;;GAEjB;GACX,UAAU,MAAM;AACd,QAAI,EAAE,QAAQ,QACZ,KACE,CAAC,iBACD,cAAc,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG,CAEnD,UAAS,SAAS,MAAM;SACnB;AACL,eAAU,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG;AAC/C,cAAS,WAAW;;;GAI1B,CAAA,EACF,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO;aAEN;GACG,CAAA,CACF;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,WACA,sHACD;EACD,OAAO;EACP,mBAAmB;AACjB,aAAU,KAAK;AACf,YAAS,WAAW;;EAEtB,eAAe;AACb,YAAS,SAAS,QAAQ;;YAG3B;EACG,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/RenameInput/index.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\n\ninterface IProps {\n  value: string;\n  onConfirm?: (value: string) => void;\n  onError?: (value: string) => void;\n  className?: string;\n  width?: number;\n  fontStyle?: CSSProperties;\n  /**\n   * @deprecated 如果要控制编辑态请使用 isEdit\n   */\n  focus?: boolean;\n  isEdit?: boolean;\n  maxLength?: number;\n  distance?: [left: number, right: number];\n  validateValue?: (value: string) => boolean;\n  readonly?: boolean;\n}\n\nconst defaultWidth = 20;\n\nconst PADDING_WIDTH = 4;\n\nconst RenameInput = ({\n  value: propsValue,\n  onConfirm,\n  className,\n  width,\n  fontStyle,\n  maxLength,\n  validateValue,\n  onError,\n  readonly = false,\n  isEdit: propsIsEdit = false,\n}: IProps) => {\n  const [isEdit, setIsEdit] = useState<boolean>(propsIsEdit);\n  const [value, setValue] = useState(propsValue);\n\n  useEffect(() => {\n    setValue(propsValue);\n  }, [propsValue]);\n\n  const divRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleBlur = useCallback(() => {\n    onConfirm?.(value);\n    inputRef.current?.blur();\n  }, [onConfirm, value]);\n\n  useEffect(() => {\n    if (!width && divRef.current && inputRef.current) {\n      const tempWidth = divRef.current?.offsetWidth || defaultWidth;\n      inputRef.current.style.width = tempWidth + PADDING_WIDTH + 'px';\n    }\n  }, [width, value, isEdit]);\n\n  useEffect(() => {\n    if (isEdit) {\n      setValue(propsValue);\n    }\n  }, [isEdit, propsValue]);\n\n  useEffect(() => {\n    if (propsIsEdit) {\n      setIsEdit(true);\n      setTimeout(() => {\n        if (inputRef.current) {\n          inputRef.current.focus();\n          inputRef.current.select();\n        }\n      }, 100);\n    } else {\n      setIsEdit(false);\n    }\n  }, [propsIsEdit]);\n\n  if (isEdit && !readonly) {\n    return (\n      <div className=\"ald-rename-input tw-flex tw-h-[22px] tw-min-w-[10px] tw-max-w-full tw-items-center tw-border tw-border-[var(--action-ghost-normal)]\">\n        <input\n          className={cn(\n            className,\n            'ald-rename-input-wrapper tw-box-border tw-h-[22px] tw-max-w-full tw-border-0 tw-p-[2px] tw-text-[13px]',\n            'hover:tw-border hover:tw-border-solid hover:tw-border-[var(--border-neutral-strong)]',\n            'focus:tw-border focus:tw-border-solid focus:tw-border-[var(--border-brand-strong)] focus:tw-shadow-[0_0_0_1px_var(--border-brand-strong)]',\n          )}\n          style={{\n            ...fontStyle,\n            width,\n          }}\n          value={value}\n          ref={inputRef}\n          onChange={(e) => setValue(e.target.value)}\n          onBlur={(e) => {\n            if (!validateValue || validateValue(e.target.value.trim())) {\n              handleBlur();\n            } else {\n              onError?.(value);\n              setValue(propsValue);\n            }\n            setIsEdit(false);\n          }}\n          onFocus={() => {\n            inputRef.current?.select();\n          }}\n          maxLength={maxLength}\n          onKeyUp={(e) => {\n            if (e.key === 'Enter') {\n              if (\n                !validateValue ||\n                validateValue(inputRef.current?.value.trim() || '')\n              ) {\n                inputRef.current?.blur();\n              } else {\n                onError?.(inputRef.current?.value.trim() || '');\n                setValue(propsValue);\n              }\n            }\n          }}\n        />\n        <div\n          ref={divRef}\n          className=\"ald-rename-input-div tw-pointer-events-none tw-invisible tw-fixed tw-bottom-0 tw--ml-px tw-min-w-px tw-max-w-full tw-overflow-hidden tw-whitespace-pre tw-border tw-border-[var(--action-ghost-normal)] tw-p-0 tw-text-[13px] tw-font-normal\"\n          style={fontStyle}\n        >\n          {value}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        className,\n        'ald-rename-input-text tw-flex tw-h-[22px] tw-items-center tw-border tw-border-[var(--action-ghost-normal)] tw-p-[2px] tw-text-[13px]',\n      )}\n      style={fontStyle}\n      onMouseMove={() => {\n        setIsEdit(true);\n        setValue(propsValue);\n      }}\n      onClick={() => {\n        inputRef.current?.select();\n      }}\n    >\n      {propsValue}\n    </div>\n  );\n};\n\nexport default RenameInput;\n"],"mappings":";;;;AA2BA,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAEtB,IAAM,eAAe,EACnB,OAAO,YACP,WACA,WACA,OACA,WACA,WACA,eACA,SACA,WAAW,OACX,QAAQ,cAAc,YACV;CACZ,MAAM,CAAC,QAAQ,aAAa,SAAkB,YAAY;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAS,WAAW;AAE9C,iBAAgB;AACd,WAAS,WAAW;IACnB,CAAC,WAAW,CAAC;CAEhB,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,aAAa,kBAAkB;AACnC,cAAY,MAAM;AAClB,WAAS,SAAS,MAAM;IACvB,CAAC,WAAW,MAAM,CAAC;AAEtB,iBAAgB;AACd,MAAI,CAAC,SAAS,OAAO,WAAW,SAAS,SAAS;GAChD,MAAM,YAAY,OAAO,SAAS,eAAe;AACjD,YAAS,QAAQ,MAAM,QAAQ,YAAY,gBAAgB;;IAE5D;EAAC;EAAO;EAAO;EAAO,CAAC;AAE1B,iBAAgB;AACd,MAAI,OACF,UAAS,WAAW;IAErB,CAAC,QAAQ,WAAW,CAAC;AAExB,iBAAgB;AACd,MAAI,aAAa;AACf,aAAU,KAAK;AACf,oBAAiB;AACf,QAAI,SAAS,SAAS;AACpB,cAAS,QAAQ,OAAO;AACxB,cAAS,QAAQ,QAAQ;;MAE1B,IAAI;QAEP,WAAU,MAAM;IAEjB,CAAC,YAAY,CAAC;AAEjB,KAAI,UAAU,CAAC,SACb,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,SAAD;GACE,WAAW,GACT,WACA,0GACA,wFACA,4IACD;GACD,OAAO;IACL,GAAG;IACH;IACD;GACM;GACP,KAAK;GACL,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,SAAS,MAAM;AACb,QAAI,CAAC,iBAAiB,cAAc,EAAE,OAAO,MAAM,MAAM,CAAC,CACxD,aAAY;SACP;AACL,eAAU,MAAM;AAChB,cAAS,WAAW;;AAEtB,cAAU,MAAM;;GAElB,eAAe;AACb,aAAS,SAAS,QAAQ;;GAEjB;GACX,UAAU,MAAM;AACd,QAAI,EAAE,QAAQ,QACZ,KACE,CAAC,iBACD,cAAc,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG,CAEnD,UAAS,SAAS,MAAM;SACnB;AACL,eAAU,SAAS,SAAS,MAAM,MAAM,IAAI,GAAG;AAC/C,cAAS,WAAW;;;GAI1B,CAAA,EACF,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO;aAEN;GACG,CAAA,CACF;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,WACA,uIACD;EACD,OAAO;EACP,mBAAmB;AACjB,aAAU,KAAK;AACf,YAAS,WAAW;;EAEtB,eAAe;AACb,YAAS,SAAS,QAAQ;;YAG3B;EACG,CAAA"}

package/dist/Result/index.js

@@ -14,22 +14,22 @@ var IconMap = {
 	success: /* @__PURE__ */ jsx(Memo$2, {
 		size: 80,
 		fill: "var(--content-inverted-primary)",
-		color: "var(--non-semantic-background-green-strong)"
+		color: "var(--background-positive-strong)"
 	}),
 	error: /* @__PURE__ */ jsx(Memo$1, {
 		size: 80,
 		fill: "var(--content-inverted-primary)",
-		color: "var(--non-semantic-background-red-strong)"
+		color: "var(--background-negative-strong)"
 	}),
 	info: /* @__PURE__ */ jsx(Memo$3, {
 		size: 80,
 		fill: "var(--content-inverted-primary)",
-		color: "var(--non-semantic-background-blue-strong)"
+		color: "var(--background-informative-strong)"
 	}),
 	warning: /* @__PURE__ */ jsx(Memo, {
 		size: 80,
 		fill: "var(--content-inverted-primary)",
-		color: "var(--non-semantic-background-orange-strong)"
+		color: "var(--background-warning-strong)"
 	})
 };
 var ExceptionMap = {

package/dist/Result/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Result/index.tsx"],"sourcesContent":["import './result.css';\nimport { cn } from '../lib/utils';\nimport React from 'react';\nimport {\n  AlertTriangleDuotone,\n  CancelCircleDuotone,\n  CheckCircleDuotone,\n  InfoCircleLine,\n} from '../Icon';\nimport noFound from './noFound';\nimport serverError from './serverError';\nimport unauthorized from './unauthorized';\nexport const IconMap = {\n  success: (\n    <CheckCircleDuotone\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--non-semantic-background-green-strong)'}\n    />\n  ),\n  error: (\n    <CancelCircleDuotone\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--non-semantic-background-red-strong)'}\n    />\n  ),\n  info: (\n    <InfoCircleLine\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--non-semantic-background-blue-strong)'}\n    />\n  ),\n  warning: (\n    <AlertTriangleDuotone\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--non-semantic-background-orange-strong)'}\n    />\n  ),\n};\n\nexport const ExceptionMap = {\n  noFound: noFound,\n  serverError: serverError,\n  unauthorized: unauthorized,\n};\nexport type ExceptionStatusType = 'unauthorized' | 'noFound' | 'serverError';\nexport type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;\nexport type ResultDirectionType = 'horizontal' | 'vertical';\nexport interface ResultProps {\n  icon?: React.ReactNode;\n  status?: ResultStatusType;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  direction?: ResultDirectionType;\n}\nexport interface ResultType extends React.FC<ResultProps> {\n  PRESENTED_IMAGE_404: React.FC<{ direction?: ResultDirectionType }>;\n  PRESENTED_IMAGE_403: React.FC<{ direction?: ResultDirectionType }>;\n  PRESENTED_IMAGE_500: React.FC<{ direction?: ResultDirectionType }>;\n}\n// ExceptionImageMap keys\nconst ExceptionStatus = Object.keys(ExceptionMap);\ninterface IconProps {\n  icon: React.ReactNode;\n  status: ResultStatusType;\n  direction?: ResultDirectionType;\n}\nconst Icon: React.FC<IconProps> = ({\n  icon,\n  status,\n  direction = 'vertical',\n}) => {\n  const className = cn(`ald-result-icon`);\n\n  if (ExceptionStatus.includes(`${status}`)) {\n    // 404 403 500\n    const SVGComponent = ExceptionMap[status as ExceptionStatusType];\n    return (\n      <div\n        className={cn(className, 'ald-result-image', {\n          [`ald-result-image-${direction}`]: direction,\n        })}\n      >\n        <SVGComponent direction={direction} />\n      </div>\n    );\n  }\n\n  const iconNode =\n    IconMap[status as Exclude<ResultStatusType, ExceptionStatusType>];\n\n  if (icon === null || icon === false) {\n    return null;\n  }\n\n  return <div className={className}>{icon || iconNode}</div>;\n};\n\nconst Result: ResultType = ({\n  className,\n  subTitle,\n  title,\n  style,\n  children,\n  status = 'info',\n  direction = 'vertical',\n  icon,\n  extra,\n}) => {\n  if (direction === 'horizontal') {\n    return (\n      <div className={cn('ald-result-horizontal', className)} style={style}>\n        <div className={`ald-result-left`}>\n          {title && <div className={`ald-result-title`}>{title}</div>}\n          {subTitle && <div className={`ald-result-subtitle`}>{subTitle}</div>}\n          {extra && <div className={`ald-result-extra`}>{extra}</div>}\n          {children && <div className={`ald-result-content`}>{children}</div>}\n        </div>\n        <div className={`ald-result-right`}>\n          <Icon status={status} icon={icon} direction={direction} />\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div className=\"ald-result-vertical-wrap\">\n      <div className={cn('ald-result-vertical', className)} style={style}>\n        <Icon status={status} icon={icon} />\n        {title && <div className={`ald-result-title`}>{title}</div>}\n        {subTitle && <div className={`ald-result-subtitle`}>{subTitle}</div>}\n        {extra && <div className={`ald-result-extra`}>{extra}</div>}\n        {children && <div className={`ald-result-content`}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n\nResult.PRESENTED_IMAGE_403 = ExceptionMap['unauthorized'];\nResult.PRESENTED_IMAGE_404 = ExceptionMap['noFound'];\nResult.PRESENTED_IMAGE_500 = ExceptionMap['serverError'];\n\nif (process.env.NODE_ENV !== 'production') {\n  Result.displayName = 'Result';\n}\n\nexport default Result;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,UAAU;CACrB,SACE,oBAAC,QAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEJ,OACE,oBAAC,QAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEJ,MACE,oBAAC,QAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEJ,SACE,oBAAC,MAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEL;AAED,IAAa,eAAe;CACjB,SAAA;CACI,aAAA;CACC,cAAA;CACf;AAqBD,IAAM,kBAAkB,OAAO,KAAK,aAAa;AAMjD,IAAM,QAA6B,EACjC,MACA,QACA,YAAY,iBACR;CACJ,MAAM,YAAY,GAAG,kBAAkB;AAEvC,KAAI,gBAAgB,SAAS,GAAG,SAAS,EAAE;EAEzC,MAAM,eAAe,aAAa;AAClC,SACE,oBAAC,OAAD;GACE,WAAW,GAAG,WAAW,oBAAoB,GAC1C,oBAAoB,cAAc,WACpC,CAAC;aAEF,oBAAC,cAAD,EAAyB,WAAa,CAAA;GAClC,CAAA;;CAIV,MAAM,WACJ,QAAQ;AAEV,KAAI,SAAS,QAAQ,SAAS,MAC5B,QAAO;AAGT,QAAO,oBAAC,OAAD;EAAgB;YAAY,QAAQ;EAAe,CAAA;;AAG5D,IAAM,UAAsB,EAC1B,WACA,UACA,OACA,OACA,UACA,SAAS,QACT,YAAY,YACZ,MACA,YACI;AACJ,KAAI,cAAc,aAChB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;EAAS;YAA/D,CACE,qBAAC,OAAD;GAAK,WAAW;aAAhB;IACG,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;eAAwB;KAAe,CAAA;IACnE,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAuB;KAAe,CAAA;IAC/D;MACN,oBAAC,OAAD;GAAK,WAAW;aACd,oBAAC,MAAD;IAAc;IAAc;IAAiB;IAAa,CAAA;GACtD,CAAA,CACF;;AAGV,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAW,GAAG,uBAAuB,UAAU;GAAS;aAA7D;IACE,oBAAC,MAAD;KAAc;KAAc;KAAQ,CAAA;IACnC,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;eAAwB;KAAe,CAAA;IACnE,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAuB;KAAe,CAAA;IAC/D;;EACF,CAAA;;AAIV,OAAO,sBAAsB,aAAa;AAC1C,OAAO,sBAAsB,aAAa;AAC1C,OAAO,sBAAsB,aAAa;AAE1C,IAAA,QAAA,IAAA,aAA6B,aAC3B,QAAO,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Result/index.tsx"],"sourcesContent":["import './result.css';\nimport { cn } from '../lib/utils';\nimport React from 'react';\nimport {\n  AlertTriangleDuotone,\n  CancelCircleDuotone,\n  CheckCircleDuotone,\n  InfoCircleLine,\n} from '../Icon';\nimport noFound from './noFound';\nimport serverError from './serverError';\nimport unauthorized from './unauthorized';\nexport const IconMap = {\n  success: (\n    <CheckCircleDuotone\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--background-positive-strong)'}\n    />\n  ),\n  error: (\n    <CancelCircleDuotone\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--background-negative-strong)'}\n    />\n  ),\n  info: (\n    <InfoCircleLine\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--background-informative-strong)'}\n    />\n  ),\n  warning: (\n    <AlertTriangleDuotone\n      size={80}\n      fill={'var(--content-inverted-primary)'}\n      color={'var(--background-warning-strong)'}\n    />\n  ),\n};\n\nexport const ExceptionMap = {\n  noFound: noFound,\n  serverError: serverError,\n  unauthorized: unauthorized,\n};\nexport type ExceptionStatusType = 'unauthorized' | 'noFound' | 'serverError';\nexport type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;\nexport type ResultDirectionType = 'horizontal' | 'vertical';\nexport interface ResultProps {\n  icon?: React.ReactNode;\n  status?: ResultStatusType;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  direction?: ResultDirectionType;\n}\nexport interface ResultType extends React.FC<ResultProps> {\n  PRESENTED_IMAGE_404: React.FC<{ direction?: ResultDirectionType }>;\n  PRESENTED_IMAGE_403: React.FC<{ direction?: ResultDirectionType }>;\n  PRESENTED_IMAGE_500: React.FC<{ direction?: ResultDirectionType }>;\n}\n// ExceptionImageMap keys\nconst ExceptionStatus = Object.keys(ExceptionMap);\ninterface IconProps {\n  icon: React.ReactNode;\n  status: ResultStatusType;\n  direction?: ResultDirectionType;\n}\nconst Icon: React.FC<IconProps> = ({\n  icon,\n  status,\n  direction = 'vertical',\n}) => {\n  const className = cn(`ald-result-icon`);\n\n  if (ExceptionStatus.includes(`${status}`)) {\n    // 404 403 500\n    const SVGComponent = ExceptionMap[status as ExceptionStatusType];\n    return (\n      <div\n        className={cn(className, 'ald-result-image', {\n          [`ald-result-image-${direction}`]: direction,\n        })}\n      >\n        <SVGComponent direction={direction} />\n      </div>\n    );\n  }\n\n  const iconNode =\n    IconMap[status as Exclude<ResultStatusType, ExceptionStatusType>];\n\n  if (icon === null || icon === false) {\n    return null;\n  }\n\n  return <div className={className}>{icon || iconNode}</div>;\n};\n\nconst Result: ResultType = ({\n  className,\n  subTitle,\n  title,\n  style,\n  children,\n  status = 'info',\n  direction = 'vertical',\n  icon,\n  extra,\n}) => {\n  if (direction === 'horizontal') {\n    return (\n      <div className={cn('ald-result-horizontal', className)} style={style}>\n        <div className={`ald-result-left`}>\n          {title && <div className={`ald-result-title`}>{title}</div>}\n          {subTitle && <div className={`ald-result-subtitle`}>{subTitle}</div>}\n          {extra && <div className={`ald-result-extra`}>{extra}</div>}\n          {children && <div className={`ald-result-content`}>{children}</div>}\n        </div>\n        <div className={`ald-result-right`}>\n          <Icon status={status} icon={icon} direction={direction} />\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div className=\"ald-result-vertical-wrap\">\n      <div className={cn('ald-result-vertical', className)} style={style}>\n        <Icon status={status} icon={icon} />\n        {title && <div className={`ald-result-title`}>{title}</div>}\n        {subTitle && <div className={`ald-result-subtitle`}>{subTitle}</div>}\n        {extra && <div className={`ald-result-extra`}>{extra}</div>}\n        {children && <div className={`ald-result-content`}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n\nResult.PRESENTED_IMAGE_403 = ExceptionMap['unauthorized'];\nResult.PRESENTED_IMAGE_404 = ExceptionMap['noFound'];\nResult.PRESENTED_IMAGE_500 = ExceptionMap['serverError'];\n\nif (process.env.NODE_ENV !== 'production') {\n  Result.displayName = 'Result';\n}\n\nexport default Result;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,UAAU;CACrB,SACE,oBAAC,QAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEJ,OACE,oBAAC,QAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEJ,MACE,oBAAC,QAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEJ,SACE,oBAAC,MAAD;EACE,MAAM;EACN,MAAM;EACN,OAAO;EACP,CAAA;CAEL;AAED,IAAa,eAAe;CACjB,SAAA;CACI,aAAA;CACC,cAAA;CACf;AAqBD,IAAM,kBAAkB,OAAO,KAAK,aAAa;AAMjD,IAAM,QAA6B,EACjC,MACA,QACA,YAAY,iBACR;CACJ,MAAM,YAAY,GAAG,kBAAkB;AAEvC,KAAI,gBAAgB,SAAS,GAAG,SAAS,EAAE;EAEzC,MAAM,eAAe,aAAa;AAClC,SACE,oBAAC,OAAD;GACE,WAAW,GAAG,WAAW,oBAAoB,GAC1C,oBAAoB,cAAc,WACpC,CAAC;aAEF,oBAAC,cAAD,EAAyB,WAAa,CAAA;GAClC,CAAA;;CAIV,MAAM,WACJ,QAAQ;AAEV,KAAI,SAAS,QAAQ,SAAS,MAC5B,QAAO;AAGT,QAAO,oBAAC,OAAD;EAAgB;YAAY,QAAQ;EAAe,CAAA;;AAG5D,IAAM,UAAsB,EAC1B,WACA,UACA,OACA,OACA,UACA,SAAS,QACT,YAAY,YACZ,MACA,YACI;AACJ,KAAI,cAAc,aAChB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,yBAAyB,UAAU;EAAS;YAA/D,CACE,qBAAC,OAAD;GAAK,WAAW;aAAhB;IACG,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;eAAwB;KAAe,CAAA;IACnE,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAuB;KAAe,CAAA;IAC/D;MACN,oBAAC,OAAD;GAAK,WAAW;aACd,oBAAC,MAAD;IAAc;IAAc;IAAiB;IAAa,CAAA;GACtD,CAAA,CACF;;AAGV,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAW,GAAG,uBAAuB,UAAU;GAAS;aAA7D;IACE,oBAAC,MAAD;KAAc;KAAc;KAAQ,CAAA;IACnC,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;eAAwB;KAAe,CAAA;IACnE,SAAS,oBAAC,OAAD;KAAK,WAAW;eAAqB;KAAY,CAAA;IAC1D,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAuB;KAAe,CAAA;IAC/D;;EACF,CAAA;;AAIV,OAAO,sBAAsB,aAAa;AAC1C,OAAO,sBAAsB,aAAa;AAC1C,OAAO,sBAAsB,aAAa;AAE1C,IAAA,QAAA,IAAA,aAA6B,aAC3B,QAAO,cAAc"}

package/dist/Select/components/Suffix.js

@@ -12,7 +12,7 @@ function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displ
 		children: /* @__PURE__ */ jsx(Memo, {
 			className: "ald-loading-spin tw-animate-spin",
 			size: 16,
-			color: "#6B7280"
+			color: "var(--content-secondary)"
 		})
 	});
 	if ((isActive || isHover) && !disabled && allowClear && displayValues.length > 0) return /* @__PURE__ */ jsx("div", {
@@ -24,12 +24,12 @@ function Suffix({ showArrow, allowClear, isActive, isHover, icon, onClear, displ
 		},
 		children: /* @__PURE__ */ jsx(Memo$2, {
 			size: 16,
-			color: "#6B7280"
+			color: "var(--content-secondary)"
 		})
 	});
 	if (showArrow) {
 		const dropdownIcon = icon || /* @__PURE__ */ jsx(Memo$1, {
-			color: "#6B7280",
+			color: "var(--content-secondary)",
 			size: 16
 		});
 		return /* @__PURE__ */ jsx("div", {

package/dist/Select/components/Suffix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport {\n  ArrowDownRightFill,\n  CloseCircleRightFill,\n  LoadingLine,\n} from '../../Icon';\nimport { DisplayValueType } from '../interface';\n\nexport default function Suffix({\n  showArrow,\n  allowClear,\n  isActive,\n  isHover,\n  icon,\n  onClear,\n  displayValues,\n  disabled,\n  loading,\n}: {\n  showArrow?: boolean;\n  allowClear?: boolean;\n  isActive?: boolean;\n  isHover?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  icon: React.ReactNode;\n  onClear?: () => void;\n  displayValues: DisplayValueType[];\n}) {\n  const classNames = prefixCls('select');\n\n  if (loading) {\n    return (\n      <div\n        className={`${classNames(\n          'suffix',\n          'loading',\n        )} beta-ald-select-suffix-loading`}\n      >\n        <LoadingLine\n          className=\"ald-loading-spin tw-animate-spin\"\n          size={16}\n          color=\"#6B7280\"\n        />\n      </div>\n    );\n  }\n\n  if (\n    (isActive || isHover) &&\n    !disabled &&\n    allowClear &&\n    displayValues.length > 0\n  ) {\n    return (\n      <div\n        className={classNames('suffix', 'clear')}\n        onClick={(event) => {\n          event.stopPropagation();\n          event.preventDefault();\n          onClear?.();\n        }}\n      >\n        <CloseCircleRightFill size={16} color=\"#6B7280\" />\n      </div>\n    );\n  }\n  if (showArrow) {\n    const dropdownIcon = icon || (\n      <ArrowDownRightFill color=\"#6B7280\" size={16} />\n    );\n\n    // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n    return (\n      <div className={classNames('suffix', 'arrow') + ' ant-select-arrow'}>\n        {dropdownIcon}\n      </div>\n    );\n  }\n\n  return null;\n}\n"],"mappings":";;;;;;;AASA,SAAwB,OAAO,EAC7B,WACA,YACA,UACA,SACA,MACA,SACA,eACA,UACA,WAWC;CACD,MAAM,aAAa,UAAU,SAAS;AAEtC,KAAI,QACF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,WACZ,UACA,UACD,CAAC;YAEF,oBAAC,MAAD;GACE,WAAU;GACV,MAAM;GACN,OAAM;GACN,CAAA;EACE,CAAA;AAIV,MACG,YAAY,YACb,CAAC,YACD,cACA,cAAc,SAAS,EAEvB,QACE,oBAAC,OAAD;EACE,WAAW,WAAW,UAAU,QAAQ;EACxC,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AACtB,cAAW;;YAGb,oBAAC,QAAD;GAAsB,MAAM;GAAI,OAAM;GAAY,CAAA;EAC9C,CAAA;AAGV,KAAI,WAAW;EACb,MAAM,eAAe,QACnB,oBAAC,QAAD;GAAoB,OAAM;GAAU,MAAM;GAAM,CAAA;AAIlD,SACE,oBAAC,OAAD;GAAK,WAAW,WAAW,UAAU,QAAQ,GAAG;aAC7C;GACG,CAAA;;AAIV,QAAO"}
+{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/Select/components/Suffix.tsx"],"sourcesContent":["import React from 'react';\nimport prefixCls from '../../_utils/prefixCls';\nimport {\n  ArrowDownRightFill,\n  CloseCircleRightFill,\n  LoadingLine,\n} from '../../Icon';\nimport { DisplayValueType } from '../interface';\n\nexport default function Suffix({\n  showArrow,\n  allowClear,\n  isActive,\n  isHover,\n  icon,\n  onClear,\n  displayValues,\n  disabled,\n  loading,\n}: {\n  showArrow?: boolean;\n  allowClear?: boolean;\n  isActive?: boolean;\n  isHover?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  icon: React.ReactNode;\n  onClear?: () => void;\n  displayValues: DisplayValueType[];\n}) {\n  const classNames = prefixCls('select');\n\n  if (loading) {\n    return (\n      <div\n        className={`${classNames(\n          'suffix',\n          'loading',\n        )} beta-ald-select-suffix-loading`}\n      >\n        <LoadingLine\n          className=\"ald-loading-spin tw-animate-spin\"\n          size={16}\n          color=\"var(--content-secondary)\"\n        />\n      </div>\n    );\n  }\n\n  if (\n    (isActive || isHover) &&\n    !disabled &&\n    allowClear &&\n    displayValues.length > 0\n  ) {\n    return (\n      <div\n        className={classNames('suffix', 'clear')}\n        onClick={(event) => {\n          event.stopPropagation();\n          event.preventDefault();\n          onClear?.();\n        }}\n      >\n        <CloseCircleRightFill size={16} color=\"var(--content-secondary)\" />\n      </div>\n    );\n  }\n  if (showArrow) {\n    const dropdownIcon = icon || (\n      <ArrowDownRightFill color=\"var(--content-secondary)\" size={16} />\n    );\n\n    // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n    return (\n      <div className={classNames('suffix', 'arrow') + ' ant-select-arrow'}>\n        {dropdownIcon}\n      </div>\n    );\n  }\n\n  return null;\n}\n"],"mappings":";;;;;;;AASA,SAAwB,OAAO,EAC7B,WACA,YACA,UACA,SACA,MACA,SACA,eACA,UACA,WAWC;CACD,MAAM,aAAa,UAAU,SAAS;AAEtC,KAAI,QACF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,WACZ,UACA,UACD,CAAC;YAEF,oBAAC,MAAD;GACE,WAAU;GACV,MAAM;GACN,OAAM;GACN,CAAA;EACE,CAAA;AAIV,MACG,YAAY,YACb,CAAC,YACD,cACA,cAAc,SAAS,EAEvB,QACE,oBAAC,OAAD;EACE,WAAW,WAAW,UAAU,QAAQ;EACxC,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AACtB,cAAW;;YAGb,oBAAC,QAAD;GAAsB,MAAM;GAAI,OAAM;GAA6B,CAAA;EAC/D,CAAA;AAGV,KAAI,WAAW;EACb,MAAM,eAAe,QACnB,oBAAC,QAAD;GAAoB,OAAM;GAA2B,MAAM;GAAM,CAAA;AAInE,SACE,oBAAC,OAAD;GAAK,WAAW,WAAW,UAAU,QAAQ,GAAG;aAC7C;GACG,CAAA;;AAIV,QAAO"}

package/dist/Slider/index.js

@@ -14,7 +14,7 @@ function SliderThumbWithTooltip({ tooltip, value, className }) {
 		onPointerEnter: () => setHovered(true),
 		onPointerLeave: () => setHovered(false),
 		children: tooltip && showTooltip && /* @__PURE__ */ jsx("div", {
-			className: "tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--alias-colors-bg-tooltip)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--alias-colors-text-inverse-default)]",
+			className: "tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--background-inverted)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--content-inverted-primary)]",
 			children: formattedValue
 		})
 	});
@@ -42,7 +42,7 @@ function Slider(props) {
 	React.useEffect(() => {
 		if (controlledValKey !== void 0) setCurrentValues(controlledValKey.split(",").map(Number));
 	}, [controlledValKey]);
-	const thumbClass = "tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--interaction-default-normal)] tw-shadow-[0_0_0_1px_var(--interaction-default-normal)] hover:tw-shadow-[0_0_0_3px_var(--interaction-default-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--interaction-default-active)] focus-visible:tw-outline-none";
+	const thumbClass = "tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--action-primary-normal)] tw-shadow-[0_0_0_1px_var(--action-primary-normal)] hover:tw-shadow-[0_0_0_3px_var(--action-primary-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--action-primary-active)] focus-visible:tw-outline-none";
 	const markEntries = marks ? Object.entries(marks) : [];
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("tw-relative", vertical ? "tw-h-full" : "tw-w-full"),
@@ -60,8 +60,8 @@ function Slider(props) {
 			onValueCommit: handleValueCommit,
 			children: [
 				/* @__PURE__ */ jsx(SliderPrimitive.Track, {
-					className: cn("tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]", vertical ? "tw-w-1" : "tw-h-1"),
-					children: included && /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "ald-slider-range tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]" })
+					className: cn("tw-relative tw-grow tw-rounded-full tw-bg-[var(--action-neutral-subtle-normal)]", vertical ? "tw-w-1" : "tw-h-1"),
+					children: included && /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "ald-slider-range tw-absolute tw-rounded-full tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]" })
 				}),
 				tooltip ? /* @__PURE__ */ jsx(SliderThumbWithTooltip, {
 					tooltip,

package/dist/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Slider/index.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\nimport React, { useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SliderBaseProps {\n  className?: string;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  vertical?: boolean;\n  marks?: Record<\n    number,\n    React.ReactNode | { style?: React.CSSProperties; label?: React.ReactNode }\n  >;\n  included?: boolean;\n  tooltip?: { open?: boolean; formatter?: (value?: number) => React.ReactNode };\n}\n\ninterface SliderSingleProps extends SliderBaseProps {\n  range?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  onAfterChange?: (value: number) => void;\n}\n\ninterface SliderRangeProps extends SliderBaseProps {\n  range: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number]) => void;\n  onAfterChange?: (value: [number, number]) => void;\n}\n\nfunction SliderThumbWithTooltip({\n  tooltip,\n  value,\n  className,\n}: {\n  tooltip?: SliderBaseProps['tooltip'];\n  value: number;\n  className: string;\n}) {\n  const [hovered, setHovered] = useState(false);\n  const thumbRef = useRef<HTMLSpanElement>(null);\n\n  const showTooltip = tooltip?.open !== undefined ? tooltip.open : hovered;\n  const formattedValue = tooltip?.formatter ? tooltip.formatter(value) : value;\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      className={cn('tw-relative', className)}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      {tooltip && showTooltip && (\n        <div className=\"tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--alias-colors-bg-tooltip)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--alias-colors-text-inverse-default)]\">\n          {formattedValue}\n        </div>\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction Slider(props: SliderSingleProps | SliderRangeProps) {\n  const {\n    className,\n    style,\n    disabled,\n    min = 0,\n    max = 100,\n    step = 1,\n    range,\n    vertical,\n    marks,\n    included = true,\n    tooltip,\n  } = props;\n\n  const [currentValues, setCurrentValues] = useState<number[]>(() => {\n    if (range) {\n      return (\n        (props as SliderRangeProps).value ||\n        (props as SliderRangeProps).defaultValue || [min, max]\n      );\n    }\n    const v = (props as SliderSingleProps).value;\n    if (v !== undefined) return [v];\n    return [(props as SliderSingleProps).defaultValue ?? min];\n  });\n\n  const handleValueChange = (values: number[]) => {\n    setCurrentValues(values);\n    if (range && 'onChange' in props && props.onChange) {\n      (props.onChange as (v: [number, number]) => void)([values[0], values[1]]);\n    } else if (!range && 'onChange' in props && props.onChange) {\n      (props.onChange as (v: number) => void)(values[0]);\n    }\n  };\n\n  const handleValueCommit = (values: number[]) => {\n    if (range && 'onAfterChange' in props && props.onAfterChange) {\n      (props.onAfterChange as (v: [number, number]) => void)([\n        values[0],\n        values[1],\n      ]);\n    } else if (!range && 'onAfterChange' in props && props.onAfterChange) {\n      (props.onAfterChange as (v: number) => void)(values[0]);\n    }\n  };\n\n  const defaultVal = range\n    ? (props as SliderRangeProps).defaultValue || [min, max]\n    : [(props as SliderSingleProps).defaultValue ?? min];\n\n  const controlledVal = range\n    ? (props as SliderRangeProps).value\n    : (props as SliderSingleProps).value !== undefined\n    ? [(props as SliderSingleProps).value!]\n    : undefined;\n\n  // Sync controlled values — use stringified key to detect content changes\n  const controlledValKey = controlledVal ? controlledVal.join(',') : undefined;\n  React.useEffect(() => {\n    if (controlledValKey !== undefined) {\n      setCurrentValues(controlledValKey.split(',').map(Number));\n    }\n  }, [controlledValKey]);\n\n  const thumbClass =\n    'tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--interaction-default-normal)] tw-shadow-[0_0_0_1px_var(--interaction-default-normal)] hover:tw-shadow-[0_0_0_3px_var(--interaction-default-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--interaction-default-active)] focus-visible:tw-outline-none';\n\n  const markEntries = marks ? Object.entries(marks) : [];\n\n  return (\n    <div className={cn('tw-relative', vertical ? 'tw-h-full' : 'tw-w-full')}>\n      <SliderPrimitive.Root\n        className={cn(\n          'ald-slider tw-relative tw-flex tw-touch-none tw-select-none tw-items-center',\n          vertical ? 'tw-h-full tw-w-5 tw-flex-col' : 'tw-h-5 tw-w-full',\n          disabled && 'tw-pointer-events-none tw-opacity-50',\n          className,\n        )}\n        style={style}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={vertical ? 'vertical' : 'horizontal'}\n        defaultValue={defaultVal}\n        value={controlledVal}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            'tw-relative tw-grow tw-rounded-full tw-bg-[var(--interaction-neutral-subtle-normal)]',\n            vertical ? 'tw-w-1' : 'tw-h-1',\n          )}\n        >\n          {included && (\n            <SliderPrimitive.Range className=\"ald-slider-range tw-absolute tw-rounded-full tw-bg-[var(--interaction-default-normal)] hover:tw-bg-[var(--interaction-default-hover)]\" />\n          )}\n        </SliderPrimitive.Track>\n        {tooltip ? (\n          <SliderThumbWithTooltip\n            tooltip={tooltip}\n            value={currentValues[0] ?? min}\n            className={thumbClass}\n          />\n        ) : (\n          <SliderPrimitive.Thumb className={thumbClass} />\n        )}\n        {range &&\n          (tooltip ? (\n            <SliderThumbWithTooltip\n              tooltip={tooltip}\n              value={currentValues[1] ?? max}\n              className={thumbClass}\n            />\n          ) : (\n            <SliderPrimitive.Thumb className={thumbClass} />\n          ))}\n      </SliderPrimitive.Root>\n      {markEntries.length > 0 && (\n        <div className=\"ald-slider-marks tw-relative tw-mt-2 tw-w-full\">\n          {markEntries.map(([key, mark]) => {\n            const numKey = Number(key);\n            const percent = ((numKey - min) / (max - min)) * 100;\n            const isNode =\n              typeof mark === 'object' &&\n              mark !== null &&\n              'label' in (mark as Record<string, unknown>);\n            const label = isNode\n              ? (mark as { label?: React.ReactNode }).label\n              : (mark as React.ReactNode);\n            const markStyle = isNode\n              ? (mark as { style?: React.CSSProperties }).style\n              : undefined;\n\n            return (\n              <span\n                key={key}\n                className=\"ald-slider-mark tw-absolute tw-text-xs tw-text-[var(--content-secondary)]\"\n                style={{\n                  left: `${percent}%`,\n                  transform: 'translateX(-50%)',\n                  ...markStyle,\n                }}\n              >\n                {label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default Slider;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Slider/index.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\nimport React, { useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SliderBaseProps {\n  className?: string;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  vertical?: boolean;\n  marks?: Record<\n    number,\n    React.ReactNode | { style?: React.CSSProperties; label?: React.ReactNode }\n  >;\n  included?: boolean;\n  tooltip?: { open?: boolean; formatter?: (value?: number) => React.ReactNode };\n}\n\ninterface SliderSingleProps extends SliderBaseProps {\n  range?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  onAfterChange?: (value: number) => void;\n}\n\ninterface SliderRangeProps extends SliderBaseProps {\n  range: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\n  onChange?: (value: [number, number]) => void;\n  onAfterChange?: (value: [number, number]) => void;\n}\n\nfunction SliderThumbWithTooltip({\n  tooltip,\n  value,\n  className,\n}: {\n  tooltip?: SliderBaseProps['tooltip'];\n  value: number;\n  className: string;\n}) {\n  const [hovered, setHovered] = useState(false);\n  const thumbRef = useRef<HTMLSpanElement>(null);\n\n  const showTooltip = tooltip?.open !== undefined ? tooltip.open : hovered;\n  const formattedValue = tooltip?.formatter ? tooltip.formatter(value) : value;\n\n  return (\n    <SliderPrimitive.Thumb\n      ref={thumbRef}\n      className={cn('tw-relative', className)}\n      onPointerEnter={() => setHovered(true)}\n      onPointerLeave={() => setHovered(false)}\n    >\n      {tooltip && showTooltip && (\n        <div className=\"tw-absolute tw-bottom-full tw-left-1/2 tw-mb-2 -tw-translate-x-1/2 tw-whitespace-nowrap tw-rounded-r-50 tw-bg-[var(--background-inverted)] tw-px-2 tw-py-1 tw-text-xs tw-text-[var(--content-inverted-primary)]\">\n          {formattedValue}\n        </div>\n      )}\n    </SliderPrimitive.Thumb>\n  );\n}\n\nfunction Slider(props: SliderSingleProps | SliderRangeProps) {\n  const {\n    className,\n    style,\n    disabled,\n    min = 0,\n    max = 100,\n    step = 1,\n    range,\n    vertical,\n    marks,\n    included = true,\n    tooltip,\n  } = props;\n\n  const [currentValues, setCurrentValues] = useState<number[]>(() => {\n    if (range) {\n      return (\n        (props as SliderRangeProps).value ||\n        (props as SliderRangeProps).defaultValue || [min, max]\n      );\n    }\n    const v = (props as SliderSingleProps).value;\n    if (v !== undefined) return [v];\n    return [(props as SliderSingleProps).defaultValue ?? min];\n  });\n\n  const handleValueChange = (values: number[]) => {\n    setCurrentValues(values);\n    if (range && 'onChange' in props && props.onChange) {\n      (props.onChange as (v: [number, number]) => void)([values[0], values[1]]);\n    } else if (!range && 'onChange' in props && props.onChange) {\n      (props.onChange as (v: number) => void)(values[0]);\n    }\n  };\n\n  const handleValueCommit = (values: number[]) => {\n    if (range && 'onAfterChange' in props && props.onAfterChange) {\n      (props.onAfterChange as (v: [number, number]) => void)([\n        values[0],\n        values[1],\n      ]);\n    } else if (!range && 'onAfterChange' in props && props.onAfterChange) {\n      (props.onAfterChange as (v: number) => void)(values[0]);\n    }\n  };\n\n  const defaultVal = range\n    ? (props as SliderRangeProps).defaultValue || [min, max]\n    : [(props as SliderSingleProps).defaultValue ?? min];\n\n  const controlledVal = range\n    ? (props as SliderRangeProps).value\n    : (props as SliderSingleProps).value !== undefined\n    ? [(props as SliderSingleProps).value!]\n    : undefined;\n\n  // Sync controlled values — use stringified key to detect content changes\n  const controlledValKey = controlledVal ? controlledVal.join(',') : undefined;\n  React.useEffect(() => {\n    if (controlledValKey !== undefined) {\n      setCurrentValues(controlledValKey.split(',').map(Number));\n    }\n  }, [controlledValKey]);\n\n  const thumbClass =\n    'tw-block tw-size-[10px] tw-cursor-pointer tw-rounded-full tw-bg-[var(--action-primary-normal)] tw-shadow-[0_0_0_1px_var(--action-primary-normal)] hover:tw-shadow-[0_0_0_3px_var(--action-primary-hover)] focus-visible:tw-shadow-[0_0_0_3px_var(--action-primary-active)] focus-visible:tw-outline-none';\n\n  const markEntries = marks ? Object.entries(marks) : [];\n\n  return (\n    <div className={cn('tw-relative', vertical ? 'tw-h-full' : 'tw-w-full')}>\n      <SliderPrimitive.Root\n        className={cn(\n          'ald-slider tw-relative tw-flex tw-touch-none tw-select-none tw-items-center',\n          vertical ? 'tw-h-full tw-w-5 tw-flex-col' : 'tw-h-5 tw-w-full',\n          disabled && 'tw-pointer-events-none tw-opacity-50',\n          className,\n        )}\n        style={style}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={vertical ? 'vertical' : 'horizontal'}\n        defaultValue={defaultVal}\n        value={controlledVal}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            'tw-relative tw-grow tw-rounded-full tw-bg-[var(--action-neutral-subtle-normal)]',\n            vertical ? 'tw-w-1' : 'tw-h-1',\n          )}\n        >\n          {included && (\n            <SliderPrimitive.Range className=\"ald-slider-range tw-absolute tw-rounded-full tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]\" />\n          )}\n        </SliderPrimitive.Track>\n        {tooltip ? (\n          <SliderThumbWithTooltip\n            tooltip={tooltip}\n            value={currentValues[0] ?? min}\n            className={thumbClass}\n          />\n        ) : (\n          <SliderPrimitive.Thumb className={thumbClass} />\n        )}\n        {range &&\n          (tooltip ? (\n            <SliderThumbWithTooltip\n              tooltip={tooltip}\n              value={currentValues[1] ?? max}\n              className={thumbClass}\n            />\n          ) : (\n            <SliderPrimitive.Thumb className={thumbClass} />\n          ))}\n      </SliderPrimitive.Root>\n      {markEntries.length > 0 && (\n        <div className=\"ald-slider-marks tw-relative tw-mt-2 tw-w-full\">\n          {markEntries.map(([key, mark]) => {\n            const numKey = Number(key);\n            const percent = ((numKey - min) / (max - min)) * 100;\n            const isNode =\n              typeof mark === 'object' &&\n              mark !== null &&\n              'label' in (mark as Record<string, unknown>);\n            const label = isNode\n              ? (mark as { label?: React.ReactNode }).label\n              : (mark as React.ReactNode);\n            const markStyle = isNode\n              ? (mark as { style?: React.CSSProperties }).style\n              : undefined;\n\n            return (\n              <span\n                key={key}\n                className=\"ald-slider-mark tw-absolute tw-text-xs tw-text-[var(--content-secondary)]\"\n                style={{\n                  left: `${percent}%`,\n                  transform: 'translateX(-50%)',\n                  ...markStyle,\n                }}\n              >\n                {label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default Slider;\n"],"mappings":"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"}

package/dist/Spin/CustomIcon/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Icon = (props) => {
 	const { size, tip, direction, spinning = true, className, inContainer } = props;
 	if (!spinning) return null;
-	return /* @__PURE__ */ jsxs(React.Fragment, { children: [inContainer && /* @__PURE__ */ jsx("div", { className: "spinner-mask tw-absolute tw-inset-0 tw-size-full tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-opacity-40" }), /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(React.Fragment, { children: [inContainer && /* @__PURE__ */ jsx("div", { className: "spinner-mask tw-absolute tw-inset-0 tw-size-full tw-bg-[var(--background-default)] tw-opacity-40" }), /* @__PURE__ */ jsxs("div", {
 		className: cn("spinner tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-center tw-gap-4", direction === "horizontal" && "spinner-horizontal tw-flex-row tw-gap-[6px]", inContainer && "spinner-center tw-absolute tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("spinner-inner tw-flex tw-animate-spin tw-items-center", size === "small" && "spinner-inner-small tw-size-5", size === "large" && "spinner-inner-large tw-size-16", size !== "small" && size !== "large" && "spinner-inner-middle tw-size-10"),
@@ -17,7 +17,7 @@ var Icon = (props) => {
 				size !== "small" && size !== "large" && /* @__PURE__ */ jsx(Memo, { size: 40 })
 			]
 		}), tip && /* @__PURE__ */ jsx("div", {
-			className: "ald-spinner-text tw-text-[var(--alias-colors-text-subtle)]",
+			className: "ald-spinner-text tw-text-[var(--content-secondary)]",
 			children: tip
 		})]
 	})] }, getUUID().toString());

package/dist/Spin/CustomIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Spin/CustomIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport type { SizeType } from '../../ConfigProvider/sizeContext';\nimport { LoadingDuotone } from '../../Icon';\nimport { cn } from '../../lib/utils';\nimport { getUUID } from '../../_utils/hooks/useId';\nimport { TDirection } from '..';\n\ninterface ICustomIconProps {\n  size?: SizeType;\n  tip?: React.ReactNode;\n  direction: TDirection;\n  spinning?: boolean;\n  className?: string;\n  inContainer?: boolean;\n}\n\nconst Icon = (props: ICustomIconProps) => {\n  const {\n    size,\n    tip,\n    direction,\n    spinning = true,\n    className,\n    inContainer,\n  } = props;\n  if (!spinning) return null;\n  return (\n    <React.Fragment key={getUUID().toString()}>\n      {inContainer && (\n        <div className=\"spinner-mask tw-absolute tw-inset-0 tw-size-full tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-opacity-40\" />\n      )}\n      <div\n        className={cn(\n          'spinner tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-center tw-gap-4',\n          direction === 'horizontal' &&\n            'spinner-horizontal tw-flex-row tw-gap-[6px]',\n          inContainer &&\n            'spinner-center tw-absolute tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n      >\n        <div\n          className={cn(\n            'spinner-inner tw-flex tw-animate-spin tw-items-center',\n            size === 'small' && 'spinner-inner-small tw-size-5',\n            size === 'large' && 'spinner-inner-large tw-size-16',\n            size !== 'small' &&\n              size !== 'large' &&\n              'spinner-inner-middle tw-size-10',\n          )}\n        >\n          {size === 'small' && <LoadingDuotone size={20} />}\n          {size === 'large' && <LoadingDuotone size={64} />}\n          {size !== 'small' && size !== 'large' && <LoadingDuotone size={40} />}\n        </div>\n        {tip && (\n          <div className=\"ald-spinner-text tw-text-[var(--alias-colors-text-subtle)]\">\n            {tip}\n          </div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n};\nexport default Icon;\n"],"mappings":";;;;;;AAgBA,IAAM,QAAQ,UAA4B;CACxC,MAAM,EACJ,MACA,KACA,WACA,WAAW,MACX,WACA,gBACE;AACJ,KAAI,CAAC,SAAU,QAAO;AACtB,QACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,eACC,oBAAC,OAAD,EAAK,WAAU,kHAAmH,CAAA,EAEpI,qBAAC,OAAD;EACE,WAAW,GACT,oFACA,cAAc,gBACZ,+CACF,eACE,6FACF,UACD;YARH,CAUE,qBAAC,OAAD;GACE,WAAW,GACT,yDACA,SAAS,WAAW,iCACpB,SAAS,WAAW,kCACpB,SAAS,WACP,SAAS,WACT,kCACH;aARH;IAUG,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IAChD,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IAChD,SAAS,WAAW,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IACjE;MACL,OACC,oBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,CAEJ;IACS,EAAA,EAlCI,SAAS,CAAC,UAAU,CAkCxB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Spin/CustomIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport type { SizeType } from '../../ConfigProvider/sizeContext';\nimport { LoadingDuotone } from '../../Icon';\nimport { cn } from '../../lib/utils';\nimport { getUUID } from '../../_utils/hooks/useId';\nimport { TDirection } from '..';\n\ninterface ICustomIconProps {\n  size?: SizeType;\n  tip?: React.ReactNode;\n  direction: TDirection;\n  spinning?: boolean;\n  className?: string;\n  inContainer?: boolean;\n}\n\nconst Icon = (props: ICustomIconProps) => {\n  const {\n    size,\n    tip,\n    direction,\n    spinning = true,\n    className,\n    inContainer,\n  } = props;\n  if (!spinning) return null;\n  return (\n    <React.Fragment key={getUUID().toString()}>\n      {inContainer && (\n        <div className=\"spinner-mask tw-absolute tw-inset-0 tw-size-full tw-bg-[var(--background-default)] tw-opacity-40\" />\n      )}\n      <div\n        className={cn(\n          'spinner tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-center tw-gap-4',\n          direction === 'horizontal' &&\n            'spinner-horizontal tw-flex-row tw-gap-[6px]',\n          inContainer &&\n            'spinner-center tw-absolute tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n      >\n        <div\n          className={cn(\n            'spinner-inner tw-flex tw-animate-spin tw-items-center',\n            size === 'small' && 'spinner-inner-small tw-size-5',\n            size === 'large' && 'spinner-inner-large tw-size-16',\n            size !== 'small' &&\n              size !== 'large' &&\n              'spinner-inner-middle tw-size-10',\n          )}\n        >\n          {size === 'small' && <LoadingDuotone size={20} />}\n          {size === 'large' && <LoadingDuotone size={64} />}\n          {size !== 'small' && size !== 'large' && <LoadingDuotone size={40} />}\n        </div>\n        {tip && (\n          <div className=\"ald-spinner-text tw-text-[var(--content-secondary)]\">\n            {tip}\n          </div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n};\nexport default Icon;\n"],"mappings":";;;;;;AAgBA,IAAM,QAAQ,UAA4B;CACxC,MAAM,EACJ,MACA,KACA,WACA,WAAW,MACX,WACA,gBACE;AACJ,KAAI,CAAC,SAAU,QAAO;AACtB,QACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,eACC,oBAAC,OAAD,EAAK,WAAU,oGAAqG,CAAA,EAEtH,qBAAC,OAAD;EACE,WAAW,GACT,oFACA,cAAc,gBACZ,+CACF,eACE,6FACF,UACD;YARH,CAUE,qBAAC,OAAD;GACE,WAAW,GACT,yDACA,SAAS,WAAW,iCACpB,SAAS,WAAW,kCACpB,SAAS,WACP,SAAS,WACT,kCACH;aARH;IAUG,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IAChD,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IAChD,SAAS,WAAW,SAAS,WAAW,oBAAC,MAAD,EAAgB,MAAM,IAAM,CAAA;IACjE;MACL,OACC,oBAAC,OAAD;GAAK,WAAU;aACZ;GACG,CAAA,CAEJ;IACS,EAAA,EAlCI,SAAS,CAAC,UAAU,CAkCxB"}

package/dist/StatusLight/index.js

@@ -8,18 +8,18 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/StatusLight/index.tsx
 var statusDotColors = {
-	info: "var(--non-semantic-background-blue-strong)",
-	neutral: "var(--non-semantic-background-grey-strong)",
-	danger: "var(--non-semantic-background-red-strong)",
-	success: "var(--non-semantic-background-green-strong)",
-	warning: "var(--non-semantic-background-orange-strong)"
+	info: "var(--background-informative-strong)",
+	neutral: "var(--background-neutral-strong)",
+	danger: "var(--background-negative-strong)",
+	success: "var(--background-positive-strong)",
+	warning: "var(--background-warning-strong)"
 };
 var statusTextColors = {
-	info: "var(--non-semantic-content-blue-primary)",
-	neutral: "var(--non-semantic-content-grey-primary)",
-	danger: "var(--non-semantic-content-red-primary)",
-	success: "var(--non-semantic-content-green-primary)",
-	warning: "var(--non-semantic-content-orange-primary)"
+	info: "var(--content-informative-primary)",
+	neutral: "var(--content-primary)",
+	danger: "var(--content-negative-primary)",
+	success: "var(--content-positive-primary)",
+	warning: "var(--content-warning-primary)"
 };
 function StatusLight({ size = "middle", style = "dot", dotColor, icon, text, status = "info", className }) {
 	const getIcon = () => {
@@ -27,23 +27,23 @@ function StatusLight({ size = "middle", style = "dot", dotColor, icon, text, sta
 		const iconSize = size === "middle" ? 20 : 16;
 		switch (status) {
 			case "info": return /* @__PURE__ */ jsx(Memo$4, {
-				color: "var(--non-semantic-background-blue-strong)",
+				color: "var(--background-informative-strong)",
 				size: iconSize
 			});
 			case "neutral": return /* @__PURE__ */ jsx(Memo$1, {
-				color: "var(--non-semantic-background-grey-strong)",
+				color: "var(--background-neutral-strong)",
 				size: iconSize
 			});
 			case "danger": return /* @__PURE__ */ jsx(Memo$3, {
-				color: "var(--non-semantic-background-red-strong)",
+				color: "var(--background-negative-strong)",
 				size: iconSize
 			});
 			case "success": return /* @__PURE__ */ jsx(Memo$2, {
-				color: "var(--non-semantic-background-green-strong)",
+				color: "var(--background-positive-strong)",
 				size: iconSize
 			});
 			case "warning": return /* @__PURE__ */ jsx(Memo, {
-				color: "var(--non-semantic-background-orange-strong)",
+				color: "var(--background-warning-strong)",
 				size: iconSize
 			});
 		}

package/dist/StatusLight/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/StatusLight/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  AttentionCircleFill,\n  CancelledCircleFill,\n  CheckCircleFill,\n  CloseCircleFill,\n  InProgressFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface IProps {\n  size?: 'middle' | 'small';\n  style?: 'dot' | 'icon';\n  dotColor?: string;\n  icon?: React.ReactNode;\n  text: string;\n  status?: 'info' | 'neutral' | 'danger' | 'success' | 'warning';\n  className?: string;\n}\n\nconst statusDotColors: Record<string, string> = {\n  info: 'var(--non-semantic-background-blue-strong)',\n  neutral: 'var(--non-semantic-background-grey-strong)',\n  danger: 'var(--non-semantic-background-red-strong)',\n  success: 'var(--non-semantic-background-green-strong)',\n  warning: 'var(--non-semantic-background-orange-strong)',\n};\n\nconst statusTextColors: Record<string, string> = {\n  info: 'var(--non-semantic-content-blue-primary)',\n  neutral: 'var(--non-semantic-content-grey-primary)',\n  danger: 'var(--non-semantic-content-red-primary)',\n  success: 'var(--non-semantic-content-green-primary)',\n  warning: 'var(--non-semantic-content-orange-primary)',\n};\n\nfunction StatusLight({\n  size = 'middle',\n  style = 'dot',\n  dotColor,\n  icon,\n  text,\n  status = 'info',\n  className,\n}: IProps) {\n  const getIcon = () => {\n    if (icon) return icon;\n\n    const iconSize = size === 'middle' ? 20 : 16;\n\n    switch (status) {\n      case 'info':\n        return (\n          <InProgressFill\n            color=\"var(--non-semantic-background-blue-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'neutral':\n        return (\n          <CancelledCircleFill\n            color=\"var(--non-semantic-background-grey-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'danger':\n        return (\n          <CloseCircleFill\n            color=\"var(--non-semantic-background-red-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'success':\n        return (\n          <CheckCircleFill\n            color=\"var(--non-semantic-background-green-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'warning':\n        return (\n          <AttentionCircleFill\n            color=\"var(--non-semantic-background-orange-strong)\"\n            size={iconSize}\n          />\n        );\n    }\n  };\n\n  const isSmall = size === 'small';\n\n  return (\n    <div\n      className={cn(\n        'ald-status-light tw-flex tw-cursor-default tw-items-center tw-justify-start',\n        `ald-status-light-${size}`,\n        `ald-status-light-${status}`,\n        isSmall ? 'tw-gap-1' : 'tw-gap-[6px]',\n        className,\n      )}\n    >\n      {style === 'dot' && (\n        <div\n          className={cn(\n            'ald-prefix-dot tw-shrink-0 tw-rounded-full',\n            isSmall\n              ? 'tw-size-[var(--global-grid-75)]'\n              : 'tw-size-[var(--global-grid-100)]',\n          )}\n          style={{\n            backgroundColor: dotColor || statusDotColors[status],\n          }}\n        />\n      )}\n      {style === 'icon' && (\n        <div className=\"ald-prefix-icon tw-flex tw-h-full tw-items-center\">\n          {getIcon()}\n        </div>\n      )}\n      <div\n        className={cn(\n          'ald-text tw-font-normal',\n          isSmall ? 'tw-text-xs tw-leading-4' : 'tw-text-sm tw-leading-5',\n        )}\n        style={{ color: statusTextColors[status] }}\n      >\n        {text}\n      </div>\n    </div>\n  );\n}\n\nexport default StatusLight;\n"],"mappings":";;;;;;;;;AAoBA,IAAM,kBAA0C;CAC9C,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACV;AAED,IAAM,mBAA2C;CAC/C,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACV;AAED,SAAS,YAAY,EACnB,OAAO,UACP,QAAQ,OACR,UACA,MACA,MACA,SAAS,QACT,aACS;CACT,MAAM,gBAAgB;AACpB,MAAI,KAAM,QAAO;EAEjB,MAAM,WAAW,SAAS,WAAW,KAAK;AAE1C,UAAQ,QAAR;GACE,KAAK,OACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,UACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,SACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,UACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,UACH,QACE,oBAAC,MAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;;;CAKV,MAAM,UAAU,SAAS;AAEzB,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+EACA,oBAAoB,QACpB,oBAAoB,UACpB,UAAU,aAAa,gBACvB,UACD;YAPH;GASG,UAAU,SACT,oBAAC,OAAD;IACE,WAAW,GACT,8CACA,UACI,oCACA,mCACL;IACD,OAAO,EACL,iBAAiB,YAAY,gBAAgB,SAC9C;IACD,CAAA;GAEH,UAAU,UACT,oBAAC,OAAD;IAAK,WAAU;cACZ,SAAS;IACN,CAAA;GAER,oBAAC,OAAD;IACE,WAAW,GACT,2BACA,UAAU,4BAA4B,0BACvC;IACD,OAAO,EAAE,OAAO,iBAAiB,SAAS;cAEzC;IACG,CAAA;GACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/StatusLight/index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  AttentionCircleFill,\n  CancelledCircleFill,\n  CheckCircleFill,\n  CloseCircleFill,\n  InProgressFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface IProps {\n  size?: 'middle' | 'small';\n  style?: 'dot' | 'icon';\n  dotColor?: string;\n  icon?: React.ReactNode;\n  text: string;\n  status?: 'info' | 'neutral' | 'danger' | 'success' | 'warning';\n  className?: string;\n}\n\nconst statusDotColors: Record<string, string> = {\n  info: 'var(--background-informative-strong)',\n  neutral: 'var(--background-neutral-strong)',\n  danger: 'var(--background-negative-strong)',\n  success: 'var(--background-positive-strong)',\n  warning: 'var(--background-warning-strong)',\n};\n\nconst statusTextColors: Record<string, string> = {\n  info: 'var(--content-informative-primary)',\n  neutral: 'var(--content-primary)',\n  danger: 'var(--content-negative-primary)',\n  success: 'var(--content-positive-primary)',\n  warning: 'var(--content-warning-primary)',\n};\n\nfunction StatusLight({\n  size = 'middle',\n  style = 'dot',\n  dotColor,\n  icon,\n  text,\n  status = 'info',\n  className,\n}: IProps) {\n  const getIcon = () => {\n    if (icon) return icon;\n\n    const iconSize = size === 'middle' ? 20 : 16;\n\n    switch (status) {\n      case 'info':\n        return (\n          <InProgressFill\n            color=\"var(--background-informative-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'neutral':\n        return (\n          <CancelledCircleFill\n            color=\"var(--background-neutral-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'danger':\n        return (\n          <CloseCircleFill\n            color=\"var(--background-negative-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'success':\n        return (\n          <CheckCircleFill\n            color=\"var(--background-positive-strong)\"\n            size={iconSize}\n          />\n        );\n      case 'warning':\n        return (\n          <AttentionCircleFill\n            color=\"var(--background-warning-strong)\"\n            size={iconSize}\n          />\n        );\n    }\n  };\n\n  const isSmall = size === 'small';\n\n  return (\n    <div\n      className={cn(\n        'ald-status-light tw-flex tw-cursor-default tw-items-center tw-justify-start',\n        `ald-status-light-${size}`,\n        `ald-status-light-${status}`,\n        isSmall ? 'tw-gap-1' : 'tw-gap-[6px]',\n        className,\n      )}\n    >\n      {style === 'dot' && (\n        <div\n          className={cn(\n            'ald-prefix-dot tw-shrink-0 tw-rounded-full',\n            isSmall\n              ? 'tw-size-[var(--global-grid-75)]'\n              : 'tw-size-[var(--global-grid-100)]',\n          )}\n          style={{\n            backgroundColor: dotColor || statusDotColors[status],\n          }}\n        />\n      )}\n      {style === 'icon' && (\n        <div className=\"ald-prefix-icon tw-flex tw-h-full tw-items-center\">\n          {getIcon()}\n        </div>\n      )}\n      <div\n        className={cn(\n          'ald-text tw-font-normal',\n          isSmall ? 'tw-text-xs tw-leading-4' : 'tw-text-sm tw-leading-5',\n        )}\n        style={{ color: statusTextColors[status] }}\n      >\n        {text}\n      </div>\n    </div>\n  );\n}\n\nexport default StatusLight;\n"],"mappings":";;;;;;;;;AAoBA,IAAM,kBAA0C;CAC9C,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACV;AAED,IAAM,mBAA2C;CAC/C,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACV;AAED,SAAS,YAAY,EACnB,OAAO,UACP,QAAQ,OACR,UACA,MACA,MACA,SAAS,QACT,aACS;CACT,MAAM,gBAAgB;AACpB,MAAI,KAAM,QAAO;EAEjB,MAAM,WAAW,SAAS,WAAW,KAAK;AAE1C,UAAQ,QAAR;GACE,KAAK,OACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,UACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,SACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,UACH,QACE,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;GAEN,KAAK,UACH,QACE,oBAAC,MAAD;IACE,OAAM;IACN,MAAM;IACN,CAAA;;;CAKV,MAAM,UAAU,SAAS;AAEzB,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+EACA,oBAAoB,QACpB,oBAAoB,UACpB,UAAU,aAAa,gBACvB,UACD;YAPH;GASG,UAAU,SACT,oBAAC,OAAD;IACE,WAAW,GACT,8CACA,UACI,oCACA,mCACL;IACD,OAAO,EACL,iBAAiB,YAAY,gBAAgB,SAC9C;IACD,CAAA;GAEH,UAAU,UACT,oBAAC,OAAD;IAAK,WAAU;cACZ,SAAS;IACN,CAAA;GAER,oBAAC,OAAD;IACE,WAAW,GACT,2BACA,UAAU,4BAA4B,0BACvC;IACD,OAAO,EAAE,OAAO,iBAAiB,SAAS;cAEzC;IACG,CAAA;GACF"}

package/dist/Steps/components/CustomDot/index.js

@@ -1,2 +1,9 @@
-// type-only module stub
-export {};
+import { ProcessIcon } from "../ProcessIcon/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Steps/components/CustomDot/index.tsx
+var CustomDot = (_dot, { status }) => /* @__PURE__ */ jsx(ProcessIcon, { type: status });
+//#endregion
+export { CustomDot };
+
+//# sourceMappingURL=index.js.map

package/dist/Steps/components/CustomDot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/CustomDot/index.tsx"],"sourcesContent":["import React from 'react';\nimport { ProcessIcon } from '../ProcessIcon';\n\nexport const CustomDot = (\n  _dot: React.ReactNode,\n  { status }: { status: string },\n) => <ProcessIcon type={status as 'process' | 'wait' | 'finish' | 'error'} />;\n"],"mappings":";;;;AAGA,IAAa,aACX,MACA,EAAE,aACC,oBAAC,aAAD,EAAa,MAAM,QAAqD,CAAA"}

package/dist/Steps/components/ProcessIcon/index.d.ts

@@ -1,5 +1,6 @@
 interface IProcessIconProps {
+    size?: number;
     type: 'process' | 'wait' | 'finish' | 'error';
 }
-export declare function ProcessIcon({ type }: IProcessIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProcessIcon({ size, type }: IProcessIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Steps/components/ProcessIcon/index.js

@@ -2,35 +2,56 @@ import { cn } from "../../../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Steps/components/ProcessIcon/index.tsx
-function ProcessIcon({ type }) {
-	const baseClass = "tw-flex tw-size-4 tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]";
+function ProcessIcon({ size = 16, type }) {
+	const baseClass = "tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]";
+	const iconStyle = {
+		height: size,
+		width: size
+	};
+	const innerDotSize = Math.max(6, Math.round(size * .375));
 	if (type === "finish") return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-bg-[var(--interaction-default-hover)]"),
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-bg-[var(--border-brand-strong)]"),
+		style: iconStyle,
 		children: /* @__PURE__ */ jsx("img", {
 			style: {
-				width: 10,
-				height: 8
+				height: Math.round(size * .5),
+				width: Math.round(size * .625)
 			},
 			src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDExIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjc1IDcuOTQzMjVMMCA0LjE5MzI1TDEuMTkzMjUgM0wzLjc1IDUuNTU2NzVMOS4zMDc1IDBMMTAuNTAzNyAxLjE4ODc1TDMuNzUgNy45NDMyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="
 		})
 	});
 	if (type === "error") return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-bg-[var(--background-negative-strong,#ef4444)]"),
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-bg-[var(--background-negative-strong)]"),
+		style: iconStyle,
 		children: /* @__PURE__ */ jsx("img", {
 			style: {
-				width: 3,
-				height: 10
+				height: Math.round(size * .625),
+				width: Math.round(size * .188)
 			},
 			src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDMgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjI4MTI1IDBIMS45Njg3NVY2LjVIMC4yODEyNVYwWk0xLjEyNSAxMEMwLjkwMjUgMTAgMC42ODQ5OSA5LjkzNDA0IDAuNDk5OTggOS44MTA0MkMwLjMxNDk4IDkuNjg2OCAwLjE3MDc4IDkuNTExMTMgMC4wODU2NCA5LjMwNTU1QzAuMDAwNDkgOS4wOTk5OCAtMC4wMjE3OSA4Ljg3Mzc4IDAuMDIxNjIgOC42NTU1NUMwLjA2NTAzIDguNDM3MzIgMC4xNzIxNyA4LjIzNjg0IDAuMzI5NTEgOC4wNzk1MUMwLjQ4Njg0IDcuOTIyMTcgMC42ODczIDcuODE1MDQgMC45MDU1MiA3Ljc3MTYzQzEuMTIzNzUgNy43MjgyMiAxLjM0OTk1IDcuNzUwNTEgMS41NTU1MiA3LjgzNTY0QzEuNzYxMDkgNy45MjA3OCAxLjkzNjc5IDguMDY0OTggMi4wNjA0IDguMjVDMi4xODQwMiA4LjQzNTAyIDIuMjUgOC42NTI1MSAyLjI1IDguODc1QzIuMjUgOS4xNzMzNyAyLjEzMTQ3IDkuNDU5NTIgMS45MjA1IDkuNjcwNDlDMS43MDk1MiA5Ljg4MTQ3IDEuNDIzMzcgMTAgMS4xMjUgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"
 		})
 	});
 	if (type === "process") return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-relative tw-bg-[var(--interaction-default-hover)]"),
-		children: /* @__PURE__ */ jsx("span", { className: "tw-size-1.5 tw-rounded-full tw-bg-white" })
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-relative tw-bg-[var(--border-brand-strong)]"),
+		style: iconStyle,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tw-rounded-full tw-bg-[var(--background-default)]",
+			style: {
+				height: innerDotSize,
+				width: innerDotSize
+			}
+		})
 	});
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-relative tw-bg-[var(--alias-colors-icon-subtle)]"),
-		children: /* @__PURE__ */ jsx("span", { className: "tw-size-1.5 tw-rounded-full tw-bg-[var(--background-default)]" })
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-relative tw-bg-[var(--content-secondary)]"),
+		style: iconStyle,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tw-rounded-full tw-bg-[var(--background-default)]",
+			style: {
+				height: innerDotSize,
+				width: innerDotSize
+			}
+		})
 	});
 }
 //#endregion

package/dist/Steps/components/ProcessIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/ProcessIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\n\ninterface IProcessIconProps {\n  type: 'process' | 'wait' | 'finish' | 'error';\n}\n\nexport function ProcessIcon({ type }: IProcessIconProps) {\n  const baseClass =\n    'tw-flex tw-size-4 tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]';\n\n  if (type === 'finish')\n    return (\n      <span\n        className={cn(baseClass, 'tw-bg-[var(--interaction-default-hover)]')}\n      >\n        <img\n          style={{ width: 10, height: 8 }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDExIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjc1IDcuOTQzMjVMMCA0LjE5MzI1TDEuMTkzMjUgM0wzLjc1IDUuNTU2NzVMOS4zMDc1IDBMMTAuNTAzNyAxLjE4ODc1TDMuNzUgNy45NDMyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"\n        />\n      </span>\n    );\n\n  if (type === 'error')\n    return (\n      <span\n        className={cn(\n          baseClass,\n          'tw-bg-[var(--background-negative-strong,#ef4444)]',\n        )}\n      >\n        <img\n          style={{ width: 3, height: 10 }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDMgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjI4MTI1IDBIMS45Njg3NVY2LjVIMC4yODEyNVYwWk0xLjEyNSAxMEMwLjkwMjUgMTAgMC42ODQ5OSA5LjkzNDA0IDAuNDk5OTggOS44MTA0MkMwLjMxNDk4IDkuNjg2OCAwLjE3MDc4IDkuNTExMTMgMC4wODU2NCA5LjMwNTU1QzAuMDAwNDkgOS4wOTk5OCAtMC4wMjE3OSA4Ljg3Mzc4IDAuMDIxNjIgOC42NTU1NUMwLjA2NTAzIDguNDM3MzIgMC4xNzIxNyA4LjIzNjg0IDAuMzI5NTEgOC4wNzk1MUMwLjQ4Njg0IDcuOTIyMTcgMC42ODczIDcuODE1MDQgMC45MDU1MiA3Ljc3MTYzQzEuMTIzNzUgNy43MjgyMiAxLjM0OTk1IDcuNzUwNTEgMS41NTU1MiA3LjgzNTY0QzEuNzYxMDkgNy45MjA3OCAxLjkzNjc5IDguMDY0OTggMi4wNjA0IDguMjVDMi4xODQwMiA4LjQzNTAyIDIuMjUgOC42NTI1MSAyLjI1IDguODc1QzIuMjUgOS4xNzMzNyAyLjEzMTQ3IDkuNDU5NTIgMS45MjA1IDkuNjcwNDlDMS43MDk1MiA5Ljg4MTQ3IDEuNDIzMzcgMTAgMS4xMjUgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K\"\n        />\n      </span>\n    );\n\n  if (type === 'process')\n    return (\n      <span\n        className={cn(\n          baseClass,\n          'tw-relative tw-bg-[var(--interaction-default-hover)]',\n        )}\n      >\n        <span className=\"tw-size-1.5 tw-rounded-full tw-bg-white\" />\n      </span>\n    );\n\n  // wait\n  return (\n    <span\n      className={cn(\n        baseClass,\n        'tw-relative tw-bg-[var(--alias-colors-icon-subtle)]',\n      )}\n    >\n      <span className=\"tw-size-1.5 tw-rounded-full tw-bg-[var(--background-default)]\" />\n    </span>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,YAAY,EAAE,QAA2B;CACvD,MAAM,YACJ;AAEF,KAAI,SAAS,SACX,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,WAAW,2CAA2C;YAEpE,oBAAC,OAAD;GACE,OAAO;IAAE,OAAO;IAAI,QAAQ;IAAG;GAC/B,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,QACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,WACA,oDACD;YAED,oBAAC,OAAD;GACE,OAAO;IAAE,OAAO;IAAG,QAAQ;IAAI;GAC/B,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,UACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,WACA,uDACD;YAED,oBAAC,QAAD,EAAM,WAAU,2CAA4C,CAAA;EACvD,CAAA;AAIX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,WACA,sDACD;YAED,oBAAC,QAAD,EAAM,WAAU,iEAAkE,CAAA;EAC7E,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/ProcessIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\n\ninterface IProcessIconProps {\n  size?: number;\n  type: 'process' | 'wait' | 'finish' | 'error';\n}\n\nexport function ProcessIcon({ size = 16, type }: IProcessIconProps) {\n  const baseClass =\n    'tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]';\n  const iconStyle = { height: size, width: size };\n  const innerDotSize = Math.max(6, Math.round(size * 0.375));\n\n  if (type === 'finish')\n    return (\n      <span\n        className={cn(\n          `${type}-icon-box icon-box`,\n          baseClass,\n          'tw-bg-[var(--border-brand-strong)]',\n        )}\n        style={iconStyle}\n      >\n        <img\n          style={{\n            height: Math.round(size * 0.5),\n            width: Math.round(size * 0.625),\n          }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDExIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjc1IDcuOTQzMjVMMCA0LjE5MzI1TDEuMTkzMjUgM0wzLjc1IDUuNTU2NzVMOS4zMDc1IDBMMTAuNTAzNyAxLjE4ODc1TDMuNzUgNy45NDMyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"\n        />\n      </span>\n    );\n\n  if (type === 'error')\n    return (\n      <span\n        className={cn(\n          `${type}-icon-box icon-box`,\n          baseClass,\n          'tw-bg-[var(--background-negative-strong)]',\n        )}\n        style={iconStyle}\n      >\n        <img\n          style={{\n            height: Math.round(size * 0.625),\n            width: Math.round(size * 0.188),\n          }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDMgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjI4MTI1IDBIMS45Njg3NVY2LjVIMC4yODEyNVYwWk0xLjEyNSAxMEMwLjkwMjUgMTAgMC42ODQ5OSA5LjkzNDA0IDAuNDk5OTggOS44MTA0MkMwLjMxNDk4IDkuNjg2OCAwLjE3MDc4IDkuNTExMTMgMC4wODU2NCA5LjMwNTU1QzAuMDAwNDkgOS4wOTk5OCAtMC4wMjE3OSA4Ljg3Mzc4IDAuMDIxNjIgOC42NTU1NUMwLjA2NTAzIDguNDM3MzIgMC4xNzIxNyA4LjIzNjg0IDAuMzI5NTEgOC4wNzk1MUMwLjQ4Njg0IDcuOTIyMTcgMC42ODczIDcuODE1MDQgMC45MDU1MiA3Ljc3MTYzQzEuMTIzNzUgNy43MjgyMiAxLjM0OTk1IDcuNzUwNTEgMS41NTU1MiA3LjgzNTY0QzEuNzYxMDkgNy45MjA3OCAxLjkzNjc5IDguMDY0OTggMi4wNjA0IDguMjVDMi4xODQwMiA4LjQzNTAyIDIuMjUgOC42NTI1MSAyLjI1IDguODc1QzIuMjUgOS4xNzMzNyAyLjEzMTQ3IDkuNDU5NTIgMS45MjA1IDkuNjcwNDlDMS43MDk1MiA5Ljg4MTQ3IDEuNDIzMzcgMTAgMS4xMjUgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K\"\n        />\n      </span>\n    );\n\n  if (type === 'process')\n    return (\n      <span\n        className={cn(\n          `${type}-icon-box icon-box`,\n          baseClass,\n          'tw-relative tw-bg-[var(--border-brand-strong)]',\n        )}\n        style={iconStyle}\n      >\n        <span\n          className=\"tw-rounded-full tw-bg-[var(--background-default)]\"\n          style={{ height: innerDotSize, width: innerDotSize }}\n        />\n      </span>\n    );\n\n  // wait\n  return (\n    <span\n      className={cn(\n        `${type}-icon-box icon-box`,\n        baseClass,\n        'tw-relative tw-bg-[var(--content-secondary)]',\n      )}\n      style={iconStyle}\n    >\n      <span\n        className=\"tw-rounded-full tw-bg-[var(--background-default)]\"\n        style={{ height: innerDotSize, width: innerDotSize }}\n      />\n    </span>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,YAAY,EAAE,OAAO,IAAI,QAA2B;CAClE,MAAM,YACJ;CACF,MAAM,YAAY;EAAE,QAAQ;EAAM,OAAO;EAAM;CAC/C,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,KAAM,CAAC;AAE1D,KAAI,SAAS,SACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,qCACD;EACD,OAAO;YAEP,oBAAC,OAAD;GACE,OAAO;IACL,QAAQ,KAAK,MAAM,OAAO,GAAI;IAC9B,OAAO,KAAK,MAAM,OAAO,KAAM;IAChC;GACD,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,QACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,4CACD;EACD,OAAO;YAEP,oBAAC,OAAD;GACE,OAAO;IACL,QAAQ,KAAK,MAAM,OAAO,KAAM;IAChC,OAAO,KAAK,MAAM,OAAO,KAAM;IAChC;GACD,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,UACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,iDACD;EACD,OAAO;YAEP,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,QAAQ;IAAc,OAAO;IAAc;GACpD,CAAA;EACG,CAAA;AAIX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,+CACD;EACD,OAAO;YAEP,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,QAAQ;IAAc,OAAO;IAAc;GACpD,CAAA;EACG,CAAA"}