@elliemae/ds-time-picker 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/cjs/TimePickerImpl.js

@@ -0,0 +1,183 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var TimePickerImpl_exports = {};
+__export(TimePickerImpl_exports, {
+  TimePickerImpl: () => TimePickerImpl,
+  default: () => TimePickerImpl_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_moment = __toESM(require("moment"));
+var import_memoize_one = __toESM(require("memoize-one"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_form = require("@elliemae/ds-form");
+var import_TimePickerMenu = require("./TimePickerMenu");
+var import_TimePickerDropdown = require("./TimePickerDropdown");
+var import_utils = require("./utils");
+const blockName = "time-picker";
+const TimePickerContainer = (0, import_ds_classnames.aggregatedClasses)(import_ds_form.DSInputGroup)(blockName, null, ({ isMenuOpened }) => ({
+  isMenuOpened
+}));
+const TimePickerImpl = ({
+  value,
+  onChange,
+  onOpen,
+  format,
+  disabled,
+  hasHeader,
+  hasHeaderDisplay,
+  className,
+  containerProps,
+  placement,
+  zIndex,
+  disabledTimes,
+  minutesInterval
+}) => {
+  const [time, setTime] = (0, import_react.useState)();
+  const [isMenuOpened, setIsMenuOpened] = (0, import_react.useState)(false);
+  const [focusedColumn, setFocusedColumn] = (0, import_react.useState)(null);
+  const timePickerRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    if ((0, import_moment.default)(value).isValid())
+      setTime((0, import_moment.default)(value));
+    else if (value === null)
+      setTime(void 0);
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("click", handleClickOutside, false);
+    return () => window.removeEventListener("click", handleClickOutside, false);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("keydown", handleKeyDown, false);
+    return () => window.removeEventListener("keydown", handleKeyDown, false);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isMenuOpened)
+      handleChangeFocus();
+  }, [isMenuOpened]);
+  const handleClickOutside = () => {
+    if (isMenuOpened)
+      setIsMenuOpened(false);
+  };
+  const handleKeyDown = (event) => {
+    const { key } = event;
+    const menuOpenKeys = ["Escape", " ", "Enter"];
+    if (menuOpenKeys.includes(key))
+      setIsMenuOpened(false);
+  };
+  const handleChangeFocus = () => {
+    const [firstColumn] = document.getElementsByClassName("em-ds-time-picker-panel");
+    if (firstColumn && !focusedColumn) {
+      setFocusedColumn(firstColumn);
+      firstColumn.focus();
+    }
+  };
+  const handlePickerChange = (newTime) => {
+    setTime((0, import_moment.default)(newTime));
+    onChange((0, import_moment.default)(newTime));
+  };
+  const handleInputChange = (newTime) => {
+    setTime(newTime);
+    onChange(newTime);
+  };
+  const handleMenuOpen = (isOpen) => {
+    onOpen(isOpen);
+    setIsMenuOpened(isOpen);
+    if (!isOpen)
+      setFocusedColumn(null);
+  };
+  const getVisibleTimePanels = (0, import_memoize_one.default)((format2) => (0, import_ds_utilities.getVisibleTimeByFormat)(format2));
+  const timePickerBlockName = (0, import_ds_classnames.convertPropToCssClassName)(blockName);
+  const visiblePanels = getVisibleTimePanels(format);
+  const disabledTimeRange = disabledTimes && {
+    from: (0, import_utils.convertTimeString)(disabledTimes.from),
+    to: (0, import_utils.convertTimeString)(disabledTimes.to)
+  };
+  return /* @__PURE__ */ import_react.default.createElement(TimePickerContainer, {
+    className: `${className} variant-${!disabled ? "default" : "disabled"}`,
+    containerProps,
+    disabled,
+    rightAddon: /* @__PURE__ */ import_react.default.createElement(import_TimePickerDropdown.TimePickerDropdown, {
+      blockName: timePickerBlockName,
+      disabled,
+      isOpen: isMenuOpened,
+      zIndex,
+      placement,
+      onOpen: handleMenuOpen,
+      onClick: (e) => {
+        e.preventDefault();
+        handleMenuOpen(!isMenuOpened);
+      },
+      menu: /* @__PURE__ */ import_react.default.createElement("div", {
+        ref: timePickerRef
+      }, /* @__PURE__ */ import_react.default.createElement(import_TimePickerMenu.TimePickerMenu, {
+        disabled,
+        disabledTimes: disabledTimeRange,
+        format,
+        hasHeader,
+        hasHeaderDisplay,
+        onTimeChange: handlePickerChange,
+        minutesInterval,
+        time,
+        ...visiblePanels
+      }))
+    })
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSInput, {
+    customInputType: ({ onChange: handleChange, ...restInputProps }) => /* @__PURE__ */ import_react.default.createElement(import_ds_form.TimeInputImpl, {
+      clearable: true,
+      disabled,
+      format,
+      onChange: handleChange,
+      ...restInputProps
+    }),
+    isShowElipsisActive: false,
+    disabled,
+    onChange: handleInputChange,
+    value: time
+  }));
+};
+TimePickerImpl.propTypes = {
+  value: import_prop_types.default.instanceOf(Date, import_moment.default),
+  onChange: import_prop_types.default.func,
+  onOpen: import_prop_types.default.func,
+  format: import_prop_types.default.string,
+  disabled: import_prop_types.default.bool,
+  hasHeader: import_prop_types.default.bool,
+  hasHeaderDisplay: import_prop_types.default.bool,
+  className: import_prop_types.default.string,
+  containerProps: import_prop_types.default.object,
+  placement: import_prop_types.default.string,
+  zIndex: import_prop_types.default.number,
+  disabledTimes: import_prop_types.default.object,
+  minutesInterval: import_prop_types.default.number
+};
+var TimePickerImpl_default = TimePickerImpl;
+module.exports = __toCommonJS(TimePickerImpl_exports);
+//# sourceMappingURL=TimePickerImpl.js.map

package/dist/cjs/TimePickerImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TimePickerImpl.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-shadow */\nimport React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport memoizeOne from 'memoize-one';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputGroup, TimeInputImpl } from '@elliemae/ds-form';\nimport { TimePickerMenu } from './TimePickerMenu';\nimport { TimePickerDropdown } from './TimePickerDropdown';\nimport { convertTimeString } from './utils';\n\nconst blockName = 'time-picker';\n\nconst TimePickerContainer = aggregatedClasses(DSInputGroup)(blockName, null, ({ isMenuOpened }) => ({\n  isMenuOpened,\n}));\n\nconst TimePickerImpl = ({\n  value,\n  onChange,\n  onOpen,\n  format,\n  disabled,\n  hasHeader,\n  hasHeaderDisplay,\n  className,\n  containerProps,\n  placement,\n  zIndex,\n  disabledTimes,\n  minutesInterval,\n}) => {\n  const [time, setTime] = useState();\n  const [isMenuOpened, setIsMenuOpened] = useState(false);\n  const [focusedColumn, setFocusedColumn] = useState(null);\n  const timePickerRef = useRef();\n  useEffect(() => {\n    if (moment(value).isValid()) setTime(moment(value));\n    else if (value === null) setTime(undefined);\n  }, [value]);\n\n  useEffect(() => {\n    window.addEventListener('click', handleClickOutside, false);\n    return () => window.removeEventListener('click', handleClickOutside, false);\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleKeyDown, false);\n    return () => window.removeEventListener('keydown', handleKeyDown, false);\n  }, []);\n\n  useEffect(() => {\n    if (isMenuOpened) handleChangeFocus();\n  }, [isMenuOpened]);\n\n  const handleClickOutside = () => {\n    if (isMenuOpened) setIsMenuOpened(false);\n  };\n\n  const handleKeyDown = (event) => {\n    const { key } = event;\n    const menuOpenKeys = ['Escape', ' ', 'Enter'];\n    if (menuOpenKeys.includes(key)) setIsMenuOpened(false);\n  };\n\n  const handleChangeFocus = () => {\n    const [firstColumn] = document.getElementsByClassName('em-ds-time-picker-panel');\n    if (firstColumn && !focusedColumn) {\n      setFocusedColumn(firstColumn);\n      firstColumn.focus();\n    }\n  };\n\n  const handlePickerChange = (newTime) => {\n    setTime(moment(newTime));\n    onChange(moment(newTime));\n  };\n\n  const handleInputChange = (newTime) => {\n    setTime(newTime);\n    onChange(newTime);\n  };\n\n  const handleMenuOpen = (isOpen) => {\n    onOpen(isOpen);\n    setIsMenuOpened(isOpen);\n    if (!isOpen) setFocusedColumn(null);\n  };\n\n  const getVisibleTimePanels = memoizeOne((format) => getVisibleTimeByFormat(format));\n  const timePickerBlockName = convertPropToCssClassName(blockName);\n  const visiblePanels = getVisibleTimePanels(format);\n\n  const disabledTimeRange = disabledTimes && {\n    from: convertTimeString(disabledTimes.from),\n    to: convertTimeString(disabledTimes.to),\n  };\n\n  return (\n    <TimePickerContainer\n      className={`${className} variant-${!disabled ? 'default' : 'disabled'}`}\n      containerProps={containerProps}\n      disabled={disabled}\n      rightAddon={\n        <TimePickerDropdown\n          blockName={timePickerBlockName}\n          disabled={disabled}\n          isOpen={isMenuOpened}\n          zIndex={zIndex}\n          placement={placement}\n          onOpen={handleMenuOpen}\n          onClick={(e) => {\n            e.preventDefault();\n            handleMenuOpen(!isMenuOpened);\n          }}\n          menu={\n            <div ref={timePickerRef}>\n              <TimePickerMenu\n                disabled={disabled}\n                disabledTimes={disabledTimeRange}\n                format={format}\n                hasHeader={hasHeader}\n                hasHeaderDisplay={hasHeaderDisplay}\n                onTimeChange={handlePickerChange}\n                minutesInterval={minutesInterval}\n                time={time}\n                {...visiblePanels}\n              />\n            </div>\n          }\n        />\n      }\n    >\n      <DSInput\n        customInputType={({ onChange: handleChange, ...restInputProps }) => (\n          <TimeInputImpl clearable disabled={disabled} format={format} onChange={handleChange} {...restInputProps} />\n        )}\n        isShowElipsisActive={false}\n        disabled={disabled}\n        onChange={handleInputChange}\n        value={time}\n      />\n    </TimePickerContainer>\n  );\n};\n\nTimePickerImpl.propTypes = {\n  value: PropTypes.instanceOf(Date, moment),\n  onChange: PropTypes.func,\n  onOpen: PropTypes.func,\n  format: PropTypes.string,\n  disabled: PropTypes.bool,\n  hasHeader: PropTypes.bool,\n  hasHeaderDisplay: PropTypes.bool,\n  className: PropTypes.string,\n  containerProps: PropTypes.object,\n  placement: PropTypes.string,\n  zIndex: PropTypes.number,\n  disabledTimes: PropTypes.object,\n  minutesInterval: PropTypes.number,\n};\n\nexport { TimePickerImpl };\nexport default TimePickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAmD;AACnD,wBAAsB;AACtB,oBAAmB;AACnB,yBAAuB;AACvB,0BAAuC;AACvC,2BAA6D;AAC7D,qBAAqD;AACrD,4BAA+B;AAC/B,gCAAmC;AACnC,mBAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,sBAAsB,4CAAkB,6BAAc,WAAW,MAAM,CAAC,EAAE,mBAAoB;AAAA,EAClG;AAAA;AAGF,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,MAAM,WAAW;AACxB,QAAM,CAAC,cAAc,mBAAmB,2BAAS;AACjD,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,gBAAgB;AACtB,8BAAU,MAAM;AACd,QAAI,2BAAO,OAAO;AAAW,cAAQ,2BAAO;AAAA,aACnC,UAAU;AAAM,cAAQ;AAAA,KAChC,CAAC;AAEJ,8BAAU,MAAM;AACd,WAAO,iBAAiB,SAAS,oBAAoB;AACrD,WAAO,MAAM,OAAO,oBAAoB,SAAS,oBAAoB;AAAA,KACpE;AAEH,8BAAU,MAAM;AACd,WAAO,iBAAiB,WAAW,eAAe;AAClD,WAAO,MAAM,OAAO,oBAAoB,WAAW,eAAe;AAAA,KACjE;AAEH,8BAAU,MAAM;AACd,QAAI;AAAc;AAAA,KACjB,CAAC;AAEJ,QAAM,qBAAqB,MAAM;AAC/B,QAAI;AAAc,sBAAgB;AAAA;AAGpC,QAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAM,EAAE,QAAQ;AAChB,UAAM,eAAe,CAAC,UAAU,KAAK;AACrC,QAAI,aAAa,SAAS;AAAM,sBAAgB;AAAA;AAGlD,QAAM,oBAAoB,MAAM;AAC9B,UAAM,CAAC,eAAe,SAAS,uBAAuB;AACtD,QAAI,eAAe,CAAC,eAAe;AACjC,uBAAiB;AACjB,kBAAY;AAAA;AAAA;AAIhB,QAAM,qBAAqB,CAAC,YAAY;AACtC,YAAQ,2BAAO;AACf,aAAS,2BAAO;AAAA;AAGlB,QAAM,oBAAoB,CAAC,YAAY;AACrC,YAAQ;AACR,aAAS;AAAA;AAGX,QAAM,iBAAiB,CAAC,WAAW;AACjC,WAAO;AACP,oBAAgB;AAChB,QAAI,CAAC;AAAQ,uBAAiB;AAAA;AAGhC,QAAM,uBAAuB,gCAAW,CAAC,YAAW,gDAAuB;AAC3E,QAAM,sBAAsB,oDAA0B;AACtD,QAAM,gBAAgB,qBAAqB;AAE3C,QAAM,oBAAoB,iBAAiB;AAAA,IACzC,MAAM,oCAAkB,cAAc;AAAA,IACtC,IAAI,oCAAkB,cAAc;AAAA;AAGtC,SACE,mDAAC,qBAAD;AAAA,IACE,WAAW,GAAG,qBAAqB,CAAC,WAAW,YAAY;AAAA,IAC3D;AAAA,IACA;AAAA,IACA,YACE,mDAAC,8CAAD;AAAA,MACE,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE;AACF,uBAAe,CAAC;AAAA;AAAA,MAElB,MACE,mDAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,mDAAC,sCAAD;AAAA,QACE;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,WACI;AAAA;AAAA;AAAA,KAOd,mDAAC,wBAAD;AAAA,IACE,iBAAiB,CAAC,EAAE,UAAU,iBAAiB,qBAC7C,mDAAC,8BAAD;AAAA,MAAe,WAAS;AAAA,MAAC;AAAA,MAAoB;AAAA,MAAgB,UAAU;AAAA,SAAkB;AAAA;AAAA,IAE3F,qBAAqB;AAAA,IACrB;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA;AAAA;AAMf,eAAe,YAAY;AAAA,EACzB,OAAO,0BAAU,WAAW,MAAM;AAAA,EAClC,UAAU,0BAAU;AAAA,EACpB,QAAQ,0BAAU;AAAA,EAClB,QAAQ,0BAAU;AAAA,EAClB,UAAU,0BAAU;AAAA,EACpB,WAAW,0BAAU;AAAA,EACrB,kBAAkB,0BAAU;AAAA,EAC5B,WAAW,0BAAU;AAAA,EACrB,gBAAgB,0BAAU;AAAA,EAC1B,WAAW,0BAAU;AAAA,EACrB,QAAQ,0BAAU;AAAA,EAClB,eAAe,0BAAU;AAAA,EACzB,iBAAiB,0BAAU;AAAA;AAI7B,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/cjs/TimePickerMenu.js

