@commercetools/nimbus 3.2.0 → 3.4.0

package/dist/chunks/date-input-BIMZk2u6.esm.js

@@ -0,0 +1,33 @@
+import { i as e, o as t, t as n } from "./DateField-C_r7fpt5.esm.js";
+import { _ as r } from "./theme-CFqa_6UM.esm.js";
+import { t as i } from "./extract-style-props-D519tVOc.esm.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createSlotRecipeContext as c, useRecipe as l } from "@chakra-ui/react/styled-system";
+//#region src/components/date-input/date-input.slots.tsx
+var { withProvider: u, withContext: d } = c({ key: "nimbusDateInput" }), f = u("div", "root"), p = d("div", "leadingElement"), m = d("div", "trailingElement"), h = d("div", "segmentGroup"), g = d("div", "segment"), _ = (c) => {
+	let u = l({ recipe: r }), { leadingElement: d, trailingElement: _, ...v } = c, [y, b] = u.splitVariantProps({ ...v }), [x, S] = i(b);
+	return /* @__PURE__ */ o(f, {
+		...y,
+		...x,
+		asChild: !0,
+		children: /* @__PURE__ */ o(t, {
+			...S,
+			children: /* @__PURE__ */ s(a, { children: [
+				d && /* @__PURE__ */ o(p, { children: d }),
+				/* @__PURE__ */ o(h, {
+					asChild: !0,
+					children: /* @__PURE__ */ o(e, { children: (e) => /* @__PURE__ */ o(g, {
+						asChild: !0,
+						children: /* @__PURE__ */ o(n, { segment: e })
+					}) })
+				}),
+				_ && /* @__PURE__ */ o(m, { children: _ })
+			] })
+		})
+	});
+};
+_.displayName = "DateInput";
+//#endregion
+export { _ as t };
+
+//# sourceMappingURL=date-input-BIMZk2u6.esm.js.map

package/dist/chunks/date-input-BIMZk2u6.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input-BIMZk2u6.esm.js","names":[],"sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\nimport type { DateInputRootSlotProps } from \"./date-input.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusDateInput\",\n});\n\n/**\n * Root component that provides the styling context for the DateInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateInputRootSlot = withProvider<\n  HTMLDivElement,\n  DateInputRootSlotProps\n>(\"div\", \"root\");\n\nexport const DateInputLeadingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"leadingElement\");\n\nexport const DateInputTrailingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trailingElement\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segmentGroup\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segment\");\n","import {\n  DateInputLeadingElementSlot,\n  DateInputRootSlot,\n  DateInputSegmentGroupSlot,\n  DateInputSegmentSlot,\n  DateInputTrailingElementSlot,\n} from \"./date-input.slots\";\n\nimport {\n  DateField,\n  DateInput as DateInputField,\n  DateSegment,\n} from \"react-aria-components\";\nimport { useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils\";\n\n/**\n * # DateInput\n *\n * allows entering a date\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/dateinput}\n */\nexport const DateInput = (props: DateInputProps) => {\n  const recipe = useRecipe({ recipe: dateInputSlotRecipe });\n  const { leadingElement, trailingElement, ...rest } = props;\n  const [recipeProps, recipeFreeProps] = recipe.splitVariantProps({ ...rest });\n  const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n  return (\n    <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <DateField {...functionalProps}>\n        <>\n          {leadingElement && (\n            <DateInputLeadingElementSlot>\n              {leadingElement}\n            </DateInputLeadingElementSlot>\n          )}\n          <DateInputSegmentGroupSlot asChild>\n            <DateInputField>\n              {(segment) => (\n                <DateInputSegmentSlot asChild>\n                  <DateSegment segment={segment} />\n                </DateInputSegmentSlot>\n              )}\n            </DateInputField>\n          </DateInputSegmentGroupSlot>\n          {trailingElement && (\n            <DateInputTrailingElementSlot>\n              {trailingElement}\n            </DateInputTrailingElementSlot>\n          )}\n        </>\n      </DateField>\n    </DateInputRootSlot>\n  );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"mappings":";;;;;;AAOA,IAAM,EAAE,iBAAc,mBAAgB,EAAwB,EAC5D,KAAK,kBACP,CAAC,GAMY,IAAoB,EAG/B,OAAO,MAAM,GAEF,IAA8B,EAGzC,OAAO,gBAAgB,GAEZ,IAA+B,EAG1C,OAAO,iBAAiB,GAKb,IAA4B,EAGvC,OAAO,cAAc,GAKV,IAAuB,EAGlC,OAAO,SAAS,GCnBL,KAAa,MAA0B;CAClD,IAAM,IAAS,EAAU,EAAE,QAAQ,EAAoB,CAAC,GAClD,EAAE,mBAAgB,oBAAiB,GAAG,MAAS,GAC/C,CAAC,GAAa,KAAmB,EAAO,kBAAkB,EAAE,GAAG,EAAK,CAAC,GACrE,CAAC,GAAY,KAAmB,EAAkB,CAAe;CAEvE,OACE,kBAAC,GAAD;EAAmB,GAAI;EAAa,GAAI;EAAY,SAAA;YAClD,kBAAC,GAAD;GAAW,GAAI;aACb,kBAAA,GAAA,EAAA,UAAA;IACG,KACC,kBAAC,GAAD,EAAA,UACG,EAC0B,CAAA;IAE/B,kBAAC,GAAD;KAA2B,SAAA;eACzB,kBAAC,GAAD,EAAA,WACI,MACA,kBAAC,GAAD;MAAsB,SAAA;gBACpB,kBAAC,GAAD,EAAsB,WAAU,CAAA;KACZ,CAAA,EAEV,CAAA;IACS,CAAA;IAC1B,KACC,kBAAC,GAAD,EAAA,UACG,EAC2B,CAAA;GAEhC,EAAA,CAAA;EACO,CAAA;CACM,CAAA;AAEvB;AAEA,EAAU,cAAc"}

package/dist/chunks/date-input-DbikA3Az.cjs

@@ -0,0 +1,2 @@
+const e=require("./DateField-CHfV6zH4.cjs.js"),t=require("./theme-DA63MDZQ.cjs.js"),n=require("./extract-style-props-WNdpT-ME.cjs.js");let r=require("react/jsx-runtime"),i=require("@chakra-ui/react/styled-system");var{withProvider:a,withContext:o}=(0,i.createSlotRecipeContext)({key:`nimbusDateInput`}),s=a(`div`,`root`),c=o(`div`,`leadingElement`),l=o(`div`,`trailingElement`),u=o(`div`,`segmentGroup`),d=o(`div`,`segment`),f=a=>{let o=(0,i.useRecipe)({recipe:t._}),{leadingElement:f,trailingElement:p,...m}=a,[h,g]=o.splitVariantProps({...m}),[_,v]=n.t(g);return(0,r.jsx)(s,{...h,..._,asChild:!0,children:(0,r.jsx)(e.o,{...v,children:(0,r.jsxs)(r.Fragment,{children:[f&&(0,r.jsx)(c,{children:f}),(0,r.jsx)(u,{asChild:!0,children:(0,r.jsx)(e.i,{children:t=>(0,r.jsx)(d,{asChild:!0,children:(0,r.jsx)(e.t,{segment:t})})})}),p&&(0,r.jsx)(l,{children:p})]})})})};f.displayName=`DateInput`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});
+//# sourceMappingURL=date-input-DbikA3Az.cjs.js.map

