@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/compositions/OptionSelector/index.js

@@ -1,193 +1,159 @@
-"use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { RayStartArrowIcon } from "@ultraviolet/icons/RayStartArrowIcon";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Label } from "../../Label/index.js";
+import { firstLabel, optionSelectorWrapper, secondLabel } from "./styles.css.js";
+import { Arrow } from "./components/ArrowIcon.js";
+import { IconWithContent } from "./components/IconWithContent.js";
+import { RevealOnHover } from "./components/RevealOnHover.js";
+import { Selector } from "./components/Selector.js";
+import { SelectorHelper } from "./components/SelectorLabel.js";
 import { cn } from "@ultraviolet/utils";
 import { useMemo } from "react";
-import { Label } from "../../Label/index.js";
-import { SelectInput } from "../../SelectInput/index.js";
-import { Stack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
-import { RevealOnHover } from "./RevealOnHover.js";
-import { firstLabel, secondLabel, firstSelectInput, arrow, secondSelectInput, errorFirstSelector, errorSecondSelector, optionSelectorWrapper } from "./styles.css.js";
-const IconWithContent = ({
-  content,
-  icon
-}) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1.5", children: [
-  icon,
-  content
-] });
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compositions/OptionSelector/index.tsx
 const makeSelectInputOptions = (options) => options.map((option) => {
-  const optionLabel = option.hoverContent ? /* @__PURE__ */ jsx(
-    RevealOnHover,
-    {
-      content: /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon }),
-      hoverContent: /* @__PURE__ */ jsx(IconWithContent, { content: option.hoverContent, icon: option.icon })
-    },
-    option.value
-  ) : /* @__PURE__ */ jsx(
-    IconWithContent,
-    {
-      content: option.content,
-      icon: option.icon
-    },
-    option.value
-  );
-  return {
-    disabled: option.disabled,
-    label: optionLabel,
-    optionalInfo: option.optionalInfo,
-    searchText: option.value,
-    tooltip: option.tooltip,
-    value: option.value
-  };
+	const optionLabel = option.hoverContent ? /* @__PURE__ */ jsx(RevealOnHover, {
+		content: /* @__PURE__ */ jsx(IconWithContent, {
+			content: option.content,
+			icon: option.icon
+		}),
+		hoverContent: /* @__PURE__ */ jsx(IconWithContent, {
+			content: option.hoverContent,
+			icon: option.icon
+		})
+	}, option.value) : /* @__PURE__ */ jsx(IconWithContent, {
+		content: option.content,
+		icon: option.icon
+	}, option.value);
+	return {
+		disabled: option.disabled,
+		label: optionLabel,
+		optionalInfo: option.optionalInfo,
+		searchText: option.value,
+		tooltip: option.tooltip,
+		value: option.value
+	};
 });
