@marigold/components 3.0.3 → 3.0.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ThemeProviderProps, GlobalProps } from '@marigold/system';
+import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
 import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, NonZeroPercentage } from '@marigold/types';
@@ -167,8 +167,10 @@ interface HeadlineThemeExtension extends ThemeExtension<'Headline'> {
 interface HeadlineProps extends ThemeComponentProps, ComponentProps<'h1'> {
     children?: ReactNode;
     level?: '1' | '2' | '3' | '4' | '5' | '6';
+    align?: CSSObject['textAlign'];
+    color?: string;
 }
-declare const Headline: ({ children, variant, size, level, ...props }: HeadlineProps) => JSX.Element;
+declare const Headline: ({ children, variant, size, align, color, level, ...props }: HeadlineProps) => JSX.Element;
 
 interface HelpTextThemeExtension extends ThemeExtensionsWithParts<'HelpText', ['container', 'icon']> {
 }
@@ -640,7 +642,10 @@ interface TilesProps {
     children: ReactNode;
     space?: ResponsiveStyleValue<string>;
     itemMinWidth?: ResponsiveStyleValue<string>;
+    gridAutoRows?: boolean;
 }
 declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, extendTheme, useCheckboxGroupContext };
+declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
+
+export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, XLoader, extendTheme, useCheckboxGroupContext };

package/dist/index.js

@@ -73,6 +73,7 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
+  XLoader: () => XLoader,
   extendTheme: () => extendTheme,
   useAsyncList: () => import_data.useAsyncList,
   useCheckboxGroupContext: () => useCheckboxGroupContext,
@@ -644,6 +645,8 @@ var Headline = ({
   children,
   variant,
   size,
+  align,
+  color,
   level = "1",
   ...props
 }) => {
@@ -654,7 +657,7 @@ var Headline = ({
   return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
     as: `h${level}`,
     ...props,
-    css: styles
+    css: [styles, { color, textAlign: align }]
   }, children);
 };
 
@@ -2673,12 +2676,19 @@ var TextField = (0, import_react67.forwardRef)(
 // src/Tiles/Tiles.tsx
 var import_react68 = __toESM(require("react"));
 var Tiles = import_react68.default.forwardRef(
-  ({ space = "none", itemMinWidth = "250px", children, ...props }, ref) => /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
+  ({
+    space = "none",
+    itemMinWidth = "250px",
+    gridAutoRows,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
     ref,
     display: "grid",
     __baseCSS: {
       gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
+      gridAutoRows: gridAutoRows ? "1fr" : "none"
     },
     ...props
   }, children)
@@ -2783,6 +2793,131 @@ var Tooltip = ({ children, variant, size }) => {
   }));
 };
 Tooltip.Trigger = TooltipTrigger;
+
+// src/XLoader/XLoader.tsx
+var import_system51 = require("@marigold/system");
+var import_react72 = __toESM(require("react"));
+var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ import_react72.default.createElement(import_system51.SVG, {
+  id: "XLoader",
+  xmlns: "http://www.w3.org/2000/svg",
+  size: 150,
+  viewBox: "0 0 150 150",
+  ...props,
+  ...ref
+}, /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_1_",
+  d: "M35.3 27h26.5l54 74.1H88.7z"
+}), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_5_",
+  d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "1.1s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_18_",
+  d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.9s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_19_",
+  d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.8s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_20_",
+  d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1;",
+  begin: "0.7s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_21_",
+  d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.6s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_22_",
+  d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.5s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_23_",
+  d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.4s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_24_",
+  d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.3s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_25_",
+  d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.2s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_26_",
+  d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.1s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ import_react72.default.createElement("path", {
+  id: "XMLID_27_",
+  d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ import_react72.default.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.1s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+}))));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Aside,
@@ -2832,6 +2967,7 @@ Tooltip.Trigger = TooltipTrigger;
   Tooltip,
   Underlay,
   VisuallyHidden,
+  XLoader,
   extendTheme,
   useAsyncList,
   useCheckboxGroupContext,

package/dist/index.mjs

@@ -592,6 +592,8 @@ var Headline = ({
   children,
   variant,
   size,
+  align,
+  color,
   level = "1",
   ...props
 }) => {
@@ -602,7 +604,7 @@ var Headline = ({
   return /* @__PURE__ */ React15.createElement(Box8, {
     as: `h${level}`,
     ...props,
-    css: styles
+    css: [styles, { color, textAlign: align }]
   }, children);
 };
 
@@ -2682,12 +2684,19 @@ var TextField = forwardRef14(
 // src/Tiles/Tiles.tsx
 import React62 from "react";
 var Tiles = React62.forwardRef(
-  ({ space = "none", itemMinWidth = "250px", children, ...props }, ref) => /* @__PURE__ */ React62.createElement(Box, {
+  ({
+    space = "none",
+    itemMinWidth = "250px",
+    gridAutoRows,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ React62.createElement(Box, {
     ref,
     display: "grid",
     __baseCSS: {
       gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
+      gridAutoRows: gridAutoRows ? "1fr" : "none"
     },
     ...props
   }, children)
@@ -2795,6 +2804,131 @@ var Tooltip = ({ children, variant, size }) => {
   }));
 };
 Tooltip.Trigger = TooltipTrigger;
+
+// src/XLoader/XLoader.tsx
+import { SVG } from "@marigold/system";
+import React65, { forwardRef as forwardRef15 } from "react";
+var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement(SVG, {
+  id: "XLoader",
+  xmlns: "http://www.w3.org/2000/svg",
+  size: 150,
+  viewBox: "0 0 150 150",
+  ...props,
+  ...ref
+}, /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_1_",
+  d: "M35.3 27h26.5l54 74.1H88.7z"
+}), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_5_",
+  d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "1.1s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_18_",
+  d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.9s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_19_",
+  d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.8s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_20_",
+  d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1;",
+  begin: "0.7s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_21_",
+  d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.6s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_22_",
+  d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.5s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_23_",
+  d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.4s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_24_",
+  d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.3s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_25_",
+  d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.2s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_26_",
+  d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.1s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+})), /* @__PURE__ */ React65.createElement("path", {
+  id: "XMLID_27_",
+  d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
+}, /* @__PURE__ */ React65.createElement("animate", {
+  attributeName: "opacity",
+  attributeType: "XML",
+  values: "1; .01; 1; 1; 1;",
+  begin: "0.1s",
+  dur: "2.5s",
+  repeatCount: "indefinite"
+}))));
 export {
   Aside,
   Aspect,
@@ -2843,6 +2977,7 @@ export {
   Tooltip,
   Underlay,
   VisuallyHidden,
+  XLoader,
   extendTheme,
   useAsyncList,
   useCheckboxGroupContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,8 +23,8 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.1.3",
-    "@marigold/system": "3.0.3",
+    "@marigold/icons": "1.1.5",
+    "@marigold/system": "3.0.5",
     "@marigold/tokens": "3.1.0",
     "@marigold/types": "0.5.4",
     "@react-aria/button": "3.6.2",