@elliemae/ds-controlled-form 3.0.0-next.1 → 3.0.0-next.5

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/Styleds.js

@@ -0,0 +1,198 @@
+import * as React from "react";
+import styled from "styled-components";
+import { css } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButtonV2 } from "@elliemae/ds-button";
+const focusBorder = css`
+  &:after {
+    position: absolute;
+    content: '';
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    border-radius: 50%;
+    border: 2px solid ${({ theme, isDisabled }) => isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
+  }
+`;
+const diagonalLine = css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -1px;
+    height: 1px;
+    width: calc(100% + 2px);
+    transform: rotate(45deg);
+    background-color: ${({ theme, isCurrentListItem, selected }) => {
+  if (selected)
+    return theme.colors.neutral["000"];
+  if (isCurrentListItem)
+    return theme.colors.danger[900];
+  return theme.colors.neutral[500];
+}};
+  }
+`;
+const fontColorPerStatus = css`
+  ${({ theme, isDisabled, isCurrentListItem, selected }) => {
+  if (selected)
+    return theme.colors.neutral["000"];
+  if (isDisabled && isCurrentListItem)
+    return theme.colors.danger[900];
+  if (isDisabled)
+    return theme.colors.neutral[500];
+  if (isCurrentListItem)
+    return theme.colors.brand[600];
+  return theme.colors.neutral[800];
+}};
+`;
+const hoverBgPerStatus = css`
+  ${({ theme, selected, isDisabled }) => {
+  if (isDisabled && selected)
+    return theme.colors.danger[900];
+  if (selected)
+    return theme.colors.brand[700];
+  return theme.colors.neutral["000"];
+}}
+`;
+const StyledIconTriggerButton = styled(DSButtonV2)`
+  color: ${({ theme }) => theme.colors.brand["600"]};
+  width: 26px;
+  height: 26px;
+`;
+const StyledWheelList = styled.div`
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &:focus-within {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};
+    }
+  }
+`;
+const StyledTimePickerContainer = styled.div`
+  display: grid;
+  position: relative;
+  grid-template-columns: 192px;
+  grid-template-rows: 36px 30px auto;
+  grid-template-areas:
+    'TimePickerHead'
+    'TimePickerWheelsLegend'
+    'VerticalWheelWrapper';
+  ${({ showShadow, isControllerOnly }) => showShadow && !isControllerOnly ? `
+  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
+  ` : ""}
+`;
+const StyledTimePickerHead = styled(Grid)`
+  width: 100%;
+  grid-area: TimePickerHead;
+  justify-content: center;
+  align-items: center;
+  background: ${({ theme }) => theme.colors.neutral["050"]};
+`;
+const StyledTimePickerWheelsLegend = styled.div`
+  width: 100%;
+  height: 100;
+  grid-area: TimePickerWheelsLegend;
+  display: grid;
+  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl};
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: ${({ theme }) => theme.colors.neutral["050"]};
+`;
+const StyledTimePickerWheelWrapper = styled.div`
+  width: 100%;
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  grid-area: VerticalWheelWrapper;
+  display: grid;
+  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl};
+  grid-template-rows: 100%;
+  & ul:not(:last-child) {
+    position: relative;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 5%;
+      height: 90%;
+      width: 1px;
+      background: ${({ theme }) => theme.colors.neutral[200]};
+    }
+  }
+`;
+const StyledTimeBtn = styled(DSButtonV2)`
+  position: relative;
+  height: ${({ theme }) => theme.space.s};
+  width: ${({ theme }) => theme.space.s};
+  border-radius: 50%;
+
+  &:hover {
+    background-color: ${hoverBgPerStatus};
+  }
+
+  color: ${fontColorPerStatus};
+
+  ${({ selected, isCurrentListItem }) => isCurrentListItem && !selected ? focusBorder : ``}
+
+  ${({ isDisabled }) => isDisabled ? css`
+          cursor: not-allowed;
+          ${diagonalLine};
+        ` : ``}
+
+  ${({ theme, selected, isDisabled }) => selected ? css`
+    font-weight: ${theme.fontWeights.semibold};
+    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
+    ` : ``};
+`;
+const StyledWheelListItem = styled.div`
+  margin: auto;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+const StyledWheelChangeTimeBtn = styled(DSButtonV2)`
+  height: ${({ theme }) => theme.space.s};
+  width: ${({ theme }) => theme.space.s};
+  min-width: ${({ theme }) => theme.space.s};
+  border-radius: 50%;
+`;
+const TimeWheelFooterMessage = styled.footer`
+  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
+  margin: 0 ${({ theme }) => theme.space.xxs2};
+  padding: ${({ theme }) => theme.space.xxs2} 0;
+  color: ${({ theme }) => theme.colors.danger[900]};
+  font-style: italic;
+  font-weight: ${({ theme }) => theme.fontWeights.thin};
+  font-size: ${({ theme }) => theme.fontSizes.microText[200]};
+  text-align: right;
+`;
+export {
+  StyledIconTriggerButton,
+  StyledTimeBtn,
+  StyledTimePickerContainer,
+  StyledTimePickerHead,
+  StyledTimePickerWheelWrapper,
+  StyledTimePickerWheelsLegend,
+  StyledWheelChangeTimeBtn,
+  StyledWheelList,
+  StyledWheelListItem,
+  TimeWheelFooterMessage
+};
+//# sourceMappingURL=Styleds.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/Styleds.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/Styleds.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2)`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledWheelList = styled.div`\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  padding: 0;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  &:focus-within {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n`;\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\nexport const StyledTimePickerContainer = styled.div<{ showShadow?: boolean; isControllerOnly: boolean }>`\n  display: grid;\n  position: relative;\n  grid-template-columns: 192px;\n  grid-template-rows: 36px 30px auto;\n  grid-template-areas:\n    'TimePickerHead'\n    'TimePickerWheelsLegend'\n    'VerticalWheelWrapper';\n  ${({ showShadow, isControllerOnly }) =>\n    showShadow && !isControllerOnly\n      ? `\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  `\n      : ''}\n`;\n\nexport const StyledTimePickerHead = styled(Grid)`\n  width: 100%;\n  grid-area: TimePickerHead;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n  width: 100%;\n  height: 100;\n  grid-area: TimePickerWheelsLegend;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div`\n  width: 100%;\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  grid-area: VerticalWheelWrapper;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  grid-template-rows: 100%;\n  & ul:not(:last-child) {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      left: 100%;\n      top: 5%;\n      height: 90%;\n      width: 1px;\n      background: ${({ theme }) => theme.colors.neutral[200]};\n    }\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2)`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2)`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled.footer`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { TimeWheelIconTrigger } from "./TimeWheelIconTrigger";
+import { TimeWheelWrapper } from "./TimeWheelWrapper";
+import { TimeWheelContext } from "./TimeWheelContext";
+import { useConfigTimePickerCTX } from "./useConfigTimePickerCTX";
+const WrappedTimeWheelContext = ({ children }) => {
+  const ctx = useConfigTimePickerCTX();
+  return /* @__PURE__ */ React2.createElement(TimeWheelContext.Provider, {
+    value: ctx
+  }, children);
+};
+const WrapWithTimeWheelContext = (Component) => () => /* @__PURE__ */ React2.createElement(WrappedTimeWheelContext, null, /* @__PURE__ */ React2.createElement(Component, null));
+const TimeWheel = WrapWithTimeWheelContext(() => {
+  const { showTimePicker, isControllerOnly, handleMenuWrapperKeyDown } = useContext(TimeWheelContext);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, isControllerOnly ? null : /* @__PURE__ */ React2.createElement(TimeWheelIconTrigger, null), isControllerOnly || showTimePicker ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
+    onKeyDown: handleMenuWrapperKeyDown
+  }, /* @__PURE__ */ React2.createElement(TimeWheelWrapper, null))) : null);
+});
+export {
+  TimeWheel,
+  WrapWithTimeWheelContext
+};
+//# sourceMappingURL=TimeWheel.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport { TimeWheelIconTrigger } from './TimeWheelIconTrigger';\nimport { TimeWheelWrapper } from './TimeWheelWrapper';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { useConfigTimePickerCTX } from './useConfigTimePickerCTX';\n\nconst WrappedTimeWheelContext = ({ children }: { children: JSX.Element }) => {\n  const ctx = useConfigTimePickerCTX();\n  return <TimeWheelContext.Provider value={ctx}>{children}</TimeWheelContext.Provider>;\n};\nexport const WrapWithTimeWheelContext = (Component: React.ComponentType) => (): JSX.Element =>\n  (\n    <WrappedTimeWheelContext>\n      <Component />\n    </WrappedTimeWheelContext>\n  );\n// we use the HoC to be able to use the useContext and be sure it's correctly initialized\n// the HoC is Reused in CalendarWithTimeWheel\nexport const TimeWheel = WrapWithTimeWheelContext((): JSX.Element => {\n  const { showTimePicker, isControllerOnly, handleMenuWrapperKeyDown } = useContext(TimeWheelContext);\n\n  return (\n    <>\n      {isControllerOnly ? null : <TimeWheelIconTrigger />}\n      {isControllerOnly || showTimePicker ? (\n        <>\n          {/* The <div> element is catching the \"Escape\" key to close the calendar, there is no valid aria role for this */}\n          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleMenuWrapperKeyDown}>\n            <TimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n});\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,0BAA0B,CAAC,EAAE,eAA0C;AAC3E,QAAM,MAAM;AACZ,SAAO,qCAAC,iBAAiB,UAAlB;AAAA,IAA2B,OAAO;AAAA,KAAM;AAAA;AAE1C,MAAM,2BAA2B,CAAC,cAAmC,MAExE,qCAAC,yBAAD,MACE,qCAAC,WAAD;AAKC,MAAM,YAAY,yBAAyB,MAAmB;AACnE,QAAM,EAAE,gBAAgB,kBAAkB,6BAA6B,WAAW;AAElF,SACE,4DACG,mBAAmB,OAAO,qCAAC,sBAAD,OAC1B,oBAAoB,iBACnB,4DAIE,qCAAC,OAAD;AAAA,IAAK,WAAW;AAAA,KACd,qCAAC,kBAAD,UAGF;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+import {
+  StyledTimePickerContainer,
+  StyledTimePickerHead,
+  StyledTimePickerWheelsLegend,
+  StyledTimePickerWheelWrapper
+} from "./Styleds";
+import { HoursList } from "./HoursList";
+import { MinutesList } from "./MinutesList";
+import { MeridiemList } from "./MeridiemList";
+import { TimeWheelFooter } from "./TimeWheelFooter";
+import { TimeWheelContext } from "./TimeWheelContext";
+const TimeWheelContent = React2.memo(({ showShadow }) => {
+  const { hours, minutes, meridiem, isControllerOnly } = useContext(TimeWheelContext);
+  return /* @__PURE__ */ React2.createElement(StyledTimePickerContainer, {
+    showShadow,
+    isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
+  }, /* @__PURE__ */ React2.createElement(StyledTimePickerHead, null, `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`), /* @__PURE__ */ React2.createElement(StyledTimePickerWheelsLegend, null, /* @__PURE__ */ React2.createElement("div", null, "H"), /* @__PURE__ */ React2.createElement("div", null, "M"), /* @__PURE__ */ React2.createElement("div", null, "A")), /* @__PURE__ */ React2.createElement(StyledTimePickerWheelWrapper, null, /* @__PURE__ */ React2.createElement(HoursList, null), /* @__PURE__ */ React2.createElement(MinutesList, null), /* @__PURE__ */ React2.createElement(MeridiemList, null)), /* @__PURE__ */ React2.createElement(TimeWheelFooter, null));
+});
+export {
+  TimeWheelContent
+};
+//# sourceMappingURL=TimeWheelContent.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport {\n  StyledTimePickerContainer,\n  StyledTimePickerHead,\n  StyledTimePickerWheelsLegend,\n  StyledTimePickerWheelWrapper,\n} from './Styleds';\nimport { HoursList } from './HoursList';\nimport { MinutesList } from './MinutesList';\nimport { MeridiemList } from './MeridiemList';\nimport { TimeWheelFooter } from './TimeWheelFooter';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelContent = React.memo(({ showShadow }: { showShadow?: boolean }) => {\n  const { hours, minutes, meridiem, isControllerOnly } = useContext(TimeWheelContext);\n  return (\n    <StyledTimePickerContainer\n      showShadow={showShadow}\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n    >\n      <StyledTimePickerHead>{`${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n      <StyledTimePickerWheelsLegend>\n        <div>H</div>\n        <div>M</div>\n        <div>A</div>\n      </StyledTimePickerWheelsLegend>\n      <StyledTimePickerWheelWrapper>\n        <HoursList />\n        <MinutesList />\n        <MeridiemList />\n      </StyledTimePickerWheelWrapper>\n      <TimeWheelFooter />\n    </StyledTimePickerContainer>\n  );\n});\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,OAAM,KAAK,CAAC,EAAE,iBAA2C;AACvF,QAAM,EAAE,OAAO,SAAS,UAAU,qBAAqB,WAAW;AAClE,SACE,qCAAC,2BAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,KAErE,qCAAC,sBAAD,MAAuB,GAAG,SAAS,QAAQ,WAAW,QAAQ,YAAY,SAC1E,qCAAC,8BAAD,MACE,qCAAC,OAAD,MAAK,MACL,qCAAC,OAAD,MAAK,MACL,qCAAC,OAAD,MAAK,OAEP,qCAAC,8BAAD,MACE,qCAAC,WAAD,OACA,qCAAC,aAAD,OACA,qCAAC,cAAD,QAEF,qCAAC,iBAAD;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { createContext, createRef } from "react";
+const noop = () => {
+};
+const defaultTimePickerContext = {
+  ariaCurrentValueForInputs: "",
+  tempTimeString: "",
+  showTimePicker: false,
+  setShowTimePicker: noop,
+  setPopperElement: noop,
+  setArrowElement: noop,
+  usePopperHelpers: null,
+  handleToggleTimePicker: noop,
+  handleSetTriggerRef: noop,
+  handleMenuWrapperKeyDown: noop,
+  currHourNum: 1,
+  hours: "01",
+  visibleHours: [""],
+  handlePrevHour: noop,
+  handleNextHour: noop,
+  handleTimeWheelBtnChangeHours: noop,
+  currMinuteNum: 1,
+  minutes: "00",
+  visibleMinutes: [""],
+  handlePrevMinute: noop,
+  handleNextMinute: noop,
+  handleTimeWheelBtnChangeMinutes: noop,
+  meridiem: "AM",
+  handleTimeWheelBtnChangeMeridiem: noop,
+  isControllerOnly: false,
+  autoFocusHourTimeWheel: false,
+  handlePrevHourBtnOnKeyDown: noop,
+  handleCurrHourOnKeyDown: noop,
+  handleNextHourBtnOnKeyDown: noop,
+  handlePrevMinuteBtnOnKeyDown: noop,
+  handleCurrMinutesOnKeyDown: noop,
+  handleNextMinuteBtnOnKeyDown: noop,
+  handlePrevMeridiemBtnOnKeyDown: noop,
+  handleCurrMeridiemOnKeyDown: noop,
+  handleNextMeridiemBtnOnKeyDown: noop,
+  handlePickerIconKeyDown: noop,
+  prevHourBtnRef: createRef(),
+  currHourBtnRef: createRef(),
+  nextHourBtnRef: createRef(),
+  prevMinutesBtnRef: createRef(),
+  currMinutesBtnRef: createRef(),
+  nextMinutesBtnRef: createRef(),
+  prevMeridiemBtnRef: createRef(),
+  currMeridiemBtnRef: createRef(),
+  nextMeridiemBtnRef: createRef(),
+  getIsDisabledTime: () => false,
+  disabled: false
+};
+const TimeWheelContext = createContext(defaultTimePickerContext);
+var TimeWheelContext_default = TimeWheelContext;
+export {
+  TimeWheelContext,
+  TimeWheelContext_default as default,
+  defaultTimePickerContext
+};
+//# sourceMappingURL=TimeWheelContext.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable max-lines */\nimport React, { createContext, createRef } from 'react';\n// import type { DateMonth } from '../../../index.d';\nexport interface WheelsButtonsRefsT {\n  prevHourBtnRef: React.RefObject<HTMLButtonElement>;\n  currHourBtnRef: React.RefObject<HTMLButtonElement>;\n  nextHourBtnRef: React.RefObject<HTMLButtonElement>;\n  prevMinutesBtnRef: React.RefObject<HTMLButtonElement>;\n  currMinutesBtnRef: React.RefObject<HTMLButtonElement>;\n  nextMinutesBtnRef: React.RefObject<HTMLButtonElement>;\n  // prevSecondsBtnRef: React.RefObject<HTMLButtonElement>;\n  // currSecondsBtnRef: React.RefObject<HTMLButtonElement>;\n  // nextSecondsBtnRef: React.RefObject<HTMLButtonElement>;\n  prevMeridiemBtnRef: React.RefObject<HTMLButtonElement>;\n  currMeridiemBtnRef: React.RefObject<HTMLButtonElement>;\n  nextMeridiemBtnRef: React.RefObject<HTMLButtonElement>;\n}\nexport interface KeyboardHandlersT {\n  handlePrevHourBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextHourBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  handlePrevMinuteBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextMinuteBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  // handlePrevSecondBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  // handleCurrSecondsOnKeyDown: (e: React.KeyboardEvent) => void;\n  // handleNextSecondBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  handlePrevMeridiemBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextMeridiemBtnOnKeyDown: (e: React.KeyboardEvent) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport interface PopperTriggerLogicT {\n  showTimePicker: boolean;\n  setShowTimePicker: React.Dispatch<React.SetStateAction<boolean>>;\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  usePopperHelpers: {\n    attributes: Record<string, unknown>;\n    styles: Record<string, React.CSSProperties>;\n  };\n  handleToggleTimePicker: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e?: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport interface useCurrentDisplayedWheelsLogicT {\n  currHourNum: number;\n  hours: string;\n  visibleHours: string[];\n  handlePrevHour: (e: React.MouseEvent) => void;\n  handleNextHour: (e: React.MouseEvent) => void;\n  handleTimeWheelBtnChangeHours: (newVal: string, e: React.MouseEvent<HTMLButtonElement>) => void;\n  currMinuteNum: number;\n  minutes: string;\n  visibleMinutes: string[];\n  handlePrevMinute: (e: React.MouseEvent) => void;\n  handleNextMinute: (e: React.MouseEvent) => void;\n  handleTimeWheelBtnChangeMinutes: (newVal: string, e: React.MouseEvent<HTMLButtonElement>) => void;\n  // currSecondNum: number;\n  // seconds: string;\n  // visibleSeconds: string[];\n  // handlePrevSecond: (e: React.MouseEvent) => void;\n  // handleNextSecond: (e: React.MouseEvent) => void;\n  // handleTimeWheelBtnChangeSeconds: (\n  //   newVal: string,\n  //   e: React.MouseEvent<HTMLButtonElement>,\n  // ) => void;\n  meridiem: string;\n  handleTimeWheelBtnChangeMeridiem: (newMeridiem: string, e: React.MouseEvent) => void;\n}\nexport interface TimeWheelContextT\n  extends PopperTriggerLogicT,\n    useCurrentDisplayedWheelsLogicT,\n    KeyboardHandlersT,\n    WheelsButtonsRefsT {\n  ariaCurrentValueForInputs: string;\n  tempTimeString: string;\n  isControllerOnly: boolean;\n  autoFocusHourTimeWheel: boolean;\n  disabled: boolean;\n  getIsDisabledTime: (val: string) => boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nexport const defaultTimePickerContext: TimeWheelContextT = {\n  ariaCurrentValueForInputs: '',\n  tempTimeString: '',\n  showTimePicker: false,\n  setShowTimePicker: noop,\n  setPopperElement: noop,\n  setArrowElement: noop,\n  usePopperHelpers: null,\n  handleToggleTimePicker: noop,\n  handleSetTriggerRef: noop,\n  handleMenuWrapperKeyDown: noop,\n\n  currHourNum: 1,\n  hours: '01',\n  visibleHours: [''],\n  handlePrevHour: noop,\n  handleNextHour: noop,\n  handleTimeWheelBtnChangeHours: noop,\n  currMinuteNum: 1,\n  minutes: '00',\n  visibleMinutes: [''],\n  handlePrevMinute: noop,\n  handleNextMinute: noop,\n  handleTimeWheelBtnChangeMinutes: noop,\n  // currSecondNum: 1,\n  // seconds: '00',\n  // visibleSeconds: [''],\n  // handlePrevSecond: noop,\n  // handleNextSecond: noop,\n  // handleTimeWheelBtnChangeSeconds: noop,\n  meridiem: 'AM',\n  handleTimeWheelBtnChangeMeridiem: noop,\n  isControllerOnly: false,\n  autoFocusHourTimeWheel: false,\n\n  handlePrevHourBtnOnKeyDown: noop,\n  handleCurrHourOnKeyDown: noop,\n  handleNextHourBtnOnKeyDown: noop,\n  handlePrevMinuteBtnOnKeyDown: noop,\n  handleCurrMinutesOnKeyDown: noop,\n  handleNextMinuteBtnOnKeyDown: noop,\n  // handlePrevSecondBtnOnKeyDown: noop,\n  // handleCurrSecondsOnKeyDown: noop,\n  // handleNextSecondBtnOnKeyDown: noop,\n  handlePrevMeridiemBtnOnKeyDown: noop,\n  handleCurrMeridiemOnKeyDown: noop,\n  handleNextMeridiemBtnOnKeyDown: noop,\n  handlePickerIconKeyDown: noop,\n\n  prevHourBtnRef: createRef<HTMLButtonElement>(),\n  currHourBtnRef: createRef<HTMLButtonElement>(),\n  nextHourBtnRef: createRef<HTMLButtonElement>(),\n  prevMinutesBtnRef: createRef<HTMLButtonElement>(),\n  currMinutesBtnRef: createRef<HTMLButtonElement>(),\n  nextMinutesBtnRef: createRef<HTMLButtonElement>(),\n  // prevSecondsBtnRef: createRef<HTMLButtonElement>(),\n  // currSecondsBtnRef: createRef<HTMLButtonElement>(),\n  // nextSecondsBtnRef: createRef<HTMLButtonElement>(),\n  prevMeridiemBtnRef: createRef<HTMLButtonElement>(),\n  currMeridiemBtnRef: createRef<HTMLButtonElement>(),\n  nextMeridiemBtnRef: createRef<HTMLButtonElement>(),\n\n  getIsDisabledTime: () => false,\n  disabled: false,\n};\n/** Context for cross component communication */\nexport const TimeWheelContext = createContext(defaultTimePickerContext);\n\nexport default TimeWheelContext;\n"],
+  "mappings": "AAAA;ACEA;AAkFA,MAAM,OAAO,MAAY;AAAA;AAClB,MAAM,2BAA8C;AAAA,EACzD,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAE1B,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,+BAA+B;AAAA,EAC/B,eAAe;AAAA,EACf,SAAS;AAAA,EACT,gBAAgB,CAAC;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EAOjC,UAAU;AAAA,EACV,kCAAkC;AAAA,EAClC,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EAExB,4BAA4B;AAAA,EAC5B,yBAAyB;AAAA,EACzB,4BAA4B;AAAA,EAC5B,8BAA8B;AAAA,EAC9B,4BAA4B;AAAA,EAC5B,8BAA8B;AAAA,EAI9B,gCAAgC;AAAA,EAChC,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,yBAAyB;AAAA,EAEzB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EAInB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EAEpB,mBAAmB,MAAM;AAAA,EACzB,UAAU;AAAA;AAGL,MAAM,mBAAmB,cAAc;AAE9C,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelFooter.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { TimeWheelFooterMessage } from "./Styleds";
+const TimeWheelFooter = () => {
+  const {
+    props: { pickerFooterMsg, hasError },
+    isWithCalendarToo
+  } = useContext(ControlledDateTimePickerContext);
+  if (!isWithCalendarToo && pickerFooterMsg !== void 0 && hasError)
+    return /* @__PURE__ */ React2.createElement(TimeWheelFooterMessage, {
+      role: "alert"
+    }, pickerFooterMsg);
+  return null;
+};
+export {
+  TimeWheelFooter
+};
+//# sourceMappingURL=TimeWheelFooter.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelFooter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/TimeWheelFooter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelFooterMessage } from './Styleds';\n\nexport const TimeWheelFooter = (): JSX.Element => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    isWithCalendarToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError)\n    return <TimeWheelFooterMessage role=\"alert\">{pickerFooterMsg}</TimeWheelFooterMessage>;\n  return null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAmB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,WAAW;AACf,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,WAAO,qCAAC,wBAAD;AAAA,MAAwB,MAAK;AAAA,OAAS;AAC/C,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import React2, { useContext, useMemo } from "react";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button";
+import { RecentDocuments } from "@elliemae/ds-icons";
+import { TimeWheelContext } from "./TimeWheelContext";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+const TimeWheelIconTrigger = () => {
+  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown, ariaCurrentValueForInputs, disabled } = useContext(TimeWheelContext);
+  return useMemo(() => /* @__PURE__ */ React2.createElement(DSButtonV2, {
+    "aria-label": `time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
+    innerRef: handleSetTriggerRef,
+    onClick: handleToggleTimePicker,
+    onKeyDown: handlePickerIconKeyDown,
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
+    disabled
+  }, /* @__PURE__ */ React2.createElement(RecentDocuments, null)), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
+};
+export {
+  TimeWheelIconTrigger
+};
+//# sourceMappingURL=TimeWheelIconTrigger.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\n\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown, ariaCurrentValueForInputs, disabled } =\n    useContext(TimeWheelContext);\n  return useMemo(\n    () => (\n      <DSButtonV2\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n      >\n        <RecentDocuments />\n      </DSButtonV2>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAMO,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,yBAAyB,2BAA2B,aACvG,WAAW;AACb,SAAO,QACL,MACE,qCAAC,YAAD;AAAA,IACE,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,qCAAC,iBAAD,QAGJ,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+import { TimeWheelContent } from "./TimeWheelContent";
+import { TimeWheelContext } from "./TimeWheelContext";
+const TimeWheelWrapper = () => {
+  const {
+    setArrowElement,
+    setPopperElement,
+    usePopperHelpers: { styles, attributes },
+    isControllerOnly
+  } = useContext(TimeWheelContext);
+  if (isControllerOnly)
+    return /* @__PURE__ */ React2.createElement(TimeWheelContent, {
+      showShadow: true
+    });
+  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
+    ref: setPopperElement,
+    style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
+  }, attributes.popper), {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL
+  }), /* @__PURE__ */ React2.createElement(TimeWheelContent, {
+    showShadow: true
+  }), /* @__PURE__ */ React2.createElement("div", {
+    ref: setArrowElement,
+    style: styles.arrow
+  }));
+};
+export {
+  TimeWheelWrapper
+};
+//# sourceMappingURL=TimeWheelWrapper.js.map

package/dist/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { TimeWheelContent } from './TimeWheelContent';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const {\n    setArrowElement,\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    isControllerOnly,\n  } = useContext(TimeWheelContext);\n  if (isControllerOnly) return <TimeWheelContent showShadow />;\n  return (\n    <div\n      ref={setPopperElement}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n    >\n      <TimeWheelContent showShadow />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,MACE,WAAW;AACf,MAAI;AAAkB,WAAO,qCAAC,kBAAD;AAAA,MAAkB,YAAU;AAAA;AACzD,SACE,qCAAC,OAAD;AAAA,IACE,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ;AAAA,KACpD,WAAW,SAHjB;AAAA,IAIE,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC,kBAAD;AAAA,IAAkB,YAAU;AAAA,MAC5B,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA;AAAA;",
+  "names": []
+}