-const OptionSelector = ({
-  className,
-  style,
-  "data-testid": dataTestId,
-  firstSelector,
-  secondSelector,
-  size = "large",
-  disabled,
-  readOnly,
-  "aria-label": ariaLabel,
-  error,
-  required,
-  onChange,
-  name,
-  value
-}) => {
-  const firstValue = useMemo(() => {
-    if (value?.first) {
-      return value.first;
-    }
-    if (firstSelector.options.length === 1) {
-      onChange?.({
-        first: firstSelector.options[0].value,
-        second: value?.second
-      });
-      return firstSelector.options[0].value;
-    }
-    return void 0;
-  }, [value?.first, value?.second, onChange, firstSelector]);
-  const secondValue = useMemo(() => {
-    if (value?.second) {
-      return value.second;
-    }
-    if (secondSelector?.options.length === 1) {
-      onChange?.({
-        first: value?.first,
-        second: secondSelector.options[0].value
-      });
-      return secondSelector?.options[0].value;
-    }
-    return void 0;
-  }, [secondSelector, value?.first, value?.second, onChange]);
-  const firstSelectorOptions = makeSelectInputOptions(firstSelector.options);
-  const secondSelectorOptions = secondSelector?.options ? makeSelectInputOptions(secondSelector.options) : void 0;
-  const onChangeFirstSelector = (val) => {
-    onChange?.({ first: val, second: value?.second });
-  };
-  const onChangeSecondSelector = (val) => onChange?.({ first: value?.first, second: val });
-  return (
-    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: to fix
-    /* @__PURE__ */ jsxs(
-      "fieldset",
-      {
-        "aria-label": ariaLabel,
-        "aria-required": required,
-        className: cn(className, optionSelectorWrapper),
-        "data-testid": dataTestId,
-        name,
-        style,
-        children: [
-          /* @__PURE__ */ jsx(Label, { className: firstLabel, required, children: firstSelector.label }),
-          firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsx(Label, { className: secondLabel, required, children: secondSelector?.label }) : null,
-          /* @__PURE__ */ jsx(
-            SelectInput,
-            {
-              className: firstSelectInput,
-              "data-testid": "first-selector",
-              disabled: firstSelector.disabled || disabled,
-              emptyState: firstSelector.emptyState,
-              error: error || !!firstSelector.error,
-              footer: firstSelector.footer,
-              helper: firstSelector.helper,
-              isLoading: firstSelector.isLoading,
-              labelDescription: firstSelector.labelDescription,
-              loadMore: firstSelector.loadMore,
-              onChange: onChangeFirstSelector,
-              optionalInfoPlacement: "right",
-              options: firstSelectorOptions,
-              placeholder: firstSelector.placeholder,
-              readOnly: firstSelector.options.length === 1 || firstSelector.readOnly || readOnly,
-              required,
-              searchable: firstSelector.searchable,
-              size,
-              tooltip: firstSelector.tooltip,
-              value: firstValue
-            }
-          ),
-          firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              RayStartArrowIcon,
-              {
-                className: arrow,
-                prominence: "weak",
-                sentiment: "neutral",
-                size
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SelectInput,
-              {
-                className: secondSelectInput,
-                "data-testid": "second-selector",
-                disabled: !!firstSelector.error || secondSelector.disabled || disabled,
-                emptyState: secondSelector.emptyState,
-                error: !!error || !!secondSelector.error,
-                footer: secondSelector.footer,
-                helper: secondSelector.helper,
-                isLoading: secondSelector.isLoading,
-                labelDescription: secondSelector.labelDescription,
-                loadMore: secondSelector.loadMore,
-                onChange: onChangeSecondSelector,
-                optionalInfoPlacement: "right",
-                options: secondSelectorOptions,
-                placeholder: secondSelector.placeholder,
-                readOnly: secondSelector.options.length === 1 || secondSelector.readOnly || readOnly,
-                searchable: secondSelector.searchable,
-                size,
-                tooltip: secondSelector.tooltip,
-                value: secondValue
-              }
-            )
-          ] }) : null,
-          firstSelector.error && typeof firstSelector.error === "string" ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "p",
-              className: errorFirstSelector,
-              sentiment: "danger",
-              variant: "caption",
-              children: firstSelector.error
-            }
-          ) : null,
-          secondSelector?.error && typeof secondSelector?.error === "string" ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "p",
-              className: errorSecondSelector,
-              sentiment: "danger",
-              variant: "caption",
-              children: secondSelector.error
-            }
-          ) : null
-        ]
-      }
-    )
-  );
-};
-export {
-  OptionSelector
+/**
+* A compound selection component that displays two sequential select inputs
+* where the first selection contextualizes and filters the options available in the second.
+*/
+const OptionSelector = ({ className, style, "data-testid": dataTestId, firstSelector, secondSelector, size = "large", disabled, readOnly, "aria-label": ariaLabel, error, required, onChange, name, value, hideWhenEmpty, direction = "horizontal" }) => {
+	const firstValue = useMemo(() => {
+		if (value === null || value === void 0 ? void 0 : value.first) return value.first;
+		if (firstSelector.options.length === 1) {
+			onChange === null || onChange === void 0 || onChange({
+				first: firstSelector.options[0].value,
+				second: value === null || value === void 0 ? void 0 : value.second,
+				changingValue: "first"
+			});
+			return firstSelector.options[0].value;
+		}
+	}, [
+		value === null || value === void 0 ? void 0 : value.first,
+		value === null || value === void 0 ? void 0 : value.second,
+		onChange,
+		firstSelector
+	]);
+	const secondValue = useMemo(() => {
+		if (value === null || value === void 0 ? void 0 : value.second) return value.second;
+		if ((secondSelector === null || secondSelector === void 0 ? void 0 : secondSelector.options.length) === 1) {
+			onChange === null || onChange === void 0 || onChange({
+				first: value === null || value === void 0 ? void 0 : value.first,
+				second: secondSelector.options[0].value,
+				changingValue: "second"
+			});
+			return secondSelector === null || secondSelector === void 0 ? void 0 : secondSelector.options[0].value;
+		}
+	}, [
+		secondSelector,
+		value === null || value === void 0 ? void 0 : value.first,
+		value === null || value === void 0 ? void 0 : value.second,
+		onChange
+	]);
+	const firstSelectorOptions = makeSelectInputOptions(firstSelector.options);
+	const secondSelectorOptions = (secondSelector === null || secondSelector === void 0 ? void 0 : secondSelector.options) ? makeSelectInputOptions(secondSelector.options) : void 0;
+	const onChangeFirstSelector = (val) => {
+		onChange === null || onChange === void 0 || onChange({
+			first: val,
+			second: value === null || value === void 0 ? void 0 : value.second,
+			changingValue: "first"
+		});
+	};
+	const onChangeSecondSelector = (val) => {
+		onChange === null || onChange === void 0 || onChange({
+			first: value === null || value === void 0 ? void 0 : value.first,
+			second: val,
+			changingValue: "second"
+		});
+	};
+	const isReadOnly = (selector) => selector.options.length === 1 || selector.readOnly || readOnly;
+	const isHorizontal = direction === "horizontal";
+	const firstSelectorStringError = typeof firstSelector.error === "string";
+	const secondSelectorStringError = typeof (secondSelector === null || secondSelector === void 0 ? void 0 : secondSelector.error) === "string";
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"aria-label": ariaLabel,
+		className: cn(className, optionSelectorWrapper({ direction })),
+		"data-testid": dataTestId,
+		name,
+		style,
+		children: [
+			isHorizontal ? /* @__PURE__ */ jsx(Label, {
+				className: firstLabel,
+				required,
+				size,
+				children: firstSelector.label
+			}) : null,
+			firstValue && secondSelector && secondSelectorOptions && isHorizontal ? /* @__PURE__ */ jsx(Label, {
+				className: secondLabel,
+				required,
+				children: secondSelector === null || secondSelector === void 0 ? void 0 : secondSelector.label
+			}) : null,
+			/* @__PURE__ */ jsx(Selector, {
+				direction,
+				disabled,
+				error,
+				firstSelector,
+				isFirst: true,
+				isHorizontal,
+				onChange: onChangeFirstSelector,
+				options: firstSelectorOptions,
+				readOnly: isReadOnly(firstSelector),
+				required,
+				size,
+				value: firstValue
+			}),
+			secondSelector && secondSelectorOptions && !(hideWhenEmpty && !firstValue) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Arrow, {
+				direction,
+				size
+			}), /* @__PURE__ */ jsx(Selector, {
+				direction,
+				disabled: disabled || !firstValue || !!firstSelector.error,
+				error,
+				firstSelector: secondSelector,
+				isHorizontal,
+				onChange: onChangeSecondSelector,
+				options: secondSelectorOptions,
+				readOnly: isReadOnly(secondSelector),
+				required,
+				size,
+				value: secondValue
+			})] }) : null,
+			isHorizontal && (firstSelectorStringError || firstSelector.helper) ? /* @__PURE__ */ jsx(SelectorHelper, {
+				error: firstSelector.error,
+				helper: firstSelector.helper,
+				isError: firstSelectorStringError,
+				isFirst: true
+			}) : null,
+			secondSelector && isHorizontal && (secondSelectorStringError || (secondSelector === null || secondSelector === void 0 ? void 0 : secondSelector.helper)) ? /* @__PURE__ */ jsx(SelectorHelper, {
+				error: secondSelector.error,
+				helper: secondSelector.helper,
+				isError: secondSelectorStringError
+			}) : null
+		]
+	});
 };
