@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.1

package/dist/js/packages/components/src/components/Button/Button.mjs

@@ -1,132 +1,124 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './Button.module.scss.mjs';
-import * as Aria from 'react-aria-components';
-import clsx from 'clsx';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import 'react';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconFailed } from '../Icon/components/icons/IconFailed.mjs';
-import { IconSucceeded } from '../Icon/components/icons/IconSucceeded.mjs';
-import { Wrap } from '../Wrap/Wrap.mjs';
-import { Text } from '../Text/Text.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.mjs';
-import { useAriaAnnounceActionState } from '../Action/lib/ariaLive.mjs';
-import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
-
-const disablePendingProps = (props) => {
-  if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly) {
-    props = { ...props };
-    const mutedActionHandler = (e) => {
-      if (e && typeof e === "object") {
-        const isReactAriaEvent = "continuePropagation" in e && typeof e.continuePropagation === "function";
-        if (!isReactAriaEvent && "stopPropagation" in e && typeof e.stopPropagation === "function") {
-          e.stopPropagation();
-        }
-        if ("preventDefault" in e && typeof e.preventDefault === "function") {
-          e.preventDefault();
-        }
-      }
-      return false;
-    };
-    props.onClick = mutedActionHandler;
-    props.onPress = mutedActionHandler;
-    props.onPressStart = mutedActionHandler;
-    props.onPressEnd = mutedActionHandler;
-    props.onPressChange = mutedActionHandler;
-    props.onPressUp = mutedActionHandler;
-    props.onKeyDown = mutedActionHandler;
-    props.onKeyUp = mutedActionHandler;
-  }
-  return props;
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import Button_module_default from "./Button.module.mjs";
+import { extractTextFromFirstChild } from "../../lib/react/remote.mjs";
+import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { IconFailed } from "../Icon/components/icons/IconFailed.mjs";
+import { IconSucceeded } from "../Icon/components/icons/IconSucceeded.mjs";
+import { Wrap } from "../Wrap/Wrap.mjs";
+import { Text } from "../Text/Text.mjs";
+import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner.mjs";
+import { useAriaAnnounceActionState } from "../Action/lib/ariaLive.mjs";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { filterDOMProps } from "@react-aria/utils";
+import * as Aria from "react-aria-components";
+//#region src/components/Button/Button.tsx
+var disablePendingProps = (props) => {
+	if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly) {
+		props = { ...props };
+		const mutedActionHandler = (e) => {
+			if (e && typeof e === "object") {
+				if (!("continuePropagation" in e && typeof e.continuePropagation === "function") && "stopPropagation" in e && typeof e.stopPropagation === "function") e.stopPropagation();
+				if ("preventDefault" in e && typeof e.preventDefault === "function") e.preventDefault();
+			}
+			return false;
+		};
+		props.onClick = mutedActionHandler;
+		props.onPress = mutedActionHandler;
+		props.onPressStart = mutedActionHandler;
+		props.onPressEnd = mutedActionHandler;
+		props.onPressChange = mutedActionHandler;
+		props.onPressUp = mutedActionHandler;
+		props.onKeyDown = mutedActionHandler;
+		props.onKeyUp = mutedActionHandler;
+	}
+	return props;
 };
