@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/DateRange/DateRange.js

@@ -0,0 +1,236 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from "react";
+import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type.js";
+import { highlightDates, DateRangeStyles } from "./DateRangeStyles.js";
+import { getDuration } from "../TimeRange/TimeRange.utils.js";
+import EndTime from "./EndTime.js";
+import StartTime from "./StartTime.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import isBefore from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isBefore/index.js";
+import isSameDay from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isSameDay/index.js";
+import DatePicker from "../DatePickers/DatePicker.js";
+import RangeContainer from "../RangeContainer/RangeContainer.js";
+const DEFAULT_LABEL = "Date Range";
+const DateRange = forwardRef(
+  ({
+    dateFormat,
+    onRangeChange,
+    onStartDateChange,
+    onEndDateChange,
+    errorMessage,
+    startDateErrorMessage,
+    endDateErrorMessage,
+    defaultStartDate = null,
+    defaultEndDate = null,
+    endDateInputProps,
+    startDateInputProps,
+    disableRangeValidation,
+    labelProps = {
+      ...FieldLabelDefaultProps,
+      labelText: DEFAULT_LABEL
+    },
+    minDate,
+    maxDate,
+    showTimes,
+    minTime,
+    maxTime,
+    defaultStartTime,
+    defaultEndTime,
+    onStartTimeChange,
+    onEndTimeChange,
+    timeFormat,
+    interval,
+    disableFlipping = false,
+    locale,
+    endTimeProps,
+    startTimeProps,
+    variant,
+    ...props
+  }, ref) => {
+    const dateRef1 = useRef(null);
+    const dateRef2 = useRef(null);
+    const timeRef1 = useRef(null);
+    const timeRef2 = useRef(null);
+    const [startDate, setStartDate] = useState(defaultStartDate);
+    const [endDate, setEndDate] = useState(defaultEndDate);
+    const [startTime, setStartTime] = useState(defaultStartTime);
+    const [endTime, setEndTime] = useState(defaultEndTime);
+    const [rangeError, setRangeError] = useState();
+    const { t } = useTranslation();
+    const componentVariant = useComponentVariant(variant);
+    useImperativeHandle(ref, () => ({
+      dateRef1: {
+        ...dateRef1,
+        focus: () => dateRef1.current?.setFocus()
+      },
+      dateRef2: {
+        ...dateRef2,
+        focus: () => dateRef2.current?.setFocus()
+      },
+      timeRef1: {
+        ...timeRef1,
+        focus: () => timeRef1.current?.focus()
+      },
+      timeRef2: {
+        ...timeRef2,
+        focus: () => timeRef2.current?.focus()
+      }
+    }));
+    useEffect(() => {
+      validateDateRange();
+    }, [startDate, endDate, startTime, endTime]);
+    const changeStartTimeHandler = (label, value) => {
+      setStartTime(value);
+      if (onStartTimeChange) {
+        onStartTimeChange(label, value);
+      }
+    };
+    const changeEndTimeHandler = (label, value) => {
+      setEndTime(value);
+      if (onEndTimeChange) {
+        onEndTimeChange(label, value);
+      }
+    };
+    const changeStartDateHandler = (date) => {
+      setStartDate(date);
+      if (onStartDateChange) {
+        onStartDateChange(date);
+      }
+    };
+    const changeEndDateHandler = (date) => {
+      setEndDate(date);
+      if (onEndDateChange) {
+        onEndDateChange(date);
+      }
+    };
+    const validateDateRange = () => {
+      let error;
+      if (endDate && startDate) {
+        if (isBefore(endDate, startDate) && (showTimes || !isSameDay(endDate, startDate))) {
+          error = "end date is before start date";
+        }
+        if (isSameDay(endDate, startDate) && showTimes) {
+          const duration = getDuration(startTime, endTime);
+          if (duration < 0) {
+            error = "end time is before start time";
+          }
+        }
+      }
+      setRangeError(error);
+      if (onRangeChange) {
+        onRangeChange({
+          startDate,
+          endDate,
+          startTime,
+          endTime,
+          error
+        });
+      }
+    };
+    const startInputProps = {
+      "aria-label": t("select a start date"),
+      error: rangeError,
+      ...startDateInputProps
+    };
+    const startDateInput = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          dateFormat,
+          selected: startDate,
+          onChange: changeStartDateHandler,
+          inputProps: startInputProps,
+          errorMessage: startDateErrorMessage,
+          minDate,
+          maxDate,
+          highlightDates: highlightDates(startDate, endDate),
+          locale,
+          disableFlipping,
+          ref: dateRef1
+        }
+      ),
+      showTimes && /* @__PURE__ */ jsx(
+        StartTime,
+        {
+          variant: componentVariant,
+          selected: startTime,
+          defaultValue: defaultStartTime,
+          "aria-label": t("select a start time"),
+          minTime,
+          maxTime,
+          timeFormat,
+          interval,
+          onChange: changeStartTimeHandler,
+          locale,
+          "data-testid": "daterange-start-time",
+          ref: timeRef1,
+          error: !!rangeError,
+          ...startTimeProps
+        }
+      )
+    ] });
+    const endDateInput = /* @__PURE__ */ jsxs(Fragment, { children: [
+      showTimes && /* @__PURE__ */ jsx(
+        EndTime,
+        {
+          variant: componentVariant,
+          selected: endTime,
+          defaultValue: defaultEndTime,
+          minTime,
+          maxTime,
+          timeFormat,
+          interval,
+          onChange: changeEndTimeHandler,
+          locale,
+          "aria-label": t("select an end time"),
+          "data-testid": "daterange-end-time",
+          ref: timeRef2,
+          error: !!rangeError,
+          ...endTimeProps
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          dateFormat,
+          selected: endDate,
+          onChange: changeEndDateHandler,
+          inputProps: {
+            "aria-label": t("select an end date"),
+            error: rangeError,
+            ...endDateInputProps
+          },
+          errorMessage: endDateErrorMessage,
+          minDate,
+          maxDate,
+          highlightDates: highlightDates(startDate, endDate),
+          locale,
+          disableFlipping,
+          ref: dateRef2
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DateRangeStyles, {}),
+      /* @__PURE__ */ jsx(
+        RangeContainer,
+        {
+          variant: componentVariant,
+          labelProps: {
+            ...labelProps,
+            labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText
+          },
+          startComponent: startDateInput,
+          endComponent: endDateInput,
+          errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage],
+          ...props
+        }
+      )
+    ] });
+  }
+);
+export {
+  DateRange as default
+};
+//# sourceMappingURL=DateRange.js.map