package/dist/chunks/date-input-DbikA3Az.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input-DbikA3Az.cjs.js","names":[],"sources":["../../src/components/date-input/date-input.slots.tsx","../../src/components/date-input/date-input.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\nimport type { DateInputRootSlotProps } from \"./date-input.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusDateInput\",\n});\n\n/**\n * Root component that provides the styling context for the DateInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DateInputRootSlot = withProvider<\n  HTMLDivElement,\n  DateInputRootSlotProps\n>(\"div\", \"root\");\n\nexport const DateInputLeadingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"leadingElement\");\n\nexport const DateInputTrailingElementSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"trailingElement\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segmentGroup\");\n\n/**\n * Slot component for the DateField part of the DateInput.\n */\nexport const DateInputSegmentSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"segment\");\n","import {\n  DateInputLeadingElementSlot,\n  DateInputRootSlot,\n  DateInputSegmentGroupSlot,\n  DateInputSegmentSlot,\n  DateInputTrailingElementSlot,\n} from \"./date-input.slots\";\n\nimport {\n  DateField,\n  DateInput as DateInputField,\n  DateSegment,\n} from \"react-aria-components\";\nimport { useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { dateInputSlotRecipe } from \"./date-input.recipe\";\nimport type { DateInputProps } from \"./date-input.types\";\nimport { extractStyleProps } from \"@/utils\";\n\n/**\n * # DateInput\n *\n * allows entering a date\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/dateinput}\n */\nexport const DateInput = (props: DateInputProps) => {\n  const recipe = useRecipe({ recipe: dateInputSlotRecipe });\n  const { leadingElement, trailingElement, ...rest } = props;\n  const [recipeProps, recipeFreeProps] = recipe.splitVariantProps({ ...rest });\n  const [styleProps, functionalProps] = extractStyleProps(recipeFreeProps);\n\n  return (\n    <DateInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <DateField {...functionalProps}>\n        <>\n          {leadingElement && (\n            <DateInputLeadingElementSlot>\n              {leadingElement}\n            </DateInputLeadingElementSlot>\n          )}\n          <DateInputSegmentGroupSlot asChild>\n            <DateInputField>\n              {(segment) => (\n                <DateInputSegmentSlot asChild>\n                  <DateSegment segment={segment} />\n                </DateInputSegmentSlot>\n              )}\n            </DateInputField>\n          </DateInputSegmentGroupSlot>\n          {trailingElement && (\n            <DateInputTrailingElementSlot>\n              {trailingElement}\n            </DateInputTrailingElementSlot>\n          )}\n        </>\n      </DateField>\n    </DateInputRootSlot>\n  );\n};\n\nDateInput.displayName = \"DateInput\";\n"],"mappings":"sNAOA,GAAM,CAAE,eAAc,gBAAA,EAAA,EAAA,wBAAA,CAAwC,CAC5D,IAAK,iBACP,CAAC,EAMY,EAAoB,EAG/B,MAAO,MAAM,EAEF,EAA8B,EAGzC,MAAO,gBAAgB,EAEZ,EAA+B,EAG1C,MAAO,iBAAiB,EAKb,EAA4B,EAGvC,MAAO,cAAc,EAKV,EAAuB,EAGlC,MAAO,SAAS,ECnBL,EAAa,GAA0B,CAClD,IAAM,GAAA,EAAA,EAAA,UAAA,CAAmB,CAAE,OAAQ,EAAA,CAAoB,CAAC,EAClD,CAAE,iBAAgB,kBAAiB,GAAG,GAAS,EAC/C,CAAC,EAAa,GAAmB,EAAO,kBAAkB,CAAE,GAAG,CAAK,CAAC,EACrE,CAAC,EAAY,GAAmB,EAAA,EAAkB,CAAe,EAEvE,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAmB,GAAI,EAAa,GAAI,EAAY,QAAA,aAClD,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAW,GAAI,YACb,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SACG,CAC0B,CAAA,GAE/B,EAAA,EAAA,IAAA,CAAC,EAAD,CAA2B,QAAA,aACzB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAA,SACI,IACA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAsB,QAAA,aACpB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAsB,SAAU,CAAA,CACZ,CAAA,CAEV,CAAA,CACS,CAAA,EAC1B,IACC,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,SACG,CAC2B,CAAA,CAEhC,CAAA,CAAA,CACO,CAAA,CACM,CAAA,CAEvB,EAEA,EAAU,YAAc"}

package/dist/chunks/date-picker--voC39id.esm.js