+
+//#endregion
+export { OptionSelector };

package/dist/components/compositions/OptionSelector/styles.css.d.ts

@@ -1,10 +1,25 @@
-export declare const optionSelectorWrapper: string;
+export declare const optionSelectorWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    direction: {
+        horizontal: {
+            display: "grid";
+            alignItems: "center";
+            gridTemplateColumns: `1fr var(--${string}) 1fr`;
+            gap: `var(--${string})`;
+        };
+        vertical: {
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "start";
+            gap: `var(--${string})`;
+        };
+    };
+}>;
 export declare const revealOnHover: string;
 export declare const firstLabel: string;
 export declare const secondLabel: string;
-export declare const firstSelectInput: string;
-export declare const secondSelectInput: string;
-export declare const arrow: string;
+export declare const firstSelectInput: Record<"horizontal" | "vertical", string>;
+export declare const secondSelectInput: Record<"horizontal" | "vertical", string>;
+export declare const arrow: Record<"horizontal" | "vertical", string>;
 export declare const errorFirstSelector: string;
 export declare const errorSecondSelector: string;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/compositions/OptionSelector/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,QAMhC,CAAA;AAEF,eAAO,MAAM,aAAa,QAiBxB,CAAA;AAEF,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAEF,eAAO,MAAM,KAAK,QAGhB,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAI7B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAI9B,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EAuBhC,CAAA;AAEF,eAAO,MAAM,aAAa,QAiBxB,CAAA;AAEF,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,gBAAgB,2CAM3B,CAAA;AAEF,eAAO,MAAM,iBAAiB,2CAM5B,CAAA;AAEF,eAAO,MAAM,KAAK,2CAOhB,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAG7B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAG9B,CAAA"}