-const Button = flowComponent("Button", (props) => {
-  props = disablePendingProps(props);
-  const {
-    color = "primary",
-    variant = "solid",
-    children,
-    className,
-    size = "m",
-    isPending,
-    isSucceeded,
-    isFailed,
-    "aria-disabled": ariaDisabled,
-    ref,
-    slot: ignoredSlotProp,
-    ariaSlot: slot,
-    unstyled,
-    isReadOnly,
-    ...restProps
-  } = props;
-  const rootClassName = unstyled ? className : clsx(
-    styles.button,
-    isPending && styles.isPending,
-    isSucceeded && styles.isSucceeded,
-    isFailed && styles.isFailed,
-    size === "s" && styles["size-s"],
-    styles[color],
-    styles[variant],
-    className,
-    /**
-     * Workaround warning: The Aria.Button does not support "aria-disabled"
-     * by now, so this Button will be visually disabled via CSS.
-     */
-    ariaDisabled && styles.ariaDisabled
-  );
-  useAriaAnnounceActionState(
-    isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle"
-  );
-  const propsContext = {
-    Icon: {
-      className: styles.icon,
-      "aria-hidden": true,
-      size
-    },
-    Text: {
-      className: styles.text
-    },
-    Avatar: {
-      className: styles.avatar
-    },
-    CounterBadge: {
-      className: styles.counterBadge
-    },
-    Image: {
-      className: styles.image
-    }
-  };
-  const StateIconComponent = isSucceeded ? IconSucceeded : isFailed ? IconFailed : isPending ? LoadingSpinner : void 0;
-  const stateIcon = StateIconComponent && /* @__PURE__ */ jsx(
-    StateIconComponent,
-    {
-      size,
-      className: styles.stateIcon,
-      status: isFailed ? "danger" : isSucceeded ? "success" : void 0
-    }
-  );
-  const isStringContent = extractTextFromFirstChild(children) !== void 0;
-  return /* @__PURE__ */ jsxs(
-    Aria.Button,
-    {
-      className: rootClassName,
-      ref,
-      slot,
-      ...isReadOnly === true ? { "data-readonly": true } : {},
-      ...restProps,
-      children: [
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: !unstyled, children: /* @__PURE__ */ jsx("span", { className: styles.content, children: /* @__PURE__ */ jsx(Wrap, { if: isStringContent, children: /* @__PURE__ */ jsx(Text, { className: styles.text, children }) }) }) }) }),
-        stateIcon
-      ]
-    }
-  );
+/** @flr-generate all */
+var Button = flowComponent("Button", (props) => {
+	props = disablePendingProps(props);
+	const warnDeprecation = useWarnDeprecation();
+	const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
+	if (colorFromProps === "accent") warnDeprecation("The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.");
+	const color = colorFromProps === "accent" ? "success" : colorFromProps;
+	const rootClassName = unstyled ? className : clsx(
+		Button_module_default.button,
+		isPending && Button_module_default.isPending,
+		isSucceeded && Button_module_default.isSucceeded,
+		isFailed && Button_module_default.isFailed,
+		size === "s" && Button_module_default["size-s"],
+		Button_module_default[color],
+		Button_module_default[variant],
+		/**
+		* Workaround warning: The Aria.Button does not support "aria-disabled"
+		* by now, so this Button will be visually disabled via CSS.
+		*/
+		ariaDisabled && Button_module_default.ariaDisabled,
+		className
+	);
+	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
+	const propsContext = {
+		Icon: {
+			className: Button_module_default.icon,
+			"aria-hidden": true,
+			size
+		},
+		Text: { className: Button_module_default.text },
+		Avatar: { className: Button_module_default.avatar },
+		CounterBadge: { className: Button_module_default.counterBadge },
+		Image: { className: Button_module_default.image }
+	};
+	const stateIcon = isSucceeded ? /* @__PURE__ */ jsx(IconSucceeded, {
+		size,
+		className: Button_module_default.stateIcon,
+		color: "success"
+	}) : isFailed ? /* @__PURE__ */ jsx(IconFailed, {
+		size,
+		className: Button_module_default.stateIcon,
+		color: "danger"
+	}) : isPending ? /* @__PURE__ */ jsx(LoadingSpinner, {
+		size,
+		className: Button_module_default.stateIcon
+	}) : void 0;
+	const isStringContent = extractTextFromFirstChild(children) !== void 0;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children: /* @__PURE__ */ jsx(Wrap, {
+			if: !unstyled,
+			children: /* @__PURE__ */ jsx("span", {
+				className: Button_module_default.content,
+				children: /* @__PURE__ */ jsx(Wrap, {
+					if: isStringContent,
+					children: /* @__PURE__ */ jsx(Text, {
+						className: Button_module_default.text,
+						children
+					})
+				})
+			})
+		})
+	}), stateIcon] });
+	if (elementType === "span") {
+		const spanProps = filterDOMProps(restProps, { global: true });
+		return /* @__PURE__ */ jsx("span", {
+			...spanProps,
+			"data-disabled": restProps.isDisabled || void 0,
+			className: typeof rootClassName === "string" ? rootClassName : void 0,
+			children: content
+		});
+	}
+	return /* @__PURE__ */ jsx(Aria.Button, {
+		className: rootClassName,
+		ref,
+		slot,
+		...isReadOnly === true ? { "data-readonly": true } : {},
+		...restProps,
+		children: content
+	});
 });