@@ -0,0 +1,183 @@
+import { n as e, u as t } from "./Dialog-Dy3vyR1i.esm.js";
+import { a as n } from "./DateField-C_r7fpt5.esm.js";
+import { n as r, r as i } from "./DatePicker-xQCOjOZ5.esm.js";
+import { c as a, t as o } from "./utils-BYIK8Yf2.esm.js";
+import { t as s } from "./Button-B5g2BgY8.esm.js";
+import { t as c } from "./Group-D4Vbo9q9.esm.js";
+import { t as l } from "./icon-button-CyhrlrIv.esm.js";
+import { t as u } from "./box-CZyqYgLL.esm.js";
+import { n as d, t as f } from "./normalize-messages-B_f-0I5n.esm.js";
+import { t as p } from "./flex-BB3-rbwF.esm.js";
+import { g as m } from "./theme-CFqa_6UM.esm.js";
+import { t as h } from "./text-B8bxcVHh.esm.js";
+import { t as g } from "./time-input-CJcXuGHH.esm.js";
+import { t as _ } from "./date-input-BIMZk2u6.esm.js";
+import { t as v } from "./calendar-bydCjK4Q.esm.js";
+import { t as y } from "./extract-style-props-D519tVOc.esm.js";
+import { useContext as b, useEffect as x, useRef as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { CalendarMonth as T, Close as E } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as D, useSlotRecipe as O } from "@chakra-ui/react/styled-system";
+//#region src/components/date-picker/date-picker.slots.tsx
+var { withProvider: k, withContext: A } = D({ key: "nimbusDatePicker" }), j = k("div", "root"), M = A("div", "group"), N = A("div", "popover"), P = A("div", "calendar");
+A("header", "calendarHeader"), A("table", "calendarGrid"), A("td", "calendarCell");
+//#endregion
+//#region src/components/date-picker/date-picker.messages.ts
+var F = {
+	en: f({
+		"Time.enterTime": "Enter time",
+		"Time.enterTimeHour": "Enter time (hour)",
+		"Time.enterTimeHourMinute": "Enter time (hour and minute)",
+		"Time.enterTimeHourMinuteSecond": "Enter time (hour, minute, and second)",
+		"Time.startTime": "Start time",
+		clearInput: "Clear input value"
+	}),
+	de: f({
+		"Time.enterTime": "Zeit eingeben",
+		"Time.enterTimeHour": "Zeit eingeben (Stunde)",
+		"Time.enterTimeHourMinute": "Zeit eingeben (Stunde und Minute)",
+		"Time.enterTimeHourMinuteSecond": "Zeit eingeben (Stunde, Minute und Sekunde)",
+		"Time.startTime": "Startzeit",
+		clearInput: "Eingabewert löschen"
+	}),
+	es: f({
+		"Time.enterTime": "Indicar tiempo",
+		"Time.enterTimeHour": "Indicar tiempo (hora)",
+		"Time.enterTimeHourMinute": "Indicar tiempo (hora y minuto)",
+		"Time.enterTimeHourMinuteSecond": "Indicar tiempo (hora, minuto y segundo)",
+		"Time.startTime": "Iniciar tiempo",
+		clearInput: "Eliminar valor de entrada"
+	}),
+	"fr-FR": f({
+		"Time.enterTime": "Saisir l'heure",
+		"Time.enterTimeHour": "Saisir l'heure (heure)",
+		"Time.enterTimeHourMinute": "Saisir l'heure (heure et minute)",
+		"Time.enterTimeHourMinuteSecond": "Saisir l'heure (heure, minute et seconde)",
+		"Time.startTime": "Heure de début",
+		clearInput: "Effacer la valeur saisie"
+	}),
+	"pt-BR": f({
+		"Time.enterTime": "Inserir hora",
+		"Time.enterTimeHour": "Inserir hora (hora)",
+		"Time.enterTimeHourMinute": "Inserir hora (hora e minutos)",
+		"Time.enterTimeHourMinuteSecond": "Inserir hora (hora, minutos e segundos)",
+		"Time.startTime": "Hora de início",
+		clearInput: "Limpar valores inseridos"
+	})
+}, I = ({ children: e }) => {
+	let t = d(F), i = a(s) || {}, c = b(r), l = c?.dateValue === null, { timeValue: u, setTimeValue: f, granularity: p } = c, m = i?.isDisabled, h = () => {
+		switch (p) {
+			case "hour": return t.format("Time.enterTimeHour");
+			case "minute": return t.format("Time.enterTimeHourMinute");
+			case "second": return t.format("Time.enterTimeHourMinuteSecond");
+			default: return t.format("Time.enterTime");
+		}
+	}, g = {
+		calendarToggle: {
+			...i,
+			onPress: (e) => {
+				let t = document?.activeElement;
+				t && t.blur(), i.onPress?.(e);
+			}
+		},
+		clear: {
+			onPress: () => c?.setValue(null),
+			"aria-label": t.format("clearInput"),
+			isDisabled: m,
+			style: l ? { display: "none" } : void 0,
+			"aria-hidden": l ? !0 : void 0
+		}
+	}, _ = { timeInput: {
+		value: u,
+		onChange: (e) => {
+			e !== null && f(e);
+		},
+		granularity: p === "day" ? void 0 : p,
+		"aria-label": h()
+	} };
+	return /* @__PURE__ */ C(o, {
+		values: [[s, { slots: g }], [n, { slots: _ }]],
+		children: e
+	});
+}, L = ({ hideTimeZone: e, hourCycle: t }) => {
+	let n = d(F), { granularity: i, dateValue: a } = b(r), o = S(null), s = S(a);
+	return x(() => {
+		let e;
+		if (a && s.current?.compare(a) !== 0) {
+			let t = o.current, n = document.activeElement;
+			t?.contains(n) && n?.getAttribute("role") === "spinbutton" || (e = setTimeout(() => {
+				t && t.querySelector("[role=\"spinbutton\"]")?.focus();
+			}, 50));
+		}
+		return s.current = a, () => {
+			e && clearTimeout(e);
+		};
+	}, [a]), i === "day" ? null : /* @__PURE__ */ w(p, {
+		ref: o,
+		borderTop: "solid-25",
+		borderColor: "neutral.3",
+		py: "300",
+		px: "400",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "200",
+		children: [/* @__PURE__ */ C(h, {
+			textStyle: "xs",
+			fontWeight: "500",
+			color: "neutral.12",
+			children: n.format("Time.startTime")
+		}), /* @__PURE__ */ C(g, {
+			slot: "timeInput",
+			variant: "ghost",
+			size: "sm",
+			hideTimeZone: e,
+			hourCycle: t
+		})]
+	});
+}, R = (n) => {
+	let { size: r = "md", variant: a, granularity: o = "day", hideTimeZone: s, hourCycle: d } = n, [f, p] = O({ recipe: m }).splitVariantProps(n), [h, g] = y(p), b = r === "md" ? "xs" : "2xs", x = o === "day" && n.shouldCloseOnSelect;
+	return /* @__PURE__ */ C(j, {
+		...f,
+		...h,
+		asChild: !0,
+		children: /* @__PURE__ */ C(i, {
+			...g,
+			shouldCloseOnSelect: x,
+			children: /* @__PURE__ */ w(I, { children: [/* @__PURE__ */ C(M, {
+				asChild: !0,
+				children: /* @__PURE__ */ C(c, { children: /* @__PURE__ */ C(_, {
+					size: r,
+					variant: a,
+					width: "full",
+					hideTimeZone: s,
+					hourCycle: d,
+					trailingElement: /* @__PURE__ */ w(u, { children: [/* @__PURE__ */ C(l, {
+						variant: "ghost",
+						size: b,
+						slot: "clear",
+						children: /* @__PURE__ */ C(E, {})
+					}), /* @__PURE__ */ C(l, {
+						variant: "ghost",
+						size: b,
+						slot: "calendarToggle",
+						children: /* @__PURE__ */ C(T, {})
+					})] })
+				}) })
+			}), /* @__PURE__ */ C(N, {
+				asChild: !0,
+				children: /* @__PURE__ */ C(t, {
+					placement: "bottom end",
+					children: /* @__PURE__ */ w(e, { children: [/* @__PURE__ */ C(P, { children: /* @__PURE__ */ C(v, {}) }), /* @__PURE__ */ C(L, {
+						hideTimeZone: s,
+						hourCycle: d
+					})] })
+				})
+			})] })
+		})
+	});
+};
+R.displayName = "DatePicker";
+//#endregion
+export { R as t };
+
+//# sourceMappingURL=date-picker--voC39id.esm.js.map

