@uva-glass/component-library 3.55.0 → 3.55.2

package/dist/components/WeekSelector/WeekSelector.stories.js

@@ -1,191 +1,146 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import { mockWeeks as d } from "./mockdata.js";
-import { WeekSelector as n } from "./WeekSelector.js";
-const s = `<WeekSelector 
-  weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};
-  currentPeriod?={number};
-  defaultSelection?={number};
-  weekPrefix={string};
-  periodLabels={string[]};
-  optionsHeader={string};
-  onSelectWeek={(weeknumber: {number}) => void};
- />`, g = {
-  title: "Molecules/WeekSelector",
-  component: n,
-  argTypes: {
-    onSelectWeek: {
-      action: "selected week",
-      table: {
-        disable: !0
-      }
-    },
-    portalContainerRef: {
-      table: {
-        disable: !0
-      }
-    },
-    optionContainerOffset: {
-      table: {
-        disable: !0
-      }
-    },
-    currentPeriod: { table: { disable: !0 } },
-    defaultSelection: { table: { disable: !0 } }
-  },
-  parameters: {
-    inspectComponent: n,
-    codeString: s
-  }
-}, p = (e) => {
-  const o = (l) => {
-    e.onSelectWeek(l);
-  };
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      style: {
-        padding: "1rem",
-        backgroundColor: "#EEE",
-        display: "flex",
-        gap: "1rem",
-        alignItems: "flex-start",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ t(n, { ...e, currentPeriod: 1, onSelectWeek: o }),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 45,
-            currentPeriod: 2,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 2"
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 6,
-            currentPeriod: 3,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 3"
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 13,
-            currentPeriod: 4,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 4"
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 23,
-            currentPeriod: 5,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 5"
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 28,
-            currentPeriod: 6,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 6"
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 36,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Zomer"
-          }
-        )
-      ]
-    }
-  );
-}, i = {
-  weeks: d,
-  weekPrefix: "week",
-  periodLabels: ["Blok 1", "Blok 2", "Blok 3", "Blok 4", "Blok 5", "Blok 6", "Zomer"],
-  optionsHeader: "Kies een planning - Blok 1"
-}, k = p.bind({});
-k.args = {
-  ...i
-};
-const u = (e) => {
-  const o = (a) => {
-    e.onSelectWeek(a);
-  }, l = c(null);
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      ref: l,
-      style: {
-        padding: "1rem",
-        backgroundColor: "#EEE",
-        display: "flex",
-        gap: "1rem",
-        alignItems: "flex-start",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            currentPeriod: 1,
-            onSelectWeek: o,
-            portalContainerRef: l,
-            optionContainerOffset: [-200, -250]
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 45,
-            currentPeriod: 2,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 2",
-            portalContainerRef: l,
-            optionContainerOffset: [-200, -250]
-          }
-        ),
-        /* @__PURE__ */ t(
-          n,
-          {
-            ...e,
-            defaultSelection: 6,
-            currentPeriod: 3,
-            onSelectWeek: o,
-            optionsHeader: "Kies een planning - Blok 3",
-            portalContainerRef: l,
-            optionContainerOffset: [-200, -250]
-          }
-        )
-      ]
-    }
-  );
-}, f = u.bind({});
-f.args = {
-  ...i
-};
-export {
-  f as InAPortal,
-  k as WeekSelectorExample,
-  g as default
-};
-//# sourceMappingURL=WeekSelector.stories.js.map
+import { WeekSelector as e } from "./WeekSelector.js";
+import { mockWeeks as t } from "./mockdata.js";
+import { useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var a = {
+	title: "Molecules/WeekSelector",
+	component: e,
+	argTypes: {
+		onSelectWeek: {
+			action: "selected week",
+			table: { disable: !0 }
+		},
+		portalContainerRef: { table: { disable: !0 } },
+		optionContainerOffset: { table: { disable: !0 } },
+		currentPeriod: { table: { disable: !0 } },
+		defaultSelection: { table: { disable: !0 } }
+	},
+	parameters: {
+		inspectComponent: e,
+		codeString: "<WeekSelector \n  weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\n  currentPeriod?={number};\n  defaultSelection?={number};\n  weekPrefix={string};\n  periodLabels={string[]};\n  optionsHeader={string};\n  onSelectWeek={(weeknumber: {number}) => void};\n />"
+	}
+}, o = (t) => {
+	let n = (e) => {
+		t.onSelectWeek(e);
+	};
+	return /* @__PURE__ */ i("div", {
+		style: {
+			padding: "1rem",
+			backgroundColor: "#EEE",
+			display: "flex",
+			gap: "1rem",
+			alignItems: "flex-start",
+			flexDirection: "column"
+		},
+		children: [
+			/* @__PURE__ */ r(e, {
+				...t,
+				currentPeriod: 1,
+				onSelectWeek: n
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 45,
+				currentPeriod: 2,
+				onSelectWeek: n,
+				optionsHeader: "Kies een planning - Blok 2"
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 6,
+				currentPeriod: 3,
+				onSelectWeek: n,
+				optionsHeader: "Kies een planning - Blok 3"
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 13,
+				currentPeriod: 4,
+				onSelectWeek: n,
+				optionsHeader: "Kies een planning - Blok 4"
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 23,
+				currentPeriod: 5,
+				onSelectWeek: n,
+				optionsHeader: "Kies een planning - Blok 5"
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 28,
+				currentPeriod: 6,
+				onSelectWeek: n,
+				optionsHeader: "Kies een planning - Blok 6"
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 36,
+				onSelectWeek: n,
+				optionsHeader: "Kies een planning - Zomer"
+			})
+		]
+	});
+}, s = {
+	weeks: t,
+	weekPrefix: "week",
+	periodLabels: [
+		"Blok 1",
+		"Blok 2",
+		"Blok 3",
+		"Blok 4",
+		"Blok 5",
+		"Blok 6",
+		"Zomer"
+	],
+	optionsHeader: "Kies een planning - Blok 1"
+}, c = o.bind({});
+c.args = { ...s };
+var l = ((t) => {
+	let a = (e) => {
+		t.onSelectWeek(e);
+	}, o = n(null);
+	return /* @__PURE__ */ i("div", {
+		ref: o,
+		style: {
+			padding: "1rem",
+			backgroundColor: "#EEE",
+			display: "flex",
+			gap: "1rem",
+			alignItems: "flex-start",
+			flexDirection: "column"
+		},
+		children: [
+			/* @__PURE__ */ r(e, {
+				...t,
+				currentPeriod: 1,
+				onSelectWeek: a,
+				portalContainerRef: o,
+				optionContainerOffset: [-200, -250]
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 45,
+				currentPeriod: 2,
+				onSelectWeek: a,
+				optionsHeader: "Kies een planning - Blok 2",
+				portalContainerRef: o,
+				optionContainerOffset: [-200, -250]
+			}),
+			/* @__PURE__ */ r(e, {
+				...t,
+				defaultSelection: 6,
+				currentPeriod: 3,
+				onSelectWeek: a,
+				optionsHeader: "Kies een planning - Blok 3",
+				portalContainerRef: o,
+				optionContainerOffset: [-200, -250]
+			})
+		]
+	});
+}).bind({});
+l.args = { ...s };
+//#endregion
+export { l as InAPortal, c as WeekSelectorExample, a as default };
+
+//# sourceMappingURL=WeekSelector.stories.js.map

package/dist/components/WeekSelector/WeekSelector.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelector.stories.js","sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n  weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n  currentPeriod?={number};\r\n  defaultSelection?={number};\r\n  weekPrefix={string};\r\n  periodLabels={string[]};\r\n  optionsHeader={string};\r\n  onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/WeekSelector',\r\n  component: WeekSelector,\r\n  argTypes: {\r\n    onSelectWeek: {\r\n      action: 'selected week',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    portalContainerRef: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    optionContainerOffset: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    currentPeriod: { table: { disable: true } },\r\n    defaultSelection: { table: { disable: true } },\r\n  },\r\n  parameters: {\r\n    inspectComponent: WeekSelector,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={13}\r\n        currentPeriod={4}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 4\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={23}\r\n        currentPeriod={5}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 5\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={28}\r\n        currentPeriod={6}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 6\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={36}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Zomer\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n  weeks: mockWeeks,\r\n  weekPrefix: 'week',\r\n  periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n  optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n  ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector\r\n        {...args}\r\n        currentPeriod={1}\r\n        onSelectWeek={handleSelectWeek}\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n  ...defaultArgs,\r\n};\r\n"],"names":["codeString","WeekSelector_stories","WeekSelector","Template","args","handleSelectWeek","weekNumber","jsxs","jsx","defaultArgs","mockWeeks","WeekSelectorExample","TemplateWithRef","containerRef","useRef","InAPortal"],"mappings":"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"}
+{"version":3,"file":"WeekSelector.stories.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n  weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n  currentPeriod?={number};\r\n  defaultSelection?={number};\r\n  weekPrefix={string};\r\n  periodLabels={string[]};\r\n  optionsHeader={string};\r\n  onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/WeekSelector',\r\n  component: WeekSelector,\r\n  argTypes: {\r\n    onSelectWeek: {\r\n      action: 'selected week',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    portalContainerRef: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    optionContainerOffset: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    currentPeriod: { table: { disable: true } },\r\n    defaultSelection: { table: { disable: true } },\r\n  },\r\n  parameters: {\r\n    inspectComponent: WeekSelector,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={13}\r\n        currentPeriod={4}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 4\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={23}\r\n        currentPeriod={5}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 5\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={28}\r\n        currentPeriod={6}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 6\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={36}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Zomer\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n  weeks: mockWeeks,\r\n  weekPrefix: 'week',\r\n  periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n  optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n  ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector\r\n        {...args}\r\n        currentPeriod={1}\r\n        onSelectWeek={handleSelectWeek}\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n  ...defaultArgs,\r\n};\r\n"],"mappings":";;;;AAoBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,cAAc;GACZ,QAAQ;GACR,OAAO,EACL,SAAS,IACV;GACF;EACD,oBAAoB,EAClB,OAAO,EACL,SAAS,IACV,EACF;EACD,uBAAuB,EACrB,OAAO,EACL,SAAS,IACV,EACF;EACD,eAAe,EAAE,OAAO,EAAE,SAAS,IAAM,EAAE;EAC3C,kBAAkB,EAAE,OAAO,EAAE,SAAS,IAAM,EAAE;EAC/C;CACD,YAAY;EACV,kBAAkB;EACN,YApCG;EAqChB;CACF,EAEK,KAAwC,MAAS;CACrD,IAAM,KAAoB,MAAuB;AAC/C,IAAK,aAAa,EAAW;;AAG/B,QACE,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GAChB;YARH;GAUE,kBAAC,GAAD;IAAc,GAAI;IAAM,eAAe;IAAG,cAAc;IAAoB,CAAA;GAC5E,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,cAAc;IACd,eAAc;IACd,CAAA;GACE;;GAIJ,IAA0C;CAC9C,OAAO;CACP,YAAY;CACZ,cAAc;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAU;EAAQ;CACnF,eAAe;CAChB,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AAEpD,EAAoB,OAAO,EACzB,GAAG,GACJ;AAqDD,IAAa,MAnDwC,MAAS;CAC5D,IAAM,KAAoB,MAAuB;AAC/C,IAAK,aAAa,EAAW;IAGzB,IAAe,EAAuB,KAAK;AAEjD,QACE,kBAAC,OAAD;EACE,KAAK;EACL,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GAChB;YATH;GAWE,kBAAC,GAAD;IACE,GAAI;IACJ,eAAe;IACf,cAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACE;;GAI+B,KAAK,EAAE,CAAC;AAEjD,EAAU,OAAO,EACf,GAAG,GACJ"}

