@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Textarea/StyledTextarea.js

@@ -0,0 +1,68 @@
+import { styled } from "styled-components";
+import { transparentize as curriedTransparentize$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import subPx from "../utils/subPx.js";
+import { variant } from "../node_modules/.pnpm/@styled-system_variant@5.1.5/node_modules/@styled-system/variant/dist/index.esm.js";
+const textareaStyles = (theme) => ({
+  disabled: {
+    color: curriedTransparentize$1(0.33, theme.colors.black),
+    borderColor: theme.colors.lightGrey,
+    backgroundColor: theme.colors.whiteGrey
+  },
+  error: {
+    color: theme.colors.red,
+    borderColor: theme.colors.red
+  },
+  default: {
+    color: theme.colors.black,
+    borderColor: theme.colors.grey
+  }
+});
+const getTextareaStyle = (props) => {
+  const textareaStyleMap = textareaStyles(props.theme);
+  if (props.disabled) {
+    return textareaStyleMap.disabled;
+  }
+  if (props.error) {
+    return textareaStyleMap.error;
+  }
+  return textareaStyleMap.default;
+};
+const StyledTextarea = styled.textarea(
+  space,
+  ({ theme, isResizeable }) => ({
+    display: "block",
+    width: "100%",
+    border: "1px solid",
+    borderRadius: theme.radii.medium,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    minHeight: theme.space.x5,
+    minWidth: "20em",
+    resize: isResizeable ? null : "none",
+    "&:focus": {
+      outline: "none",
+      color: theme.colors.black,
+      borderColor: theme.colors.blue,
+      boxShadow: theme.shadows.focus
+    },
+    "::placeholder": {
+      color: curriedTransparentize$1(0.4, theme.colors.black)
+    },
+    padding: `${subPx(theme.space.x1)}`
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base"
+      }
+    }
+  }),
+  (props) => getTextareaStyle(props)
+);
+export {
+  StyledTextarea as default
+};
+//# sourceMappingURL=StyledTextarea.js.map

package/dist/esm/Textarea/StyledTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTextarea.js","sources":["../../../src/Textarea/StyledTextarea.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { transparentize } from \"polished\";\nimport { SpaceProps, variant } from \"styled-system\";\nimport { space } from \"styled-system\";\nimport { subPx } from \"../utils\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\nexport type StyledTextareaProps = React.ComponentPropsWithRef<\"textarea\"> &\n  SpaceProps & {\n    variant?: ComponentVariant;\n    theme?: DefaultNDSThemeType;\n    errorMessage?: string;\n    errorList?: string[];\n    error?: boolean;\n    rows?: number;\n    isResizeable?: boolean;\n  };\n\nconst textareaStyles = (theme) => ({\n  disabled: {\n    color: transparentize(0.33, theme.colors.black),\n    borderColor: theme.colors.lightGrey,\n    backgroundColor: theme.colors.whiteGrey,\n  },\n  error: {\n    color: theme.colors.red,\n    borderColor: theme.colors.red,\n  },\n  default: {\n    color: theme.colors.black,\n    borderColor: theme.colors.grey,\n  },\n});\n\nconst getTextareaStyle = (props) => {\n  const textareaStyleMap = textareaStyles(props.theme);\n  if (props.disabled) {\n    return textareaStyleMap.disabled;\n  }\n  if (props.error) {\n    return textareaStyleMap.error;\n  }\n  return textareaStyleMap.default;\n};\n\nconst StyledTextarea = styled.textarea<StyledTextareaProps>(\n  space,\n  ({ theme, isResizeable }) => ({\n    display: \"block\",\n    width: \"100%\",\n    border: \"1px solid\",\n    borderRadius: theme.radii.medium,\n    fontSize: theme.fontSizes.base,\n    lineHeight: theme.lineHeights.base,\n    minHeight: theme.space.x5,\n    minWidth: \"20em\",\n    resize: isResizeable ? null : \"none\",\n    \"&:focus\": {\n      outline: \"none\",\n      color: theme.colors.black,\n      borderColor: theme.colors.blue,\n      boxShadow: theme.shadows.focus,\n    },\n    \"::placeholder\": {\n      color: transparentize(0.4, theme.colors.black),\n    },\n    padding: `${subPx(theme.space.x1)}`,\n  }),\n  variant({\n    variants: {\n      touch: {\n        fontSize: \"md\",\n        lineHeight: \"base\",\n      },\n    },\n  }),\n  (props) => getTextareaStyle(props)\n);\n\nexport default StyledTextarea;\n"],"names":["transparentize"],"mappings":";;;;;;AAoBA,MAAM,iBAAiB,CAAC,WAAW;AAAA,EACjC,UAAU;AAAA,IACR,OAAOA,wBAAe,MAAM,MAAM,OAAO,KAAK;AAAA,IAC9C,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAAA,EAEhC,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,EAAA;AAAA,EAE5B,SAAS;AAAA,IACP,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,EAAA;AAE9B;AAEA,MAAM,mBAAmB,CAAC,UAAU;AAClC,QAAM,mBAAmB,eAAe,MAAM,KAAK;AACnD,MAAI,MAAM,UAAU;AAClB,WAAO,iBAAiB;AAAA,EAC1B;AACA,MAAI,MAAM,OAAO;AACf,WAAO,iBAAiB;AAAA,EAC1B;AACA,SAAO,iBAAiB;AAC1B;AAEA,MAAM,iBAAiB,OAAO;AAAA,EAC5B;AAAA,EACA,CAAC,EAAE,OAAO,oBAAoB;AAAA,IAC5B,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,WAAW,MAAM,MAAM;AAAA,IACvB,UAAU;AAAA,IACV,QAAQ,eAAe,OAAO;AAAA,IAC9B,WAAW;AAAA,MACT,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa,MAAM,OAAO;AAAA,MAC1B,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE3B,iBAAiB;AAAA,MACf,OAAOA,wBAAe,KAAK,MAAM,OAAO,KAAK;AAAA,IAAA;AAAA,IAE/C,SAAS,GAAG,MAAM,MAAM,MAAM,EAAE,CAAC;AAAA,EAAA;AAAA,EAEnC,QAAQ;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAAA,EACD,CAAC,UAAU,iBAAiB,KAAK;AACnC;"}