@@ -0,0 +1,241 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var TimePickerMenu_exports = {};
+__export(TimePickerMenu_exports, {
+  TimePickerMenu: () => TimePickerMenu,
+  default: () => TimePickerMenu_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_moment = __toESM(require("moment"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_utils = require("./utils");
+var import_PickerPanel = require("./PickerPanel");
+const blockName = "time-picker-menu";
+const TimePickerContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName);
+const TimePickerHeader = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "header");
+const TimePickerPanelContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "panel-container");
+const generateOption = (format) => (option) => ({
+  value: option,
+  label: typeof format === "function" ? format(option) : option
+});
+class TimePickerMenu extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.renderHeader = () => {
+      const { time } = this.state;
+      return /* @__PURE__ */ import_react.default.createElement(TimePickerHeader, null, time.format("hh:mma"));
+    };
+    this.state = {
+      time: (0, import_moment.default)(props.time || "", props.format) || (0, import_moment.default)()
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.time) {
+      return { ...state, time: (0, import_moment.default)(props.time) };
+    }
+    return { ...state, time: void 0 };
+  }
+  componentDidMount() {
+    const { time } = this.state;
+    this.setState({ time });
+  }
+  handleMinuteChange(value) {
+    const { time } = this.state;
+    this.updateTime(time.minute(value));
+  }
+  handleHoursChange(value) {
+    const { time } = this.state;
+    const { use12Hours } = this.props;
+    let nextHour = value;
+    if (use12Hours) {
+      if (!(0, import_utils.isAM)(time)) {
+        nextHour = value % 12 + 12;
+      }
+    }
+    this.updateTime(time.hour(nextHour));
+  }
+  handleSecondsChange(value) {
+    const { time } = this.state;
+    this.updateTime(time.second(value));
+  }
+  handleAMPMChange(value) {
+    const { time } = this.state;
+    const hour = time.hour();
+    const nextHour = value.toLowerCase() === "am" ? hour % 12 : hour % 12 + 12;
+    this.updateTime(time.hour(nextHour));
+  }
+  updateTime(time) {
+    const { onTimeChange } = this.props;
+    onTimeChange(time);
+    this.setState({ time });
+  }
+  renderHoursPanel() {
+    const { time } = this.state;
+    const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;
+    if (!showHours)
+      return null;
+    const hour = time.hour();
+    let selectedHour = use12Hours ? hour % 12 || 12 : hour;
+    if (disabledTimes) {
+      const { from, to } = disabledTimes;
+      if (hour > from.hour && hour < to.hour) {
+        if (to.hour < 24) {
+          const toFormatted = to.hour % 12 || 12;
+          if (selectedHour !== toFormatted)
+            this.handleHoursChange(toFormatted);
+          selectedHour = toFormatted;
+        } else if (from) {
+          selectedHour = (from.hour - 1) % 12 || 12;
+        }
+      }
+    }
+    const meridiem = hour >= 12 ? "PM" : "AM";
+    const withLeadingZeros = format.indexOf("hh") > -1;
+    const rangeHours = use12Hours ? (0, import_ds_utilities.range)(1, 13) : (0, import_ds_utilities.range)(24);
+    const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
+    return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
+      type: "hour",
+      time,
+      meridiem,
+      hasHeader,
+      header: "H",
+      onChange: this.handleHoursChange,
+      options: hoursOptions,
+      selected: selectedHour,
+      disabledTimes
+    });
+  }
+  renderMinutesPanel() {
+    const { time } = this.state;
+    const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;
+    if (!showMinutes)
+      return null;
+    const withLeadingZeros = format.indexOf("mm") > -1;
+    const rangeMinutes = (0, import_ds_utilities.range)(0, 60, minutesInterval).map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
+    let selectedMinute = time.minute();
+    const selectedHour = time.hour();
+    if (disabledTimes) {
+      const { from, to } = disabledTimes;
+      if (selectedHour <= to.hour && selectedHour > from.hour) {
+        if (to) {
+          if (selectedMinute < to.min)
+            this.handleMinuteChange(to.min);
+        } else if (from) {
+          if (selectedMinute > from.min)
+            this.handleMinuteChange(from.min - 1);
+        }
+      } else {
+        selectedMinute = time.minute();
+      }
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
+      type: "minutes",
+      time,
+      hasHeader,
+      header: "M",
+      onChange: this.handleMinuteChange,
+      options: rangeMinutes,
+      selected: selectedMinute,
+      disabledTimes
+    });
+  }
+  renderSecondsPanel() {
+    const { time } = this.state;
+    const { showSeconds, format, hasHeader } = this.props;
+    if (!showSeconds)
+      return null;
+    const withLeadingZeros = format.indexOf("ss") > -1;
+    const rangeSeconds = (0, import_ds_utilities.range)(60).map(generateOption(withLeadingZeros && (0, import_ds_utilities.addLeadingZeros)(2)));
+    return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
+      type: "seconds",
+      hasHeader,
+      header: "S",
+      onChange: this.handleSecondsChange,
+      options: rangeSeconds,
+      selected: time.second()
+    });
+  }
+  renderAMPMPanel() {
+    const { time } = this.state;
+    const { use12Hours, hasHeader, disabledTimes } = this.props;
+    if (!use12Hours)
+      return null;
+    let meridiemSelected = !(0, import_utils.isAM)(time) ? "pm" : "am";
+    if (disabledTimes && disabledTimes.to && meridiemSelected === "am") {
+      meridiemSelected = disabledTimes.to.hour >= 12 ? "pm" : "am";
+      if (meridiemSelected === "am" && time.hour() > 12) {
+        this.handleAMPMChange("am");
+      }
+      if (meridiemSelected === "pm" && time.hour() <= 12) {
+        this.handleAMPMChange("pm");
+      }
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_PickerPanel.PickerPanel, {
+      type: "meridiem",
+      hasHeader,
+      header: "",
+      onChange: this.handleAMPMChange,
+      options: [
+        { value: "am", label: "am" },
+        { value: "pm", label: "pm" }
+      ],
+      selected: meridiemSelected,
+      disabledTimes
+    });
+  }
+  render() {
+    const { hasHeaderDisplay } = this.props;
+    return /* @__PURE__ */ import_react.default.createElement(TimePickerContainer, null, hasHeaderDisplay && this.renderHeader(), /* @__PURE__ */ import_react.default.createElement(TimePickerPanelContainer, null, this.renderHoursPanel(), this.renderMinutesPanel(), this.renderSecondsPanel(), this.renderAMPMPanel()));
+  }
+}
+TimePickerMenu.defaultProps = {
+  time: (0, import_moment.default)(),
+  hasHeader: false,
+  use12Hours: true,
+  showSeconds: true,
+  showMinutes: true,
+  showHours: true,
+  disabledTimes: void 0,
+  onTimeChange: () => null
+};
+TimePickerMenu.propTypes = {
+  time: import_prop_types.default.instanceOf(import_moment.default),
+  hasHeader: import_prop_types.default.bool,
+  use12Hours: import_prop_types.default.bool,
+  showSeconds: import_prop_types.default.bool,
+  showMinutes: import_prop_types.default.bool,
+  showHours: import_prop_types.default.bool,
+  onTimeChange: import_prop_types.default.func,
+  disabledTimes: import_prop_types.default.object
+};
+var TimePickerMenu_default = TimePickerMenu;
+module.exports = __toCommonJS(TimePickerMenu_exports);
+//# sourceMappingURL=TimePickerMenu.js.map