package/dist/components/WeekSelector/components/WeekSelectorButton.js

@@ -1,22 +1,20 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Icon as s } from "../../Icon/Icon.js";
-import { s as n } from "../../../WeekSelector.module-Clco7jTs.js";
-const m = ({ label: e, onClick: t }) => /* @__PURE__ */ o(
-  "button",
-  {
-    type: "button",
-    className: n["week-selector-button"],
-    tabIndex: 0,
-    "aria-haspopup": "listbox",
-    "aria-label": "Week selector",
-    onClick: t,
-    children: [
-      e,
-      /* @__PURE__ */ r(s, { name: "CheveronDown", size: 20 })
-    ]
-  }
-);
-export {
-  m as WeekSelectorButton
-};
-//# sourceMappingURL=WeekSelectorButton.js.map
+import { Icon as e } from "../../Icon/Icon.js";
+import { t } from "../../../WeekSelector.module-BLPrVYgn.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/WeekSelector/components/WeekSelectorButton.tsx
+var i = ({ label: i, onClick: a }) => /* @__PURE__ */ r("button", {
+	type: "button",
+	className: t["week-selector-button"],
+	tabIndex: 0,
+	"aria-haspopup": "listbox",
+	"aria-label": "Week selector",
+	onClick: a,
+	children: [i, /* @__PURE__ */ n(e, {
+		name: "CheveronDown",
+		size: 20
+	})]
+});
+//#endregion
+export { i as WeekSelectorButton };
+
+//# sourceMappingURL=WeekSelectorButton.js.map