package/dist/chunks/date-picker--voC39id.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker--voC39id.esm.js","names":[],"sources":["../../src/components/date-picker/date-picker.slots.tsx","../../src/components/date-picker/intl/en.ts","../../src/components/date-picker/intl/de.ts","../../src/components/date-picker/intl/es.ts","../../src/components/date-picker/intl/fr-FR.ts","../../src/components/date-picker/intl/pt-BR.ts","../../src/components/date-picker/date-picker.messages.ts","../../src/components/date-picker/components/date-picker.custom-context.tsx","../../src/components/date-picker/components/date-picker.time-input.tsx","../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\nimport type { DatePickerRootSlotProps } from \"./date-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusDatePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DatePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DatePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DatePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput.\n */\nexport const DatePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DatePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DatePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DatePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DatePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DatePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","/**\n * Pre-compiled en messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Enter time`,\n  \"Time.enterTimeHour\": `Enter time (hour)`,\n  \"Time.enterTimeHourMinute\": `Enter time (hour and minute)`,\n  \"Time.enterTimeHourMinuteSecond\": `Enter time (hour, minute, and second)`,\n  \"Time.startTime\": `Start time`,\n  clearInput: `Clear input value`,\n};\n","/**\n * Pre-compiled de messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Zeit eingeben`,\n  \"Time.enterTimeHour\": `Zeit eingeben (Stunde)`,\n  \"Time.enterTimeHourMinute\": `Zeit eingeben (Stunde und Minute)`,\n  \"Time.enterTimeHourMinuteSecond\": `Zeit eingeben (Stunde, Minute und Sekunde)`,\n  \"Time.startTime\": `Startzeit`,\n  clearInput: `Eingabewert löschen`,\n};\n","/**\n * Pre-compiled es messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Indicar tiempo`,\n  \"Time.enterTimeHour\": `Indicar tiempo (hora)`,\n  \"Time.enterTimeHourMinute\": `Indicar tiempo (hora y minuto)`,\n  \"Time.enterTimeHourMinuteSecond\": `Indicar tiempo (hora, minuto y segundo)`,\n  \"Time.startTime\": `Iniciar tiempo`,\n  clearInput: `Eliminar valor de entrada`,\n};\n","/**\n * Pre-compiled fr-FR messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Saisir l'heure`,\n  \"Time.enterTimeHour\": `Saisir l'heure (heure)`,\n  \"Time.enterTimeHourMinute\": `Saisir l'heure (heure et minute)`,\n  \"Time.enterTimeHourMinuteSecond\": `Saisir l'heure (heure, minute et seconde)`,\n  \"Time.startTime\": `Heure de début`,\n  clearInput: `Effacer la valeur saisie`,\n};\n","/**\n * Pre-compiled pt-BR messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Inserir hora`,\n  \"Time.enterTimeHour\": `Inserir hora (hora)`,\n  \"Time.enterTimeHourMinute\": `Inserir hora (hora e minutos)`,\n  \"Time.enterTimeHourMinuteSecond\": `Inserir hora (hora, minutos e segundos)`,\n  \"Time.startTime\": `Hora de início`,\n  clearInput: `Limpar valores inseridos`,\n};\n","/**\n * Pre-compiled localized messages for DatePicker component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n  type LocalizedString,\n  type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport datePickerMessages_en from \"./intl/en\";\nimport datePickerMessages_de from \"./intl/de\";\nimport datePickerMessages_es from \"./intl/es\";\nimport datePickerMessages_fr from \"./intl/fr-FR\";\nimport datePickerMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const datePickerMessagesStrings: LocalizedStrings<\n  string,\n  LocalizedString\n> = {\n  en: normalizeMessages(datePickerMessages_en),\n  de: normalizeMessages(datePickerMessages_de),\n  es: normalizeMessages(datePickerMessages_es),\n  \"fr-FR\": normalizeMessages(datePickerMessages_fr),\n  \"pt-BR\": normalizeMessages(datePickerMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for DatePicker component\n */\nexport type DatePickerMessageKey =\n  | \"Time.enterTime\"\n  | \"Time.enterTimeHour\"\n  | \"Time.enterTimeHourMinute\"\n  | \"Time.enterTimeHourMinuteSecond\"\n  | \"Time.startTime\"\n  | \"clearInput\";\n","import { useContext } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DatePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { datePickerMessagesStrings } from \"../date-picker.messages\";\n\n/**\n * DatePickerCustomContext - Custom context provider for DatePicker\n *\n * Provides React Aria context overrides for button and time input slots,\n * enabling coordinated behavior between DatePicker parts.\n */\nexport const DatePickerCustomContext = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const msg = useLocalizedStringFormatter(datePickerMessagesStrings);\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const datePickerState = useContext(DatePickerStateContext);\n  const noInputValue = datePickerState?.dateValue === null;\n\n  const { timeValue, setTimeValue, granularity } = datePickerState!;\n\n  // Try to get disabled state from the button context\n  const isDatePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = () => {\n    switch (granularity) {\n      case \"hour\":\n        return msg.format(\"Time.enterTimeHour\");\n      case \"minute\":\n        return msg.format(\"Time.enterTimeHourMinute\");\n      case \"second\":\n        return msg.format(\"Time.enterTimeHourMinuteSecond\");\n      default:\n        return msg.format(\"Time.enterTime\");\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      onPress: () => datePickerState?.setValue(null),\n      \"aria-label\": msg.format(\"clearInput\"),\n      isDisabled: isDatePickerDisabled,\n      // Hide the button when there's no value\n      style: noInputValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": noInputValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  const timeInputSlots = {\n    timeInput: {\n      value: timeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null) {\n          setTimeValue(value);\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { datePickerMessagesStrings } from \"../date-picker.messages\";\n\n/**\n * DatePickerTimeInput - Time input component displayed in DatePicker popover footer\n *\n * Only renders when granularity requires time selection (hour, minute, second).\n * Automatically focuses when user selects a date from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DatePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DatePickerTimeInputProps) => {\n  const msg = useLocalizedStringFormatter(datePickerMessagesStrings);\n  const datePickerState = useContext(DatePickerStateContext);\n  const { granularity, dateValue } = datePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousDateRef = useRef(dateValue);\n\n  // Focus the time input when date changes (user selects a date from calendar)\n  useEffect(() => {\n    // Check if date changed\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n            firstSegment?.focus();\n          }\n        }, 50);\n      }\n    }\n\n    previousDateRef.current = dateValue;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [dateValue]);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n        {msg.format(\"Time.startTime\")}\n      </Text>\n      <TimeInput\n        slot=\"timeInput\"\n        variant=\"ghost\"\n        size=\"sm\"\n        hideTimeZone={hideTimeZone}\n        hourCycle={hourCycle}\n      />\n    </Flex>\n  );\n};\n","import {\n  DatePickerRootSlot,\n  DatePickerGroupSlot,\n  DatePickerPopoverSlot,\n  DatePickerCalendarSlot,\n} from \"./date-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DatePicker as ReactAriaDatePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, Calendar, IconButton, Box } from \"@/components\";\nimport { DatePickerTimeInput, DatePickerCustomContext } from \"./components\";\n\n/**\n * # DatePicker\n *\n * a UI component for users to enter or select a specific calendar date.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/datepicker}\n */\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    size = \"md\",\n    variant,\n    granularity = \"day\",\n    hideTimeZone,\n    hourCycle,\n  } = props;\n  const recipe = useSlotRecipe({ recipe: datePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DatePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDatePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DatePickerCustomContext>\n          <DatePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                size={size}\n                variant={variant}\n                width=\"full\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n                trailingElement={\n                  <Box>\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"clear\"\n                    >\n                      <Close />\n                    </IconButton>\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"calendarToggle\"\n                    >\n                      <CalendarMonth />\n                    </IconButton>\n                  </Box>\n                }\n              />\n            </Group>\n          </DatePickerGroupSlot>\n          <DatePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DatePickerCalendarSlot>\n                  <Calendar />\n                </DatePickerCalendarSlot>\n                <DatePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DatePickerPopoverSlot>\n        </DatePickerCustomContext>\n      </ReactAriaDatePicker>\n    </DatePickerRootSlot>\n  );\n};\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":"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"}

package/dist/chunks/date-picker-Dhb3cRFN.cjs

@@ -0,0 +1,2 @@
+const e=require("./Dialog-UjK50qiN.cjs.js"),t=require("./DateField-CHfV6zH4.cjs.js"),n=require("./DatePicker--pX-2Qq-.cjs.js"),r=require("./utils-Clf3FzjT.cjs.js"),i=require("./Button-CZDjIKB1.cjs.js"),a=require("./Group-Bw1Y-fMh.cjs.js"),o=require("./icon-button-BG5cQycc.cjs.js"),s=require("./box-B6vF0vdN.cjs.js"),c=require("./normalize-messages-BMq9y_ae.cjs.js"),l=require("./flex-D_rZ56ps.cjs.js"),u=require("./theme-DA63MDZQ.cjs.js"),d=require("./text-B6GuUYfw.cjs.js"),f=require("./time-input-Cv-8dl-n.cjs.js"),p=require("./date-input-DbikA3Az.cjs.js"),m=require("./calendar-YtVTt0Tm.cjs.js"),h=require("./extract-style-props-WNdpT-ME.cjs.js");let g=require("react"),_=require("react/jsx-runtime"),v=require("@commercetools/nimbus-icons"),y=require("@chakra-ui/react/styled-system");var{withProvider:b,withContext:x}=(0,y.createSlotRecipeContext)({key:`nimbusDatePicker`}),S=b(`div`,`root`),C=x(`div`,`group`),w=x(`div`,`popover`),T=x(`div`,`calendar`);x(`header`,`calendarHeader`),x(`table`,`calendarGrid`),x(`td`,`calendarCell`);var E={en:c.t({"Time.enterTime":`Enter time`,"Time.enterTimeHour":`Enter time (hour)`,"Time.enterTimeHourMinute":`Enter time (hour and minute)`,"Time.enterTimeHourMinuteSecond":`Enter time (hour, minute, and second)`,"Time.startTime":`Start time`,clearInput:`Clear input value`}),de:c.t({"Time.enterTime":`Zeit eingeben`,"Time.enterTimeHour":`Zeit eingeben (Stunde)`,"Time.enterTimeHourMinute":`Zeit eingeben (Stunde und Minute)`,"Time.enterTimeHourMinuteSecond":`Zeit eingeben (Stunde, Minute und Sekunde)`,"Time.startTime":`Startzeit`,clearInput:`Eingabewert löschen`}),es:c.t({"Time.enterTime":`Indicar tiempo`,"Time.enterTimeHour":`Indicar tiempo (hora)`,"Time.enterTimeHourMinute":`Indicar tiempo (hora y minuto)`,"Time.enterTimeHourMinuteSecond":`Indicar tiempo (hora, minuto y segundo)`,"Time.startTime":`Iniciar tiempo`,clearInput:`Eliminar valor de entrada`}),"fr-FR":c.t({"Time.enterTime":`Saisir l'heure`,"Time.enterTimeHour":`Saisir l'heure (heure)`,"Time.enterTimeHourMinute":`Saisir l'heure (heure et minute)`,"Time.enterTimeHourMinuteSecond":`Saisir l'heure (heure, minute et seconde)`,"Time.startTime":`Heure de début`,clearInput:`Effacer la valeur saisie`}),"pt-BR":c.t({"Time.enterTime":`Inserir hora`,"Time.enterTimeHour":`Inserir hora (hora)`,"Time.enterTimeHourMinute":`Inserir hora (hora e minutos)`,"Time.enterTimeHourMinuteSecond":`Inserir hora (hora, minutos e segundos)`,"Time.startTime":`Hora de início`,clearInput:`Limpar valores inseridos`})},D=({children:e})=>{let a=c.n(E),o=r.c(i.t)||{},s=(0,g.useContext)(n.n),l=s?.dateValue===null,{timeValue:u,setTimeValue:d,granularity:f}=s,p=o?.isDisabled,m=()=>{switch(f){case`hour`:return a.format(`Time.enterTimeHour`);case`minute`:return a.format(`Time.enterTimeHourMinute`);case`second`:return a.format(`Time.enterTimeHourMinuteSecond`);default:return a.format(`Time.enterTime`)}},h={calendarToggle:{...o,onPress:e=>{let t=document?.activeElement;t&&t.blur(),o.onPress?.(e)}},clear:{onPress:()=>s?.setValue(null),"aria-label":a.format(`clearInput`),isDisabled:p,style:l?{display:`none`}:void 0,"aria-hidden":l?!0:void 0}},v={timeInput:{value:u,onChange:e=>{e!==null&&d(e)},granularity:f===`day`?void 0:f,"aria-label":m()}};return(0,_.jsx)(r.t,{values:[[i.t,{slots:h}],[t.a,{slots:v}]],children:e})},O=({hideTimeZone:e,hourCycle:t})=>{let r=c.n(E),{granularity:i,dateValue:a}=(0,g.useContext)(n.n),o=(0,g.useRef)(null),s=(0,g.useRef)(a);return(0,g.useEffect)(()=>{let e;if(a&&s.current?.compare(a)!==0){let t=o.current,n=document.activeElement;t?.contains(n)&&n?.getAttribute(`role`)===`spinbutton`||(e=setTimeout(()=>{t&&t.querySelector(`[role="spinbutton"]`)?.focus()},50))}return s.current=a,()=>{e&&clearTimeout(e)}},[a]),i===`day`?null:(0,_.jsxs)(l.t,{ref:o,borderTop:`solid-25`,borderColor:`neutral.3`,py:`300`,px:`400`,alignItems:`center`,justifyContent:`center`,gap:`200`,children:[(0,_.jsx)(d.t,{textStyle:`xs`,fontWeight:`500`,color:`neutral.12`,children:r.format(`Time.startTime`)}),(0,_.jsx)(f.t,{slot:`timeInput`,variant:`ghost`,size:`sm`,hideTimeZone:e,hourCycle:t})]})},k=t=>{let{size:r=`md`,variant:i,granularity:c=`day`,hideTimeZone:l,hourCycle:d}=t,[f,g]=(0,y.useSlotRecipe)({recipe:u.g}).splitVariantProps(t),[b,x]=h.t(g),E=r===`md`?`xs`:`2xs`,k=c===`day`&&t.shouldCloseOnSelect;return(0,_.jsx)(S,{...f,...b,asChild:!0,children:(0,_.jsx)(n.r,{...x,shouldCloseOnSelect:k,children:(0,_.jsxs)(D,{children:[(0,_.jsx)(C,{asChild:!0,children:(0,_.jsx)(a.t,{children:(0,_.jsx)(p.t,{size:r,variant:i,width:`full`,hideTimeZone:l,hourCycle:d,trailingElement:(0,_.jsxs)(s.t,{children:[(0,_.jsx)(o.t,{variant:`ghost`,size:E,slot:`clear`,children:(0,_.jsx)(v.Close,{})}),(0,_.jsx)(o.t,{variant:`ghost`,size:E,slot:`calendarToggle`,children:(0,_.jsx)(v.CalendarMonth,{})})]})})})}),(0,_.jsx)(w,{asChild:!0,children:(0,_.jsx)(e.u,{placement:`bottom end`,children:(0,_.jsxs)(e.n,{children:[(0,_.jsx)(T,{children:(0,_.jsx)(m.t,{})}),(0,_.jsx)(O,{hideTimeZone:l,hourCycle:d})]})})})]})})})};k.displayName=`DatePicker`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return k}});
+//# sourceMappingURL=date-picker-Dhb3cRFN.cjs.js.map