package/dist/esm/Textarea/Textarea.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { getSubset, omitSubset } from "../utils/subset.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import StyledTextarea from "./StyledTextarea.js";
+import Field from "../Form/Field.js";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+const Textarea = forwardRef(
+  ({
+    disabled = false,
+    required = false,
+    rows = 3,
+    errorMessage,
+    errorList,
+    error = !!(errorMessage || errorList),
+    labelText,
+    requirementText,
+    helpText,
+    id,
+    className,
+    isResizeable = true,
+    variant,
+    ...props
+  }, ref) => {
+    const componentVariant = useComponentVariant(variant);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    return /* @__PURE__ */ jsxs(Field, { className, ...spaceProps, children: [
+      /* @__PURE__ */ jsx(MaybeFieldLabel, { labelText, requirementText, helpText, children: /* @__PURE__ */ jsx(
+        StyledTextarea,
+        {
+          "aria-invalid": error,
+          "aria-required": required,
+          required,
+          id,
+          ref,
+          errorMessage,
+          errorList,
+          error,
+          rows,
+          isResizeable,
+          variant: componentVariant,
+          disabled,
+          ...restProps
+        }
+      ) }),
+      /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+    ] });
+  }
+);
+export {
+  Textarea as default
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/esm/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { Field } from \"../Form\";\nimport { MaybeFieldLabel } from \"../FieldLabel\";\nimport { InlineValidation } from \"../Validation\";\nimport { getSubset, omitSubset } from \"../utils/subset\";\nimport { useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport StyledTextarea from \"./StyledTextarea\";\nimport { StyledTextareaProps } from \"./StyledTextarea\";\n\ntype TextareaProps = StyledTextareaProps & {\n  className?: string;\n  id?: string;\n  disabled?: boolean;\n  errorMessage?: string;\n  error?: boolean;\n  errorList?: string[];\n  required?: boolean;\n  labelText?: string;\n  helpText?: React.ReactNode;\n  requirementText?: string;\n  rows?: number;\n  isResizeable?: boolean;\n};\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      disabled = false,\n      required = false,\n      rows = 3,\n      errorMessage,\n      errorList,\n      error = !!(errorMessage || errorList),\n      labelText,\n      requirementText,\n      helpText,\n      id,\n      className,\n      isResizeable = true,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    const componentVariant = useComponentVariant(variant);\n    const spaceProps = getSubset(props, propTypes.space);\n    const restProps = omitSubset(props, propTypes.space);\n\n    return (\n      <Field className={className} {...spaceProps}>\n        <MaybeFieldLabel labelText={labelText} requirementText={requirementText} helpText={helpText}>\n          <StyledTextarea\n            aria-invalid={error}\n            aria-required={required}\n            required={required}\n            id={id}\n            ref={ref}\n            errorMessage={errorMessage}\n            errorList={errorList}\n            error={error}\n            rows={rows}\n            isResizeable={isResizeable}\n            variant={componentVariant}\n            disabled={disabled}\n            {...restProps}\n          />\n        </MaybeFieldLabel>\n        <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n      </Field>\n    );\n  }\n);\n\nexport default Textarea;\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,WAAW;AAAA,EACf,CACE;AAAA,IACE,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,QAAQ,CAAC,EAAE,gBAAgB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,mBAAmB,oBAAoB,OAAO;AACpD,UAAM,aAAa,UAAU,OAAO,UAAU,KAAK;AACnD,UAAM,YAAY,WAAW,OAAO,UAAU,KAAK;AAEnD,WACE,qBAAC,OAAA,EAAM,WAAuB,GAAG,YAC/B,UAAA;AAAA,MAAA,oBAAC,iBAAA,EAAgB,WAAsB,iBAAkC,UACvE,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc;AAAA,UACd,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA,GAER;AAAA,MACA,oBAAC,kBAAA,EAAiB,IAAG,MAAK,cAA4B,UAAA,CAAsB;AAAA,IAAA,GAC9E;AAAA,EAEJ;AACF;"}

package/dist/esm/TimePicker/TimePicker.js