package/dist/components/WeekSelector/components/WeekSelectorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelectorButton.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorButton.tsx"],"sourcesContent":["import { Icon } from 'components/Icon';\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\n\r\nexport interface WeekSelectorButtonProps {\r\n  label: string;\r\n  onClick: () => void;\r\n}\r\n\r\nexport const WeekSelectorButton = ({ label, onClick }: WeekSelectorButtonProps) => {\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      className={styles['week-selector-button']}\r\n      tabIndex={0}\r\n      aria-haspopup=\"listbox\"\r\n      aria-label=\"Week selector\"\r\n      onClick={onClick}\r\n    >\r\n      {label}\r\n      <Icon name=\"CheveronDown\" size={20} />\r\n    </button>\r\n  );\r\n};\r\n"],"names":["WeekSelectorButton","label","onClick","jsxs","styles","jsx","Icon"],"mappings":";;;AAQO,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,SAAAC,QAExC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,WAAWC,EAAO,sBAAsB;AAAA,IACxC,UAAU;AAAA,IACV,iBAAc;AAAA,IACd,cAAW;AAAA,IACX,SAAAF;AAAA,IAEC,UAAA;AAAA,MAAAD;AAAA,MACD,gBAAAI,EAACC,GAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"WeekSelectorButton.js","names":[],"sources":["../../../../src/components/WeekSelector/components/WeekSelectorButton.tsx"],"sourcesContent":["import { Icon } from 'components/Icon';\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\n\r\nexport interface WeekSelectorButtonProps {\r\n  label: string;\r\n  onClick: () => void;\r\n}\r\n\r\nexport const WeekSelectorButton = ({ label, onClick }: WeekSelectorButtonProps) => {\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      className={styles['week-selector-button']}\r\n      tabIndex={0}\r\n      aria-haspopup=\"listbox\"\r\n      aria-label=\"Week selector\"\r\n      onClick={onClick}\r\n    >\r\n      {label}\r\n      <Icon name=\"CheveronDown\" size={20} />\r\n    </button>\r\n  );\r\n};\r\n"],"mappings":";;;;AAQA,IAAa,KAAsB,EAAE,UAAO,iBAExC,kBAAC,UAAD;CACE,MAAK;CACL,WAAW,EAAO;CAClB,UAAU;CACV,iBAAc;CACd,cAAW;CACF;WANX,CAQG,GACD,kBAAC,GAAD;EAAM,MAAK;EAAe,MAAM;EAAM,CAAA,CAC/B"}

