@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/NotificationCard/NotificationCard.styled.js

@@ -0,0 +1,118 @@
+import e from "../Badge/Badge.js";
+import t from "../../internal-components/MultiLineEllipsis/MultiLineEllipsis.js";
+import { styled as n } from "styled-components";
+//#region packages/components/NotificationCard/NotificationCard.styled.ts
+var r = n.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-full);
+  border: var(--stroke-default) solid var(--color-content-neutral-stroke);
+  background-color: var(--color-background-neutral-ground);
+
+  &[data-read="false"] {
+    background: var(--color-background-neutral-underground-1);
+  }
+`, i = n.div`
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  width: 100%;
+`, a = n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 24px;
+
+  &[data-icon-type="informative"] {
+    background: var(--color-content-message-informative-lighter);
+    color: var(--color-content-message-informative);
+  }
+
+  &[data-icon-type="negative"] {
+    background: var(--color-content-message-negative-lighter);
+    color: var(--color-content-message-negative);
+  }
+
+  &[data-icon-type="warning"] {
+    background: var(--color-content-message-warning-lighter);
+    color: var(--color-content-message-warning);
+  }
+
+  &[data-icon-type="positive"] {
+    background: var(--color-content-message-positive-lighter);
+    color: var(--color-content-message-positive);
+  }
+
+  &[data-icon-type="default"] {
+    background-color: var(--color-background-neutral-underground-2);
+    color: var(--color-content-neutral-secondary);
+  }
+
+  &[data-read="false"] {
+    background-color: var(--color-background-neutral-overground);
+  }
+`, o = n.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+`, s = n.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  flex: 1;
+  min-width: 0;
+`, c = n.div`
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  width: 100%;
+`, l = n.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+`, u = n(t)`
+  margin: 0;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-weight: 700;
+`, d = n(t)`
+  margin: 0;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-sm);
+  line-height: var(--text-line-height-sm);
+  font-weight: 400;
+`, f = n.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  margin-top: var(--spacing-xxs);
+`, p = n.span`
+  color: var(--color-content-neutral-secondary);
+  font-size: var(--text-font-size-xs);
+  line-height: var(--text-line-height-xs);
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+`, m = n.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+`, h = n(e)`
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+`;
+//#endregion
+export { m as ActionsContainer, o as AvatarImage, r as CardContainer, c as ContentHeader, i as ContentWrapper, l as Description, a as IconContainer, s as MainContent, d as Subtitle, f as TimestampContainer, p as TimestampText, u as Title, h as UnreadBadge };

package/dist/components/Notifications/Notifications.js

@@ -0,0 +1,77 @@
+import e from "../../internal/usetranslations/usetranslations.js";
+import t from "../Loader/Loader.js";
+import n from "../Badge/Badge.js";
+import r from "../Button/Button.js";
+import { Content as i, Dialog as a, DialogTrigger as o, Footer as s, Header as c, Heading as l, HeadingCloseButton as u, MarkAllAsReadButton as d, Popover as f, SpinnerContainer as p } from "./Notifications.styled.js";
+import m from "./components/EmptyNotifications/EmptyNotifications.js";
+import "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region packages/components/Notifications/Notifications.tsx
+function _({ children: _, triggerProps: y, nbOfReadNotifications: b, nbOfUnreadNotifications: x, onParametersClick: S, onMarkAllAsReadClick: C, isLoading: w, placement: T = "bottom" }) {
+	let E = e(v), D = b === 0 && x === 0, O = !!S, k = !D && !!C, A = O || k, j = "content";
+	return D && (j = "empty"), w && (j = "loading"), /* @__PURE__ */ g(o, { children: [/* @__PURE__ */ h(r, { ...y }), /* @__PURE__ */ h(f, {
+		offset: 16,
+		placement: T,
+		children: /* @__PURE__ */ g(a, { children: [
+			/* @__PURE__ */ g(c, { children: [
+				/* @__PURE__ */ h(l, {
+					slot: "title",
+					children: E.title
+				}),
+				!!x && /* @__PURE__ */ h(n, {
+					value: x,
+					nature: "negative"
+				}),
+				/* @__PURE__ */ h(u, {
+					mode: "tertiary",
+					size: "small",
+					iconLeft: "close",
+					slot: "close",
+					"aria-label": E.close
+				})
+			] }),
+			/* @__PURE__ */ g(i, { children: [
+				j === "loading" && /* @__PURE__ */ h(p, { children: /* @__PURE__ */ h(t, { size: "large" }) }),
+				j === "empty" && /* @__PURE__ */ h(m, {
+					title: E.emptyTitle,
+					description: E.emptyDescription
+				}),
+				j === "content" && _
+			] }),
+			A && /* @__PURE__ */ g(s, { children: [O && /* @__PURE__ */ h(r, {
+				iconLeft: "settings",
+				onClick: S,
+				mode: "tertiary",
+				size: "small",
+				"aria-label": E.parameters
+			}), k && /* @__PURE__ */ h(d, {
+				text: E.markAllAsRead,
+				mode: "tertiary",
+				size: "small",
+				onClick: C
+			})] })
+		] })
+	})] });
+}
+var v = {
+	en: {
+		title: "Notifications",
+		markAllAsRead: "Mark all as read",
+		parameters: "Parameters",
+		close: "Close",
+		loading: "Loading...",
+		emptyTitle: "You have no notifications",
+		emptyDescription: "When an activity is detected, you will see it here."
+	},
+	fr: {
+		title: "Notifications",
+		markAllAsRead: "Marquer tout comme lu",
+		parameters: "Paramètres",
+		close: "Fermer",
+		loading: "Chargement...",
+		emptyTitle: "Vous n’avez aucune notification",
+		emptyDescription: "Lorsque qu’une activité est détecté, vous le verrez ici."
+	}
+};
+//#endregion
+export { _ as default };

package/dist/components/Notifications/Notifications.styled.js

@@ -0,0 +1,62 @@
+import e from "../Button/Button.js";
+import { styled as t } from "styled-components";
+import { Dialog as n, DialogTrigger as r, Heading as i, Popover as a } from "react-aria-components";
+//#region packages/components/Notifications/Notifications.styled.ts
+var o = t(r)``, s = t(a)`
+  width: min(calc(100vw - var(--spacing-sm) * 2), 448px);
+  outline: none;
+`, c = t(n)`
+  /* react-aria sizes the Popover to the available space; mirror that bound so the
+     Content can scroll instead of overflowing */
+  max-height: inherit;
+  outline: none;
+  padding: var(--spacing-sm);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+  background: var(--color-background-neutral-overground);
+
+  box-shadow: var(--shadow-strong);
+`, l = t.header`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`, u = t(i)`
+  padding: 0;
+  margin: 0;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-xl);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-xl);
+`, d = t(e)`
+  margin-left: auto;
+`, f = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  flex: 1;
+  overflow-y: auto;
+  width: 100%;
+`, p = t.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  padding: var(--spacing-sm);
+`, m = t.footer`
+  display: flex;
+  padding-top: var(--spacing-sm);
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-top: 1px solid var(--color-content-neutral-stroke);
+`, h = t(e)`
+  margin-left: auto;
+`;
+//#endregion
+export { f as Content, c as Dialog, o as DialogTrigger, m as Footer, l as Header, u as Heading, d as HeadingCloseButton, h as MarkAllAsReadButton, s as Popover, p as SpinnerContainer };

package/dist/components/Notifications/components/EmptyNotifications/EmptyNotifications.js

@@ -0,0 +1,18 @@
+import { Container as e, Description as t, Title as n } from "./EmptyNotifications.styled.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/components/Notifications/components/EmptyNotifications/EmptyNotifications.tsx
+function a({ title: a, description: o }) {
+	return /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r("svg", {
+		width: "40",
+		height: "40",
+		viewBox: "0 0 40 40",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ r("path", {
+			d: "M30.0065 26.25V17.9167C30.0065 12.8 27.2732 8.51667 22.5065 7.38333V6.25C22.5065 4.86667 21.3732 3.75 19.9899 3.75C18.6065 3.75 17.5065 4.86667 17.5065 6.25V7.38333C12.7232 8.51667 10.0065 12.7833 10.0065 17.9167V26.25L7.83987 28.4C6.78987 29.45 7.5232 31.25 9.00653 31.25H30.9565C32.4399 31.25 33.1899 29.45 32.1399 28.4L30.0065 26.25ZM19.9899 36.25C21.8232 36.25 23.3232 34.75 23.3232 32.9167H16.6565C16.6565 34.75 18.1399 36.25 19.9899 36.25ZM11.2899 7.46667C11.9899 6.83333 12.0065 5.75 11.3399 5.08333C10.7065 4.45 9.6732 4.43333 9.0232 5.05C6.1732 7.65 4.20653 11.1833 3.5732 15.15C3.4232 16.1667 4.20653 17.0833 5.23987 17.0833C6.03987 17.0833 6.73987 16.5 6.8732 15.7C7.3732 12.4667 8.9732 9.58333 11.2899 7.46667ZM31.0065 5.05C30.3399 4.43333 29.3065 4.45 28.6732 5.08333C28.0065 5.75 28.0399 6.81667 28.7232 7.45C31.0232 9.56667 32.6399 12.45 33.1399 15.6833C33.2565 16.4833 33.9565 17.0667 34.7732 17.0667C35.7899 17.0667 36.5899 16.15 36.4232 15.1333C35.7899 11.1833 33.8399 7.66667 31.0065 5.05Z",
+			fill: "var(--color-content-brand-brand-3)"
+		})
+	}), /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(n, { children: a }), /* @__PURE__ */ r(t, { children: o })] })] });
+}
+//#endregion
+export { a as default };

package/dist/components/Notifications/components/EmptyNotifications/EmptyNotifications.styled.js

@@ -0,0 +1,29 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Notifications/components/EmptyNotifications/EmptyNotifications.styled.ts
+var t = e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+`, n = e.h3`
+  margin: 0;
+  color: var(--color-content-neutral-primary);
+  text-align: center;
+  font-size: var(--text-font-size-lg);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--text-line-height-lg);
+`, r = e.p`
+  margin: 0;
+  margin-bottom: 100px;
+  color: var(--color-content-neutral-secondary);
+  text-align: center;
+  font-size: var(--text-font-size-md);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-md);
+`;
+//#endregion
+export { t as Container, r as Description, n as Title };

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,99 @@
+"use client";
+import e from "../Icon/Icon.js";
+import t from "../../internal/usetranslations/usetranslations.js";
+import n from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import r from "../../internal/getNatureFromMessages/getNatureFromMessages.js";
+import { Button as i, Group as a, Input as o, NumberField as s, Stepper as c, ValueDisplay as l } from "./NumberField.styled.js";
+import u, { useId as d, useMemo as f } from "react";
+import { useLocale as p } from "react-aria-components";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/components/NumberField/NumberField.tsx
+var g = u.forwardRef(({ label: u, labelIconRight: g, labelIconRightTooltip: v, helperText: y, helperTextIcon: b, errorHelperText: x, errorHelperTextIcon: S, successHelperText: C, successHelperTextIcon: w, warningHelperText: T, warningHelperTextIcon: E, orientation: D, required: O, nature: k, wrapperProps: A, fullWidth: j, isDisplayOnly: M, advancedReactAriaOptions: N, ...P }, F) => {
+	let I = d(), L = N?.id ?? I, R = t(_), { locale: z } = p(), B = f(() => {
+		if (!M) return "";
+		let e = P.value ?? P.defaultValue;
+		return e === void 0 || Number.isNaN(e) ? "" : new Intl.NumberFormat(z, P.formatOptions).format(e);
+	}, [
+		M,
+		P.value,
+		P.defaultValue,
+		P.formatOptions,
+		z
+	]), V = r({
+		nature: k,
+		errorHelperText: x,
+		successHelperText: C,
+		warningHelperText: T
+	}), H = P["aria-label"] ?? N?.["aria-label"] ?? (typeof u == "string" && u.trim().length > 0 ? u : void 0), U = H ? `${R.increment} : ${H}` : R.increment, W = H ? `${R.decrement} : ${H}` : R.decrement;
+	return /* @__PURE__ */ m(n, {
+		...A,
+		htmlForId: L,
+		label: u,
+		labelIconRight: g,
+		labelIconRightTooltip: v,
+		helperText: y,
+		helperTextIcon: b,
+		errorHelperText: x,
+		errorHelperTextIcon: S,
+		successHelperText: C,
+		successHelperTextIcon: w,
+		warningHelperText: T,
+		warningHelperTextIcon: E,
+		orientation: D,
+		required: O,
+		children: /* @__PURE__ */ m(s, {
+			...N,
+			...P,
+			ref: F,
+			isRequired: O,
+			incrementAriaLabel: U,
+			decrementAriaLabel: W,
+			"data-design-system-component": "NumberField",
+			"data-nature": V,
+			"data-fullwidth": j,
+			children: M ? /* @__PURE__ */ m(l, {
+				id: L,
+				"data-fullwidth": j,
+				children: B
+			}) : /* @__PURE__ */ h(a, {
+				"data-fullwidth": j,
+				children: [
+					/* @__PURE__ */ m(i, {
+						slot: "decrement",
+						"data-viewport": "mobile",
+						children: /* @__PURE__ */ m(e, { name: "remove" })
+					}),
+					/* @__PURE__ */ m(o, { id: L }),
+					/* @__PURE__ */ h(c, {
+						"data-slot": "stepper",
+						children: [/* @__PURE__ */ m(i, {
+							slot: "increment",
+							children: /* @__PURE__ */ m(e, { name: "expand_less" })
+						}), /* @__PURE__ */ m(i, {
+							slot: "decrement",
+							children: /* @__PURE__ */ m(e, { name: "expand_more" })
+						})]
+					}),
+					/* @__PURE__ */ m(i, {
+						slot: "increment",
+						"data-viewport": "mobile",
+						children: /* @__PURE__ */ m(e, { name: "add" })
+					})
+				]
+			})
+		})
+	});
+});
+g.displayName = "NumberField";
+var _ = {
+	en: {
+		increment: "Increment",
+		decrement: "Decrement"
+	},
+	fr: {
+		increment: "Augmenter",
+		decrement: "Diminuer"
+	}
+};
+//#endregion
+export { g as default };