package/dist/cjs/TimePickerMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TimePickerMenu.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport { range, addLeadingZeros } from '@elliemae/ds-utilities';\nimport { isAM } from './utils';\nimport { PickerPanel } from './PickerPanel';\n\nconst blockName = 'time-picker-menu';\n\nconst TimePickerContainer = aggregatedClasses('div')(blockName);\nconst TimePickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst TimePickerPanelContainer = aggregatedClasses('div')(blockName, 'panel-container');\n\nconst generateOption = (format) => (option) => ({\n  value: option,\n  label: typeof format === 'function' ? format(option) : option,\n});\n\nclass TimePickerMenu extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      time: moment(props.time || '', props.format) || moment(),\n    };\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if (props.time) {\n      return { ...state, time: moment(props.time) };\n    }\n    return { ...state, time: undefined };\n  }\n\n  componentDidMount() {\n    const { time } = this.state;\n    this.setState({ time });\n  }\n\n  handleMinuteChange(value) {\n    const { time } = this.state;\n    this.updateTime(time.minute(value));\n  }\n\n  handleHoursChange(value) {\n    const { time } = this.state;\n    const { use12Hours } = this.props;\n    let nextHour = value;\n    if (use12Hours) {\n      if (!isAM(time)) {\n        nextHour = (value % 12) + 12;\n      }\n    }\n    this.updateTime(time.hour(nextHour));\n  }\n\n  handleSecondsChange(value) {\n    const { time } = this.state;\n    this.updateTime(time.second(value));\n  }\n\n  handleAMPMChange(value) {\n    const { time } = this.state;\n    const hour = time.hour();\n    const nextHour = value.toLowerCase() === 'am' ? hour % 12 : (hour % 12) + 12;\n    this.updateTime(time.hour(nextHour));\n  }\n\n  updateTime(time) {\n    const { onTimeChange } = this.props;\n    onTimeChange(time);\n    this.setState({ time });\n  }\n\n  renderHoursPanel() {\n    const { time } = this.state;\n    const { showHours, use12Hours, format, hasHeader, disabledTimes } = this.props;\n    if (!showHours) return null;\n\n    const hour = time.hour(); // in 24 format\n    let selectedHour = use12Hours ? hour % 12 || 12 : hour;\n    if (disabledTimes) {\n      const { from, to } = disabledTimes;\n      if (hour > from.hour && hour < to.hour) {\n        if (to.hour < 24) {\n          const toFormatted = to.hour % 12 || 12;\n          if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);\n          selectedHour = toFormatted;\n        } else if (from) {\n          selectedHour = (from.hour - 1) % 12 || 12;\n        }\n      }\n    }\n\n    const meridiem = hour >= 12 ? 'PM' : 'AM';\n    const withLeadingZeros = format.indexOf('hh') > -1;\n    const rangeHours = use12Hours ? range(1, 13) : range(24);\n    const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n    return (\n      <PickerPanel\n        type=\"hour\"\n        time={time}\n        meridiem={meridiem}\n        hasHeader={hasHeader}\n        header=\"H\"\n        onChange={this.handleHoursChange}\n        options={hoursOptions}\n        selected={selectedHour}\n        disabledTimes={disabledTimes}\n      />\n    );\n  }\n\n  renderMinutesPanel() {\n    const { time } = this.state;\n    const { showMinutes, format, hasHeader, disabledTimes, minutesInterval } = this.props;\n    if (!showMinutes) return null;\n    const withLeadingZeros = format.indexOf('mm') > -1;\n    const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n\n    let selectedMinute = time.minute();\n    const selectedHour = time.hour();\n\n    if (disabledTimes) {\n      const { from, to } = disabledTimes;\n      if (selectedHour <= to.hour && selectedHour > from.hour) {\n        if (to) {\n          if (selectedMinute < to.min) this.handleMinuteChange(to.min);\n        } else if (from) {\n          if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);\n        }\n      } else {\n        selectedMinute = time.minute();\n      }\n    }\n\n    return (\n      <PickerPanel\n        type=\"minutes\"\n        time={time}\n        hasHeader={hasHeader}\n        header=\"M\"\n        onChange={this.handleMinuteChange}\n        options={rangeMinutes}\n        selected={selectedMinute}\n        disabledTimes={disabledTimes}\n      />\n    );\n  }\n\n  renderSecondsPanel() {\n    const { time } = this.state;\n    const { showSeconds, format, hasHeader } = this.props;\n    if (!showSeconds) return null;\n    const withLeadingZeros = format.indexOf('ss') > -1;\n    const rangeSeconds = range(60).map(generateOption(withLeadingZeros && addLeadingZeros(2)));\n    return (\n      <PickerPanel\n        type=\"seconds\"\n        hasHeader={hasHeader}\n        header=\"S\"\n        onChange={this.handleSecondsChange}\n        options={rangeSeconds}\n        selected={time.second()}\n      />\n    );\n  }\n\n  renderAMPMPanel() {\n    const { time } = this.state;\n    const { use12Hours, hasHeader, disabledTimes } = this.props;\n    if (!use12Hours) return null;\n\n    let meridiemSelected = !isAM(time) ? 'pm' : 'am';\n    if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {\n      meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';\n      if (meridiemSelected === 'am' && time.hour() > 12) {\n        this.handleAMPMChange('am');\n      }\n\n      if (meridiemSelected === 'pm' && time.hour() <= 12) {\n        this.handleAMPMChange('pm');\n      }\n    }\n\n    return (\n      <PickerPanel\n        type=\"meridiem\"\n        hasHeader={hasHeader}\n        header=\"\"\n        onChange={this.handleAMPMChange}\n        options={[\n          { value: 'am', label: 'am' },\n          { value: 'pm', label: 'pm' },\n        ]}\n        selected={meridiemSelected}\n        disabledTimes={disabledTimes}\n      />\n    );\n  }\n\n  renderHeader = () => {\n    const { time } = this.state;\n    return <TimePickerHeader>{time.format('hh:mma')}</TimePickerHeader>;\n  };\n\n  render() {\n    const { hasHeaderDisplay } = this.props;\n\n    return (\n      <TimePickerContainer>\n        {hasHeaderDisplay && this.renderHeader()}\n        <TimePickerPanelContainer>\n          {this.renderHoursPanel()}\n          {this.renderMinutesPanel()}\n          {this.renderSecondsPanel()}\n          {this.renderAMPMPanel()}\n        </TimePickerPanelContainer>\n      </TimePickerContainer>\n    );\n  }\n}\n\nTimePickerMenu.defaultProps = {\n  time: moment(),\n  hasHeader: false,\n  use12Hours: true,\n  showSeconds: true,\n  showMinutes: true,\n  showHours: true,\n  disabledTimes: undefined,\n  onTimeChange: () => null,\n};\n\nTimePickerMenu.propTypes = {\n  /** Time value */\n  time: PropTypes.instanceOf(moment),\n  /** If the menu has header or not */\n  hasHeader: PropTypes.bool,\n  /** Whether to use the 12 hours format */\n  use12Hours: PropTypes.bool,\n  /** Whether show 'seconds' or not */\n  showSeconds: PropTypes.bool,\n  /** Whether show 'minutes' or not */\n  showMinutes: PropTypes.bool,\n  /** Whether show 'hours' or not */\n  showHours: PropTypes.bool,\n  /** Handler when time changes */\n  onTimeChange: PropTypes.func,\n  disabledTimes: PropTypes.object,\n};\n\nexport { TimePickerMenu };\nexport default TimePickerMenu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  convertTimeString: () => import_utils.convertTimeString,
+  default: () => import_DSTimePicker.default
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./DSTimePicker"));
+__reExport(src_exports, require("./TimePickerMenu"));
+__reExport(src_exports, require("./DSTimePickerMenu"));
+var import_utils = require("./utils");
+var import_DSTimePicker = __toESM(require("./DSTimePicker"));
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './DSTimePicker';\nexport * from './TimePickerMenu';\nexport * from './DSTimePickerMenu';\n\nexport { convertTimeString } from './utils'; // this is an exception, we should move utils to shared tho?\n\nexport { default } from './DSTimePicker';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AACd,wBAAc;AAEd,mBAAkC;AAElC,0BAAwB;",
+  "names": []
+}