package/dist/esm/DateRange/DateRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRange.js","sources":["../../../src/DateRange/DateRange.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from \"react\";\nimport { isBefore, isSameDay } from \"date-fns\";\nimport { useTranslation } from \"react-i18next\";\nimport { DatePicker } from \"../DatePickers\";\nimport type { ReactDatePicker } from \"react-datepicker\";\nimport { RangeContainer } from \"../RangeContainer\";\nimport { FieldLabelDefaultProps } from \"../FieldLabel/FieldLabel.type\";\nimport { FieldProps } from \"../Form/Field\";\nimport { DateRangeStyles, highlightDates } from \"./DateRangeStyles\";\nimport { getDuration } from \"../TimeRange/TimeRange.utils\";\nimport EndTime from \"./EndTime\";\nimport StartTime from \"./StartTime\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\ntype DateRangeProps = FieldProps & {\n  dateFormat?: string;\n  onRangeChange?: (...args: any[]) => any;\n  onStartDateChange?: (...args: any[]) => any;\n  onEndDateChange?: (...args: any[]) => any;\n  endDateErrorMessage?: string;\n  startDateErrorMessage?: string;\n  errorMessage?: string;\n  defaultStartDate?: any;\n  defaultEndDate?: any;\n  endDateInputProps?: any;\n  startDateInputProps?: any;\n  disableRangeValidation?: boolean;\n  labelProps?: any;\n  minDate?: any;\n  maxDate?: any;\n  showTimes?: boolean;\n  minTime?: string;\n  maxTime?: string;\n  defaultStartTime?: string;\n  defaultEndTime?: string;\n  onStartTimeChange?: (...args: any[]) => any;\n  onEndTimeChange?: (...args: any[]) => any;\n  timeFormat?: string;\n  interval?: number;\n  locale?: string;\n  disableFlipping?: boolean;\n  endTimeProps?: any;\n  startTimeProps?: any;\n  variant?: ComponentVariant;\n};\n\nconst DEFAULT_LABEL = \"Date Range\";\n\nconst DateRange = forwardRef<unknown, DateRangeProps>(\n  (\n    {\n      dateFormat,\n      onRangeChange,\n      onStartDateChange,\n      onEndDateChange,\n      errorMessage,\n      startDateErrorMessage,\n      endDateErrorMessage,\n      defaultStartDate = null,\n      defaultEndDate = null,\n      endDateInputProps,\n      startDateInputProps,\n      disableRangeValidation,\n      labelProps = {\n        ...FieldLabelDefaultProps,\n        labelText: DEFAULT_LABEL,\n      },\n      minDate,\n      maxDate,\n      showTimes,\n      minTime,\n      maxTime,\n      defaultStartTime,\n      defaultEndTime,\n      onStartTimeChange,\n      onEndTimeChange,\n      timeFormat,\n      interval,\n      disableFlipping = false,\n      locale,\n      endTimeProps,\n      startTimeProps,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    const dateRef1 = useRef<ReactDatePicker>(null);\n    const dateRef2 = useRef<ReactDatePicker>(null);\n    const timeRef1 = useRef<HTMLInputElement>(null);\n    const timeRef2 = useRef<HTMLInputElement>(null);\n    const [startDate, setStartDate] = useState(defaultStartDate);\n    const [endDate, setEndDate] = useState(defaultEndDate);\n    const [startTime, setStartTime] = useState(defaultStartTime);\n    const [endTime, setEndTime] = useState(defaultEndTime);\n    const [rangeError, setRangeError] = useState();\n    const { t } = useTranslation();\n\n    const componentVariant = useComponentVariant(variant);\n\n    useImperativeHandle(ref, () => ({\n      dateRef1: {\n        ...dateRef1,\n        focus: () => dateRef1.current?.setFocus(),\n      },\n      dateRef2: {\n        ...dateRef2,\n        focus: () => dateRef2.current?.setFocus(),\n      },\n      timeRef1: {\n        ...timeRef1,\n        focus: () => timeRef1.current?.focus(),\n      },\n      timeRef2: {\n        ...timeRef2,\n        focus: () => timeRef2.current?.focus(),\n      },\n    }));\n\n    useEffect(() => {\n      validateDateRange();\n    }, [startDate, endDate, startTime, endTime]);\n\n    const changeStartTimeHandler = (label, value) => {\n      setStartTime(value);\n      if (onStartTimeChange) {\n        onStartTimeChange(label, value);\n      }\n    };\n\n    const changeEndTimeHandler = (label, value) => {\n      setEndTime(value);\n      if (onEndTimeChange) {\n        onEndTimeChange(label, value);\n      }\n    };\n\n    const changeStartDateHandler = (date) => {\n      setStartDate(date);\n      if (onStartDateChange) {\n        onStartDateChange(date);\n      }\n    };\n\n    const changeEndDateHandler = (date) => {\n      setEndDate(date);\n      if (onEndDateChange) {\n        onEndDateChange(date);\n      }\n    };\n\n    const validateDateRange = () => {\n      let error;\n      if (endDate && startDate) {\n        if (isBefore(endDate, startDate) && (showTimes || !isSameDay(endDate, startDate))) {\n          error = \"end date is before start date\";\n        }\n        if (isSameDay(endDate, startDate) && showTimes) {\n          const duration = getDuration(startTime, endTime);\n          if (duration < 0) {\n            error = \"end time is before start time\";\n          }\n        }\n      }\n      setRangeError(error);\n      if (onRangeChange) {\n        onRangeChange({\n          startDate,\n          endDate,\n          startTime,\n          endTime,\n          error,\n        });\n      }\n    };\n\n    const startInputProps = {\n      \"aria-label\": t(\"select a start date\"),\n      error: rangeError,\n      ...startDateInputProps,\n    };\n\n    const startDateInput = (\n      <>\n        <DatePicker\n          dateFormat={dateFormat}\n          selected={startDate}\n          onChange={changeStartDateHandler}\n          inputProps={startInputProps}\n          errorMessage={startDateErrorMessage}\n          minDate={minDate}\n          maxDate={maxDate}\n          highlightDates={highlightDates(startDate, endDate)}\n          locale={locale}\n          disableFlipping={disableFlipping}\n          ref={dateRef1}\n        />\n        {showTimes && (\n          <StartTime\n            variant={componentVariant}\n            selected={startTime}\n            defaultValue={defaultStartTime}\n            aria-label={t(\"select a start time\")}\n            minTime={minTime}\n            maxTime={maxTime}\n            timeFormat={timeFormat}\n            interval={interval}\n            onChange={changeStartTimeHandler}\n            locale={locale}\n            data-testid=\"daterange-start-time\"\n            ref={timeRef1}\n            error={!!rangeError}\n            {...startTimeProps}\n          />\n        )}\n      </>\n    );\n\n    const endDateInput = (\n      <>\n        {showTimes && (\n          <EndTime\n            variant={componentVariant}\n            selected={endTime}\n            defaultValue={defaultEndTime}\n            minTime={minTime}\n            maxTime={maxTime}\n            timeFormat={timeFormat}\n            interval={interval}\n            onChange={changeEndTimeHandler}\n            locale={locale}\n            aria-label={t(\"select an end time\")}\n            data-testid=\"daterange-end-time\"\n            ref={timeRef2}\n            error={!!rangeError}\n            {...endTimeProps}\n          />\n        )}\n        <DatePicker\n          dateFormat={dateFormat}\n          selected={endDate}\n          onChange={changeEndDateHandler}\n          inputProps={{\n            \"aria-label\": t(\"select an end date\"),\n            error: rangeError,\n            ...endDateInputProps,\n          }}\n          errorMessage={endDateErrorMessage}\n          minDate={minDate}\n          maxDate={maxDate}\n          highlightDates={highlightDates(startDate, endDate)}\n          locale={locale}\n          disableFlipping={disableFlipping}\n          ref={dateRef2}\n        />\n      </>\n    );\n\n    return (\n      <>\n        <DateRangeStyles />\n        <RangeContainer\n          variant={componentVariant}\n          labelProps={{\n            ...labelProps,\n            labelText: labelProps.labelText === DEFAULT_LABEL ? t(\"date range\") : labelProps.labelText,\n          }}\n          startComponent={startDateInput}\n          endComponent={endDateInput}\n          errorMessages={!disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage]}\n          {...props}\n        />\n      </>\n    );\n  }\n);\nexport default DateRange;\n"],"names":[],"mappings":"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"}

