@new-black/lyra 1.0.17 → 1.0.18

package/dist/lyra23.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lyra23.cjs","sources":["../src/components/inputs/date-picker/date-picker.tsx"],"sourcesContent":["import { ElementRef, ForwardedRef, KeyboardEventHandler, useContext, useRef } from \"react\";\nimport {\n  Button as AriaButton,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarStateContext,\n  DateInput,\n  DatePicker as AriaDatePicker,\n  DatePickerContext,\n  DatePickerProps as AriaDatePickerProps,\n  DatePickerStateContext,\n  DateSegment,\n  DateValue,\n  Group,\n  useContextProps,\n} from \"react-aria-components\";\n\nimport { VariantProps } from \"tailwind-variants\";\n\nimport { fixedForwardRef } from \"../../../utils/helpers\";\nimport { useDictionary } from \"../../../utils/providers/dictionary-provider\";\nimport { Popover } from \"../../overlays\";\nimport { SvgIcon } from \"../../svg-icon\";\nimport { Tooltip } from \"../../tooltip\";\nimport {\n  InputFooter,\n  InputFooterProps,\n  InputHeader,\n  InputHeaderProps,\n  sharedInputStyles,\n} from \"../shared\";\n\nimport {\n  dataPickerCalendarGridStyles,\n  dateFieldStyles,\n  datePickerHeaderStyles,\n} from \"./date-picker.styles\";\nimport { DatePickerCalendarGridHeader, MonthPicker, YearPicker } from \"./shared\";\n\nexport type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, \"className\"> &\n  Omit<VariantProps<typeof sharedInputStyles>, \"hasStartSlot\" | \"hasEndSlot\"> &\n  InputHeaderProps &\n  InputFooterProps & {\n    className?: string;\n    startSlot?: JSX.Element;\n  };\n\nexport type { DateValue };\n\nconst _DatePicker = <T extends DateValue>(\n  {\n    className,\n    description,\n    errorMessage,\n    fullWidth = true,\n    granularity = \"day\",\n    hideHintLabel,\n    hideInputFooter,\n    hideInputHeader,\n    label,\n    startSlot,\n    ...props\n  }: DatePickerProps<T>,\n  ref: ForwardedRef<ElementRef<typeof AriaDatePicker>>,\n) => {\n  [props, ref] = useContextProps(props, ref, DatePickerContext);\n  const { isInvalid, isRequired } = props;\n\n  const { wrapper } = sharedInputStyles({\n    fullWidth,\n    hasStartSlot: !!startSlot,\n    hasEndSlot: true,\n  });\n\n  return (\n    <AriaDatePicker\n      {...props}\n      granularity={granularity}\n      className={(renderProps) =>\n        wrapper({\n          className,\n          isDisabled: renderProps.isDisabled,\n        })\n      }\n      isInvalid={isInvalid}\n      ref={ref}\n    >\n      {({ isDisabled, state }) => (\n        <>\n          <DatePickerInput\n            description={description}\n            fullWidth={fullWidth}\n            errorMessage={errorMessage}\n            hideHintLabel={hideHintLabel}\n            hideInputFooter={hideInputFooter}\n            hideInputHeader={hideInputHeader}\n            isDisabled={isDisabled}\n            isRequired={isRequired}\n            label={label}\n            startSlot={startSlot}\n            onKeyDown={(e) => {\n              if (e.key === \"Escape\" && state.value && !isDisabled) {\n                e.preventDefault();\n                state.setValue(null);\n              }\n            }}\n          />\n          <Popover disablePadding className=\"group\">\n            <Calendar>\n              <div className=\"flex flex-col gap-3 p-3\">\n                <DatePickerHeader />\n                <div className=\"flex justify-center\">\n                  <CalendarGrid className=\"w-full text-center\">\n                    <DatePickerCalendarGridHeader />\n                    <DatePickerCalendarGridBody />\n                  </CalendarGrid>\n                </div>\n              </div>\n            </Calendar>\n          </Popover>\n        </>\n      )}\n    </AriaDatePicker>\n  );\n};\n\nexport const DatePicker = fixedForwardRef(_DatePicker);\n//@ts-ignore\nDatePicker.displayName = \"DatePicker\";\ntype DatePickerInputProps = VariantProps<typeof sharedInputStyles> &\n  InputHeaderProps &\n  InputFooterProps & {\n    startSlot?: JSX.Element;\n    onKeyDown?: KeyboardEventHandler<HTMLElement>;\n  };\n\nconst DatePickerInput = ({\n  description,\n  errorMessage,\n  fullWidth,\n  hideHintLabel,\n  hideInputFooter,\n  hideInputHeader,\n  isDisabled,\n  isRequired,\n  label,\n  onKeyDown,\n  startSlot,\n}: DatePickerInputProps) => {\n  const { input, segment: segmentStyles } = dateFieldStyles();\n  const { button, buttonExcludedFromTabOrder, inputField } = sharedInputStyles({\n    fullWidth,\n    hasStartSlot: !!startSlot,\n    hasEndSlot: true,\n  });\n  const { clear } = useDictionary();\n  const { setValue, value } = useContext(DatePickerStateContext);\n  const calendarButtonRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <InputHeader\n        label={label}\n        hideHintLabel={hideHintLabel}\n        hideInputHeader={hideInputHeader}\n        isRequired={isRequired}\n      />\n      <Group\n        className={({ isDisabled, isFocusWithin, isHovered, isInvalid }) =>\n          inputField({\n            isDisabled,\n            isFocused: isFocusWithin,\n            isHovered,\n            isInvalid,\n            className: \"min-h-8\",\n          })\n        }\n        onKeyDown={onKeyDown}\n      >\n        <DateInput className={input()}>\n          {(segment) => (\n            <DateSegment\n              className={({ isFocused }) => {\n                return segmentStyles({\n                  isFocused,\n                  isDisabled,\n                  // consider literals (separators between segments) to have a value when a full date is entered\n                  hasValue: segment.type === \"literal\" ? !!value : !segment.isPlaceholder,\n                });\n              }}\n              segment={segment}\n            />\n          )}\n        </DateInput>\n\n        <div className=\"ms-auto flex gap-2\">\n          {!isDisabled && value ? (\n            <Tooltip tooltip={clear}>\n              <AriaButton\n                slot={null}\n                excludeFromTabOrder\n                className={buttonExcludedFromTabOrder()}\n                onPress={() => {\n                  setValue(null);\n                  // focus the calendar button after clearing the value\n                  // this way the user can easily open the calendar again\n                  // plus focusing another element afterwards makes sure that the focus is moved\n                  // https://n6k.atlassian.net/browse/OPTR-31779\n                  calendarButtonRef.current?.focus();\n                }}\n              >\n                <SvgIcon name=\"clear\" />\n              </AriaButton>\n            </Tooltip>\n          ) : null}\n          <AriaButton\n            ref={calendarButtonRef}\n            isDisabled={isDisabled}\n            className={({ isDisabled, isFocusVisible, isHovered }) =>\n              button({ isDisabled, isFocused: isFocusVisible, isHovered })\n            }\n          >\n            <SvgIcon name=\"calendar\" />\n          </AriaButton>\n        </div>\n      </Group>\n      <InputFooter\n        description={description}\n        errorMessage={errorMessage}\n        hideInputFooter={hideInputFooter}\n      />\n    </>\n  );\n};\n\nconst DatePickerHeader = () => {\n  const { buttons } = datePickerHeaderStyles();\n\n  const { focusedDate, setFocusedDate } = useContext(CalendarStateContext);\n\n  return (\n    <header className=\"flex justify-between gap-3\">\n      <AriaButton slot=\"previous\" className={buttons()}>\n        <SvgIcon name=\"chevron-left\" />\n      </AriaButton>\n\n      <div className=\"flex gap-1\">\n        <MonthPicker\n          value={focusedDate.month}\n          onChange={(value) => {\n            setFocusedDate(focusedDate.copy().set({ month: value }));\n          }}\n        />\n        <YearPicker\n          value={focusedDate.year}\n          onChange={(value) => {\n            setFocusedDate(focusedDate.copy().set({ year: value }));\n          }}\n        />\n      </div>\n\n      <AriaButton slot=\"next\" className={buttons()}>\n        <SvgIcon name=\"chevron-right\" />\n      </AriaButton>\n    </header>\n  );\n};\n\nconst DatePickerCalendarGridBody = () => {\n  const { bodyCell } = dataPickerCalendarGridStyles();\n\n  return (\n    <CalendarGridBody>\n      {(date) => (\n        <CalendarCell\n          date={date}\n          className={({\n            isDisabled,\n            isFocusVisible,\n            isHovered,\n            isOutsideMonth,\n            isPressed,\n            isSelected,\n            isUnavailable,\n          }) =>\n            bodyCell({\n              isSelected,\n              isFocusVisible,\n              isHovered,\n              isUnavailable,\n              isDisabled,\n              isOutsideMonth,\n              isPressed,\n            })\n          }\n        />\n      )}\n    </CalendarGridBody>\n  );\n};\n"],"names":["_DatePicker","className","description","errorMessage","fullWidth","granularity","hideHintLabel","hideInputFooter","hideInputHeader","label","startSlot","props","ref","useContextProps","DatePickerContext","isInvalid","isRequired","wrapper","sharedInputStyles","jsxDEV","AriaDatePicker","renderProps","isDisabled","state","Fragment","DatePickerInput","e","this","Popover","Calendar","DatePickerHeader","CalendarGrid","DatePickerCalendarGridHeader","DatePickerCalendarGridBody","DatePicker","fixedForwardRef","onKeyDown","input","segmentStyles","dateFieldStyles","button","buttonExcludedFromTabOrder","inputField","clear","useDictionary","setValue","value","useContext","DatePickerStateContext","calendarButtonRef","useRef","InputHeader","Group","isFocusWithin","isHovered","DateInput","segment","DateSegment","isFocused","Tooltip","AriaButton","_a","SvgIcon","isFocusVisible","InputFooter","buttons","datePickerHeaderStyles","focusedDate","setFocusedDate","CalendarStateContext","MonthPicker","YearPicker","bodyCell","dataPickerCalendarGridStyles","CalendarGridBody","date","CalendarCell","isOutsideMonth","isPressed","isSelected","isUnavailable"],"mappings":"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"}
+{"version":3,"file":"lyra23.cjs","sources":["../src/components/inputs/date-picker/date-picker.tsx"],"sourcesContent":["import { ElementRef, ForwardedRef, KeyboardEventHandler, useContext, useRef } from \"react\";\nimport {\n  Button as AriaButton,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarStateContext,\n  DateInput,\n  DatePicker as AriaDatePicker,\n  DatePickerContext,\n  DatePickerProps as AriaDatePickerProps,\n  DatePickerStateContext,\n  DateSegment,\n  DateValue,\n  Group,\n  useContextProps,\n} from \"react-aria-components\";\n\nimport { VariantProps } from \"tailwind-variants\";\n\nimport { fixedForwardRef } from \"../../../utils/helpers\";\nimport { useDictionary } from \"../../../utils/providers/dictionary-provider\";\nimport { Popover } from \"../../overlays\";\nimport { SvgIcon } from \"../../svg-icon\";\nimport { Tooltip } from \"../../tooltip\";\nimport {\n  InputFooter,\n  InputFooterProps,\n  InputHeader,\n  InputHeaderProps,\n  sharedInputStyles,\n} from \"../shared\";\n\nimport {\n  dataPickerCalendarGridStyles,\n  dateFieldStyles,\n  datePickerHeaderStyles,\n} from \"./date-picker.styles\";\nimport { DatePickerCalendarGridHeader, MonthPicker, YearPicker } from \"./shared\";\n\nexport type DatePickerProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, \"className\"> &\n  Omit<VariantProps<typeof sharedInputStyles>, \"hasStartSlot\" | \"hasEndSlot\"> &\n  InputHeaderProps &\n  InputFooterProps & {\n    className?: string;\n    startSlot?: JSX.Element;\n  };\n\nexport type { DateValue };\n\nconst _DatePicker = <T extends DateValue>(\n  {\n    className,\n    description,\n    errorMessage,\n    fullWidth = true,\n    granularity = \"day\",\n    hideHintLabel,\n    hideInputFooter,\n    hideInputHeader,\n    label,\n    startSlot,\n    ...props\n  }: DatePickerProps<T>,\n  ref: ForwardedRef<ElementRef<typeof AriaDatePicker>>,\n) => {\n  [props, ref] = useContextProps(props, ref, DatePickerContext);\n  const { isInvalid, isRequired } = props;\n\n  const { wrapper } = sharedInputStyles({\n    fullWidth,\n    hasStartSlot: !!startSlot,\n    hasEndSlot: true,\n  });\n\n  return (\n    <AriaDatePicker\n      {...props}\n      granularity={granularity}\n      className={(renderProps) =>\n        wrapper({\n          className,\n          isDisabled: renderProps.isDisabled,\n        })\n      }\n      isInvalid={isInvalid}\n      ref={ref}\n    >\n      {({ isDisabled, state }) => (\n        <>\n          <DatePickerInput\n            description={description}\n            fullWidth={fullWidth}\n            errorMessage={errorMessage}\n            hideHintLabel={hideHintLabel}\n            hideInputFooter={hideInputFooter}\n            hideInputHeader={hideInputHeader}\n            isDisabled={isDisabled}\n            isRequired={isRequired}\n            label={label}\n            startSlot={startSlot}\n            onKeyDown={(e) => {\n              if (e.key === \"Escape\" && state.value && !isDisabled) {\n                e.preventDefault();\n                state.setValue(null);\n              }\n            }}\n          />\n          <Popover disablePadding className=\"group\">\n            <Calendar>\n              <div className=\"flex flex-col gap-3 p-3\">\n                <DatePickerHeader />\n                <div className=\"flex justify-center\">\n                  <CalendarGrid className=\"w-full text-center\">\n                    <DatePickerCalendarGridHeader />\n                    <DatePickerCalendarGridBody />\n                  </CalendarGrid>\n                </div>\n              </div>\n            </Calendar>\n          </Popover>\n        </>\n      )}\n    </AriaDatePicker>\n  );\n};\n\nexport const DatePicker = fixedForwardRef(_DatePicker);\n//@ts-ignore\nDatePicker.displayName = \"DatePicker\";\ntype DatePickerInputProps = VariantProps<typeof sharedInputStyles> &\n  InputHeaderProps &\n  InputFooterProps & {\n    startSlot?: JSX.Element;\n    onKeyDown?: KeyboardEventHandler<HTMLElement>;\n  };\n\nconst DatePickerInput = ({\n  description,\n  errorMessage,\n  fullWidth,\n  hideHintLabel,\n  hideInputFooter,\n  hideInputHeader,\n  isDisabled,\n  isRequired,\n  label,\n  onKeyDown,\n  startSlot,\n}: DatePickerInputProps) => {\n  const { input, segment: segmentStyles } = dateFieldStyles();\n  const { button, buttonExcludedFromTabOrder, inputField } = sharedInputStyles({\n    fullWidth,\n    hasStartSlot: !!startSlot,\n    hasEndSlot: true,\n  });\n  const { clear } = useDictionary();\n  const { setValue, value } = useContext(DatePickerStateContext);\n  const calendarButtonRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <InputHeader\n        label={label}\n        hideHintLabel={hideHintLabel}\n        hideInputHeader={hideInputHeader}\n        isRequired={isRequired}\n      />\n      <Group\n        className={({ isDisabled, isFocusWithin, isHovered, isInvalid }) =>\n          inputField({\n            isDisabled,\n            isFocused: isFocusWithin,\n            isHovered,\n            isInvalid,\n            className: \"min-h-8\",\n          })\n        }\n        onKeyDown={onKeyDown}\n      >\n        <DateInput className={input()}>\n          {(segment) => (\n            <DateSegment\n              className={({ isFocused }) => {\n                return segmentStyles({\n                  isFocused,\n                  isDisabled,\n                  // consider literals (separators between segments) to have a value when a full date is entered\n                  hasValue: segment.type === \"literal\" ? !!value : !segment.isPlaceholder,\n                });\n              }}\n              segment={segment}\n            />\n          )}\n        </DateInput>\n\n        <div className=\"ms-auto flex gap-2\">\n          {!isDisabled && value ? (\n            <Tooltip tooltip={clear}>\n              <AriaButton\n                slot={null}\n                excludeFromTabOrder\n                className={buttonExcludedFromTabOrder()}\n                onPress={() => {\n                  setValue(null);\n                  // focus the calendar button after clearing the value\n                  // this way the user can easily open the calendar again\n                  // plus focusing another element afterwards makes sure that the focus is moved\n                  // https://n6k.atlassian.net/browse/OPTR-31779\n                  calendarButtonRef.current?.focus();\n                }}\n              >\n                <SvgIcon name=\"clear\" />\n              </AriaButton>\n            </Tooltip>\n          ) : null}\n          <AriaButton\n            ref={calendarButtonRef}\n            isDisabled={isDisabled}\n            className={({ isDisabled, isFocusVisible, isHovered }) =>\n              button({ isDisabled, isFocused: isFocusVisible, isHovered })\n            }\n          >\n            <SvgIcon name=\"calendar\" />\n          </AriaButton>\n        </div>\n      </Group>\n      <InputFooter\n        description={description}\n        errorMessage={errorMessage}\n        hideInputFooter={hideInputFooter}\n      />\n    </>\n  );\n};\n\nconst DatePickerHeader = () => {\n  const { buttons } = datePickerHeaderStyles();\n\n  const { focusedDate, setFocusedDate } = useContext(CalendarStateContext);\n\n  return (\n    <header className=\"flex justify-between gap-3\">\n      <AriaButton slot=\"previous\" className={buttons()}>\n        <SvgIcon name=\"chevron-left\" />\n      </AriaButton>\n\n      <div className=\"flex gap-1\">\n        <MonthPicker\n          value={focusedDate.month}\n          onChange={(value) => {\n            setFocusedDate(focusedDate.copy().set({ month: value }));\n          }}\n        />\n        <YearPicker\n          value={focusedDate.year}\n          onChange={(value) => {\n            setFocusedDate(focusedDate.copy().set({ year: value }));\n          }}\n        />\n      </div>\n\n      <AriaButton slot=\"next\" className={buttons()}>\n        <SvgIcon name=\"chevron-right\" />\n      </AriaButton>\n    </header>\n  );\n};\n\nconst DatePickerCalendarGridBody = () => {\n  const { bodyCell } = dataPickerCalendarGridStyles();\n\n  return (\n    <CalendarGridBody>\n      {(date) => (\n        <CalendarCell\n          date={date}\n          className={({\n            isDisabled,\n            isFocusVisible,\n            isHovered,\n            isOutsideMonth,\n            isPressed,\n            isSelected,\n            isUnavailable,\n          }) =>\n            bodyCell({\n              isSelected,\n              isFocusVisible,\n              isHovered,\n              isUnavailable,\n              isDisabled,\n              isOutsideMonth,\n              isPressed,\n            })\n          }\n        />\n      )}\n    </CalendarGridBody>\n  );\n};\n"],"names":["_DatePicker","className","description","errorMessage","fullWidth","granularity","hideHintLabel","hideInputFooter","hideInputHeader","label","startSlot","props","ref","useContextProps","DatePickerContext","isInvalid","isRequired","wrapper","sharedInputStyles","jsx","AriaDatePicker","renderProps","isDisabled","state","jsxs","Fragment","DatePickerInput","e","Popover","Calendar","DatePickerHeader","CalendarGrid","DatePickerCalendarGridHeader","DatePickerCalendarGridBody","DatePicker","fixedForwardRef","onKeyDown","input","segmentStyles","dateFieldStyles","button","buttonExcludedFromTabOrder","inputField","clear","useDictionary","setValue","value","useContext","DatePickerStateContext","calendarButtonRef","useRef","InputHeader","Group","isFocusWithin","isHovered","DateInput","segment","DateSegment","isFocused","Tooltip","AriaButton","_a","SvgIcon","isFocusVisible","InputFooter","buttons","datePickerHeaderStyles","focusedDate","setFocusedDate","CalendarStateContext","MonthPicker","YearPicker","bodyCell","dataPickerCalendarGridStyles","CalendarGridBody","date","CalendarCell","isOutsideMonth","isPressed","isSelected","isUnavailable"],"mappings":"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"}