-
+//#endregion
 export { Button, Button as default };
-//# sourceMappingURL=Button.mjs.map
+
+//# sourceMappingURL=Button.mjs.map

package/dist/js/packages/components/src/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?: \"primary\" | \"accent\" | \"secondary\" | \"danger\" | AlphaColor;\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    color = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    ...restProps\n  } = props;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        className,\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <StateIconComponent\n      size={size}\n      className={styles.stateIcon}\n      status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n    />\n  );\n\n  const isStringContent = extractTextFromFirstChild(children) !== undefined;\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>\n            <Wrap if={isStringContent}>\n              <Text className={styles.text}>{children}</Text>\n            </Wrap>\n          </span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /** The color of the button. @default \"primary\" */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const isStringContent = extractTextFromFirstChild(children) !== undefined;\n\n  const content = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>\n            <Wrap if={isStringContent}>\n              <Text className={styles.text}>{children}</Text>\n            </Wrap>\n          </span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/Button/Button.module.mjs

@@ -0,0 +1,56 @@
+"use client"
+/* */
+//#region src/components/Button/Button.module.scss
+var button = "flow--button";
+var outline = "flow--button--outline";
+var content = "flow--button--content";
+var stateIcon = "flow--button--state-icon";
+var icon = "flow--button--icon";
+var text = "flow--button--text";
+var counterBadge = "flow--button--counter-badge";
+var isPending = "flow--button--is-pending";
+var isFailed = "flow--button--is-failed";
+var isSucceeded = "flow--button--is-succeeded";
+var plain = "flow--button--plain";
+var primary = "flow--button--primary";
+var solid = "flow--button--solid";
+var ariaDisabled = "flow--button--aria-disabled";
+var success = "flow--button--success";
+var danger = "flow--button--danger";
+var secondary = "flow--button--secondary";
+var dark = "flow--button--dark";
+var light = "flow--button--light";
+var soft = "flow--button--soft";
+var avatar = "flow--button--avatar";
+var image = "flow--button--image";
+var Button_module_default = {
+	button,
+	outline,
+	content,
+	stateIcon,
+	icon,
+	text,
+	counterBadge,
+	isPending,
+	isFailed,
+	isSucceeded,
+	plain,
+	"size-s": "flow--button--size-s",
+	primary,
+	solid,
+	ariaDisabled,
+	success,
+	danger,
+	secondary,
+	dark,
+	light,
+	"dark-static": "flow--button--dark-static",
+	"light-static": "flow--button--light-static",
+	soft,
+	avatar,
+	image
+};
+//#endregion
+export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
+
+//# sourceMappingURL=Button.module.mjs.map

package/dist/js/packages/components/src/components/Button/Button.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color;\n  transition-duration: var(--transition--duration--default);\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text))) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  &:where(:has(.text) .icon) {\n    margin-inline-start: var(--button--spacing);\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n\n    &.plain {\n      .content:has(.text) {\n        opacity: 1;\n      }\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text))) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/Calendar.mjs

@@ -1,20 +1,23 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import styles from './Calendar.module.scss.mjs';
-import { CalendarHeader } from './components/CalendarHeader/CalendarHeader.mjs';
-import clsx from 'clsx';
-
-const Calendar = (props) => {
-  const { className } = props;
-  const rootClassName = clsx(styles.calendar, className);
-  return /* @__PURE__ */ jsxs(Aria.Calendar, { className: rootClassName, children: [
-    /* @__PURE__ */ jsx(CalendarHeader, {}),
-    /* @__PURE__ */ jsx(Aria.CalendarGrid, { weekdayStyle: "short", children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })
-  ] });
+import Calendar_module_default from "./Calendar.module.mjs";
+import { CalendarHeader } from "./components/CalendarHeader/CalendarHeader.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/Calendar/Calendar.tsx
+var Calendar = (props) => {
+	const { className } = props;
+	const rootClassName = clsx(Calendar_module_default.calendar, className);
+	return /* @__PURE__ */ jsxs(Aria.Calendar, {
+		className: rootClassName,
+		children: [/* @__PURE__ */ jsx(CalendarHeader, {}), /* @__PURE__ */ jsx(Aria.CalendarGrid, {
+			weekdayStyle: "short",
+			children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date })
+		})]
+	});
 };