package/dist/esm/DateRange/DateRangeStyles.js

@@ -0,0 +1,68 @@
+import { createGlobalStyle } from "styled-components";
+import isBefore from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/isBefore/index.js";
+import differenceInDays from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/differenceInDays/index.js";
+import addDays from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/addDays/index.js";
+const START_DATE_CLASS = "nds-datepicker-day--start-date";
+const END_DATE_CLASS = "nds-datepicker-day--end-date";
+const IN_RANGE_CLASS = "nds-datepicker-day--in-range";
+const TWO_DAY_RANGE_CLASS = "nds-datepicker-two-day-range";
+const getAllDaysInRange = (startDate, endDate) => {
+  if (endDate && startDate && isBefore(startDate, endDate)) {
+    const days = Array(differenceInDays(new Date(endDate), new Date(startDate)) + 1);
+    return days.fill(0).map((_, i) => addDays(new Date(startDate), i));
+  }
+  return [];
+};
+const highlightDates = (startDate, endDate) => {
+  const datesInRange = getAllDaysInRange(startDate, endDate);
+  return [
+    {
+      [START_DATE_CLASS]: [new Date(startDate)]
+    },
+    {
+      [END_DATE_CLASS]: [new Date(endDate)]
+    },
+    {
+      [IN_RANGE_CLASS]: datesInRange
+    },
+    {
+      [TWO_DAY_RANGE_CLASS]: datesInRange.length === 2 ? datesInRange : []
+    }
+  ];
+};
+const DateRangeStyles = createGlobalStyle(({ theme }) => ({
+  ".nds-date-picker": {
+    [`.react-datepicker__day.${IN_RANGE_CLASS}`]: {
+      backgroundColor: theme.colors.whiteGrey,
+      color: theme.colors.black,
+      borderRadius: 0,
+      marginRight: 0,
+      marginLeft: 0,
+      paddingRight: theme.space.half,
+      paddingLeft: theme.space.half
+    },
+    [`.react-datepicker__day.${START_DATE_CLASS}.${TWO_DAY_RANGE_CLASS}`]: {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    [`.react-datepicker__day.${END_DATE_CLASS}.${TWO_DAY_RANGE_CLASS}`]: {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    },
+    [`.react-datepicker__day.${START_DATE_CLASS},  .react-datepicker__day.${END_DATE_CLASS}`]: {
+      color: theme.colors.white,
+      background: theme.colors.darkBlue,
+      borderRadius: theme.radii.medium,
+      cursor: "initial",
+      "&:hover": {
+        color: theme.colors.white,
+        background: theme.colors.darkBlue
+      }
+    }
+  }
+}));
+export {
+  DateRangeStyles,
+  highlightDates
+};
+//# sourceMappingURL=DateRangeStyles.js.map

package/dist/esm/DateRange/DateRangeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeStyles.js","sources":["../../../src/DateRange/DateRangeStyles.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport { isBefore, addDays, differenceInDays } from \"date-fns\";\n\nconst START_DATE_CLASS = \"nds-datepicker-day--start-date\";\nconst END_DATE_CLASS = \"nds-datepicker-day--end-date\";\nconst IN_RANGE_CLASS = \"nds-datepicker-day--in-range\";\nconst TWO_DAY_RANGE_CLASS = \"nds-datepicker-two-day-range\";\n\nconst getAllDaysInRange = (startDate: Date, endDate: Date) => {\n  if (endDate && startDate && isBefore(startDate, endDate)) {\n    const days = Array(differenceInDays(new Date(endDate), new Date(startDate)) + 1);\n    return days.fill(0).map((_, i) => addDays(new Date(startDate), i));\n  }\n  return [];\n};\n\nexport const highlightDates = (startDate: Date, endDate: Date) => {\n  const datesInRange = getAllDaysInRange(startDate, endDate);\n  return [\n    {\n      [START_DATE_CLASS]: [new Date(startDate)],\n    },\n    {\n      [END_DATE_CLASS]: [new Date(endDate)],\n    },\n    {\n      [IN_RANGE_CLASS]: datesInRange,\n    },\n    {\n      [TWO_DAY_RANGE_CLASS]: datesInRange.length === 2 ? datesInRange : [],\n    },\n  ];\n};\n\nexport const DateRangeStyles = createGlobalStyle(({ theme }) => ({\n  \".nds-date-picker\": {\n    [`.react-datepicker__day.${IN_RANGE_CLASS}`]: {\n      backgroundColor: theme.colors.whiteGrey,\n      color: theme.colors.black,\n      borderRadius: 0,\n      marginRight: 0,\n      marginLeft: 0,\n      paddingRight: theme.space.half,\n      paddingLeft: theme.space.half,\n    },\n    [`.react-datepicker__day.${START_DATE_CLASS}.${TWO_DAY_RANGE_CLASS}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n    [`.react-datepicker__day.${END_DATE_CLASS}.${TWO_DAY_RANGE_CLASS}`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n    [`.react-datepicker__day.${START_DATE_CLASS},  .react-datepicker__day.${END_DATE_CLASS}`]: {\n      color: theme.colors.white,\n      background: theme.colors.darkBlue,\n      borderRadius: theme.radii.medium,\n      cursor: \"initial\",\n      \"&:hover\": {\n        color: theme.colors.white,\n        background: theme.colors.darkBlue,\n      },\n    },\n  },\n}));\n"],"names":[],"mappings":";;;;AAGA,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAE5B,MAAM,oBAAoB,CAAC,WAAiB,YAAkB;AAC5D,MAAI,WAAW,aAAa,SAAS,WAAW,OAAO,GAAG;AACxD,UAAM,OAAO,MAAM,iBAAiB,IAAI,KAAK,OAAO,GAAG,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;AAC/E,WAAO,KAAK,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,QAAQ,IAAI,KAAK,SAAS,GAAG,CAAC,CAAC;AAAA,EACnE;AACA,SAAO,CAAA;AACT;AAEO,MAAM,iBAAiB,CAAC,WAAiB,YAAkB;AAChE,QAAM,eAAe,kBAAkB,WAAW,OAAO;AACzD,SAAO;AAAA,IACL;AAAA,MACE,CAAC,gBAAgB,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC;AAAA,IAAA;AAAA,IAE1C;AAAA,MACE,CAAC,cAAc,GAAG,CAAC,IAAI,KAAK,OAAO,CAAC;AAAA,IAAA;AAAA,IAEtC;AAAA,MACE,CAAC,cAAc,GAAG;AAAA,IAAA;AAAA,IAEpB;AAAA,MACE,CAAC,mBAAmB,GAAG,aAAa,WAAW,IAAI,eAAe,CAAA;AAAA,IAAC;AAAA,EACrE;AAEJ;AAEO,MAAM,kBAAkB,kBAAkB,CAAC,EAAE,aAAa;AAAA,EAC/D,oBAAoB;AAAA,IAClB,CAAC,0BAA0B,cAAc,EAAE,GAAG;AAAA,MAC5C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc;AAAA,MACd,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,cAAc,MAAM,MAAM;AAAA,MAC1B,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,IAE3B,CAAC,0BAA0B,gBAAgB,IAAI,mBAAmB,EAAE,GAAG;AAAA,MACrE,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA;AAAA,IAE3B,CAAC,0BAA0B,cAAc,IAAI,mBAAmB,EAAE,GAAG;AAAA,MACnE,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAAA;AAAA,IAE1B,CAAC,0BAA0B,gBAAgB,6BAA6B,cAAc,EAAE,GAAG;AAAA,MACzF,OAAO,MAAM,OAAO;AAAA,MACpB,YAAY,MAAM,OAAO;AAAA,MACzB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,OAAO,MAAM,OAAO;AAAA,QACpB,YAAY,MAAM,OAAO;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF;AAEJ,EAAE;"}

