@janbox/storefront-ui 2.0.26 → 2.0.28

package/dist/components/index.d.ts

@@ -1,4 +1,3 @@
 export * from './svg-loader';
 export * from './scroll-view';
 export * from './virtualized-list';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/scroll-view.d.ts

@@ -2,4 +2,3 @@ import { OverlayScrollbarsComponentProps, OverlayScrollbarsComponentRef } from '
 export type ScrollViewProps = OverlayScrollbarsComponentProps;
 export type ScrollViewRef = OverlayScrollbarsComponentRef;
 export declare const ScrollView: ({ children, options, ...props }: ScrollViewProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=scroll-view.d.ts.map

package/dist/components/svg-loader.d.ts

@@ -3,4 +3,3 @@ export type SvgLoaderProps = JSX.IntrinsicElements['svg'] & {
     source: string;
 };
 export declare const SvgLoader: import('react').ForwardRefExoticComponent<Omit<SvgLoaderProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=svg-loader.d.ts.map

package/dist/components/virtualized-list.d.ts

@@ -12,4 +12,3 @@ type VirtualizedListProps = ShallowMerge<JSX.IntrinsicElements['div'], {
 }>;
 export type { VirtualItem, VirtualizedListProps, VirtualizedListOptions };
 export declare const VirtualizedList: ({ RowComponent, options, ref, ...props }: VirtualizedListProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=virtualized-list.d.ts.map

package/dist/constants/emotion.d.ts

@@ -5,4 +5,3 @@ export declare const animateSpinStyle: StyledCSS;
 export declare const truncateStyle: StyledCSS;
 export declare const pointerEventsNone: StyledCSS;
 export declare const containerStyle: StyledCSS;
-//# sourceMappingURL=emotion.d.ts.map

package/dist/constants/index.d.ts

@@ -17,4 +17,3 @@ export declare enum Booleanish {
     True = "true",
     False = "false"
 }
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './use-window-screen';
-export * from './use-ripple-effect';
 export * from './use-controllable-state';
 export * from './use-countdown-timer';
 export * from './use-query-params';
@@ -7,4 +6,3 @@ export * from './use-first-mount-state';
 export * from './use-update-effect';
 export * from './use-deep-compare-effect';
 export * from './use-formatter';
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.js

@@ -1,5 +1,4 @@
 import { useWindowScreen } from "./use-window-screen/index.js";
-import { useRippleEffect } from "./use-ripple-effect/index.js";
 import { useControllableState } from "./use-controllable-state.js";
 import { useCountdownTimer } from "./use-countdown-timer.js";
 import { useQueryParams } from "./use-query-params.js";
@@ -14,7 +13,6 @@ export {
   useFirstMountState,
   useFormatter,
   useQueryParams,
-  useRippleEffect,
   useUpdateEffect,
   useWindowScreen
 };

package/dist/hooks/use-controllable-state.d.ts

@@ -4,4 +4,3 @@ export declare const useControllableState: <T>({ defaultValue, value, deepCompar
     value?: T;
     deepCompare?: boolean;
 }) => readonly [T, Dispatch<SetStateAction<T>>];
-//# sourceMappingURL=use-controllable-state.d.ts.map

package/dist/hooks/use-countdown-timer.d.ts

@@ -11,4 +11,3 @@ type UseCountdownTimerProps = {
 };
 export declare const useCountdownTimer: ({ date, onFinish, omit }: UseCountdownTimerProps) => TimeDiff;
 export {};
-//# sourceMappingURL=use-countdown-timer.d.ts.map

package/dist/hooks/use-deep-compare-effect/index.d.ts

@@ -1,3 +1,2 @@
 import { DependencyList, EffectCallback } from 'react';
 export declare const useDeepCompareEffect: (effect: EffectCallback, deps: DependencyList) => void;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-first-mount-state/index.d.ts

@@ -1,2 +1 @@
 export declare function useFirstMountState(): boolean;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-formatter/index.d.ts

@@ -5,4 +5,3 @@ export declare const useFormatter: () => {
     formatDateTime: (value: Date | string | number, options: SetOptional<FormatDateTimeOptions, "lng">) => string;
     formatPrice: (value: number, options: SetOptional<FormatPriceOptions, "lng">) => string;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-is-hydrated/index.d.ts

@@ -1,2 +1 @@
 export declare function useIsHydrated(): boolean;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-query-params.d.ts

@@ -17,4 +17,3 @@ export declare function useQueryParams<T extends Record<string, any>>(config: Qu
     setQueryParams: (newParams: Partial<T>, navigateOpts?: NavigateOptions) => void;
 };
 export {};
-//# sourceMappingURL=use-query-params.d.ts.map

package/dist/hooks/use-toggle/index.d.ts

@@ -1,3 +1,2 @@
 import { Dispatch, SetStateAction } from 'react';
 export declare function useToggle(defaultValue?: boolean): [boolean, () => void, Dispatch<SetStateAction<boolean>>];
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-update-effect/index.d.ts

@@ -1,3 +1,2 @@
 import { DependencyList, EffectCallback } from 'react';
 export declare const useUpdateEffect: (effect: EffectCallback, deps: DependencyList) => void;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/use-window-screen/index.d.ts

@@ -4,4 +4,3 @@ export declare const useWindowScreen: () => {
     isSmallerThan: (target: Screen) => boolean;
     isLargerThan: (target: Screen) => boolean;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/i18n/index.d.ts

@@ -5,4 +5,3 @@ export declare const useTranslation: () => {
     t: (key: keyof typeof en) => string;
     locale: string;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from './lib';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -77,11 +77,12 @@ import { PriceLabel } from "./lib/price-label/price-label.js";
 import { Primitive } from "./lib/primitive/primitive.js";
 import { Progress } from "./lib/progress/progress.js";
 import { RadioButton } from "./lib/radio-button/radio-button.js";
+import { RippleEffect } from "./lib/ripple-effect/ripple-effect.js";
 import { Select } from "./lib/select/select.js";
 import { StarRating } from "./lib/star-rating/star-rating.js";
 import { Step } from "./lib/stepper/step.js";
 import { Stepper } from "./lib/stepper/stepper.js";
-import { SuspenseQuery } from "./lib/suspense-query/index.js";
+import { SuspenseQuery } from "./lib/suspense-query/suspense-query.js";
 import { Swiper } from "./lib/swiper/swiper/swiper.js";
 import { SwiperSlide } from "./lib/swiper/swiper-slide/swiper-slide.js";
 import { Switch } from "./lib/switch/switch.js";
@@ -223,6 +224,7 @@ export {
   Primitive,
   Progress,
   RadioButton,
+  RippleEffect,
   Select,
   StarRating,
   Step,

package/dist/lib/accordion/accordion/accordion.d.ts

@@ -1,3 +1,2 @@
 import { AccordionProps } from './types';
 export declare const Accordion: (_props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=accordion.d.ts.map

package/dist/lib/accordion/accordion/helpers.d.ts

@@ -9,4 +9,3 @@ export declare const getAccordionDataAttributes: (element: Element) => {
     openState: boolean;
 };
 export declare const getAccordionProps: (extended: AccordionProps) => AccordionProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion/index.d.ts

@@ -1,4 +1,3 @@
 export * from './accordion';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/accordion/accordion/types.d.ts

@@ -9,4 +9,3 @@ export interface AccordionExtendedProps {
     onOpenChange?: (open: boolean) => void;
 }
 export type AccordionProps = PrimitiveProps<JSX.IntrinsicElements['div'] & AccordionExtendedProps>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/accordion-content/accordion-content.d.ts

@@ -1,3 +1,2 @@
 import { AccordionContentProps } from './types';
 export declare const AccordionContent: ({ children, ref, ..._props }: AccordionContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=accordion-content.d.ts.map

package/dist/lib/accordion/accordion-content/helpers.d.ts

@@ -1,3 +1,2 @@
 import { AccordionContentProps } from './types';
 export declare const getAccordionContentProps: (...extended: Partial<AccordionContentProps>[]) => AccordionContentProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion-content/index.d.ts

@@ -1,4 +1,3 @@
 export * from './accordion-content';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/accordion/accordion-content/types.d.ts

@@ -7,4 +7,3 @@ interface AccordionContentExtendedProps {
 }
 export type AccordionContentProps = ShallowMerge<JSX.IntrinsicElements['div'], PropsWithSx<AccordionContentExtendedProps>>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/accordion-group/accordion-group.d.ts

@@ -1,3 +1,2 @@
 import { AccordionGroupProps } from './types';
-export declare const AccordionGroup: ({ ref, ..._props }: AccordionGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=accordion-group.d.ts.map
+export declare const AccordionGroup: ({ ref, ..._props }: AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/accordion/accordion-group/accordion-group.js

@@ -1,27 +1,16 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { useRef, useMemo } from "react";
-import { useMergeRefs } from "@floating-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { getAccordionGroupProps, AccordionGroupContext } from "./helpers.js";
 import { AccordionGroupDataAttributes } from "./types.js";
-import { createSxInterpolation } from "../../../utils/stylesheet.js";
+import { Primitive } from "../../primitive/primitive.js";
 const AccordionGroup = ({ ref, ..._props }) => {
   const {
     children,
-    sx,
     openMode = "multiple",
     accordionSummaryProps,
     accordionContentProps,
     ...rest
   } = getAccordionGroupProps(_props);
-  const rootEl = useRef(null);
-  const mergedRefs = useMergeRefs([ref, rootEl]);
-  const css = [
-    {
-      display: "flex",
-      flexDirection: "column"
-    },
-    createSxInterpolation(sx)
-  ];
   const contextValue = useMemo(
     () => ({
       accordionSummaryProps,
@@ -30,14 +19,18 @@ const AccordionGroup = ({ ref, ..._props }) => {
     [accordionSummaryProps, accordionContentProps]
   );
   return /* @__PURE__ */ jsx(AccordionGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
+    Primitive,
     {
-      css,
       ...rest,
       ...{
         [AccordionGroupDataAttributes.OpenMode]: openMode
       },
-      ref: mergedRefs,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        ...rest.sx
+      },
+      ref,
       children
     }
   ) });

package/dist/lib/accordion/accordion-group/helpers.d.ts

@@ -12,4 +12,3 @@ export declare const getAccordionGroupDataAttributes: (element: HTMLElement) =>
     openMode: Nullable<AccordionGroupOpenMode>;
 };
 export declare const getAccordionGroupProps: (extended: AccordionGroupProps) => AccordionGroupProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion-group/index.d.ts

@@ -1,4 +1,3 @@
 export * from './accordion-group';
 export * from './helpers';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/accordion/accordion-group/types.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { AccordionContentProps } from '../accordion-content';
 import { AccordionSummaryProps } from '../accordion-summary';
-import { PropsWithSx } from '../../../types';
+import { PrimitiveProps } from '../../primitive';
 export type AccordionGroupOpenMode = 'single' | 'multiple';
 export type AccordionGroupContextValue = Partial<{
     accordionSummaryProps?: Partial<AccordionSummaryProps>;
@@ -13,5 +13,4 @@ export declare enum AccordionGroupDataAttributes {
 export interface AccordionGroupExtendedProps extends AccordionGroupContextValue {
     openMode?: AccordionGroupOpenMode;
 }
-export type AccordionGroupProps = PropsWithSx<JSX.IntrinsicElements['div'] & AccordionGroupExtendedProps>;
-//# sourceMappingURL=types.d.ts.map
+export type AccordionGroupProps = PrimitiveProps<JSX.IntrinsicElements['div'] & AccordionGroupExtendedProps>;

package/dist/lib/accordion/accordion-summary/accordion-summary.d.ts

@@ -1,3 +1,2 @@
 import { AccordionSummaryProps } from './types';
 export declare const AccordionSummary: ({ children, ref, ..._props }: AccordionSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=accordion-summary.d.ts.map

package/dist/lib/accordion/accordion-summary/helpers.d.ts

@@ -1,3 +1,2 @@
 import { AccordionSummaryProps } from './types';
 export declare const getAccordionSummaryProps: (...extended: Partial<AccordionSummaryProps>[]) => AccordionSummaryProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/accordion/accordion-summary/index.d.ts

@@ -1,4 +1,3 @@
 export * from './accordion-summary';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/accordion/accordion-summary/types.d.ts

@@ -25,4 +25,3 @@ type AccordionSummaryExtendedProps = PropsWithSx<{
 }>;
 export type AccordionSummaryProps = ShallowMerge<JSX.IntrinsicElements['div'], AccordionSummaryExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/accordion/index.d.ts

@@ -2,4 +2,3 @@ export * from './accordion-group';
 export * from './accordion';
 export * from './accordion-summary';
 export * from './accordion-content';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/avatar/avatar.d.ts

@@ -1,3 +1,2 @@
 import { AvatarProps } from './types';
 export declare const Avatar: ({ ref, ..._props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=avatar.d.ts.map

package/dist/lib/avatar/helpers.d.ts

@@ -3,4 +3,3 @@ export declare const getAvatarProps: (props: AvatarProps) => AvatarProps;
 /** Resolve dimension from named size or custom number */
 export declare const getInitials: (name?: string) => string;
 export declare const getAvatarStatusColor: (status: AvatarStatus) => string | undefined;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/avatar/index.d.ts

@@ -1,3 +1,2 @@
 export * from './types';
 export * from './avatar';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/avatar/types.d.ts

@@ -16,4 +16,3 @@ export type AvatarProps = PropsWithSx<ShallowMerge<AvatarHTMLProps, ToResponsive
     color?: ColorVariant;
 }>>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/badge/badge.d.ts

@@ -1,3 +1,2 @@
 import { BadgeProps } from './types';
 export declare const Badge: ({ color, content, offset, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=badge.d.ts.map

package/dist/lib/badge/helpers.d.ts

@@ -1,3 +1,2 @@
 import { BadgeProps } from './types';
 export declare const getBadgeProps: (extended: BadgeProps) => BadgeProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/badge/index.d.ts

@@ -1,4 +1,3 @@
 export * from './badge';
 export * from './helpers';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/badge/types.d.ts

@@ -14,4 +14,3 @@ export type BadgeProps<T extends {
     offsetY?: number;
     children: ReactElement<T>;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/box/box.d.ts

@@ -1,3 +1,2 @@
 import { BoxProps } from './types';
 export declare const Box: ({ children, ref, ..._props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=box.d.ts.map

package/dist/lib/box/helpers.d.ts

@@ -1,3 +1,2 @@
 import { BoxProps } from './types';
 export declare const getBoxProps: (extended: BoxProps) => BoxProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/box/index.d.ts

@@ -1,4 +1,3 @@
 export * from './box';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/box/types.d.ts

@@ -5,4 +5,3 @@ type BoxExtendedProps = {
 };
 export type BoxProps = PrimitiveProps<JSX.IntrinsicElements['div']> & BoxExtendedProps;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/breadcrumbs/breadcrumb-item/breadcrumb-item.d.ts

@@ -1,3 +1,2 @@
 import { BreadcrumbItemProps } from './types';
 export declare const BreadcrumbItem: ({ children, icon, ...props }: BreadcrumbItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=breadcrumb-item.d.ts.map

package/dist/lib/breadcrumbs/breadcrumb-item/index.d.ts

@@ -1,3 +1,2 @@
 export * from './breadcrumb-item';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/breadcrumbs/breadcrumb-item/types.d.ts

@@ -4,4 +4,3 @@ import { ShallowMerge } from '../../../types';
 export type BreadcrumbItemProps = ShallowMerge<LinkProps, {
     icon?: IconProps;
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/breadcrumbs/breadcrumbs/breadcrumbs.d.ts

@@ -1,3 +1,2 @@
 import { BreadcrumbsProps } from './types';
 export declare const Breadcrumbs: ({ separator, children, color, ...props }: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/lib/breadcrumbs/breadcrumbs/index.d.ts

@@ -1,2 +1 @@
 export * from './breadcrumbs';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/breadcrumbs/breadcrumbs/types.d.ts

@@ -7,4 +7,3 @@ export type BreadcrumbsProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     color?: ColorVariant;
 }>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/breadcrumbs/index.d.ts

@@ -1,3 +1,2 @@
 export * from './breadcrumb-item';
 export * from './breadcrumbs';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/button/button.d.ts

@@ -1,3 +1,2 @@
 import { ButtonProps } from './types';
 export declare const Button: ({ children, ref, ..._props }: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=button.d.ts.map

package/dist/lib/button/button.js

@@ -4,18 +4,17 @@ import { useMergeRefs } from "@floating-ui/react";
 import { isNil, isString } from "lodash-es";
 import { useNavigate, createPath } from "react-router";
 import { getButtonProps, getButtonCssBySize } from "./helpers.js";
-import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
 import { truncateStyle, animateSpinStyle } from "../../constants/emotion.js";
 import LoadingIcon from "../../assets/svg/loading-waiting.svg.js";
 import { mediaQuery } from "../../theme/screens.js";
 import { getColorVar } from "../../theme/palette.js";
 import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
-import { createSxInterpolation, cn } from "../../utils/stylesheet.js";
+import { createSxInterpolation } from "../../utils/stylesheet.js";
+import { RippleEffect } from "../ripple-effect/ripple-effect.js";
 import { Icon } from "../icon/icon.js";
 import { Primitive } from "../primitive/primitive.js";
 const Button = ({ children, ref, ..._props }) => {
   const buttonRef = useRef(null);
-  const { className } = useRippleEffect(buttonRef);
   const mergedRef = useMergeRefs([ref, buttonRef]);
   const {
     color,
@@ -51,6 +50,7 @@ const Button = ({ children, ref, ..._props }) => {
       maxWidth: "100%",
       width: "fit-content",
       position: "relative",
+      overflow: "hidden",
       justifyContent: "center",
       alignItems: "center",
       whiteSpace: "nowrap",
@@ -141,83 +141,73 @@ const Button = ({ children, ref, ..._props }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      css,
-      disabled,
-      ...rest,
-      onClick,
-      className: cn(rest.className, className),
-      ref: mergedRef,
-      children: [
-        prefix,
-        !!startIcon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: getSizeVariantState(size).iconSize,
-            ...startIcon,
-            sx: {
-              flexShrink: 0,
-              ...startIcon.sx
-            },
-            sm: {
-              size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-              ...startIcon.sm
-            },
-            md: {
-              size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-              ...startIcon.md
-            },
-            lg: {
-              size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-              ...startIcon.lg
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
-        !!endIcon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: getSizeVariantState(size).iconSize,
-            ...endIcon,
-            sx: {
-              flexShrink: 0,
-              ...endIcon.sx
-            },
-            sm: {
-              size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
-              ...endIcon.sm
-            },
-            md: {
-              size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
-              ...endIcon.md
-            },
-            lg: {
-              size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
-              ...endIcon.lg
-            }
-          }
-        ),
-        suffix,
-        isLoading && /* @__PURE__ */ jsx(
-          Primitive,
-          {
-            "data-loading": true,
-            sx: {
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            as: "span",
-            children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("button", { css, disabled, ...rest, onClick, ref: mergedRef, children: [
+    prefix,
+    !!startIcon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: getSizeVariantState(size).iconSize,
+        ...startIcon,
+        sx: {
+          flexShrink: 0,
+          ...startIcon.sx
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...startIcon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...startIcon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...startIcon.lg
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Fragment, { children: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML, css: truncateStyle, children }) }),
+    !!endIcon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: getSizeVariantState(size).iconSize,
+        ...endIcon,
+        sx: {
+          flexShrink: 0,
+          ...endIcon.sx
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize,
+          ...endIcon.sm
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize,
+          ...endIcon.md
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize,
+          ...endIcon.lg
+        }
+      }
+    ),
+    suffix,
+    isLoading && /* @__PURE__ */ jsx(
+      Primitive,
+      {
+        "data-loading": true,
+        sx: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        as: "span",
+        children: /* @__PURE__ */ jsx(Icon, { css: animateSpinStyle, source: LoadingIcon })
+      }
+    ),
+    /* @__PURE__ */ jsx(RippleEffect, {})
+  ] });
 };
 const createStyle = ({ size } = {}) => {
   return [getButtonCssBySize(size)];

package/dist/lib/button/helpers.d.ts

@@ -2,4 +2,3 @@ import { ButtonProps } from './types';
 import { SizeVariant, StyledCSS } from '../../types';
 export declare const getButtonCssBySize: (size?: SizeVariant) => StyledCSS;
 export declare const getButtonProps: (extended: ButtonProps) => ButtonProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/button/index.d.ts

@@ -1,4 +1,3 @@
 export * from './button';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map