+//#endregion
+export { Calendar, Calendar as default };
 
-export { Calendar };
-//# sourceMappingURL=Calendar.mjs.map
+//# sourceMappingURL=Calendar.mjs.map

package/dist/js/packages/components/src/components/Calendar/Calendar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.mjs","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nexport const Calendar: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n\n  const rootClassName = clsx(styles.calendar, className);\n\n  return (\n    <Aria.Calendar className={rootClassName}>\n      <CalendarHeader />\n      <Aria.CalendarGrid weekdayStyle=\"short\">\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.Calendar>\n  );\n};\n\nexport default Calendar;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,QAAA,GAAmC,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AAEtB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,uBACE,IAAA,CAAC,IAAA,CAAK,QAAA,EAAL,EAAc,WAAW,aAAA,EACxB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,oBAChB,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAkB,YAAA,EAAa,OAAA,EAC7B,QAAA,EAAA,CAAC,IAAA,qBAAS,GAAA,CAAC,IAAA,CAAK,YAAA,EAAL,EAAkB,MAAY,CAAA,EAC5C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Calendar.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"@/components/Calendar/Calendar.module.scss\";\nimport CalendarHeader from \"./components/CalendarHeader\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\n\nexport const Calendar: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n\n  const rootClassName = clsx(styles.calendar, className);\n\n  return (\n    <Aria.Calendar className={rootClassName}>\n      <CalendarHeader />\n      <Aria.CalendarGrid weekdayStyle=\"short\">\n        {(date) => <Aria.CalendarCell date={date} />}\n      </Aria.CalendarGrid>\n    </Aria.Calendar>\n  );\n};\n\nexport default Calendar;\n"],"mappings":";;;;;;;;AAOA,IAAa,YAAoC,UAAU;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,gBAAgB,KAAK,wBAAO,UAAU,SAAS;CAErD,OACE,qBAAC,KAAK,UAAN;EAAe,WAAW;EAA1B,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,KAAK,cAAN;GAAmB,cAAa;GAC5B,WAAA,SAAS,oBAAC,KAAK,cAAN,EAAyB,KAAO,CAAA;EAC1B,CAAA,CACN;;AAEnB"}

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/Calendar/Calendar.module.scss
+var calendar = "flow--calendar";
+var container = "flow--calendar--container";
+var presetMenu = "flow--calendar--preset-menu";
+var range = "flow--calendar--range";
+var Calendar_module_default = {
+	calendar,
+	container,
+	presetMenu,
+	range
+};
+//#endregion
+export { calendar, container, Calendar_module_default as default, presetMenu, range };
+
+//# sourceMappingURL=Calendar.module.mjs.map