package/dist/esm/DateRange/EndTime.js

@@ -0,0 +1,9 @@
+import { styled } from "styled-components";
+import TimePicker from "../TimePicker/TimePicker.js";
+const EndTime = styled(TimePicker)(({ theme }) => ({
+  marginRight: theme.space.x1
+}));
+export {
+  EndTime as default
+};
+//# sourceMappingURL=EndTime.js.map

package/dist/esm/DateRange/EndTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndTime.js","sources":["../../../src/DateRange/EndTime.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { TimePicker } from \"../TimePicker\";\n\nconst EndTime = styled(TimePicker)(({ theme }) => ({\n  marginRight: theme.space.x1,\n}));\n\nexport default EndTime;\n"],"names":[],"mappings":";;AAGA,MAAM,UAAU,OAAO,UAAU,EAAE,CAAC,EAAE,aAAa;AAAA,EACjD,aAAa,MAAM,MAAM;AAC3B,EAAE;"}

package/dist/esm/DateRange/StartTime.js

@@ -0,0 +1,9 @@
+import { styled } from "styled-components";
+import TimePicker from "../TimePicker/TimePicker.js";
+const StartTime = styled(TimePicker)(({ theme }) => ({
+  marginLeft: theme.space.x1
+}));
+export {
+  StartTime as default
+};
+//# sourceMappingURL=StartTime.js.map