package/dist/lyra23.js

@@ -1,396 +1,220 @@
 import { j as e } from "./lyra90.js";
-import { useContext as h, useRef as C } from "react";
-import { useContextProps as S, DatePickerContext as g, DatePicker as F, Calendar as I, CalendarGrid as G, DatePickerStateContext as w, Group as R, DateInput as B, DateSegment as H, Button as x, CalendarStateContext as T, CalendarGridBody as O, CalendarCell as q } from "./lyra89.js";
-import { fixedForwardRef as K } from "./lyra93.js";
-import { useDictionary as M } from "./lyra95.js";
-import { Popover as Y } from "./lyra53.js";
+import { useContext as v, useRef as F } from "react";
+import { useContextProps as I, DatePickerContext as G, DatePicker as w, Calendar as E, CalendarGrid as R, DatePickerStateContext as B, Group as H, DateInput as T, DateSegment as V, Button as b, CalendarStateContext as O, CalendarGridBody as q, CalendarCell as K } from "./lyra89.js";
+import { fixedForwardRef as M } from "./lyra93.js";
+import { useDictionary as Y } from "./lyra95.js";
+import { Popover as _ } from "./lyra53.js";
 import "./lyra54.js";
 import "./lyra55.js";
 import "./lyra56.js";
-import { SvgIcon as j } from "./lyra65.js";
-import { Tooltip as _ } from "./lyra75.js";
-import { InputHeader as z } from "./lyra38.js";
-import { InputFooter as A } from "./lyra39.js";
-import { sharedInputStyles as U } from "./lyra40.js";
-import { dateFieldStyles as J, datePickerHeaderStyles as L, dataPickerCalendarGridStyles as Q } from "./lyra24.js";
-import { DatePickerCalendarGridHeader as X, MonthPicker as Z, YearPicker as W } from "./lyra612.js";
+import { SvgIcon as h } from "./lyra65.js";
+import { Tooltip as z } from "./lyra75.js";
+import { InputHeader as A } from "./lyra38.js";
+import { InputFooter as J } from "./lyra39.js";
+import { sharedInputStyles as S } from "./lyra40.js";
+import { dateFieldStyles as L, datePickerHeaderStyles as Q, dataPickerCalendarGridStyles as U } from "./lyra24.js";
+import { DatePickerCalendarGridHeader as X, MonthPicker as Z, YearPicker as W } from "./lyra604.js";
 const ee = ({
-  className: s,
-  description: i,
-  errorMessage: n,
-  fullWidth: t = !0,
-  granularity: o = "day",
-  hideHintLabel: l,
-  hideInputFooter: a,
-  hideInputHeader: m,
-  label: p,
-  startSlot: N,
-  ...c
-}, u) => {
-  [c, u] = S(c, u, g);
-  const { isInvalid: D, isRequired: y } = c, { wrapper: v } = U({
-    fullWidth: t,
-    hasStartSlot: !!N,
+  className: r,
+  description: a,
+  errorMessage: d,
+  fullWidth: s = !0,
+  granularity: n = "day",
+  hideHintLabel: i,
+  hideInputFooter: c,
+  hideInputHeader: f,
+  label: x,
+  startSlot: p,
+  ...o
+}, m) => {
+  [o, m] = I(o, m, G);
+  const { isInvalid: y, isRequired: D } = o, { wrapper: P } = S({
+    fullWidth: s,
+    hasStartSlot: !!p,
     hasEndSlot: !0
   });
-  return /* @__PURE__ */ e.jsxDEV(
-    F,
+  return /* @__PURE__ */ e.jsx(
+    w,
     {
-      ...c,
-      granularity: o,
-      className: (d) => v({
-        className: s,
-        isDisabled: d.isDisabled
+      ...o,
+      granularity: n,
+      className: (l) => P({
+        className: r,
+        isDisabled: l.isDisabled
       }),
-      isInvalid: D,
-      ref: u,
-      children: ({ isDisabled: d, state: k }) => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxDEV(
-          te,
+      isInvalid: y,
+      ref: m,
+      children: ({ isDisabled: l, state: $ }) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(
+          se,
           {
-            description: i,
-            fullWidth: t,
-            errorMessage: n,
-            hideHintLabel: l,
-            hideInputFooter: a,
-            hideInputHeader: m,
-            isDisabled: d,
-            isRequired: y,
-            label: p,
-            startSlot: N,
-            onKeyDown: (b) => {
-              b.key === "Escape" && k.value && !d && (b.preventDefault(), k.setValue(null));
+            description: a,
+            fullWidth: s,
+            errorMessage: d,
+            hideHintLabel: i,
+            hideInputFooter: c,
+            hideInputHeader: f,
+            isDisabled: l,
+            isRequired: D,
+            label: x,
+            startSlot: p,
+            onKeyDown: (j) => {
+              j.key === "Escape" && $.value && !l && (j.preventDefault(), $.setValue(null));
             }
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-            lineNumber: 92,
-            columnNumber: 11
-          },
-          void 0
+          }
         ),
-        /* @__PURE__ */ e.jsxDEV(Y, { disablePadding: !0, className: "group", children: /* @__PURE__ */ e.jsxDEV(I, { children: /* @__PURE__ */ e.jsxDEV("div", { className: "flex flex-col gap-3 p-3", children: [
-          /* @__PURE__ */ e.jsxDEV(re, {}, void 0, !1, {
-            fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-            lineNumber: 113,
-            columnNumber: 17
-          }, void 0),
-          /* @__PURE__ */ e.jsxDEV("div", { className: "flex justify-center", children: /* @__PURE__ */ e.jsxDEV(G, { className: "w-full text-center", children: [
-            /* @__PURE__ */ e.jsxDEV(X, {}, void 0, !1, {
-              fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-              lineNumber: 116,
-              columnNumber: 21
-            }, void 0),
-            /* @__PURE__ */ e.jsxDEV(se, {}, void 0, !1, {
-              fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-              lineNumber: 117,
-              columnNumber: 21
-            }, void 0)
-          ] }, void 0, !0, {
-            fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-            lineNumber: 115,
-            columnNumber: 19
-          }, void 0) }, void 0, !1, {
-            fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-            lineNumber: 114,
-            columnNumber: 17
-          }, void 0)
-        ] }, void 0, !0, {
-          fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-          lineNumber: 112,
-          columnNumber: 15
-        }, void 0) }, void 0, !1, {
-          fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-          lineNumber: 111,
-          columnNumber: 13
-        }, void 0) }, void 0, !1, {
-          fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-          lineNumber: 110,
-          columnNumber: 11
-        }, void 0)
-      ] }, void 0, !0, {
-        fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-        lineNumber: 91,
-        columnNumber: 9
-      }, void 0)
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 78,
-      columnNumber: 5
-    },
-    void 0
+        /* @__PURE__ */ e.jsx(_, { disablePadding: !0, className: "group", children: /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3 p-3", children: [
+          /* @__PURE__ */ e.jsx(te, {}),
+          /* @__PURE__ */ e.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ e.jsxs(R, { className: "w-full text-center", children: [
+            /* @__PURE__ */ e.jsx(X, {}),
+            /* @__PURE__ */ e.jsx(re, {})
+          ] }) })
+        ] }) }) })
+      ] })
+    }
   );