package/dist/components/WeekSelector/components/WeekSelectorOption.js

@@ -1,86 +1,73 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as f } from "../../../clsx-OuTLNxxd.js";
-import { s as a } from "../../../WeekSelector.module-Clco7jTs.js";
-const h = ({
-  periodIndex: i,
-  weeks: d,
-  selectedOption: o,
-  disabled: m,
-  setSelectedOption: b,
-  onSelectWeek: u,
-  setIsOpen: c
-}) => {
-  const p = (e) => {
-    const t = e.currentTarget;
-    switch (e.key) {
-      case "ArrowRight": {
-        e.preventDefault();
-        let r = t.nextElementSibling;
-        for (; r && r.disabled; )
-          r = r.nextElementSibling;
-        r?.focus();
-        break;
-      }
-      case "ArrowLeft": {
-        e.preventDefault();
-        let r = t.previousElementSibling;
-        for (; r && r.disabled; )
-          r = r.previousElementSibling;
-        r?.focus();
-        break;
-      }
-      case "ArrowDown": {
-        e.preventDefault();
-        const r = Array.from(t.parentElement?.children ?? []).indexOf(t);
-        let n = t.parentElement?.nextElementSibling;
-        for (; n; ) {
-          const l = n.children[r];
-          if (l && !l.disabled) {
-            l.focus();
-            break;
-          }
-          n = n.nextElementSibling;
-        }
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        const r = Array.from(t.parentElement?.children ?? []).indexOf(t);
-        let n = t.parentElement?.previousElementSibling;
-        for (; n; ) {
-          const l = n.children[r];
-          if (l && !l.disabled) {
-            l.focus();
-            break;
-          }
-          n = n.previousElementSibling;
-        }
-        break;
-      }
-      case "Tab":
-        c(!1);
-        break;
-    }
-  };
-  return /* @__PURE__ */ s("div", { className: a["week-selector-option-week-row"], children: d[i].map((e) => /* @__PURE__ */ s(
-    "button",
-    {
-      type: "button",
-      className: f(a["week-selector-option-week"], [
-        o === e.calendarWeekNumber && a["week-selector-option-week--selected"]
-      ]),
-      disabled: e.isBlocked || m,
-      onKeyDown: p,
-      onClick: () => {
-        e.isBlocked || (b(e.calendarWeekNumber), u(e.calendarWeekNumber), c(!1));
-      },
-      autoFocus: o === e.calendarWeekNumber,
-      children: e.calendarWeekNumber
-    },
-    e.weekNumber
-  )) }, i);
+import { t as e } from "../../../clsx-BD2qMUU1.js";
+import { t } from "../../../WeekSelector.module-BLPrVYgn.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/WeekSelector/components/WeekSelectorOption.tsx
+var r = ({ periodIndex: r, weeks: i, selectedOption: a, disabled: o, setSelectedOption: s, onSelectWeek: c, setIsOpen: l }) => {
+	let u = (e) => {
+		let t = e.currentTarget;
+		switch (e.key) {
+			case "ArrowRight": {
+				e.preventDefault();
+				let n = t.nextElementSibling;
+				for (; n && n.disabled;) n = n.nextElementSibling;
+				n?.focus();
+				break;
+			}
+			case "ArrowLeft": {
+				e.preventDefault();
+				let n = t.previousElementSibling;
+				for (; n && n.disabled;) n = n.previousElementSibling;
+				n?.focus();
+				break;
+			}
+			case "ArrowDown": {
+				e.preventDefault();
+				let n = Array.from(t.parentElement?.children ?? []).indexOf(t), r = t.parentElement?.nextElementSibling;
+				for (; r;) {
+					let e = r.children[n];
+					if (e && !e.disabled) {
+						e.focus();
+						break;
+					}
+					r = r.nextElementSibling;
+				}
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let n = Array.from(t.parentElement?.children ?? []).indexOf(t), r = t.parentElement?.previousElementSibling;
+				for (; r;) {
+					let e = r.children[n];
+					if (e && !e.disabled) {
+						e.focus();
+						break;
+					}
+					r = r.previousElementSibling;
+				}
+				break;
+			}
+			case "Tab":
+				l(!1);
+				break;
+			default: break;
+		}
+	};
+	return /* @__PURE__ */ n("div", {
+		className: t["week-selector-option-week-row"],
+		children: i[r].map((r) => /* @__PURE__ */ n("button", {
+			type: "button",
+			className: e(t["week-selector-option-week"], [a === r.calendarWeekNumber && t["week-selector-option-week--selected"]]),
+			disabled: r.isBlocked || o,
+			onKeyDown: u,
+			onClick: () => {
+				r.isBlocked || (s(r.calendarWeekNumber), c(r.calendarWeekNumber), l(!1));
+			},
+			autoFocus: a === r.calendarWeekNumber,
+			children: r.calendarWeekNumber
+		}, r.weekNumber))
+	}, r);
 };
-export {
-  h as WeekSelectorOption
-};
-//# sourceMappingURL=WeekSelectorOption.js.map
+//#endregion
+export { r as WeekSelectorOption };
+
+//# sourceMappingURL=WeekSelectorOption.js.map

package/dist/components/WeekSelector/components/WeekSelectorOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelectorOption.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n  periodIndex: string;\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  selectedOption: number | null;\r\n  disabled?: boolean;\r\n  setSelectedOption: (weekNumber: number) => void;\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n  periodIndex,\r\n  weeks,\r\n  selectedOption,\r\n  disabled,\r\n  setSelectedOption,\r\n  onSelectWeek,\r\n  setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n    const current = event.currentTarget;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n        while (nextElement && nextElement.disabled) {\r\n          nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n        }\r\n        nextElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n        while (prevElement && prevElement.disabled) {\r\n          prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n        }\r\n        prevElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n        while (nextRow) {\r\n          const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n        while (prevRow) {\r\n          const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        setIsOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n  return (\r\n    <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n      {weeks[periodIndex].map((week) => (\r\n        <button\r\n          key={week.weekNumber}\r\n          type=\"button\"\r\n          className={clsx(styles['week-selector-option-week'], [\r\n            selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n          ])}\r\n          disabled={week.isBlocked || disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onClick={() => {\r\n            if (!week.isBlocked) {\r\n              setSelectedOption(week.calendarWeekNumber);\r\n              onSelectWeek(week.calendarWeekNumber);\r\n              setIsOpen(false);\r\n            }\r\n          }}\r\n          autoFocus={selectedOption === week.calendarWeekNumber}\r\n        >\r\n          {week.calendarWeekNumber}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["WeekSelectorOption","periodIndex","weeks","selectedOption","disabled","setSelectedOption","onSelectWeek","setIsOpen","handleKeyDown","event","current","nextElement","prevElement","currentIndex","nextRow","candidate","prevRow","jsx","styles","week","clsx"],"mappings":";;;AAgBO,MAAMA,IAAqB,CAAC;AAAA,EACjC,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,MAA+B;AAC7B,QAAMC,IAAgB,CAACC,MAA4C;AACjE,UAAMC,IAAUD,EAAM;AAEtB,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK,cAAc;AACjB,QAAAA,EAAM,eAAA;AACN,YAAIE,IAAcD,EAAQ;AAC1B,eAAOC,KAAeA,EAAY;AAChC,UAAAA,IAAcA,EAAY;AAE5B,QAAAA,GAAa,MAAA;AACb;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,QAAAF,EAAM,eAAA;AACN,YAAIG,IAAcF,EAAQ;AAC1B,eAAOE,KAAeA,EAAY;AAChC,UAAAA,IAAcA,EAAY;AAE5B,QAAAA,GAAa,MAAA;AACb;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,QAAAH,EAAM,eAAA;AACN,cAAMI,IAAe,MAAM,KAAKH,EAAQ,eAAe,YAAY,CAAA,CAAE,EAAE,QAAQA,CAAO;AACtF,YAAII,IAAUJ,EAAQ,eAAe;AACrC,eAAOI,KAAS;AACd,gBAAMC,IAAYD,EAAQ,SAASD,CAAY;AAC/C,cAAIE,KAAa,CAACA,EAAU,UAAU;AACpC,YAAAA,EAAU,MAAA;AACV;AAAA,UACF;AACA,UAAAD,IAAUA,EAAQ;AAAA,QACpB;AACA;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,QAAAL,EAAM,eAAA;AACN,cAAMI,IAAe,MAAM,KAAKH,EAAQ,eAAe,YAAY,CAAA,CAAE,EAAE,QAAQA,CAAO;AACtF,YAAIM,IAAUN,EAAQ,eAAe;AACrC,eAAOM,KAAS;AACd,gBAAMD,IAAYC,EAAQ,SAASH,CAAY;AAC/C,cAAIE,KAAa,CAACA,EAAU,UAAU;AACpC,YAAAA,EAAU,MAAA;AACV;AAAA,UACF;AACA,UAAAC,IAAUA,EAAQ;AAAA,QACpB;AACA;AAAA,MACF;AAAA,MACA,KAAK;AACH,QAAAT,EAAU,EAAK;AACf;AAAA,IAEA;AAAA,EAEN;AACA,SACE,gBAAAU,EAAC,OAAA,EAAsB,WAAWC,EAAO,+BAA+B,GACrE,UAAAhB,EAAMD,CAAW,EAAE,IAAI,CAACkB,MACvB,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,MAAK;AAAA,MACL,WAAWG,EAAKF,EAAO,2BAA2B,GAAG;AAAA,QACnDf,MAAmBgB,EAAK,sBAAsBD,EAAO,qCAAqC;AAAA,MAAA,CAC3F;AAAA,MACD,UAAUC,EAAK,aAAaf;AAAA,MAC5B,WAAWI;AAAA,MACX,SAAS,MAAM;AACb,QAAKW,EAAK,cACRd,EAAkBc,EAAK,kBAAkB,GACzCb,EAAaa,EAAK,kBAAkB,GACpCZ,EAAU,EAAK;AAAA,MAEnB;AAAA,MACA,WAAWJ,MAAmBgB,EAAK;AAAA,MAElC,UAAAA,EAAK;AAAA,IAAA;AAAA,IAhBDA,EAAK;AAAA,EAAA,CAkBb,KArBOlB,CAsBV;AAEJ;"}
+{"version":3,"file":"WeekSelectorOption.js","names":[],"sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n  periodIndex: string;\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  selectedOption: number | null;\r\n  disabled?: boolean;\r\n  setSelectedOption: (weekNumber: number) => void;\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n  periodIndex,\r\n  weeks,\r\n  selectedOption,\r\n  disabled,\r\n  setSelectedOption,\r\n  onSelectWeek,\r\n  setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n    const current = event.currentTarget;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n        while (nextElement && nextElement.disabled) {\r\n          nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n        }\r\n        nextElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n        while (prevElement && prevElement.disabled) {\r\n          prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n        }\r\n        prevElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n        while (nextRow) {\r\n          const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n        while (prevRow) {\r\n          const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        setIsOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n  return (\r\n    <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n      {weeks[periodIndex].map((week) => (\r\n        <button\r\n          key={week.weekNumber}\r\n          type=\"button\"\r\n          className={clsx(styles['week-selector-option-week'], [\r\n            selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n          ])}\r\n          disabled={week.isBlocked || disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onClick={() => {\r\n            if (!week.isBlocked) {\r\n              setSelectedOption(week.calendarWeekNumber);\r\n              onSelectWeek(week.calendarWeekNumber);\r\n              setIsOpen(false);\r\n            }\r\n          }}\r\n          autoFocus={selectedOption === week.calendarWeekNumber}\r\n        >\r\n          {week.calendarWeekNumber}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;AAgBA,IAAa,KAAsB,EACjC,gBACA,UACA,mBACA,aACA,sBACA,iBACA,mBAC6B;CAC7B,IAAM,KAAiB,MAA4C;EACjE,IAAM,IAAU,EAAM;AAEtB,UAAQ,EAAM,KAAd;GACE,KAAK,cAAc;AACjB,MAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;AAC1B,WAAO,KAAe,EAAY,UAChC,KAAc,EAAY;AAE5B,OAAa,OAAO;AACpB;;GAEF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;AAC1B,WAAO,KAAe,EAAY,UAChC,KAAc,EAAY;AAE5B,OAAa,OAAO;AACpB;;GAEF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;AACrC,WAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;AACnC,SAAI,KAAa,CAAC,EAAU,UAAU;AACpC,QAAU,OAAO;AACjB;;AAEF,SAAU,EAAQ;;AAEpB;;GAEF,KAAK,WAAW;AACd,MAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;AACrC,WAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;AACnC,SAAI,KAAa,CAAC,EAAU,UAAU;AACpC,QAAU,OAAO;AACjB;;AAEF,SAAU,EAAQ;;AAEpB;;GAEF,KAAK;AACH,MAAU,GAAM;AAChB;GACF,QACE;;;AAGN,QACE,kBAAC,OAAD;EAAuB,WAAW,EAAO;YACtC,EAAM,GAAa,KAAK,MACvB,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CACnD,MAAmB,EAAK,sBAAsB,EAAO,uCACtD,CAAC;GACF,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;AACb,IAAK,EAAK,cACR,EAAkB,EAAK,mBAAmB,EAC1C,EAAa,EAAK,mBAAmB,EACrC,EAAU,GAAM;;GAGpB,WAAW,MAAmB,EAAK;aAElC,EAAK;GACC,EAjBF,EAAK,WAiBH,CACT;EACE,EAtBI,EAsBJ"}