package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n  width: fit-content;\n\n  header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--calendar--spacing);\n\n    h2 {\n      font-size: var(--calendar--heading-font-size);\n    }\n  }\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    gap: var(--popover--padding--m);\n\n    .presetMenu {\n      max-width: 200px;\n    }\n  }\n\n  @media (max-width: 530px) {\n    .container {\n      flex-direction: column-reverse;\n    }\n  }\n\n  :global(.react-aria-CalendarHeaderCell) {\n    font-size: var(--calendar--cell-font-size);\n    height: var(--calendar--cell-size);\n  }\n\n  table {\n    border-spacing: var(--calendar--spacing);\n  }\n\n  :global(.react-aria-CalendarCell) {\n    width: var(--calendar--cell-size);\n    height: var(--calendar--cell-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n    border-radius: var(--calendar--cell-corner-radius);\n    font-size: var(--calendar--cell-font-size);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include focus.focus;\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &:hover {\n      background: var(--calendar--cell-background-color--hover);\n    }\n\n    &[data-pressed] {\n      background: var(--calendar--cell-background-color--pressed);\n    }\n\n    &[data-selected] {\n      background: var(--calendar--cell-background-color--selected);\n      color: var(--calendar--cell-content-color--selected);\n    }\n\n    &[data-disabled],\n    &[data-unavailable=\"true\"] {\n      background: var(--calendar--cell-background-color--disabled);\n      color: var(--calendar--cell-content-color--disabled);\n    }\n\n    @include focus.focus;\n  }\n\n  &.range {\n    :global(.react-aria-CalendarCell) {\n      position: relative;\n      isolation: isolate;\n      transition-duration: 0s;\n\n      &[data-selected] {\n        &::before {\n          content: \"\";\n          background: var(--calendar--range-background-color);\n          border-block: var(--calendar--range-border-width)\n            var(--calendar--range-border-style)\n            var(--calendar--range-border-color);\n          width: calc(100% + 0.375rem);\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n        }\n\n        &::after {\n          content: \"\";\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          z-index: -1;\n          border-radius: var(--calendar--cell-corner-radius);\n        }\n\n        &:hover {\n          &::after {\n            background: var(--calendar--cell-background-color--hover);\n          }\n        }\n\n        &[data-pressed] {\n          &::after {\n            background: var(--calendar--cell-background-color--pressed);\n          }\n        }\n\n        &[data-selection-start],\n        &[data-selection-end] {\n          &::after {\n            background: var(--calendar--cell-background-color--selected);\n          }\n        }\n\n        &[data-selection-start] {\n          &::before {\n            border-start-start-radius: var(--calendar--cell-corner-radius);\n            border-end-start-radius: var(--calendar--cell-corner-radius);\n            inset-inline-start: 0;\n          }\n        }\n\n        &[data-selection-end] {\n          &::before {\n            border-start-end-radius: var(--calendar--cell-corner-radius);\n            border-end-end-radius: var(--calendar--cell-corner-radius);\n            inset-inline-end: 0;\n          }\n        }\n\n        &:not([data-selection-start], [data-selection-end]) {\n          color: var(--text--color--default);\n          background: none;\n        }\n\n        &[data-selection-start][data-selection-end] {\n          &::before {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 360px) {\n  .calendar {\n    --calendar--cell-size: 2.1rem;\n    --calendar--cell-font-size: 0.8rem;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs

@@ -1,23 +1,29 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { Button } from '../../../Button/Button.mjs';
-import * as Aria from 'react-aria-components';
-import '@mittwald/flow-icons';
-import '../../../Icon/components/IconSetProvider.mjs';
-import '../../../Icon/Icon.mjs';
-import '../../../../views/IconView.mjs';
-import { IconChevronLeft } from '../../../Icon/components/icons/IconChevronLeft.mjs';
-import { IconChevronRight } from '../../../Icon/components/icons/IconChevronRight.mjs';
-
-const CalendarHeader = () => {
-  return /* @__PURE__ */ jsxs("header", { children: [
-    /* @__PURE__ */ jsx(Button, { ariaSlot: "previous", variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
-    /* @__PURE__ */ jsx(Aria.Heading, {}),
-    /* @__PURE__ */ jsx(Button, { ariaSlot: "next", variant: "plain", color: "secondary", children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
-  ] });
+import { IconChevronLeft } from "../../../Icon/components/icons/IconChevronLeft.mjs";
+import { IconChevronRight } from "../../../Icon/components/icons/IconChevronRight.mjs";
+import { Button } from "../../../Button/Button.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx
+var CalendarHeader = () => {
+	return /* @__PURE__ */ jsxs("header", { children: [
+		/* @__PURE__ */ jsx(Button, {
+			ariaSlot: "previous",
+			variant: "plain",
+			color: "secondary",
+			children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+		}),
+		/* @__PURE__ */ jsx(Aria.Heading, {}),
+		/* @__PURE__ */ jsx(Button, {
+			ariaSlot: "next",
+			variant: "plain",
+			color: "secondary",
+			children: /* @__PURE__ */ jsx(IconChevronRight, {})
+		})
+	] });
 };
-
+//#endregion
 export { CalendarHeader, CalendarHeader as default };
-//# sourceMappingURL=CalendarHeader.mjs.map
+
+//# sourceMappingURL=CalendarHeader.mjs.map

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.mjs","sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"names":[],"mappings":";;;;;;;;;;;AASO,MAAM,iBAAqB,MAAM;AACtC,EAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,UAAS,UAAA,EAAW,OAAA,EAAQ,SAAQ,KAAA,EAAM,WAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA;AAAA,oBACA,GAAA,CAAC,IAAA,CAAK,OAAA,EAAL,EAAa,CAAA;AAAA,oBACd,GAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAS,MAAA,EAAO,OAAA,EAAQ,SAAQ,KAAA,EAAM,WAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACpB;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n  return (\n    <header>\n      <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n        <IconChevronLeft />\n      </Button>\n      <Aria.Heading />\n      <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n        <IconChevronRight />\n      </Button>\n    </header>\n  );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD,EAAA,UAAA;EACE,oBAAC,QAAD;GAAQ,UAAS;GAAW,SAAQ;GAAQ,OAAM;GAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;EACZ,CAAA;EACR,oBAAC,KAAK,SAAN,CAAe,CAAA;EACf,oBAAC,QAAD;GAAQ,UAAS;GAAO,SAAQ;GAAQ,OAAM;GAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;EACb,CAAA;CACF,EAAA,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/RangeCalendar.mjs

@@ -1,20 +1,46 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import styles from '../../Calendar.module.scss.mjs';
-import { CalendarHeader } from '../CalendarHeader/CalendarHeader.mjs';
-import clsx from 'clsx';
-
-const RangeCalendar = (props) => {
-  const { className, ...rest } = props;
-  const rootClassName = clsx(styles.calendar, styles.range, className);
-  return /* @__PURE__ */ jsxs(Aria.RangeCalendar, { ...rest, className: rootClassName, children: [
-    /* @__PURE__ */ jsx(CalendarHeader, {}),
-    /* @__PURE__ */ jsx(Aria.CalendarGrid, { children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })
-  ] });
+import Calendar_module_default from "../../Calendar.module.mjs";
+import { CalendarHeader } from "../CalendarHeader/CalendarHeader.mjs";
+import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
+import { useCalendarDateRangePresets } from "./helpers/useCalendarDateRangePresets.mjs";
+import { Separator } from "../../../Separator/Separator.mjs";
+import clsx from "clsx";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+import { useMediaQuery } from "usehooks-ts";
+//#region src/components/Calendar/components/RangeCalendar/RangeCalendar.tsx
+/** @internal */
+var InnerRangeCalendar = ({ withDatePickerPresets }) => {
+	const isSmallViewport = useMediaQuery("(max-width: 530px)");
+	const predefinedDateHelperItems = useCalendarDateRangePresets(withDatePickerPresets).map((present) => {
+		return /* @__PURE__ */ jsx(MenuItem, {
+			isDisabled: present.disabled,
+			onPress: present.onPress,
+			"aria-label": present.label,
+			children: present.label
+		}, present.label);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: Calendar_module_default.container,
+		children: [withDatePickerPresets && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Aria.Menu, {
+			className: Calendar_module_default.presetMenu,
+			children: predefinedDateHelperItems
+		}), /* @__PURE__ */ jsx(Separator, { orientation: isSmallViewport ? "horizontal" : "vertical" })] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CalendarHeader, {}), /* @__PURE__ */ jsx(Aria.CalendarGrid, { children: (date) => /* @__PURE__ */ jsx(Aria.CalendarCell, { date }) })] })]
+	});
+};
+/** @flr-generate all */
+var RangeCalendar = (props) => {
+	const { className, withDatePickerPresets, ...rest } = props;
+	const rootClassName = clsx(Calendar_module_default.calendar, Calendar_module_default.range, className);
+	return /* @__PURE__ */ jsx(Aria.RangeCalendar, {
+		...rest,
+		className: rootClassName,
+		children: /* @__PURE__ */ jsx(InnerRangeCalendar, { withDatePickerPresets })
+	});
 };
+//#endregion
+export { RangeCalendar, RangeCalendar as default };
 
-export { RangeCalendar };
-//# sourceMappingURL=RangeCalendar.mjs.map
+//# sourceMappingURL=RangeCalendar.mjs.map