-}, ie = K(ee);
-ie.displayName = "DatePicker";
-const te = ({
-  description: s,
-  errorMessage: i,
-  fullWidth: n,
-  hideHintLabel: t,
-  hideInputFooter: o,
-  hideInputHeader: l,
-  isDisabled: a,
-  isRequired: m,
-  label: p,
-  onKeyDown: N,
-  startSlot: c
+}, ae = M(ee);
+ae.displayName = "DatePicker";
+const se = ({
+  description: r,
+  errorMessage: a,
+  fullWidth: d,
+  hideHintLabel: s,
+  hideInputFooter: n,
+  hideInputHeader: i,
+  isDisabled: c,
+  isRequired: f,
+  label: x,
+  onKeyDown: p,
+  startSlot: o
 }) => {
-  const { input: u, segment: D } = J(), { button: y, buttonExcludedFromTabOrder: v, inputField: d } = U({
-    fullWidth: n,
-    hasStartSlot: !!c,
+  const { input: m, segment: y } = L(), { button: D, buttonExcludedFromTabOrder: P, inputField: l } = S({
+    fullWidth: d,
+    hasStartSlot: !!o,
     hasEndSlot: !0
-  }), { clear: k } = M(), { setValue: b, value: E } = h(w), V = C(null);
-  return /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsxDEV(
-      z,
-      {
-        label: p,
-        hideHintLabel: t,
-        hideInputHeader: l,
-        isRequired: m
-      },
-      void 0,
-      !1,
+  }), { clear: $ } = Y(), { setValue: j, value: C } = v(B), k = F(null);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      A,
       {
-        fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-        lineNumber: 164,
-        columnNumber: 7
-      },
-      void 0
+        label: x,
+        hideHintLabel: s,
+        hideInputHeader: i,
+        isRequired: f
+      }
     ),
-    /* @__PURE__ */ e.jsxDEV(
-      R,
+    /* @__PURE__ */ e.jsxs(
+      H,
       {
-        className: ({ isDisabled: r, isFocusWithin: f, isHovered: $, isInvalid: P }) => d({
-          isDisabled: r,
-          isFocused: f,
-          isHovered: $,
-          isInvalid: P,
+        className: ({ isDisabled: t, isFocusWithin: u, isHovered: N, isInvalid: g }) => l({
+          isDisabled: t,
+          isFocused: u,
+          isHovered: N,
+          isInvalid: g,
           className: "min-h-8"
         }),
-        onKeyDown: N,
+        onKeyDown: p,
         children: [
-          /* @__PURE__ */ e.jsxDEV(B, { className: u(), children: (r) => /* @__PURE__ */ e.jsxDEV(
-            H,
+          /* @__PURE__ */ e.jsx(T, { className: m(), children: (t) => /* @__PURE__ */ e.jsx(
+            V,
             {
-              className: ({ isFocused: f }) => D({
-                isFocused: f,
-                isDisabled: a,
+              className: ({ isFocused: u }) => y({
+                isFocused: u,
+                isDisabled: c,
                 // consider literals (separators between segments) to have a value when a full date is entered
-                hasValue: r.type === "literal" ? !!E : !r.isPlaceholder
+                hasValue: t.type === "literal" ? !!C : !t.isPlaceholder
               }),
-              segment: r
-            },
-            void 0,
-            !1,
-            {
-              fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-              lineNumber: 184,
-              columnNumber: 13
-            },
-            void 0
-          ) }, void 0, !1, {
-            fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-            lineNumber: 182,
-            columnNumber: 9
-          }, void 0),
-          /* @__PURE__ */ e.jsxDEV("div", { className: "ms-auto flex gap-2", children: [
-            !a && E ? /* @__PURE__ */ e.jsxDEV(_, { tooltip: k, children: /* @__PURE__ */ e.jsxDEV(
-              x,
+              segment: t
+            }
+          ) }),
+          /* @__PURE__ */ e.jsxs("div", { className: "ms-auto flex gap-2", children: [
+            !c && C ? /* @__PURE__ */ e.jsx(z, { tooltip: $, children: /* @__PURE__ */ e.jsx(
+              b,
               {
                 slot: null,
                 excludeFromTabOrder: !0,
-                className: v(),
+                className: P(),
                 onPress: () => {
-                  var r;
-                  b(null), (r = V.current) == null || r.focus();
+                  var t;
+                  j(null), (t = k.current) == null || t.focus();
                 },
-                children: /* @__PURE__ */ e.jsxDEV(j, { name: "clear" }, void 0, !1, {
-                  fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-                  lineNumber: 214,
-                  columnNumber: 17
-                }, void 0)
-              },
-              void 0,
-              !1,
-              {
-                fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-                lineNumber: 201,
-                columnNumber: 15
-              },
-              void 0
-            ) }, void 0, !1, {
-              fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-              lineNumber: 200,
-              columnNumber: 13
-            }, void 0) : null,
-            /* @__PURE__ */ e.jsxDEV(
-              x,
-              {
-                ref: V,
-                isDisabled: a,
-                className: ({ isDisabled: r, isFocusVisible: f, isHovered: $ }) => y({ isDisabled: r, isFocused: f, isHovered: $ }),
-                children: /* @__PURE__ */ e.jsxDEV(j, { name: "calendar" }, void 0, !1, {
-                  fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-                  lineNumber: 225,
-                  columnNumber: 13
-                }, void 0)
-              },
-              void 0,
-              !1,
+                children: /* @__PURE__ */ e.jsx(h, { name: "clear" })
+              }
+            ) }) : null,
+            /* @__PURE__ */ e.jsx(
+              b,
               {
-                fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-                lineNumber: 218,
-                columnNumber: 11
-              },
-              void 0
+                ref: k,
+                isDisabled: c,
+                className: ({ isDisabled: t, isFocusVisible: u, isHovered: N }) => D({ isDisabled: t, isFocused: u, isHovered: N }),
+                children: /* @__PURE__ */ e.jsx(h, { name: "calendar" })
+              }
             )
-          ] }, void 0, !0, {
-            fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-            lineNumber: 198,
-            columnNumber: 9
-          }, void 0)
+          ] })
         ]
-      },
-      void 0,
-      !0,
-      {
-        fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-        lineNumber: 170,
-        columnNumber: 7
-      },
-      void 0
+      }
     ),
-    /* @__PURE__ */ e.jsxDEV(
-      A,
+    /* @__PURE__ */ e.jsx(
+      J,
       {
-        description: s,
-        errorMessage: i,
-        hideInputFooter: o
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-        lineNumber: 229,
-        columnNumber: 7
-      },
-      void 0
+        description: r,
+        errorMessage: a,
+        hideInputFooter: n
+      }
     )
-  ] }, void 0, !0, {
-    fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-    lineNumber: 163,
-    columnNumber: 5
-  }, void 0);
-}, re = () => {
-  const { buttons: s } = L(), { focusedDate: i, setFocusedDate: n } = h(T);
-  return /* @__PURE__ */ e.jsxDEV("header", { className: "flex justify-between gap-3", children: [
-    /* @__PURE__ */ e.jsxDEV(x, { slot: "previous", className: s(), children: /* @__PURE__ */ e.jsxDEV(j, { name: "chevron-left" }, void 0, !1, {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 246,
-      columnNumber: 9
-    }, void 0) }, void 0, !1, {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 245,
-      columnNumber: 7
-    }, void 0),
-    /* @__PURE__ */ e.jsxDEV("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ e.jsxDEV(
+  ] });
+}, te = () => {
+  const { buttons: r } = Q(), { focusedDate: a, setFocusedDate: d } = v(O);
+  return /* @__PURE__ */ e.jsxs("header", { className: "flex justify-between gap-3", children: [
+    /* @__PURE__ */ e.jsx(b, { slot: "previous", className: r(), children: /* @__PURE__ */ e.jsx(h, { name: "chevron-left" }) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ e.jsx(
         Z,
         {
-          value: i.month,
-          onChange: (t) => {
-            n(i.copy().set({ month: t }));
+          value: a.month,
+          onChange: (s) => {
+            d(a.copy().set({ month: s }));
           }
-        },
-        void 0,
-        !1,
-        {
-          fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-          lineNumber: 250,
-          columnNumber: 9
-        },
-        void 0
+        }
       ),
-      /* @__PURE__ */ e.jsxDEV(
+      /* @__PURE__ */ e.jsx(
         W,
         {
-          value: i.year,
-          onChange: (t) => {
-            n(i.copy().set({ year: t }));
+          value: a.year,
+          onChange: (s) => {
+            d(a.copy().set({ year: s }));
           }
-        },
-        void 0,
-        !1,
-        {
-          fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-          lineNumber: 256,
-          columnNumber: 9
-        },
-        void 0
+        }
       )
-    ] }, void 0, !0, {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 249,
-      columnNumber: 7
-    }, void 0),
-    /* @__PURE__ */ e.jsxDEV(x, { slot: "next", className: s(), children: /* @__PURE__ */ e.jsxDEV(j, { name: "chevron-right" }, void 0, !1, {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 265,
-      columnNumber: 9
-    }, void 0) }, void 0, !1, {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 264,
-      columnNumber: 7
-    }, void 0)
-  ] }, void 0, !0, {
-    fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-    lineNumber: 244,
-    columnNumber: 5
-  }, void 0);
-}, se = () => {
-  const { bodyCell: s } = Q();
-  return /* @__PURE__ */ e.jsxDEV(O, { children: (i) => /* @__PURE__ */ e.jsxDEV(
-    q,
+    ] }),
+    /* @__PURE__ */ e.jsx(b, { slot: "next", className: r(), children: /* @__PURE__ */ e.jsx(h, { name: "chevron-right" }) })
+  ] });
+}, re = () => {
+  const { bodyCell: r } = U();
+  return /* @__PURE__ */ e.jsx(q, { children: (a) => /* @__PURE__ */ e.jsx(
+    K,
     {
-      date: i,
+      date: a,
       className: ({
-        isDisabled: n,
-        isFocusVisible: t,
-        isHovered: o,
-        isOutsideMonth: l,
-        isPressed: a,
-        isSelected: m,
-        isUnavailable: p
-      }) => s({
-        isSelected: m,
-        isFocusVisible: t,
-        isHovered: o,
-        isUnavailable: p,
-        isDisabled: n,
-        isOutsideMonth: l,
-        isPressed: a
+        isDisabled: d,
+        isFocusVisible: s,
+        isHovered: n,
+        isOutsideMonth: i,
+        isPressed: c,
+        isSelected: f,
+        isUnavailable: x
+      }) => r({
+        isSelected: f,
+        isFocusVisible: s,
+        isHovered: n,
+        isUnavailable: x,
+        isDisabled: d,
+        isOutsideMonth: i,
+        isPressed: c
       })
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-      lineNumber: 277,
-      columnNumber: 9
-    },
-    void 0
-  ) }, void 0, !1, {
-    fileName: "/Users/timkapitein/projects/lyra/src/components/inputs/date-picker/date-picker.tsx",
-    lineNumber: 275,
-    columnNumber: 5
-  }, void 0);
+    }
+  ) });
 };
 export {
-  ie as DatePicker
+  ae as DatePicker
 };