@@ -0,0 +1,311 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default, { forwardRef, useState, useContext, useRef, useCallback, useEffect } from "react";
+import debounce from "../node_modules/.pnpm/debounce@3.0.0/node_modules/debounce/index.js";
+import { LocaleContext } from "../NDSProvider/LocaleContext.js";
+import { localizedFormat } from "../utils/localized-date-fns.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import TimePickerOption from "./TimePickerOption.js";
+import TimePickerDropdown from "./TimePickerDropdown.js";
+import TimePickerInput from "./TimePickerInput.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 Box from "../Box/Box.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+import DetectOutsideClick from "../utils/DetectOutsideClick.js";
+import keyCodes from "../constants/keyCodes.js";
+import setMinutes from "../node_modules/.pnpm/date-fns@2.23.0/node_modules/date-fns/esm/setMinutes/index.js";
+const DEFAULT_TIME_FORMAT = "h:mm aa";
+const DEFAULT_PLACEHOLDER = "HH:MM";
+const MILITARY_TIME_FORMAT = "HH:mm";
+const ZERO_DATE = new Date(Date.UTC(0));
+const stripLetters = (x) => Number(x.replace(/\D/g, ""));
+const stripLettersFromMinutes = (x) => {
+  let minNoLetters = String(x).replace(/\D/g, "");
+  if (minNoLetters.length < 2) {
+    minNoLetters = `${minNoLetters}0`;
+  }
+  return Number(minNoLetters);
+};
+const standardizeTime = (input) => {
+  if (input) {
+    const standardizedInput = input.toUpperCase().replace(/ /g, "");
+    return standardizedInput;
+  }
+  return input;
+};
+const convertTo24HourTimeArray = (timeInput) => {
+  const time = standardizeTime(timeInput);
+  const timeArray = time.includes(":") ? time.split(":") : [time, 0];
+  timeArray[0] = stripLetters(timeArray[0]);
+  timeArray[1] = stripLettersFromMinutes(timeArray[1]);
+  if (time.includes("A") && timeArray[0] === 12) {
+    return [0, timeArray[1]];
+  }
+  if (time.includes("P")) {
+    return [timeArray[0] += 12, timeArray[1]];
+  }
+  return timeArray;
+};
+const getIntervalFromTime = (time, interval, minTime) => {
+  const minInterval = minTime ? getIntervalFromTime(minTime, interval) : 0;
+  if (time && interval) {
+    const timeArray = convertTo24HourTimeArray(time);
+    const hours = timeArray[0];
+    const minutes = timeArray[1];
+    const getInterval = (h, m) => Math.round(h * 60 / interval + m / interval);
+    const currentTimeInterval = getInterval(hours, minutes);
+    const nearestInterval = currentTimeInterval >= minInterval ? currentTimeInterval - minInterval : getInterval(hours + 12, minutes) - minInterval;
+    return nearestInterval;
+  }
+  return 0;
+};
+const getBestMatchTime = ({ time, timeFormat, minTime, maxTime, locale }) => {
+  return getTimeOptions(1, timeFormat, minTime, maxTime, locale)[getIntervalFromTime(time, 1, minTime)];
+};
+const getTimeIntervals = (interval) => {
+  const numberOfOptions = 24 * 60 / interval;
+  const times = [];
+  for (let i = 0; i < numberOfOptions; i += 1) {
+    times.push(setMinutes(ZERO_DATE, interval * i));
+  }
+  return times;
+};
+const getTimeOptions = (interval, timeFormat, minTime, maxTime, locale) => {
+  const allTimes = getTimeIntervals(interval);
+  let startingInterval = 0;
+  let finalInterval = allTimes.length;
+  if (minTime) {
+    startingInterval = getIntervalFromTime(minTime, interval);
+  }
+  if (maxTime) {
+    finalInterval = getIntervalFromTime(maxTime, interval) + 1;
+  }
+  return allTimes.map((date) => ({
+    value: localizedFormat(date, MILITARY_TIME_FORMAT, locale),
+    label: localizedFormat(date, timeFormat, locale)
+  })).sort((a, b) => getIntervalFromTime(a.value, interval) - getIntervalFromTime(b.value, interval)).slice(startingInterval, finalInterval);
+};
+const TimePicker = forwardRef(
+  ({
+    timeFormat,
+    interval,
+    className,
+    minTime,
+    maxTime,
+    defaultValue,
+    onInputChange,
+    onBlur,
+    onFocus,
+    errorMessage,
+    errorList,
+    labelText,
+    placeholder,
+    onClick,
+    onChange,
+    "aria-label": ariaLabel,
+    value,
+    error,
+    disabled,
+    variant,
+    ...props
+  }, inputRef) => {
+    const [input, setInput] = useState(defaultValue ? defaultValue : "");
+    const [currentOptionRef, setCurrentOptionRef] = useState(null);
+    const [dropdownIsOpen, setDropdownIsOpen] = useState(false);
+    const { locale } = useContext(LocaleContext);
+    const [ref, setRef] = useState(null);
+    const dropdownRef = useRef(null);
+    const { t } = useTranslation();
+    const componentVariant = useComponentVariant(variant);
+    const scrollToSelection = useCallback(
+      debounce((currentOption, dropdown) => {
+        if (!dropdown.current) return;
+        const currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);
+        if (currentIndex > 2) {
+          dropdown.current.scrollTop = (currentIndex - 2) * currentOption.scrollHeight;
+        } else {
+          dropdown.current.scrollTop = 0;
+        }
+      }, 200),
+      []
+    );
+    useEffect(() => {
+      if (currentOptionRef && dropdownIsOpen) {
+        scrollToSelection(currentOptionRef, dropdownRef);
+      }
+    }, [currentOptionRef, dropdownIsOpen, input]);
+    const matchingIndex = getIntervalFromTime(input, interval, minTime);
+    const getDropdownOptions = () => {
+      const optionsAtInterval = getTimeOptions(interval, timeFormat, minTime, maxTime, locale) || [];
+      return optionsAtInterval;
+    };
+    const dropdownOptions = getDropdownOptions() || [];
+    const hasError = !!(errorMessage || errorList || error);
+    const handleOptionSelection = (option, showDropdown = false) => {
+      if (option && option.label && option.value) {
+        setInput(option.label);
+        onChange(option.label, option.value);
+      }
+      setDropdownIsOpen(showDropdown);
+    };
+    const handleBlur = (e) => {
+      if (input) {
+        const option = getBestMatchTime({
+          time: input,
+          timeFormat,
+          minTime,
+          maxTime,
+          locale
+        });
+        handleOptionSelection(option);
+      }
+      setDropdownIsOpen(false);
+      onBlur(e);
+    };
+    const handleFocus = (e) => {
+      onFocus(e);
+    };
+    const handleClickInput = (e) => {
+      onClick(e);
+      setDropdownIsOpen(true);
+    };
+    const onCurrentOptionRefChange = React__default.useCallback((node) => {
+      if (node) {
+        setCurrentOptionRef(node);
+      }
+    }, []);
+    const onRefChange = React__default.useCallback((node) => {
+      if (node) {
+        setRef(node);
+      }
+    }, []);
+    const handleKeyDown = (event) => {
+      if (event.keyCode === keyCodes.DOWN) {
+        setInput(dropdownOptions[matchingIndex] ? dropdownOptions[matchingIndex].label : null);
+        if (input) {
+          setInput(dropdownOptions[matchingIndex + 1] ? dropdownOptions[matchingIndex + 1].label : null);
+        }
+        setDropdownIsOpen(true);
+      }
+      if (event.keyCode === keyCodes.UP) {
+        setInput(dropdownOptions[matchingIndex - 1] ? dropdownOptions[matchingIndex - 1].label : null);
+      }
+      if (event.keyCode === keyCodes.TAB) {
+        handleBlur(event);
+      }
+      if (event.keyCode === keyCodes.RETURN) {
+        setInput(dropdownOptions[matchingIndex] ? dropdownOptions[matchingIndex].label : null);
+      }
+    };
+    const handleInputChange = (e) => {
+      const inputValue = e.currentTarget.value;
+      setInput(inputValue);
+      if (onInputChange) {
+        onInputChange(inputValue);
+      }
+    };
+    const displayValue = value ? value : input || "";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: `nds-time-picker ${className || ""}`,
+          position: "relative",
+          ref: onRefChange,
+          width: componentVariant === "touch" ? "208px" : "130px",
+          "data-testid": "select-container",
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              TimePickerInput,
+              {
+                labelText,
+                error: hasError,
+                dropdownIsOpen,
+                onChange: handleInputChange,
+                onFocus: handleFocus,
+                value: displayValue,
+                placeholder,
+                iconRight: "queryBuilder",
+                onClick: handleClickInput,
+                onKeyDown: (e) => handleKeyDown(e),
+                "aria-label": ariaLabel || t("Select a time"),
+                inputWidth: componentVariant === "touch" ? "208px" : "130px",
+                iconRightSize: "x2",
+                "data-testid": "select-input",
+                type: "text",
+                ref: inputRef,
+                disabled,
+                autoComplete: "off",
+                variant: componentVariant
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TimePickerDropdown,
+              {
+                isOpen: dropdownIsOpen,
+                "aria-expanded": dropdownIsOpen,
+                role: "listbox",
+                "data-testid": "select-dropdown",
+                ref: dropdownRef,
+                children: dropdownOptions.map((option, i) => {
+                  const isClosest = matchingIndex === i;
+                  const isSelected = standardizeTime(option.label) === standardizeTime(input);
+                  const closestTestId = isClosest ? "closest-select-option" : "";
+                  const selectedTestId = isSelected ? "selected-select-option" : "";
+                  return /* @__PURE__ */ jsx(
+                    TimePickerOption,
+                    {
+                      ref: isClosest ? onCurrentOptionRefChange : void 0,
+                      isSelected,
+                      isClosest,
+                      "data-name": option.label,
+                      "data-value": option.value,
+                      onClick: () => {
+                        handleOptionSelection(option);
+                      },
+                      role: "option",
+                      "data-testid": `select-option ${closestTestId} ${selectedTestId}`,
+                      variant: componentVariant,
+                      children: option.label
+                    },
+                    option.label
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(DetectOutsideClick, { onClick: handleBlur, clickRef: [ref] })
+    ] });
+  }
+);
+TimePicker.defaultProps = {
+  timeFormat: DEFAULT_TIME_FORMAT,
+  interval: 15,
+  placeholder: DEFAULT_PLACEHOLDER,
+  className: void 0,
+  onChange: void 0,
+  onInputChange: void 0,
+  minTime: void 0,
+  maxTime: void 0,
+  defaultValue: "",
+  "aria-label": void 0,
+  errorMessage: void 0,
+  errorList: void 0,
+  labelText: void 0,
+  onClick: () => {
+  },
+  onBlur: () => {
+  },
+  onFocus: () => {
+  }
+};
+export {
+  convertTo24HourTimeArray,
+  TimePicker as default,
+  getBestMatchTime,
+  getTimeOptions
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/esm/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["// @ts-nocheck\nimport React, { useState, useContext, useEffect, forwardRef, useRef, useCallback } from \"react\";\nimport { setMinutes } from \"date-fns\";\nimport debounce from \"debounce\";\nimport { SpaceProps } from \"styled-system\";\nimport { useTranslation } from \"react-i18next\";\nimport { InlineValidation } from \"../Validation\";\nimport { LocaleContext } from \"../NDSProvider/LocaleContext\";\nimport { localizedFormat } from \"../utils/localized-date-fns\";\nimport { DetectOutsideClick } from \"../utils\";\nimport { Box } from \"../Box\";\nimport { keyCodes } from \"../constants\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport TimePickerOption from \"./TimePickerOption\";\nimport TimePickerDropdown from \"./TimePickerDropdown\";\nimport TimePickerInput from \"./TimePickerInput\";\n\ntype TimePickerProps = SpaceProps & {\n  variant?: ComponentVariant;\n  disabled?: boolean;\n  value?: string;\n  timeFormat?: string;\n  interval?: number;\n  placeholder?: string;\n  className?: string;\n  onChange?: (...args: any[]) => any;\n  onInputChange?: (...args: any[]) => any;\n  minTime?: string;\n  maxTime?: string;\n  defaultValue?: string;\n  \"aria-label\"?: string;\n  errorMessage?: string;\n  errorList?: React.ReactNode;\n  labelText?: string;\n  ref?: any;\n  onBlur?: (...args: any[]) => any;\n  onFocus?: (...args: any[]) => any;\n  onClick?: (...args: any[]) => any;\n};\n\nconst DEFAULT_TIME_FORMAT = \"h:mm aa\";\nconst DEFAULT_PLACEHOLDER = \"HH:MM\";\nconst MILITARY_TIME_FORMAT = \"HH:mm\";\nconst ZERO_DATE = new Date(Date.UTC(0));\n\nconst stripLetters = (x) => Number(x.replace(/\\D/g, \"\"));\n\nconst stripLettersFromMinutes = (x) => {\n  let minNoLetters = String(x).replace(/\\D/g, \"\");\n  if (minNoLetters.length < 2) {\n    minNoLetters = `${minNoLetters}0`;\n  }\n  return Number(minNoLetters);\n};\n\nconst standardizeTime = (input) => {\n  if (input) {\n    const standardizedInput = input.toUpperCase().replace(/ /g, \"\"); // strip spaces\n    return standardizedInput;\n  }\n  return input;\n};\n\nexport const convertTo24HourTimeArray = (timeInput) => {\n  const time = standardizeTime(timeInput);\n  const timeArray = time.includes(\":\") ? time.split(\":\") : [time, 0];\n  timeArray[0] = stripLetters(timeArray[0]);\n  timeArray[1] = stripLettersFromMinutes(timeArray[1]);\n\n  if (time.includes(\"A\") && timeArray[0] === 12) {\n    return [0, timeArray[1]];\n  }\n\n  if (time.includes(\"P\")) {\n    return [(timeArray[0] += 12), timeArray[1]];\n  }\n  return timeArray;\n};\n\nconst getIntervalFromTime = (time, interval, minTime) => {\n  const minInterval = minTime ? getIntervalFromTime(minTime, interval) : 0;\n  if (time && interval) {\n    const timeArray = convertTo24HourTimeArray(time);\n    const hours = timeArray[0];\n    const minutes = timeArray[1];\n    const getInterval = (h, m) => Math.round((h * 60) / interval + m / interval);\n    const currentTimeInterval = getInterval(hours, minutes);\n    const nearestInterval =\n      currentTimeInterval >= minInterval\n        ? currentTimeInterval - minInterval\n        : getInterval(hours + 12, minutes) - minInterval;\n    return nearestInterval;\n  }\n  return 0;\n};\n\nexport const getBestMatchTime = ({ time, timeFormat, minTime, maxTime, locale }) => {\n  return getTimeOptions(1, timeFormat, minTime, maxTime, locale)[getIntervalFromTime(time, 1, minTime)];\n};\n\nconst getTimeIntervals = (interval) => {\n  const numberOfOptions = (24 * 60) / interval;\n  const times = [];\n  for (let i = 0; i < numberOfOptions; i += 1) {\n    times.push(setMinutes(ZERO_DATE, interval * i));\n  }\n  return times;\n};\n\nexport const getTimeOptions = (interval, timeFormat, minTime, maxTime, locale) => {\n  const allTimes = getTimeIntervals(interval);\n  let startingInterval = 0;\n  let finalInterval = allTimes.length;\n  if (minTime) {\n    startingInterval = getIntervalFromTime(minTime, interval);\n  }\n  if (maxTime) {\n    finalInterval = getIntervalFromTime(maxTime, interval) + 1;\n  }\n  return allTimes\n    .map((date) => ({\n      value: localizedFormat(date, MILITARY_TIME_FORMAT, locale),\n      label: localizedFormat(date, timeFormat, locale),\n    }))\n    .sort((a, b) => getIntervalFromTime(a.value, interval) - getIntervalFromTime(b.value, interval))\n    .slice(startingInterval, finalInterval);\n};\n\nconst TimePicker = forwardRef<any, TimePickerProps>(\n  (\n    {\n      timeFormat,\n      interval,\n      className,\n      minTime,\n      maxTime,\n      defaultValue,\n      onInputChange,\n      onBlur,\n      onFocus,\n      errorMessage,\n      errorList,\n      labelText,\n      placeholder,\n      onClick,\n      onChange,\n      \"aria-label\": ariaLabel,\n      value,\n      error,\n      disabled,\n      variant,\n      ...props\n    },\n    inputRef\n  ) => {\n    const [input, setInput] = useState(defaultValue ? defaultValue : \"\");\n    const [currentOptionRef, setCurrentOptionRef] = useState(null);\n    const [dropdownIsOpen, setDropdownIsOpen] = useState(false);\n    const { locale } = useContext(LocaleContext);\n    const [ref, setRef] = useState(null);\n    const dropdownRef = useRef(null);\n    const { t } = useTranslation();\n    const componentVariant = useComponentVariant(variant);\n\n    const scrollToSelection = useCallback(\n      debounce((currentOption, dropdown) => {\n        if (!dropdown.current) return;\n        const currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);\n        if (currentIndex > 2) {\n          dropdown.current.scrollTop = (currentIndex - 2) * currentOption.scrollHeight;\n        } else {\n          dropdown.current.scrollTop = 0;\n        }\n      }, 200),\n      []\n    );\n\n    useEffect(() => {\n      if (currentOptionRef && dropdownIsOpen) {\n        scrollToSelection(currentOptionRef, dropdownRef);\n      }\n    }, [currentOptionRef, dropdownIsOpen, input]);\n    const matchingIndex = getIntervalFromTime(input, interval, minTime);\n    const getDropdownOptions = () => {\n      const optionsAtInterval = getTimeOptions(interval, timeFormat, minTime, maxTime, locale) || [];\n      return optionsAtInterval;\n    };\n    const dropdownOptions = getDropdownOptions() || [];\n    const hasError = !!(errorMessage || errorList || error);\n    const handleOptionSelection = (option, showDropdown = false) => {\n      if (option && option.label && option.value) {\n        setInput(option.label);\n        onChange(option.label, option.value);\n      }\n      setDropdownIsOpen(showDropdown);\n    };\n\n    const handleBlur = (e) => {\n      if (input) {\n        const option = getBestMatchTime({\n          time: input,\n          timeFormat,\n          minTime,\n          maxTime,\n          locale,\n        });\n        handleOptionSelection(option);\n      }\n      setDropdownIsOpen(false);\n      onBlur(e);\n    };\n\n    const handleFocus = (e) => {\n      onFocus(e);\n    };\n\n    const handleClickInput = (e) => {\n      onClick(e);\n      setDropdownIsOpen(true);\n    };\n\n    const onCurrentOptionRefChange = React.useCallback((node) => {\n      if (node) {\n        setCurrentOptionRef(node);\n      }\n    }, []);\n\n    const onRefChange = React.useCallback((node) => {\n      if (node) {\n        setRef(node);\n      }\n    }, []);\n\n    const handleKeyDown = (event) => {\n      if (event.keyCode === keyCodes.DOWN) {\n        setInput(dropdownOptions[matchingIndex] ? dropdownOptions[matchingIndex].label : null);\n        if (input) {\n          setInput(dropdownOptions[matchingIndex + 1] ? dropdownOptions[matchingIndex + 1].label : null);\n        }\n        setDropdownIsOpen(true);\n      }\n\n      if (event.keyCode === keyCodes.UP) {\n        setInput(dropdownOptions[matchingIndex - 1] ? dropdownOptions[matchingIndex - 1].label : null);\n      }\n\n      if (event.keyCode === keyCodes.TAB) {\n        handleBlur(event);\n      }\n      if (event.keyCode === keyCodes.RETURN) {\n        setInput(dropdownOptions[matchingIndex] ? dropdownOptions[matchingIndex].label : null);\n      }\n    };\n    const handleInputChange = (e) => {\n      const inputValue = e.currentTarget.value;\n      setInput(inputValue);\n      if (onInputChange) {\n        onInputChange(inputValue);\n      }\n    };\n\n    const displayValue = value ? value : input || \"\";\n\n    return (\n      <>\n        <Box\n          className={`nds-time-picker ${className || \"\"}`}\n          position=\"relative\"\n          ref={onRefChange}\n          width={componentVariant === \"touch\" ? \"208px\" : \"130px\"}\n          data-testid=\"select-container\"\n          {...props}\n        >\n          <TimePickerInput\n            labelText={labelText}\n            error={hasError}\n            dropdownIsOpen={dropdownIsOpen}\n            onChange={handleInputChange}\n            onFocus={handleFocus}\n            value={displayValue}\n            placeholder={placeholder}\n            iconRight=\"queryBuilder\"\n            onClick={handleClickInput}\n            onKeyDown={(e) => handleKeyDown(e)}\n            aria-label={ariaLabel || t(\"Select a time\")}\n            inputWidth={componentVariant === \"touch\" ? \"208px\" : \"130px\"}\n            iconRightSize=\"x2\"\n            data-testid=\"select-input\"\n            type=\"text\"\n            ref={inputRef}\n            disabled={disabled}\n            autoComplete=\"off\"\n            variant={componentVariant}\n          />\n          <TimePickerDropdown\n            isOpen={dropdownIsOpen}\n            aria-expanded={dropdownIsOpen}\n            role=\"listbox\"\n            data-testid=\"select-dropdown\"\n            ref={dropdownRef}\n          >\n            {dropdownOptions.map((option, i) => {\n              const isClosest = matchingIndex === i;\n              const isSelected = standardizeTime(option.label) === standardizeTime(input);\n              const closestTestId = isClosest ? \"closest-select-option\" : \"\";\n              const selectedTestId = isSelected ? \"selected-select-option\" : \"\";\n              return (\n                <TimePickerOption\n                  ref={isClosest ? onCurrentOptionRefChange : undefined}\n                  isSelected={isSelected}\n                  isClosest={isClosest}\n                  key={option.label}\n                  data-name={option.label}\n                  data-value={option.value}\n                  onClick={() => {\n                    handleOptionSelection(option);\n                  }}\n                  role=\"option\"\n                  data-testid={`select-option ${closestTestId} ${selectedTestId}`}\n                  variant={componentVariant}\n                >\n                  {option.label}\n                </TimePickerOption>\n              );\n            })}\n          </TimePickerDropdown>\n          <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n        </Box>\n        <DetectOutsideClick onClick={handleBlur} clickRef={[ref]} />\n      </>\n    );\n  }\n);\n\nTimePicker.defaultProps = {\n  timeFormat: DEFAULT_TIME_FORMAT,\n  interval: 15,\n  placeholder: DEFAULT_PLACEHOLDER,\n  className: undefined,\n  onChange: undefined,\n  onInputChange: undefined,\n  minTime: undefined,\n  maxTime: undefined,\n  defaultValue: \"\",\n  \"aria-label\": undefined,\n  errorMessage: undefined,\n  errorList: undefined,\n  labelText: undefined,\n  onClick: () => {},\n  onBlur: () => {},\n  onFocus: () => {},\n};\n\nexport default TimePicker;\n"],"names":["React"],"mappings":"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"}

package/dist/esm/TimePicker/TimePickerDropdown.js

@@ -0,0 +1,25 @@
+import { styled } from "styled-components";
+const TimePickerDropdown = styled.ul(({ theme, isOpen }) => {
+  return {
+    position: "absolute",
+    width: "100%",
+    background: theme.colors.white,
+    listStyle: "none",
+    margin: "0px",
+    padding: "0px",
+    maxHeight: "200px",
+    overflow: "auto",
+    boxShadow: theme.shadows.focus,
+    border: "1px solid",
+    borderColor: theme.colors.blue,
+    borderBottomLeftRadius: theme.radii.medium,
+    borderBottomRightRadius: theme.radii.medium,
+    display: isOpen ? "block" : "none",
+    zIndex: theme.zIndices.content,
+    scrollBehavior: "smooth"
+  };
+});
+export {
+  TimePickerDropdown as default
+};
+//# sourceMappingURL=TimePickerDropdown.js.map

package/dist/esm/TimePicker/TimePickerDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerDropdown.js","sources":["../../../src/TimePicker/TimePickerDropdown.tsx"],"sourcesContent":["// @ts-nocheck\nimport { styled } from \"styled-components\";\n\nconst TimePickerDropdown = styled.ul(({ theme, isOpen }) => {\n  return {\n    position: \"absolute\",\n    width: \"100%\",\n    background: theme.colors.white,\n    listStyle: \"none\",\n    margin: \"0px\",\n    padding: \"0px\",\n    maxHeight: \"200px\",\n    overflow: \"auto\",\n    boxShadow: theme.shadows.focus,\n    border: \"1px solid\",\n    borderColor: theme.colors.blue,\n    borderBottomLeftRadius: theme.radii.medium,\n    borderBottomRightRadius: theme.radii.medium,\n    display: isOpen ? \"block\" : \"none\",\n    zIndex: theme.zIndices.content,\n    scrollBehavior: \"smooth\",\n  };\n});\n\nexport default TimePickerDropdown;\n"],"names":[],"mappings":";AAGA,MAAM,qBAAqB,OAAO,GAAG,CAAC,EAAE,OAAO,aAAa;AAC1D,SAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW,MAAM,QAAQ;AAAA,IACzB,QAAQ;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,wBAAwB,MAAM,MAAM;AAAA,IACpC,yBAAyB,MAAM,MAAM;AAAA,IACrC,SAAS,SAAS,UAAU;AAAA,IAC5B,QAAQ,MAAM,SAAS;AAAA,IACvB,gBAAgB;AAAA,EAAA;AAEpB,CAAC;"}

package/dist/esm/TimePicker/TimePickerInput.js

@@ -0,0 +1,12 @@
+import { styled } from "styled-components";
+import { InputField } from "../Input/InputField.js";
+const TimePickerInput = styled(InputField)(({ dropdownIsOpen }) => ({
+  ...dropdownIsOpen && {
+    borderBottomLeftRadius: "0px",
+    borderBottomRightRadius: "0px"
+  }
+}));
+export {
+  TimePickerInput as default
+};
+//# sourceMappingURL=TimePickerInput.js.map

package/dist/esm/TimePicker/TimePickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerInput.js","sources":["../../../src/TimePicker/TimePickerInput.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { InputField, InputFieldProps } from \"../Input/InputField\";\n\ntype TimePickerInputProps = InputFieldProps & { dropdownIsOpen: boolean };\n\nconst TimePickerInput = styled(InputField)<TimePickerInputProps>(({ dropdownIsOpen }) => ({\n  ...(dropdownIsOpen && {\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  }),\n}));\n\nexport default TimePickerInput;\n"],"names":[],"mappings":";;AAKA,MAAM,kBAAkB,OAAO,UAAU,EAAwB,CAAC,EAAE,sBAAsB;AAAA,EACxF,GAAI,kBAAkB;AAAA,IACpB,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAAA;AAE7B,EAAE;"}