package/dist/cjs/moveElementOnScroll.js

@@ -0,0 +1,93 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var moveElementOnScroll_exports = {};
+__export(moveElementOnScroll_exports, {
+  MoveElementOnScroll: () => MoveElementOnScroll,
+  default: () => moveElementOnScroll_default
+});
+var React = __toESM(require("react"));
+function MoveElementOnScroll(element, {
+  container,
+  min = 0,
+  max = element.offsetHeight,
+  speed = 1,
+  smooth = 2,
+  onUpdate = () => null,
+  onEndScroll = () => null
+}) {
+  let moving = false;
+  let pos = min;
+  let lastPos = pos;
+  const requestFrame = function() {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
+      window.setTimeout(func, 1e3 / 50);
+    };
+  }();
+  function update() {
+    moving = true;
+    const delta = (pos - lastPos) / smooth;
+    lastPos += delta;
+    if (Math.abs(delta) > 0.7) {
+      requestFrame(() => {
+        onUpdate(lastPos, delta);
+        update();
+      });
+    } else {
+      onEndScroll(pos);
+      moving = false;
+    }
+  }
+  function scrolling(e) {
+    e.preventDefault();
+    let delta = e.delta || e.wheelDelta;
+    if (delta === void 0) {
+      delta = -e.detail;
+      delta *= 10 * speed;
+    }
+    pos += -delta * speed;
+    pos = Math.max(min, Math.min(pos, max));
+    if (!moving) {
+      update();
+    }
+  }
+  container.addEventListener("mousewheel", scrolling, false);
+  container.addEventListener("DOMMouseScroll", scrolling, false);
+  return {
+    unsubscribe: () => {
+      container.removeEventListener("mousewheel", scrolling);
+      container.removeEventListener("DOMMouseScroll", scrolling);
+    },
+    updatePosition: (newPos) => {
+      pos = -newPos;
+      lastPos = -pos;
+    }
+  };
+}
+var moveElementOnScroll_default = MoveElementOnScroll;
+module.exports = __toCommonJS(moveElementOnScroll_exports);
+//# sourceMappingURL=moveElementOnScroll.js.map