package/dist/components/compositions/OptionSelector/styles.css.js

@@ -1,23 +1,35 @@
-/* empty css                                                     */
-/* empty css                                                       */
-/* empty css                          */
-var optionSelectorWrapper = "uv_12opk3l0";
-var revealOnHover = "uv_12opk3l1";
-var firstLabel = "uv_12opk3l2";
-var secondLabel = "uv_12opk3l3";
-var firstSelectInput = "uv_12opk3l4";
-var secondSelectInput = "uv_12opk3l5";
-var arrow = "uv_12opk3l6";
-var errorFirstSelector = "uv_12opk3l7";
-var errorSecondSelector = "uv_12opk3l8";
-export {
-  arrow,
-  errorFirstSelector,
-  errorSecondSelector,
-  firstLabel,
-  firstSelectInput,
-  optionSelectorWrapper,
-  revealOnHover,
-  secondLabel,
-  secondSelectInput
+/* empty css                                                 */
+/* empty css                                                   */
+/* empty css                      */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/compositions/OptionSelector/styles.css.ts
+var optionSelectorWrapper = createRuntimeFn({
+	defaultClassName: "uv_12opk3l0",
+	variantClassNames: { direction: {
+		horizontal: "uv_12opk3l1",
+		vertical: "uv_12opk3l2"
+	} },
+	defaultVariants: { direction: "horizontal" },
+	compoundVariants: []
+});
+var revealOnHover = "uv_12opk3l3";
+var firstLabel = "uv_12opk3l4";
+var secondLabel = "uv_12opk3l5";
+var firstSelectInput = {
+	horizontal: "uv_12opk3l6",
+	vertical: "uv_12opk3l7"
 };
+var secondSelectInput = {
+	horizontal: "uv_12opk3l8",
+	vertical: "uv_12opk3l9"
+};
+var arrow = {
+	horizontal: "uv_12opk3la",
+	vertical: "uv_12opk3lb"
+};
+var errorFirstSelector = "uv_12opk3lc";
+var errorSecondSelector = "uv_12opk3ld";
+
+//#endregion
+export { arrow, errorFirstSelector, errorSecondSelector, firstLabel, firstSelectInput, optionSelectorWrapper, revealOnHover, secondLabel, secondSelectInput };

package/dist/components/compositions/OptionSelector/types.d.ts

@@ -9,8 +9,9 @@ export type SelectorOption = {
     tooltip?: string;
     optionalInfo?: ReactNode;
 };
-export type SelectorProps = Pick<ComponentProps<typeof SelectInput>, 'label' | 'labelDescription' | 'error' | 'disabled' | 'helper' | 'readOnly' | 'placeholder' | 'emptyState' | 'searchable' | 'footer' | 'tooltip' | 'loadMore' | 'isLoading'> & {
+export type SelectorProps = Pick<ComponentProps<typeof SelectInput>, 'label' | 'labelDescription' | 'error' | 'disabled' | 'helper' | 'readOnly' | 'placeholder' | 'emptyState' | 'searchable' | 'footer' | 'tooltip' | 'loadMore' | 'isLoading' | 'aria-label'> & {
     options: SelectorOption[];
+    tooltip?: string;
 };
 export type OptionSelectorProps = {
     className?: string;
@@ -28,10 +29,14 @@ export type OptionSelectorProps = {
     onChange?: (values: {
         first?: string;
         second?: string;
+        changingValue: 'first' | 'second';
     }) => void;
     value?: {
         first?: string;
         second?: string;
     };
+    /** Hide the second selector when the first does not have a selected value */
+    hideWhenEmpty?: boolean;
+    direction?: 'vertical' | 'horizontal';
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/compositions/OptionSelector/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,WAAW,CAAC,EAChC,OAAO,GACP,kBAAkB,GAClB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,QAAQ,GACR,SAAS,GACT,UAAU,GACV,WAAW,CACd,GAAG;IAAE,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,CAAA;AAEjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,WAAW,CAAC,EAChC,OAAO,GACP,kBAAkB,GAClB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,QAAQ,GACR,SAAS,GACT,UAAU,GACV,WAAW,GACX,YAAY,CACf,GAAG;IAAE,OAAO,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAA;KAClC,KAAK,IAAI,CAAA;IACV,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CACtC,CAAA"}

package/dist/components/compositions/OrderSummary/NonScrollableContent.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { PriceTypeSingle, TimeUnit } from './types';
+type NonScrollableContentProps = {
+    discount: number;
+    totalPrice: PriceTypeSingle;
+    footer: ReactNode;
+    children: ReactNode;
+    totalPriceInfo?: ReactNode;
+    totalPriceInfoPlacement?: 'left' | 'right';
+    totalPriceDescription?: ReactNode;
+    additionalInfo?: string;
+    unit: TimeUnit;
+    priceInformation?: ReactNode;
+    hideBeforePrice?: boolean;
+    defaultPriceInformation: boolean;
+    timePeriodAmount: number;
+};
+export declare const NonScrollableContent: ({ totalPrice, footer, children, totalPriceInfo, totalPriceInfoPlacement, unit, totalPriceDescription, additionalInfo, priceInformation, hideBeforePrice, defaultPriceInformation, timePeriodAmount, }: NonScrollableContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NonScrollableContent.d.ts.map

package/dist/components/compositions/OrderSummary/NonScrollableContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NonScrollableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OrderSummary/NonScrollableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAExD,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,eAAe,CAAA;IAC3B,MAAM,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,uBAAuB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1C,qBAAqB,CAAC,EAAE,SAAS,CAAA;IACjC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,EAAE,QAAQ,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,uBAAuB,EAAE,OAAO,CAAA;IAChC,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,oBAAoB,+QAyHhC,CAAA"}

package/dist/components/compositions/OrderSummary/NonScrollableContent.js

@@ -0,0 +1,110 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { OrderSummaryContext } from "./Provider.js";
+import { DisplayPrice } from "./helpers.js";
+import { orderSummaryNonScrollableContainer, orderSummaryTotalPrice } from "./styles.css.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/compositions/OrderSummary/NonScrollableContent.tsx
+const NonScrollableContent = ({ totalPrice, footer, children, totalPriceInfo, totalPriceInfoPlacement, unit, totalPriceDescription, additionalInfo, priceInformation, hideBeforePrice, defaultPriceInformation, timePeriodAmount }) => {
+	const { locales } = useContext(OrderSummaryContext);
+	const unitSingular = unit.endsWith("s") ? unit.slice(0, -1) : unit;
+	const divisor = defaultPriceInformation ? timePeriodAmount : void 0;
+	return /* @__PURE__ */ jsxs(Stack, {
+		className: orderSummaryNonScrollableContainer,
+		gap: 3,
+		children: [
+			children,
+			/* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				justifyContent: "space-between",
+				children: [totalPriceInfo && totalPriceInfoPlacement === "left" ? /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					children: [/* @__PURE__ */ jsxs(Text, {
+						as: "span",
+						prominence: "strong",
+						sentiment: "neutral",
+						variant: "bodyStrong",
+						children: [locales["order.summary.total"], ":"]
+					}), totalPriceDescription]
+				}), totalPriceInfo] }) : /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					children: [/* @__PURE__ */ jsxs(Text, {
+						as: "span",
+						prominence: "strong",
+						sentiment: "neutral",
+						variant: "bodyStrong",
+						children: [
+							locales["order.summary.total"],
+							additionalInfo ? ` ${additionalInfo}` : null,
+							":"
+						]
+					}), totalPriceDescription]
+				}), /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "flex-end",
+					direction: "column",
+					children: [totalPrice.totalPrice === totalPrice.totalPriceWithDiscount || hideBeforePrice ? /* @__PURE__ */ jsxs(Text, {
+						as: "span",
+						className: orderSummaryTotalPrice[defaultPriceInformation && !priceInformation ? "default" : "priceInformation"],
+						"data-testid": "total-price",
+						prominence: "strong",
+						sentiment: "neutral",
+						variant: "headingSmallStrong",
+						children: [
+							/* @__PURE__ */ jsx(DisplayPrice, {
+								beforeOrAfter: "after",
+								divisor,
+								price: totalPrice
+							}),
+							defaultPriceInformation ? `/${unitSingular}` : null,
+							priceInformation
+						]
+					}) : /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						direction: "row",
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							prominence: "weak",
+							sentiment: "neutral",
+							strikeThrough: true,
+							variant: "bodySmallStrong",
+							children: /* @__PURE__ */ jsx(DisplayPrice, {
+								beforeOrAfter: "before",
+								divisor,
+								price: totalPrice
+							})
+						}), /* @__PURE__ */ jsxs(Text, {
+							as: "span",
+							className: orderSummaryTotalPrice[priceInformation ? "priceInformation" : "default"],
+							"data-testid": "total-price",
+							prominence: "strong",
+							sentiment: "neutral",
+							variant: "headingSmallStrong",
+							children: [
+								/* @__PURE__ */ jsx(DisplayPrice, {
+									beforeOrAfter: "after",
+									divisor,
+									price: totalPrice
+								}),
+								defaultPriceInformation ? `/${unitSingular}` : null,
+								priceInformation
+							]
+						})]
+					}), totalPriceInfo && totalPriceInfoPlacement === "right" ? totalPriceInfo : null]
+				})]
+			}),
+			footer
+		]
+	});
+};
+
+//#endregion
+export { NonScrollableContent };