package/dist/chunks/date-picker-Dhb3cRFN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-Dhb3cRFN.cjs.js","names":[],"sources":["../../src/components/date-picker/date-picker.slots.tsx","../../src/components/date-picker/intl/en.ts","../../src/components/date-picker/intl/de.ts","../../src/components/date-picker/intl/es.ts","../../src/components/date-picker/intl/fr-FR.ts","../../src/components/date-picker/intl/pt-BR.ts","../../src/components/date-picker/date-picker.messages.ts","../../src/components/date-picker/components/date-picker.custom-context.tsx","../../src/components/date-picker/components/date-picker.time-input.tsx","../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import {\n  type HTMLChakraProps,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\nimport type { DatePickerRootSlotProps } from \"./date-picker.types\";\n\n// Correctly destructure from createSlotRecipeContext based on project examples\nconst { withProvider, withContext } = createSlotRecipeContext({\n  key: \"nimbusDatePicker\",\n});\n\n/**\n * Root component that provides the styling context for the DatePicker component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const DatePickerRootSlot = withProvider<\n  HTMLDivElement,\n  DatePickerRootSlotProps\n>(\"div\", \"root\");\n\n/**\n * Slot component for the input group containing the DateInput.\n */\nexport const DatePickerGroupSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"group\");\n\n/**\n * Slot component for the popover container.\n */\nexport const DatePickerPopoverSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"popover\");\n\n/**\n * Slot component for the calendar container within the popover.\n */\nexport const DatePickerCalendarSlot = withContext<\n  HTMLDivElement,\n  HTMLChakraProps<\"div\">\n>(\"div\", \"calendar\");\n\n/**\n * Slot component for the calendar header.\n */\nexport const DatePickerCalendarHeaderSlot = withContext<\n  HTMLElement,\n  HTMLChakraProps<\"header\">\n>(\"header\", \"calendarHeader\");\n\n/**\n * Slot component for the calendar grid.\n */\nexport const DatePickerCalendarGridSlot = withContext<\n  HTMLTableElement,\n  HTMLChakraProps<\"table\">\n>(\"table\", \"calendarGrid\");\n\n/**\n * Slot component for individual calendar cells.\n */\nexport const DatePickerCalendarCellSlot = withContext<\n  HTMLTableCellElement,\n  HTMLChakraProps<\"td\">\n>(\"td\", \"calendarCell\");\n","/**\n * Pre-compiled en messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Enter time`,\n  \"Time.enterTimeHour\": `Enter time (hour)`,\n  \"Time.enterTimeHourMinute\": `Enter time (hour and minute)`,\n  \"Time.enterTimeHourMinuteSecond\": `Enter time (hour, minute, and second)`,\n  \"Time.startTime\": `Start time`,\n  clearInput: `Clear input value`,\n};\n","/**\n * Pre-compiled de messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Zeit eingeben`,\n  \"Time.enterTimeHour\": `Zeit eingeben (Stunde)`,\n  \"Time.enterTimeHourMinute\": `Zeit eingeben (Stunde und Minute)`,\n  \"Time.enterTimeHourMinuteSecond\": `Zeit eingeben (Stunde, Minute und Sekunde)`,\n  \"Time.startTime\": `Startzeit`,\n  clearInput: `Eingabewert löschen`,\n};\n","/**\n * Pre-compiled es messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Indicar tiempo`,\n  \"Time.enterTimeHour\": `Indicar tiempo (hora)`,\n  \"Time.enterTimeHourMinute\": `Indicar tiempo (hora y minuto)`,\n  \"Time.enterTimeHourMinuteSecond\": `Indicar tiempo (hora, minuto y segundo)`,\n  \"Time.startTime\": `Iniciar tiempo`,\n  clearInput: `Eliminar valor de entrada`,\n};\n","/**\n * Pre-compiled fr-FR messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Saisir l'heure`,\n  \"Time.enterTimeHour\": `Saisir l'heure (heure)`,\n  \"Time.enterTimeHourMinute\": `Saisir l'heure (heure et minute)`,\n  \"Time.enterTimeHourMinuteSecond\": `Saisir l'heure (heure, minute et seconde)`,\n  \"Time.startTime\": `Heure de début`,\n  clearInput: `Effacer la valeur saisie`,\n};\n","/**\n * Pre-compiled pt-BR messages for DatePicker\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n  \"Time.enterTime\": `Inserir hora`,\n  \"Time.enterTimeHour\": `Inserir hora (hora)`,\n  \"Time.enterTimeHourMinute\": `Inserir hora (hora e minutos)`,\n  \"Time.enterTimeHourMinuteSecond\": `Inserir hora (hora, minutos e segundos)`,\n  \"Time.startTime\": `Hora de início`,\n  clearInput: `Limpar valores inseridos`,\n};\n","/**\n * Pre-compiled localized messages for DatePicker component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n  type LocalizedString,\n  type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport datePickerMessages_en from \"./intl/en\";\nimport datePickerMessages_de from \"./intl/de\";\nimport datePickerMessages_es from \"./intl/es\";\nimport datePickerMessages_fr from \"./intl/fr-FR\";\nimport datePickerMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const datePickerMessagesStrings: LocalizedStrings<\n  string,\n  LocalizedString\n> = {\n  en: normalizeMessages(datePickerMessages_en),\n  de: normalizeMessages(datePickerMessages_de),\n  es: normalizeMessages(datePickerMessages_es),\n  \"fr-FR\": normalizeMessages(datePickerMessages_fr),\n  \"pt-BR\": normalizeMessages(datePickerMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for DatePicker component\n */\nexport type DatePickerMessageKey =\n  | \"Time.enterTime\"\n  | \"Time.enterTimeHour\"\n  | \"Time.enterTimeHourMinute\"\n  | \"Time.enterTimeHourMinuteSecond\"\n  | \"Time.startTime\"\n  | \"clearInput\";\n","import { useContext } from \"react\";\nimport {\n  Provider,\n  ButtonContext,\n  DatePickerStateContext,\n  TimeFieldContext,\n  useSlottedContext,\n} from \"react-aria-components\";\nimport type { PressEvent, TimeValue } from \"react-aria\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { datePickerMessagesStrings } from \"../date-picker.messages\";\n\n/**\n * DatePickerCustomContext - Custom context provider for DatePicker\n *\n * Provides React Aria context overrides for button and time input slots,\n * enabling coordinated behavior between DatePicker parts.\n */\nexport const DatePickerCustomContext = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const msg = useLocalizedStringFormatter(datePickerMessagesStrings);\n  const buttonContext = useSlottedContext(ButtonContext) || {};\n  const datePickerState = useContext(DatePickerStateContext);\n  const noInputValue = datePickerState?.dateValue === null;\n\n  const { timeValue, setTimeValue, granularity } = datePickerState!;\n\n  // Try to get disabled state from the button context\n  const isDatePickerDisabled = buttonContext?.isDisabled;\n\n  // Generate default aria-label based on granularity if not provided\n  const getDefaultTimeInputAriaLabel = () => {\n    switch (granularity) {\n      case \"hour\":\n        return msg.format(\"Time.enterTimeHour\");\n      case \"minute\":\n        return msg.format(\"Time.enterTimeHourMinute\");\n      case \"second\":\n        return msg.format(\"Time.enterTimeHourMinuteSecond\");\n      default:\n        return msg.format(\"Time.enterTime\");\n    }\n  };\n\n  /**\n   * Button slots\n   * ================================\n   */\n  const buttonSlots = {\n    /** toggles the calendar popover */\n    calendarToggle: {\n      ...buttonContext,\n      onPress: (event: PressEvent) => {\n        // Ensure any active input (e.g., date picker segment) loses focus\n        // because blurring the input will close the popover if it's open (or was just opened)\n        const activeElement = document?.activeElement as HTMLElement | null;\n\n        if (activeElement) {\n          activeElement.blur();\n        }\n\n        buttonContext.onPress?.(event);\n      },\n    },\n    /** Clear button that displays when there's a value in each segment - hidden from both visual and screen readers when there's no value */\n    clear: {\n      onPress: () => datePickerState?.setValue(null),\n      \"aria-label\": msg.format(\"clearInput\"),\n      isDisabled: isDatePickerDisabled,\n      // Hide the button when there's no value\n      style: noInputValue ? { display: \"none\" } : undefined,\n      \"aria-hidden\": noInputValue ? true : undefined,\n    },\n  };\n\n  /**\n   * TimeInput slots\n   * ================================\n   */\n\n  const timeInputSlots = {\n    timeInput: {\n      value: timeValue,\n      onChange: (value: TimeValue | null) => {\n        if (value !== null) {\n          setTimeValue(value);\n        }\n      },\n      granularity: granularity === \"day\" ? undefined : granularity,\n      \"aria-label\": getDefaultTimeInputAriaLabel(),\n    },\n  };\n\n  return (\n    <Provider\n      values={[\n        [\n          ButtonContext,\n          {\n            slots: buttonSlots,\n          },\n        ],\n        [TimeFieldContext, { slots: timeInputSlots }],\n      ]}\n    >\n      {children}\n    </Provider>\n  );\n};\n","import { Flex, Text, TimeInput } from \"@/components\";\nimport { useContext, useRef, useEffect } from \"react\";\nimport { DatePickerStateContext } from \"react-aria-components\";\nimport type { DatePickerTimeInputProps } from \"../date-picker.types\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { datePickerMessagesStrings } from \"../date-picker.messages\";\n\n/**\n * DatePickerTimeInput - Time input component displayed in DatePicker popover footer\n *\n * Only renders when granularity requires time selection (hour, minute, second).\n * Automatically focuses when user selects a date from the calendar.\n *\n * @supportsStyleProps\n */\nexport const DatePickerTimeInput = ({\n  hideTimeZone,\n  hourCycle,\n}: DatePickerTimeInputProps) => {\n  const msg = useLocalizedStringFormatter(datePickerMessagesStrings);\n  const datePickerState = useContext(DatePickerStateContext);\n  const { granularity, dateValue } = datePickerState!;\n  const timeInputRef = useRef<HTMLDivElement>(null);\n  const previousDateRef = useRef(dateValue);\n\n  // Focus the time input when date changes (user selects a date from calendar)\n  useEffect(() => {\n    // Check if date changed\n    let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n    if (dateValue && previousDateRef.current?.compare(dateValue) !== 0) {\n      // Only auto-focus if no time input segment currently has focus\n      // This prevents stealing focus during user interaction with time segments\n      const container = timeInputRef.current;\n      const activeElement = document.activeElement;\n      const hasTimeSegmentFocus =\n        container?.contains(activeElement) &&\n        activeElement?.getAttribute(\"role\") === \"spinbutton\";\n\n      if (!hasTimeSegmentFocus) {\n        // Small delay to ensure the DOM is ready\n        timeoutId = setTimeout(() => {\n          // Find the first focusable segment within the time input container\n          if (container) {\n            const firstSegment = container.querySelector(\n              '[role=\"spinbutton\"]'\n            ) as HTMLElement;\n            firstSegment?.focus();\n          }\n        }, 50);\n      }\n    }\n\n    previousDateRef.current = dateValue;\n\n    // Cleanup timeout on effect re-run or unmount to prevent memory leaks\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [dateValue]);\n\n  // do not show up to the party if you're not invited\n  if (granularity === \"day\") {\n    return null;\n  }\n\n  return (\n    <Flex\n      ref={timeInputRef}\n      borderTop=\"solid-25\"\n      borderColor=\"neutral.3\"\n      py=\"300\"\n      px=\"400\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gap=\"200\"\n    >\n      <Text textStyle=\"xs\" fontWeight=\"500\" color=\"neutral.12\">\n        {msg.format(\"Time.startTime\")}\n      </Text>\n      <TimeInput\n        slot=\"timeInput\"\n        variant=\"ghost\"\n        size=\"sm\"\n        hideTimeZone={hideTimeZone}\n        hourCycle={hourCycle}\n      />\n    </Flex>\n  );\n};\n","import {\n  DatePickerRootSlot,\n  DatePickerGroupSlot,\n  DatePickerPopoverSlot,\n  DatePickerCalendarSlot,\n} from \"./date-picker.slots\";\n\nimport { CalendarMonth, Close } from \"@commercetools/nimbus-icons\";\n\nimport {\n  DatePicker as ReactAriaDatePicker,\n  Group,\n  Popover,\n  Dialog,\n} from \"react-aria-components\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport { datePickerSlotRecipe } from \"./date-picker.recipe\";\nimport type { DatePickerProps } from \"./date-picker.types\";\nimport { extractStyleProps } from \"@/utils\";\nimport { DateInput, Calendar, IconButton, Box } from \"@/components\";\nimport { DatePickerTimeInput, DatePickerCustomContext } from \"./components\";\n\n/**\n * # DatePicker\n *\n * a UI component for users to enter or select a specific calendar date.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/datepicker}\n */\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    size = \"md\",\n    variant,\n    granularity = \"day\",\n    hideTimeZone,\n    hourCycle,\n  } = props;\n  const recipe = useSlotRecipe({ recipe: datePickerSlotRecipe });\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(props);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n  // the size of the buttons overlaying the input\n  const overlayButtonSize = size === \"md\" ? \"xs\" : \"2xs\";\n\n  // When granularity is \"day\", use the prop value (defaults to true if not provided)\n  // For other granularities (time-based), force to false so users can set both date and time\n  const shouldCloseOnSelect =\n    granularity === \"day\" ? props.shouldCloseOnSelect : false;\n\n  return (\n    <DatePickerRootSlot {...recipeProps} {...styleProps} asChild>\n      <ReactAriaDatePicker\n        {...otherProps}\n        shouldCloseOnSelect={shouldCloseOnSelect}\n      >\n        <DatePickerCustomContext>\n          <DatePickerGroupSlot asChild>\n            <Group>\n              <DateInput\n                size={size}\n                variant={variant}\n                width=\"full\"\n                hideTimeZone={hideTimeZone}\n                hourCycle={hourCycle}\n                trailingElement={\n                  <Box>\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"clear\"\n                    >\n                      <Close />\n                    </IconButton>\n                    <IconButton\n                      variant=\"ghost\"\n                      size={overlayButtonSize}\n                      slot=\"calendarToggle\"\n                    >\n                      <CalendarMonth />\n                    </IconButton>\n                  </Box>\n                }\n              />\n            </Group>\n          </DatePickerGroupSlot>\n          <DatePickerPopoverSlot asChild>\n            <Popover placement=\"bottom end\">\n              <Dialog>\n                <DatePickerCalendarSlot>\n                  <Calendar />\n                </DatePickerCalendarSlot>\n                <DatePickerTimeInput\n                  hideTimeZone={hideTimeZone}\n                  hourCycle={hourCycle}\n                />\n              </Dialog>\n            </Popover>\n          </DatePickerPopoverSlot>\n        </DatePickerCustomContext>\n      </ReactAriaDatePicker>\n    </DatePickerRootSlot>\n  );\n};\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":"sxBAOA,GAAM,CAAE,eAAc,gBAAA,EAAA,EAAA,wBAAA,CAAwC,CAC5D,IAAK,kBACP,CAAC,EAMY,EAAqB,EAGhC,MAAO,MAAM,EAKF,EAAsB,EAGjC,MAAO,OAAO,EAKH,EAAwB,EAGnC,MAAO,SAAS,EAKL,EAAyB,EAGpC,MAAO,UAAU,EAKyB,EAG1C,SAAU,gBAAgB,EAKc,EAGxC,QAAS,cAAc,EAKiB,EAGxC,KAAM,cAAc,EM3CtB,IAAa,EAGT,CACF,GAAI,EAAA,EAAkB,CLpBtB,iBAAkB,aAClB,qBAAsB,oBACtB,2BAA4B,+BAC5B,iCAAkC,wCAClC,iBAAkB,aAClB,WAAY,mBKeU,CAAqB,EAC3C,GAAI,EAAA,EAAkB,CJrBtB,iBAAkB,gBAClB,qBAAsB,yBACtB,2BAA4B,oCAC5B,iCAAkC,6CAClC,iBAAkB,YAClB,WAAY,qBIgBU,CAAqB,EAC3C,GAAI,EAAA,EAAkB,CHtBtB,iBAAkB,iBAClB,qBAAsB,wBACtB,2BAA4B,iCAC5B,iCAAkC,0CAClC,iBAAkB,iBAClB,WAAY,2BGiBU,CAAqB,EAC3C,QAAS,EAAA,EAAkB,CFvB3B,iBAAkB,iBAClB,qBAAsB,yBACtB,2BAA4B,mCAC5B,iCAAkC,4CAClC,iBAAkB,iBAClB,WAAY,0BEkBe,CAAqB,EAChD,QAAS,EAAA,EAAkB,CDxB3B,iBAAkB,eAClB,qBAAsB,sBACtB,2BAA4B,gCAC5B,iCAAkC,0CAClC,iBAAkB,iBAClB,WAAY,0BCmBe,CAAqB,CAClD,ECda,GAA2B,CACtC,cAGI,CACJ,IAAM,EAAM,EAAA,EAA4B,CAAyB,EAC3D,EAAgB,EAAA,EAAkB,EAAA,CAAa,GAAK,CAAC,EACrD,GAAA,EAAA,EAAA,WAAA,CAA6B,EAAA,CAAsB,EACnD,EAAe,GAAiB,YAAc,KAE9C,CAAE,YAAW,eAAc,eAAgB,EAG3C,EAAuB,GAAe,WAGtC,MAAqC,CACzC,OAAQ,EAAR,CACE,IAAK,OACH,OAAO,EAAI,OAAO,oBAAoB,EACxC,IAAK,SACH,OAAO,EAAI,OAAO,0BAA0B,EAC9C,IAAK,SACH,OAAO,EAAI,OAAO,gCAAgC,EACpD,QACE,OAAO,EAAI,OAAO,gBAAgB,CACtC,CACF,EAMM,EAAc,CAElB,eAAgB,CACd,GAAG,EACH,QAAU,GAAsB,CAG9B,IAAM,EAAgB,UAAU,cAE5B,GACF,EAAc,KAAK,EAGrB,EAAc,UAAU,CAAK,CAC/B,CACF,EAEA,MAAO,CACL,YAAe,GAAiB,SAAS,IAAI,EAC7C,aAAc,EAAI,OAAO,YAAY,EACrC,WAAY,EAEZ,MAAO,EAAe,CAAE,QAAS,MAAO,EAAI,IAAA,GAC5C,cAAe,EAAe,GAAO,IAAA,EACvC,CACF,EAOM,EAAiB,CACrB,UAAW,CACT,MAAO,EACP,SAAW,GAA4B,CACjC,IAAU,MACZ,EAAa,CAAK,CAEtB,EACA,YAAa,IAAgB,MAAQ,IAAA,GAAY,EACjD,aAAc,EAA6B,CAC7C,CACF,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,OAAQ,CACN,CACE,EAAA,EACA,CACE,MAAO,CACT,CACF,EACA,CAAC,EAAA,EAAkB,CAAE,MAAO,CAAe,CAAC,CAC9C,EAEC,UACO,CAAA,CAEd,EChGa,GAAuB,CAClC,eACA,eAC8B,CAC9B,IAAM,EAAM,EAAA,EAA4B,CAAyB,EAE3D,CAAE,cAAa,cAAA,EAAA,EAAA,WAAA,CADc,EAAA,CACA,EAC7B,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,EAC1C,GAAA,EAAA,EAAA,OAAA,CAAyB,CAAS,EA6CxC,OA1CA,EAAA,EAAA,UAAA,KAAgB,CAEd,IAAI,EAEJ,GAAI,GAAa,EAAgB,SAAS,QAAQ,CAAS,IAAM,EAAG,CAGlE,IAAM,EAAY,EAAa,QACzB,EAAgB,SAAS,cAE7B,GAAW,SAAS,CAAa,GACjC,GAAe,aAAa,MAAM,IAAM,eAIxC,EAAY,eAAiB,CAEvB,GAIF,EAH+B,cAC7B,qBAEF,CAAA,EAAc,MAAM,CAExB,EAAG,EAAE,EAET,CAKA,MAHA,GAAgB,QAAU,MAGb,CACP,GACF,aAAa,CAAS,CAE1B,CACF,EAAG,CAAC,CAAS,CAAC,EAGV,IAAgB,MACX,MAIP,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CACE,IAAK,EACL,UAAU,WACV,YAAY,YACZ,GAAG,MACH,GAAG,MACH,WAAW,SACX,eAAe,SACf,IAAI,eARN,EAUE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAM,UAAU,KAAK,WAAW,MAAM,MAAM,sBACzC,EAAI,OAAO,gBAAgB,CACxB,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,KAAK,YACL,QAAQ,QACR,KAAK,KACS,eACH,WACZ,CAAA,CACG,GAEV,EC9Da,EAAc,GAA2B,CACpD,GAAM,CACJ,OAAO,KACP,UACA,cAAc,MACd,eACA,aACE,EAEE,CAAC,EAAa,IAAA,EAAA,EAAA,cAAA,CADS,CAAE,OAAQ,EAAA,CAAqB,CACtB,CAAA,CAAO,kBAAkB,CAAK,EAC9D,CAAC,EAAY,GAAc,EAAA,EAAkB,CAAc,EAG3D,EAAoB,IAAS,KAAO,KAAO,MAI3C,EACJ,IAAgB,OAAQ,EAAM,oBAEhC,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAoB,GAAI,EAAa,GAAI,EAAY,QAAA,aACnD,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,GAAI,EACiB,gCAErB,EAAA,EAAA,KAAA,CAAC,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAqB,QAAA,aACnB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACQ,OACG,UACT,MAAM,OACQ,eACH,YACX,iBACE,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,QAAQ,QACR,KAAM,EACN,KAAK,kBAEL,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAQ,CAAA,CACE,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,QAAQ,QACR,KAAM,EACN,KAAK,2BAEL,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAgB,CAAA,CACN,CAAA,CACT,CAAA,CAAA,CAER,CAAA,CACI,CAAA,CACY,CAAA,GACrB,EAAA,EAAA,IAAA,CAAC,EAAD,CAAuB,QAAA,aACrB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAS,UAAU,uBACjB,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAW,CAAA,CACW,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAD,CACgB,eACH,WACZ,CAAA,CACK,CAAA,CAAA,CACD,CAAA,CACY,CAAA,CACA,CAAA,CAAA,CACN,CAAA,CACH,CAAA,CAExB,EAEA,EAAW,YAAc"}