package/dist/cjs/moveElementOnScroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/moveElementOnScroll.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export function MoveElementOnScroll(\n  element,\n  {\n    container,\n    min = 0,\n    max = element.offsetHeight,\n    speed = 1,\n    smooth = 2,\n    onUpdate = () => null,\n    onEndScroll = () => null,\n  },\n) {\n  let moving = false;\n  let pos = min;\n  let lastPos = pos;\n\n  // todo: move this to utils if we finally need it\n  const requestFrame = (function() {\n    return (\n      window.requestAnimationFrame ||\n      window.webkitRequestAnimationFrame ||\n      window.mozRequestAnimationFrame ||\n      window.oRequestAnimationFrame ||\n      window.msRequestAnimationFrame ||\n      function(func) {\n        window.setTimeout(func, 1000 / 50);\n      }\n    );\n  })();\n\n  function update() {\n    moving = true;\n    const delta = (pos - lastPos) / smooth;\n    lastPos += delta;\n\n    if (Math.abs(delta) > 0.7) {\n      requestFrame(() => {\n        onUpdate(lastPos, delta);\n        update();\n      });\n    } else {\n      onEndScroll(pos);\n      moving = false;\n    }\n  }\n\n  function scrolling(e) {\n    e.preventDefault(); // disable default scrolling\n    let delta = e.delta || e.wheelDelta;\n    if (delta === undefined) {\n      // for firefox\n      delta = -e.detail;\n      delta *= 10 * speed;\n    }\n\n    pos += -delta * speed;\n    pos = Math.max(min, Math.min(pos, max)); // limit scrolling\n    if (!moving) {\n      update();\n    }\n  }\n\n  container.addEventListener('mousewheel', scrolling, false);\n  container.addEventListener('DOMMouseScroll', scrolling, false);\n\n  return {\n    unsubscribe: () => {\n      container.removeEventListener('mousewheel', scrolling);\n      container.removeEventListener('DOMMouseScroll', scrolling);\n    },\n    updatePosition: newPos => {\n      pos = -newPos;\n      lastPos = -pos;\n    },\n  };\n}\n\nexport default MoveElementOnScroll;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,6BACL,SACA;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN,MAAM,QAAQ;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,GAEtB;AACA,MAAI,SAAS;AACb,MAAI,MAAM;AACV,MAAI,UAAU;AAGd,QAAM,eAAgB,WAAW;AAC/B,WACE,OAAO,yBACP,OAAO,+BACP,OAAO,4BACP,OAAO,0BACP,OAAO,2BACP,SAAS,MAAM;AACb,aAAO,WAAW,MAAM,MAAO;AAAA;AAAA;AAKrC,oBAAkB;AAChB,aAAS;AACT,UAAM,QAAS,OAAM,WAAW;AAChC,eAAW;AAEX,QAAI,KAAK,IAAI,SAAS,KAAK;AACzB,mBAAa,MAAM;AACjB,iBAAS,SAAS;AAClB;AAAA;AAAA,WAEG;AACL,kBAAY;AACZ,eAAS;AAAA;AAAA;AAIb,qBAAmB,GAAG;AACpB,MAAE;AACF,QAAI,QAAQ,EAAE,SAAS,EAAE;AACzB,QAAI,UAAU,QAAW;AAEvB,cAAQ,CAAC,EAAE;AACX,eAAS,KAAK;AAAA;AAGhB,WAAO,CAAC,QAAQ;AAChB,UAAM,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK;AAClC,QAAI,CAAC,QAAQ;AACX;AAAA;AAAA;AAIJ,YAAU,iBAAiB,cAAc,WAAW;AACpD,YAAU,iBAAiB,kBAAkB,WAAW;AAExD,SAAO;AAAA,IACL,aAAa,MAAM;AACjB,gBAAU,oBAAoB,cAAc;AAC5C,gBAAU,oBAAoB,kBAAkB;AAAA;AAAA,IAElD,gBAAgB,YAAU;AACxB,YAAM,CAAC;AACP,gBAAU,CAAC;AAAA;AAAA;AAAA;AAKjB,IAAO,8BAAQ;",
+  "names": []
+}