package/dist/esm/TimePicker/TimePickerOption.js

@@ -0,0 +1,34 @@
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { variant } from "../node_modules/.pnpm/@styled-system_variant@5.1.5/node_modules/@styled-system/variant/dist/index.esm.js";
+const TimePickerOption = styled.li(
+  ({ theme, isSelected }) => ({
+    marginBottom: "0px",
+    backgroundColor: isSelected ? theme.colors.darkBlue : theme.colors.white,
+    color: isSelected ? theme.colors.white : theme.colors.black,
+    "&:hover": {
+      background: !isSelected && theme.colors.lightBlue
+    },
+    padding: theme.space.x1
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base"
+      }
+    }
+  }),
+  ({ isSelected, theme, isFocused, isClosest }) => {
+    if (isFocused || isClosest) {
+      return {
+        background: !isSelected && theme.colors.lightBlue,
+        outline: "none"
+      };
+    }
+  }
+);
+export {
+  TimePickerOption as default
+};
+//# sourceMappingURL=TimePickerOption.js.map

package/dist/esm/TimePicker/TimePickerOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerOption.js","sources":["../../../src/TimePicker/TimePickerOption.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { variant } from \"styled-system\";\nimport { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\ntype TimePickerOptionProps = React.ComponentProps<\"li\"> & {\n  variant?: ComponentVariant;\n  isSelected: boolean;\n  isFocused: boolean;\n  isClosest: boolean;\n};\n\nconst TimePickerOption = styled.li<TimePickerOptionProps>(\n  ({ theme, isSelected }) => ({\n    marginBottom: \"0px\",\n    backgroundColor: isSelected ? theme.colors.darkBlue : theme.colors.white,\n    color: isSelected ? theme.colors.white : theme.colors.black,\n    \"&:hover\": {\n      background: !isSelected && theme.colors.lightBlue,\n    },\n    padding: theme.space.x1,\n  }),\n  variant({\n    variants: {\n      touch: {\n        fontSize: \"md\",\n        lineHeight: \"base\",\n      },\n    },\n  }),\n  ({ isSelected, theme, isFocused, isClosest }) => {\n    if (isFocused || isClosest) {\n      return {\n        background: !isSelected && theme.colors.lightBlue,\n        outline: \"none\",\n      };\n    }\n  }\n);\n\nexport default TimePickerOption;\n"],"names":[],"mappings":";;;AAYA,MAAM,mBAAmB,OAAO;AAAA,EAC9B,CAAC,EAAE,OAAO,kBAAkB;AAAA,IAC1B,cAAc;AAAA,IACd,iBAAiB,aAAa,MAAM,OAAO,WAAW,MAAM,OAAO;AAAA,IACnE,OAAO,aAAa,MAAM,OAAO,QAAQ,MAAM,OAAO;AAAA,IACtD,WAAW;AAAA,MACT,YAAY,CAAC,cAAc,MAAM,OAAO;AAAA,IAAA;AAAA,IAE1C,SAAS,MAAM,MAAM;AAAA,EAAA;AAAA,EAEvB,QAAQ;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAAA,EACD,CAAC,EAAE,YAAY,OAAO,WAAW,gBAAgB;AAC/C,QAAI,aAAa,WAAW;AAC1B,aAAO;AAAA,QACL,YAAY,CAAC,cAAc,MAAM,OAAO;AAAA,QACxC,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,EACF;AACF;"}