package/dist/components/NumberField/NumberField.styled.js

@@ -0,0 +1,263 @@
+import { styled as e } from "styled-components";
+import { Button as t, Group as n, Input as r, NumberField as i } from "react-aria-components";
+//#region packages/components/NumberField/NumberField.styled.ts
+var a = e(i)`
+  display: inline-block;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, o = e(n)`
+  align-items: stretch;
+  --stepper-disabled-color: var(--color-content-neutral-primary-reversed);
+  border-radius: var(--radius-rounded);
+  display: inline-flex;
+  min-height: 40px;
+  position: relative;
+  transition: box-shadow 120ms ease;
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+
+  &[data-focus-within]:not(:has(input[readonly])),
+  &:has(input:focus):not(:has(input[readonly])) {
+    box-shadow:
+      #fff 0 0 0 2px,
+      var(--color-background-highlight-focus) 0 0 0 4px,
+      rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  }
+
+  &:has(input[readonly]) {
+    --stepper-disabled-color: var(--color-content-neutral-tertiary);
+
+    input {
+      cursor: default;
+      padding-inline: 0;
+    }
+
+    [data-slot="stepper"],
+    [data-viewport="mobile"] {
+      display: none;
+    }
+  }
+
+  [data-nature] &:has(input[readonly]):not([data-disabled]) {
+    --input-border-color: transparent;
+    --background-color: transparent;
+  }
+
+  /* Nature mapping (mirrors CoreTextInput) */
+  [data-nature="default"] &:not([data-disabled]) {
+    --background-color: var(--color-content-neutral-primary-reversed);
+    --input-border-color: var(--color-content-neutral-stroke);
+    --stepper-border-color: var(--color-content-neutral-stroke);
+    --stepper-button-color: var(--color-content-action-action);
+    --stepper-button-color-hover: var(--color-content-action-action-darker);
+    --stepper-button-background-hover: var(
+      --color-content-action-action-lighter
+    );
+    --color: var(--color-content-neutral-secondary);
+    --placeholder-color: var(--color-content-neutral-tertiary);
+  }
+
+  [data-nature="negative"] &:not([data-disabled]) {
+    --background-color: var(--color-content-neutral-primary-reversed);
+    --input-border-color: var(--color-content-message-negative);
+    --stepper-border-color: var(--color-content-neutral-stroke);
+    --stepper-button-color: var(--color-content-message-negative);
+    --stepper-button-color-hover: var(--color-content-message-negative-darker);
+    --stepper-button-background-hover: var(
+      --color-content-message-negative-lighter
+    );
+    --color: var(--color-content-neutral-secondary);
+    --placeholder-color: var(--color-content-neutral-tertiary);
+  }
+
+  [data-nature="positive"] &:not([data-disabled]) {
+    --background-color: var(--color-content-neutral-primary-reversed);
+    --input-border-color: var(--color-content-message-positive-darker);
+    --stepper-border-color: var(--color-content-neutral-stroke);
+    --stepper-button-color: var(--color-content-message-positive-darker);
+    --stepper-button-color-hover: var(--color-content-message-positive-darker);
+    --stepper-button-background-hover: var(
+      --color-content-message-positive-lighter
+    );
+    --color: var(--color-content-neutral-secondary);
+    --placeholder-color: var(--color-content-neutral-tertiary);
+  }
+
+  [data-nature="warning"] &:not([data-disabled]) {
+    --background-color: var(--color-content-neutral-primary-reversed);
+    --input-border-color: var(--color-content-message-warning-darker);
+    --stepper-border-color: var(--color-content-neutral-stroke);
+    --stepper-button-color: var(--color-content-message-warning-darker);
+    --stepper-button-color-hover: var(--color-content-message-warning-darker);
+    --stepper-button-background-hover: var(
+      --color-content-message-warning-lighter
+    );
+    --color: var(--color-content-neutral-secondary);
+    --placeholder-color: var(--color-content-neutral-tertiary);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    --background-color: var(--color-content-neutral-tertiary);
+    --input-border-color: var(--color-content-neutral-stroke);
+    --stepper-border-color: var(--color-content-neutral-stroke);
+    --color: var(--color-content-neutral-primary-reversed);
+    --placeholder-color: var(--color-content-neutral-primary-reversed);
+  }
+`, s = e.span`
+  align-items: center;
+  color: var(--color);
+  display: inline-flex;
+  font-size: var(--text-font-size-md);
+  font-weight: 400;
+  line-height: var(--text-line-height-md);
+
+  &[data-fullwidth="true"] {
+    width: 100%;
+  }
+`, c = e(r)`
+  appearance: none;
+  background: var(--background-color);
+  border: 1px solid var(--input-border-color);
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--radius-rounded);
+  border-end-start-radius: var(--radius-rounded);
+  color: var(--color);
+  cursor: text;
+  display: block;
+  flex: 1 1 auto;
+  font-size: var(--text-font-size-md);
+  font-weight: 400;
+  line-height: var(--text-line-height-md);
+  min-width: 0;
+  outline: none;
+  padding: var(--spacing-xs);
+  width: 100%;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  &::placeholder {
+    color: var(--placeholder-color);
+    opacity: 1;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  @media screen and (max-width: 767px) {
+    border-radius: 0;
+    order: 1;
+    text-align: center;
+  }
+`, l = e.div`
+  background: var(--background-color);
+  border: 1px solid var(--stepper-border-color);
+  border-inline-start: 0;
+  border-end-end-radius: var(--radius-rounded);
+  border-start-end-radius: var(--radius-rounded);
+  display: inline-flex;
+  flex: 0 0 36px;
+  flex-direction: column;
+  overflow: hidden;
+
+  @media screen and (max-width: 767px) {
+    display: none;
+  }
+`, u = e(t)`
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--stepper-button-color);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1 1 50%;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  transition: background-color 120ms ease;
+  width: 100%;
+
+  /* Vertical stack on the right: increment on top, decrement on bottom. */
+  &[slot="increment"]:not([data-viewport="mobile"]) {
+    border-block-end: 1px solid var(--stepper-border-color);
+    order: 0;
+  }
+
+  &[slot="decrement"]:not([data-viewport="mobile"]) {
+    order: 1;
+  }
+
+  &[data-viewport="mobile"] {
+    display: none;
+  }
+
+  &[data-hovered]:not(:disabled) {
+    background-color: var(--stepper-button-background-hover);
+    color: var(--stepper-button-color-hover);
+  }
+
+  &[data-pressed]:not(:disabled) {
+    background-color: var(--stepper-button-background-hover);
+    color: var(--stepper-button-color-hover);
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--color-background-highlight-focus);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--stepper-disabled-color);
+  }
+
+  svg {
+    font-size: 16px;
+  }
+
+  @media screen and (max-width: 767px) {
+    &[data-viewport="mobile"] {
+      background: var(--background-color);
+      border: 1px solid var(--stepper-border-color);
+      display: inline-flex;
+      flex: 0 0 40px;
+      width: 40px;
+    }
+
+    &[data-viewport="mobile"] svg {
+      font-size: 24px;
+    }
+
+    &[slot="decrement"][data-viewport="mobile"] {
+      border-inline-end: 0;
+      border-start-start-radius: var(--radius-rounded);
+      border-end-start-radius: var(--radius-rounded);
+      order: 0;
+    }
+
+    &[slot="increment"][data-viewport="mobile"] {
+      border-inline-start: 0;
+      border-start-end-radius: var(--radius-rounded);
+      border-end-end-radius: var(--radius-rounded);
+      order: 2;
+    }
+  }
+`;
+//#endregion
+export { u as Button, o as Group, c as Input, a as NumberField, l as Stepper, s as ValueDisplay };

package/dist/components/PageLayout/PageLayout.js

@@ -0,0 +1,25 @@
+"use client";
+import { PageLayoutProvider as e, usePageLayoutContext as t } from "./context.js";
+import { GlobalStyle as n, Main as r, NavigationComponent as i, NavigationOverlay as a, Root as o } from "./PageLayout.styled.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/components/PageLayout/PageLayout.tsx
+function l({ navigationComponent: e, children: l }) {
+	let u = t();
+	return /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s(n, {}),
+		/* @__PURE__ */ s(a, {
+			"data-navigation-overlay-collapsed": u?.isCollapsed,
+			onClick: () => u?.setIsCollapsed((e) => !e)
+		}),
+		/* @__PURE__ */ s(i, {
+			"data-page-layout-collapsed": u?.isCollapsed,
+			children: e
+		}),
+		/* @__PURE__ */ s(r, { children: l })
+	] });
+}
+function u(t) {
+	return /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(l, { ...t }) });
+}
+//#endregion
+export { u as default };