package/dist/esm/DateRange/StartTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartTime.js","sources":["../../../src/DateRange/StartTime.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { TimePicker } from \"../TimePicker\";\n\nconst StartTime = styled(TimePicker)(({ theme }) => ({\n  marginLeft: theme.space.x1,\n}));\n\nexport default StartTime;\n"],"names":[],"mappings":";;AAGA,MAAM,YAAY,OAAO,UAAU,EAAE,CAAC,EAAE,aAAa;AAAA,EACnD,YAAY,MAAM,MAAM;AAC1B,EAAE;"}

package/dist/esm/Decorations/index.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, styled } from "styled-components";
+import Box from "../Box/Box.js";
+const RightAngleTriangle = styled(Box)`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  clip-path: polygon(100% 0, 0 100%, 100% 100%);
+`;
+function BackgroundTriangles(props) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "aria-hidden": "true",
+      transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      height: "100%",
+      maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" },
+      width: "90%",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          RightAngleTriangle,
+          {
+            "aria-hidden": "true",
+            height: "44.85%",
+            opacity: "0.5",
+            background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RightAngleTriangle,
+          {
+            "aria-hidden": "true",
+            height: "19.85%",
+            opacity: "0.25",
+            background: `linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)`
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BackgroundTriangles as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/Decorations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/Decorations/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { styled } from \"styled-components\";\nimport { Box, BoxProps } from \"../Box\";\n\nconst RightAngleTriangle = styled(Box)`\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  clip-path: polygon(100% 0, 0 100%, 100% 100%);\n`;\n\nexport default function BackgroundTriangles(props: BoxProps) {\n  const theme = useTheme();\n\n  return (\n    <Box\n      aria-hidden=\"true\"\n      transition=\"max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)\"\n      position=\"absolute\"\n      bottom={0}\n      right={0}\n      height=\"100%\"\n      maxWidth={{ extraSmall: \"320px\", small: \"768px\", medium: \"1024px\", large: \"1280px\" }}\n      width=\"90%\"\n      {...props}\n    >\n      <RightAngleTriangle\n        aria-hidden=\"true\"\n        height=\"44.85%\"\n        opacity=\"0.5\"\n        background=\"linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)\"\n      />\n      <RightAngleTriangle\n        aria-hidden=\"true\"\n        height=\"19.85%\"\n        opacity=\"0.25\"\n        background={`linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)`}\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,qBAAqB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQrC,SAAwB,oBAAoB,OAAiB;AAC3D,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,YAAW;AAAA,MACX,UAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAO;AAAA,MACP,UAAU,EAAE,YAAY,SAAS,OAAO,SAAS,QAAQ,UAAU,OAAO,SAAA;AAAA,MAC1E,OAAM;AAAA,MACL,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,YAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,YAAY,8BAA8B,MAAM,OAAO,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/DescriptionList/DescriptionList.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { DescriptionListProvider } from "./DescriptionListContext.js";
+import { validateAndExtractGridProps } from "./lib/utils.js";
+import { DescriptionListContainer, DescriptionList as DescriptionList$1 } from "./DescriptionList.parts.js";
+function DescriptionList({
+  descriptionTermMaxWidth = "320px",
+  layout = "stacked",
+  autoLayoutBreakpoint = "640px",
+  showDivider = false,
+  density = "medium",
+  fontSize = "medium",
+  lineHeight = "base",
+  children,
+  ...props
+}) {
+  const { columns, groupMinWidth } = validateAndExtractGridProps(props);
+  return /* @__PURE__ */ jsx(
+    DescriptionListProvider,
+    {
+      descriptionTermMaxWidth,
+      layout,
+      autoLayoutBreakpoint,
+      showDivider,
+      density,
+      fontSize,
+      lineHeight,
+      columns,
+      groupMinWidth,
+      children: /* @__PURE__ */ jsx(DescriptionListContainer, { children: /* @__PURE__ */ jsx(DescriptionList$1, { children }) })
+    }
+  );
+}
+export {
+  DescriptionList as default
+};
+//# sourceMappingURL=DescriptionList.js.map

package/dist/esm/DescriptionList/DescriptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.js","sources":["../../../src/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import React from \"react\";\nimport { DescriptionListProvider } from \"./DescriptionListContext\";\nimport { DescriptionListProps } from \"./lib/types\";\nimport { validateAndExtractGridProps } from \"./lib/utils\";\nimport { DescriptionList as Dl, DescriptionListContainer } from \"./DescriptionList.parts\";\n\nexport default function DescriptionList({\n  descriptionTermMaxWidth = \"320px\",\n  layout = \"stacked\",\n  autoLayoutBreakpoint = \"640px\",\n  showDivider = false,\n  density = \"medium\",\n  fontSize = \"medium\",\n  lineHeight = \"base\",\n  children,\n  ...props\n}: DescriptionListProps) {\n  const { columns, groupMinWidth } = validateAndExtractGridProps(props);\n\n  return (\n    <DescriptionListProvider\n      descriptionTermMaxWidth={descriptionTermMaxWidth}\n      layout={layout}\n      autoLayoutBreakpoint={autoLayoutBreakpoint}\n      showDivider={showDivider}\n      density={density}\n      fontSize={fontSize}\n      lineHeight={lineHeight}\n      columns={columns}\n      groupMinWidth={groupMinWidth}\n    >\n      <DescriptionListContainer>\n        <Dl>{children}</Dl>\n      </DescriptionListContainer>\n    </DescriptionListProvider>\n  );\n}\n"],"names":["Dl"],"mappings":";;;;AAMA,SAAwB,gBAAgB;AAAA,EACtC,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,uBAAuB;AAAA,EACvB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,EAAE,SAAS,kBAAkB,4BAA4B,KAAK;AAEpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA,oBAAC,0BAAA,EACC,UAAA,oBAACA,mBAAA,EAAI,UAAS,EAAA,CAChB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/DescriptionList/DescriptionList.parts.js

@@ -0,0 +1,191 @@
+import { styled } from "styled-components";
+import { useDescriptionListContext } from "./DescriptionListContext.js";
+const gapConfig = {
+  compact: "x0_75",
+  medium: "x1_5",
+  relaxed: "x3"
+};
+const DescriptionListContainer = styled.div({
+  containerType: "inline-size",
+  width: "100%"
+});
+const DescriptionList = styled.dl(({ theme }) => {
+  const { fontSize, lineHeight, density, columns, groupMinWidth } = useDescriptionListContext();
+  return {
+    containerType: "inline-size",
+    width: "100%",
+    margin: 0,
+    display: "grid",
+    columnGap: theme.space[gapConfig[density]],
+    fontSize: theme.fontSizes[fontSize] ?? theme.fontSizes.medium,
+    lineHeight: theme.lineHeights[lineHeight] ?? theme.lineHeights.base,
+    ...typeof columns === "number" && {
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+    },
+    "a, p": {
+      fontSize: "inherit",
+      lineHeight: "inherit"
+    },
+    ...groupMinWidth && {
+      gridTemplateColumns: `repeat(auto-fit, minmax(${groupMinWidth}, 1fr))`
+    },
+    ...typeof columns === "object" && {
+      ...Object.fromEntries(
+        Object.entries(columns).map(([key, value]) => [
+          `@container (min-width: ${theme.breakpoints[key]})`,
+          { gridTemplateColumns: `repeat(${value}, minmax(0, 1fr))` }
+        ])
+      )
+    }
+  };
+});
+const DescriptionGroup = styled.div(
+  ({ theme, rowSpan, columnSpan }) => {
+    const { descriptionTermMaxWidth, layout, showDivider, autoLayoutBreakpoint } = useDescriptionListContext();
+    return {
+      display: "grid",
+      gridTemplateRows: "auto 1fr",
+      ...showDivider && {
+        borderBottom: `1px solid ${theme.colors.lightGrey}`
+      },
+      ...layout === "inline" && {
+        gridTemplateColumns: `minmax(0, ${descriptionTermMaxWidth}) 1fr`
+      },
+      ...(layout === "stacked" || layout === "auto") && {
+        gridTemplateColumns: "1fr"
+      },
+      ...columnSpan && {
+        gridColumn: `span ${columnSpan} / span ${columnSpan}`
+      },
+      ...rowSpan && {
+        gridRow: `span ${rowSpan} / span ${rowSpan}`
+      },
+      [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+        ...layout === "auto" && {
+          gridTemplateColumns: `minmax(0, min(50%, ${descriptionTermMaxWidth})) 1fr`
+        }
+      }
+    };
+  }
+);
+const DescriptionTerm = styled.dt(({ theme }) => {
+  const { showDivider, layout, density, autoLayoutBreakpoint } = useDescriptionListContext();
+  return {
+    gridColumnStart: 1,
+    color: theme.colors.midGrey,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none,
+    ...layout !== "inline" && {
+      paddingBottom: theme.space.none
+    },
+    ...density === "compact" && {
+      paddingTop: theme.space.x0_25,
+      ...layout === "inline" && {
+        paddingBottom: theme.space.x0_25
+      }
+    },
+    ...density === "medium" && {
+      paddingTop: theme.space.x0_75,
+      ...layout === "inline" && {
+        paddingBottom: theme.space.x0_75
+      }
+    },
+    ...density === "relaxed" && {
+      paddingTop: theme.space.x1_5,
+      paddingBottom: theme.space.x0_25,
+      ...layout === "inline" && {
+        paddingBottom: theme.space.x1_5
+      }
+    },
+    ...showDivider && {
+      borderTopWidth: "1px",
+      borderTopStyle: "solid",
+      borderTopColor: theme.colors.lightGrey
+    },
+    "&:first-child": {
+      border: "none"
+    },
+    [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+      // wide auto layout
+      ...showDivider && layout !== "stacked" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      },
+      ...density === "compact" && layout !== "stacked" && {
+        paddingBottom: theme.space.x0_25
+      },
+      ...density === "medium" && layout !== "stacked" && {
+        paddingBottom: theme.space.x0_75
+      },
+      ...density === "relaxed" && layout !== "stacked" && {
+        paddingBottom: theme.space.x1_5
+      }
+    }
+  };
+});
+const DescriptionDetails = styled.dd(({ theme }) => {
+  const { autoLayoutBreakpoint, showDivider, density, layout } = useDescriptionListContext();
+  return {
+    // narrow stuff + non-auto layout
+    margin: 0,
+    color: theme.colors.black,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none,
+    ...layout !== "inline" && {
+      paddingTop: theme.space.none
+    },
+    ...density === "compact" && {
+      paddingBottom: theme.space.x0_25,
+      ...layout === "inline" && {
+        paddingTop: theme.space.x0_25
+      }
+    },
+    ...density === "medium" && {
+      paddingBottom: theme.space.x0_75,
+      ...layout === "inline" && {
+        paddingTop: theme.space.x0_75
+      }
+    },
+    ...density === "relaxed" && {
+      paddingBottom: theme.space.x1_5,
+      paddingTop: theme.space.x0_25,
+      ...layout === "inline" && {
+        paddingTop: theme.space.x1_5
+      }
+    },
+    ...showDivider && layout === "inline" && {
+      borderTopWidth: "1px",
+      borderTopStyle: "solid",
+      borderTopColor: theme.colors.lightGrey
+    },
+    "&:nth-child(2)": {
+      border: "none"
+    },
+    [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+      // wide auto layout
+      ...showDivider && layout !== "stacked" && {
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: theme.colors.lightGrey
+      },
+      ...density === "compact" && layout !== "stacked" && {
+        paddingTop: theme.space.x0_25
+      },
+      ...density === "medium" && layout !== "stacked" && {
+        paddingTop: theme.space.x0_75
+      },
+      ...density === "relaxed" && layout !== "stacked" && {
+        paddingTop: theme.space.x1_5
+      }
+    }
+  };
+});
+export {
+  DescriptionDetails,
+  DescriptionGroup,
+  DescriptionList,
+  DescriptionListContainer,
+  DescriptionTerm
+};
+//# sourceMappingURL=DescriptionList.parts.js.map