package/dist/components/compositions/OrderSummary/Provider.d.ts

@@ -0,0 +1,15 @@
+import orderSummaryLocales from './locales/en';
+import type { CurrencyType, ItemsType, LocalesFormatType, PriceType, TimeUnit } from './types';
+export type ContextProps = {
+    currency: CurrencyType;
+    localeFormat: LocalesFormatType;
+    items: ItemsType[];
+    categoriesPrice: PriceType;
+    hideTimeUnit: boolean;
+    timePeriodUnit: TimeUnit;
+    timePeriodAmount: number;
+    locales: Record<keyof typeof orderSummaryLocales, string>;
+    fractionDigits?: number;
+};
+export declare const OrderSummaryContext: import("react").Context<ContextProps>;
+//# sourceMappingURL=Provider.d.ts.map

package/dist/components/compositions/OrderSummary/Provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OrderSummary/Provider.tsx"],"names":[],"mappings":"AACA,OAAO,mBAAmB,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACT,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,YAAY,CAAA;IACtB,YAAY,EAAE,iBAAiB,CAAA;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,eAAe,EAAE,SAAS,CAAA;IAC1B,YAAY,EAAE,OAAO,CAAA;IACrB,cAAc,EAAE,QAAQ,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,OAAO,EAAE,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAA;IACzD,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,mBAAmB,uCAS9B,CAAA"}