@servicetitan/design-system 11.0.0 → 11.3.0

package/dist/components/TimePicker/TimePicker.css

@@ -0,0 +1,200 @@
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.TimePicker__options:not(.TimePicker__options-focused) > .OptionList__option.OptionList__option-highlighted::before, .OptionList__option:hover::before, .OptionList__option:focus-within::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(20, 20, 20, 0.08);
+}
+
+.OptionList {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: #141414;
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+}
+
+/* Single Select */
+.OptionList--single-select .Checkbox__box {
+  display: none;
+}
+
+/* Single Option in Options */
+.OptionList__option {
+  border-radius: 3px;
+  display: flex;
+  position: relative;
+  /* Center vertical alignment of OptionList Checkboxes */
+}
+.OptionList__option .Checkbox__label {
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px 16px 8px 0;
+  width: 100%;
+}
+.OptionList__option .a-Checkbox {
+  width: 100%;
+}
+.OptionList__option .Checkbox__html-label {
+  align-items: center;
+}
+.OptionList__option .Checkbox__box {
+  top: 0;
+}
+
+.OptionList__header {
+  padding-bottom: 8px;
+  padding-left: 16px;
+}
+
+.OptionList--single-select .OptionList__option--selected {
+  color: #2270ee;
+  background-color: #ecf4fd;
+}
+.OptionList--single-select .OptionList__option--selected:hover::before, .OptionList--single-select .OptionList__option--selected:focus-within::before {
+  background-color: #ecf4fd;
+}
+
+/* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
+[aria-level="0"].OptionList__option {
+  padding-left: 16px;
+}
+
+[aria-level="1"].OptionList__option {
+  padding-left: 36px;
+}
+
+[aria-level="2"].OptionList__option {
+  padding-left: 52px;
+}
+
+[aria-level="3"].OptionList__option {
+  padding-left: 68px;
+}
+
+[aria-level="4"].OptionList__option {
+  padding-left: 84px;
+}
+
+[aria-level="5"].OptionList__option {
+  padding-left: 100px;
+}
+
+[aria-level="6"].OptionList__option {
+  padding-left: 116px;
+}
+
+[aria-level="7"].OptionList__option {
+  padding-left: 132px;
+}
+
+[aria-level="8"].OptionList__option {
+  padding-left: 148px;
+}
+
+/* Button styling of expand/collapse next to option */
+.OptionList__collapse {
+  padding: 0 !important;
+  align-self: center;
+  margin-left: -24px;
+  margin-right: 4px;
+}
+
+/* Loading option style */
+.OptionList__spinner {
+  align-self: center;
+  margin-left: -24px;
+  margin-right: 5px;
+}
+
+/* Center vertical alignment of Checkboxes for custom content */
+.OptionList__option--custom .Checkbox__html-label {
+  align-items: center;
+}
+.OptionList__option--custom .Checkbox__box {
+  top: 0;
+}
+
+/* Secondary actions. Shown only on hover. */
+.OptionList__option--secondary-action {
+  align-self: center;
+  margin-left: auto;
+  margin-right: 4px;
+  opacity: 0;
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  z-index: 2;
+  background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%, rgba(238, 238, 238, 0) 100%);
+  /* Match the background color of the single selected option */
+}
+.OptionList__option:hover .OptionList__option--secondary-action {
+  opacity: 1;
+}
+.OptionList--single-select .Checkbox--checked + .OptionList__option--secondary-action {
+  background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%, rgba(236, 244, 253, 0) 100%);
+}
+
+/*
+	Read only variation
+	Does not allow for selections, visually not disabled, allows for secondary actions
+*/
+.OptionList__option--read-only:hover, .OptionList__option--read-only:focus-within,
+.OptionList__option--read-only .OptionList__option--secondary-action {
+  background: none;
+}
+.OptionList__option--read-only:hover::before, .OptionList__option--read-only:focus-within::before,
+.OptionList__option--read-only .OptionList__option--secondary-action::before {
+  background-color: transparent;
+}
+.OptionList__option--read-only .Checkbox__html-label {
+  cursor: default;
+}
+
+/*
+	Disabled variation
+	Inherits read only styles, adds visual to indicate it is disabled
+*/
+.OptionList__option--disabled .Checkbox__html-label {
+  cursor: not-allowed;
+}
+
+.TimePicker {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: #141414;
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  flex-grow: 1;
+}
+.TimePicker > div {
+  flex-grow: 1;
+  display: flex;
+}
+
+.TimePicker__input {
+  flex-grow: 1;
+}
+
+.TimePicker__icon {
+  cursor: pointer;
+}
+
+.Popper > .TimePicker__hint.Popover__body {
+  width: 100%;
+}
+
+.TimePicker--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.field.disabled .TimePicker--disabled {
+  opacity: 1;
+}
+
+/*# sourceMappingURL=TimePicker.css.map */

package/dist/components/TimePicker/TimePicker.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/OptionList/OptionList.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/TimePicker/TimePicker.scss"],"names":[],"mappings":"AAAA;ACIC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ACdC;EACA,OCiBa;ADfb;EACA;;;ADcD;AAEC;EACC;;;AAIF;AACA;EACC,eEpBiB;EFqBjB;EACA;AAgBA;;AATA;EACC,WE+FY;EF9FZ,aEkEoB;EFjEpB;EACA;;AAGD;EAAc;;AAGd;EAAwB;;AACxB;EAAiB;;;AAGlB;EACC,gBEsEW;EFrEX,cEsEW;;;AFlEX;EACC,OEtCW;EFuCX,kBE9Be;;AFkCd;EAAY,kBElCE;;;AFuCjB;AACA;EAAsC,cEsD1B;;;AFlDV;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AAKH;AACA;EACC;EACA;EACA;EACA,cE8Cc;;;AF3Cf;AACA;EACC;EACA;EACA;;;AAGD;AAEC;EAAwB;;AACxB;EAAiB;;;AAGlB;AACA;EACC;EACA;EACA,cE0Bc;EFzBd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cEYW;EFXX;EACA,YACC;AAWD;;AAJA;EACC;;AAKA;EACC,YACC;;;AAUJ;AAAA;AAAA;AAAA;AAKC;AAAA;EAGC;;AAEA;AAAA;EACC;;AAIF;EAAwB;;;AAGzB;AAAA;AAAA;AAAA;AAKC;EAAwB;;;AG/JzB;AFHC;EACA,OCiBa;ADfb;EACA;EEEA;;AAEA;EACC;EACA;;;AAIF;EAAqB;;;AACrB;EAAoB;;;AACpB;EAA4C;;;AAE5C;EACC;EACA;;AAEA;EAAoB","file":"TimePicker.css"}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { InputProps, PopoverProps } from '..';
+import { TimePickerOptionProps } from './components';
+export interface TimePickerPropsStrict extends Omit<InputProps, 'value' | 'placeholder'> {
+    /** Preferable signifier of a value to select on autocomplete when user left the control */
+    defaultTimeSignifier?: 'AM' | 'PM';
+    /**
+     * Specified in minutes, default is 30. Should not exceed 1440 (24 hours).
+     * Increment used to:
+     * 1. hide intermediate values in hint's dropdown if `autoRounding` is false, or
+     * 2. generate values for hint's options if `autoRounding` is true.
+     */
+    hintIncrement?: number;
+    /** Define the width property of TimePicker's hint (popover) */
+    hintWidth?: PopoverProps['width'];
+    /**
+     * If field is focused, show in a dropdown a list of availiable options, filtered by `hintIncrement` prop.
+     */
+    showHint?: boolean;
+    /**
+     * If false, ignores hintIncrement values, making possible to type in intermidiate values.
+     * If true, user only allowed to choose options that fit into hintIncrement's values row,
+     * and automatically rounds the user's input to the closest options.
+     * Closest value to be highlighted in a dropdown.
+     */
+    autoRounding?: boolean;
+    /** Maximum time allowed */
+    maxTime?: Date | string;
+    /** Minimum time allowed */
+    minTime?: Date | string;
+    /** Called when the user changes the value */
+    onChange?: (value: TimePickerOptionProps['value']) => void;
+    /** Allows to open dropdown if showHint === true */
+    open?: boolean;
+    /** Direction of the dropdown */
+    direction?: PopoverProps['direction'];
+    /** A Date object unrestricted by minTime and maxTime */
+    value?: TimePickerOptionProps['value'];
+}
+export interface TimePickerProps extends TimePickerPropsStrict {
+    /** Unstrict Props */
+    [propName: string]: any;
+}
+export declare const TimePicker: FC<TimePickerProps>;

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,191 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useMemo } from 'react';
+import classnames from 'classnames';
+import { Input, Icon, Popover } from '..';
+import { keys } from '../../utilities';
+import { toTimeFormat, generateOptions, filterOptionsWithRounding, filterOptions, getClosestOption, getOptionByValue, highlightClosestOption, withClosestOption, } from './utils';
+import { TimePickerOptionList } from './components';
+export const TimePicker = React.forwardRef((props, ref) => {
+    const { className, fluid, defaultTimeSignifier = 'AM', hintIncrement = 30, hintWidth = '100', showHint = false, autoRounding = false, disabled, error, minTime = '12:00 AM', maxTime = '23:59 PM', onChange, placeholder = 'HH:MM ' + defaultTimeSignifier, size, value, direction = 'br', open } = props, rest = __rest(props, ["className", "fluid", "defaultTimeSignifier", "hintIncrement", "hintWidth", "showHint", "autoRounding", "disabled", "error", "minTime", "maxTime", "onChange", "placeholder", "size", "value", "direction", "open"]);
+    const inputRef = React.useRef(null);
+    const [hintOpened, setHintOpened] = React.useState(showHint && open);
+    const [hintFocused, setHintFocused] = React.useState(false);
+    const [userInput, setUserInput] = React.useState('');
+    const [filterStr, setFilterStr] = React.useState('');
+    React.useEffect(() => {
+        // Set input's text on each non-null value change
+        if (value)
+            setUserInput(toTimeFormat.hhmmxm(value) || '');
+    }, [value]);
+    const handleInputFocus = () => {
+        if (hintFocused)
+            setHintFocused(false);
+        if (hintOpened !== showHint)
+            setHintOpened(showHint);
+        if (userInput !== '')
+            setFilterStr('');
+    };
+    const handleInputBlur = () => {
+        // Disable handleInputBlur in case of hint, as focus may go to hint
+        if (showHint)
+            return;
+        // Fake blur, active element is not really changed (alt+tab, etc)
+        if (document.activeElement === inputRef.current.inputRef.current)
+            return;
+        autoComplete();
+    };
+    // Initial list of options
+    const optionsArgs = [minTime, maxTime, hintIncrement];
+    const options = useCallback(generateOptions, optionsArgs)(...optionsArgs);
+    // Closest to user's input option
+    const closestOptionArgs = [
+        options,
+        userInput,
+        defaultTimeSignifier,
+        autoRounding,
+        minTime,
+        maxTime,
+    ];
+    const closestOption = useCallback(getClosestOption, closestOptionArgs)(...closestOptionArgs);
+    // Filtered list of options with extra one to highligh (in case rounding disabled)
+    const hintOptions = useMemo(() => {
+        if (userInput === '' || filterStr === '') {
+            return options;
+        }
+        let filtered;
+        if (autoRounding) {
+            filtered = filterOptionsWithRounding(options, filterStr);
+        }
+        else {
+            filtered = filterOptions(options, filterStr);
+        }
+        // Insert closest option in case it was filtered out
+        filtered = withClosestOption(filtered, closestOption);
+        filtered = highlightClosestOption(filtered, closestOption);
+        return filtered;
+    }, [userInput, filterStr, options, autoRounding, closestOption]);
+    // Runs on each input blur event
+    const autoComplete = () => {
+        var _a, _b, _c;
+        // User is choosing from hint's options
+        if (hintFocused)
+            return;
+        if (closestOption) {
+            // Accept user input
+            if (((_b = (_a = closestOption.value) === null || _a === void 0 ? void 0 : _a.getTime) === null || _b === void 0 ? void 0 : _b.call(_a)) !== ((_c = value === null || value === void 0 ? void 0 : value.getTime) === null || _c === void 0 ? void 0 : _c.call(value)))
+                onChange(closestOption.value);
+            if (userInput !== closestOption.text)
+                setUserInput(closestOption.text);
+            if (hintOpened)
+                setHintOpened(false);
+        }
+        else if (userInput !== '') {
+            // Reject user input
+            onChange(null);
+            setUserInput('');
+            setFilterStr('');
+            if (hintOpened)
+                setHintOpened(false);
+        }
+    };
+    // Listening for user's typing
+    const handleInputChange = (e, data) => {
+        setUserInput(data.value.toUpperCase());
+        setFilterStr(data.value.toUpperCase());
+        if (!hintOpened)
+            setHintOpened(showHint);
+    };
+    const handleClickOutside = () => {
+        if (hintOpened)
+            setHintOpened(false);
+        autoComplete();
+    };
+    const handleIconClick = () => {
+        setHintOpened(!disabled && showHint && !hintOpened);
+        inputRef.current.focus();
+    };
+    const handleKeyDown = (e) => {
+        const { key } = e;
+        // Return focus back to the input field from hint
+        if (key === keys.esc) {
+            e.preventDefault();
+            setHintOpened(false);
+            inputRef.current.focus();
+        }
+        // Autocomplete on focus lost (on tab or shift+tab)
+        if (key === keys.tab)
+            autoComplete();
+        // Explicit autocomplete (on enter)
+        if (key === keys.enter)
+            autoComplete();
+        // Move focus to the hint
+        if (key === keys.down || key === keys.up) {
+            if (hintOpened && !hintFocused) {
+                e.preventDefault();
+                setHintFocused(true);
+            }
+        }
+    };
+    const hintFocusValue = () => {
+        const focusValue = closestOption
+            ? getOptionByValue(hintOptions, closestOption.value)
+            : hintOptions[0];
+        return hintFocused ? focusValue : null;
+    };
+    const handleHintOnChange = (value) => {
+        inputRef.current.focus(); // Move focus back to the field
+        onChange(value);
+        setUserInput(toTimeFormat.hhmmxm(value));
+        setFilterStr('');
+        if (hintOpened)
+            setHintOpened(false);
+    };
+    const TimePickerClasses = classnames(className, 'TimePicker', {
+        'TimePicker--disabled': disabled,
+        [`TimePicker--${size}`]: size,
+    });
+    const InputProps = {
+        fluid,
+        disabled,
+        error,
+        placeholder,
+        size,
+        onChange: handleInputChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        value: userInput,
+    };
+    const HintProps = {
+        className: classnames('TimePicker__options', {
+            'TimePicker__options-focused': hintFocused,
+        }),
+        focusValue: hintFocusValue(),
+        options: hintOptions,
+        onChange: handleHintOnChange,
+        tabIndex: -1,
+        type: 'time',
+    };
+    const Field = (React.createElement(Input, Object.assign({}, InputProps, { className: "TimePicker__input", ref: inputRef, shortLabel: React.createElement(Icon, { name: "access_time", className: "TimePicker__icon", onClick: handleIconClick }) })));
+    // Autocomplete on first render to handle case of value:string, converting it to value:datetime
+    React.useEffect(() => {
+        autoComplete();
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, []);
+    return (React.createElement(Popover, Object.assign({ autoFlipVertically: true, className: classnames('TimePicker__hint', 'a-Select'), direction: direction, onClickOutside: handleClickOutside, onKeyDown: handleKeyDown, open: !disabled &&
+            showHint &&
+            hintOpened &&
+            hintOptions.length !== 0, padding: null, portal: props.portal || true, ref: ref, scrollHeight: props.scrollHeight || '192px', trigger: Field, width: hintWidth, wrapperClassName: TimePickerClasses }, rest),
+        React.createElement(TimePickerOptionList, Object.assign({}, HintProps))));
+});
+TimePicker.displayName = 'TimePicker';
+//# sourceMappingURL=TimePicker.js.map

package/dist/components/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/TimePicker/components/TimePickerOptionList.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface TimePickerOptionProps {
+    disabled?: boolean;
+    text: string;
+    value: Date;
+}
+export interface TimePickerOptionListProps {
+    className?: string;
+    options: TimePickerOptionProps[];
+    onChange: (value: TimePickerOptionProps['value']) => void;
+    focusValue?: TimePickerOptionProps;
+}
+export declare const TimePickerOptionList: React.NamedExoticComponent<TimePickerOptionListProps>;

package/dist/components/TimePicker/components/TimePickerOptionList.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import classnames from 'classnames';
+import { OptionList } from '../..';
+import { keys } from '../../../utilities';
+import { focusLastOption, focusFirstOption, getPreviousOption, getNextOption, } from '../../AnvilSelect/utils';
+const TimePickerOptions = ({ className, options, onChange, focusValue, }) => {
+    const handleKeyDown = (e, option) => {
+        const { key } = e;
+        const handledKeys = new Set([keys.enter, keys.down, keys.up]);
+        if (handledKeys.has(e.key)) {
+            e.preventDefault();
+        }
+        if (key === keys.down) {
+            const nextOption = getNextOption(e.currentTarget);
+            if (!nextOption) {
+                focusFirstOption(e.currentTarget);
+            }
+            else {
+                nextOption.focus();
+            }
+            return;
+        }
+        if (key === keys.up) {
+            const previousOption = getPreviousOption(e.currentTarget);
+            if (!previousOption) {
+                focusLastOption(e.currentTarget);
+            }
+            else {
+                previousOption.focus();
+            }
+            return;
+        }
+        if (e.key === keys.enter) {
+            onChange(option.value);
+        }
+    };
+    return (options.length > 0 && (React.createElement(OptionList, { className: classnames('m-1', className), focusValue: focusValue, options: options, onChange: onChange, optionOnKeyDown: handleKeyDown })));
+};
+export const TimePickerOptionList = React.memo(TimePickerOptions);
+//# sourceMappingURL=TimePickerOptionList.js.map

package/dist/components/TimePicker/components/TimePickerOptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerOptionList.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/components/TimePickerOptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EACN,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,GACb,MAAM,yBAAyB,CAAC;AAejC,MAAM,iBAAiB,GAAkC,CAAC,EACzD,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,GACV,EAAE,EAAE;IACJ,MAAM,aAAa,GAAG,CACrB,CAAsC,EACtC,MAA6B,EAC5B,EAAE;QACH,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAClB,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE9D,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;SACnB;QAED,IAAI,GAAG,KAAK,IAAI,CAAC,IAAI,EAAE;YACtB,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAClD,IAAI,CAAC,UAAU,EAAE;gBAChB,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aAClC;iBAAM;gBACN,UAAU,CAAC,KAAK,EAAE,CAAC;aACnB;YACD,OAAO;SACP;QAED,IAAI,GAAG,KAAK,IAAI,CAAC,EAAE,EAAE;YACpB,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAC1D,IAAI,CAAC,cAAc,EAAE;gBACpB,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;aACjC;iBAAM;gBACN,cAAc,CAAC,KAAK,EAAE,CAAC;aACvB;YACD,OAAO;SACP;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YACzB,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SACvB;IACF,CAAC,CAAC;IAEF,OAAO,CACN,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,oBAAC,UAAU,IACV,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EACvC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,aAAa,GAC7B,CACF,CACD,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/components/TimePicker/components/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePickerOptionList';

package/dist/components/TimePicker/components/index.js

@@ -0,0 +1,2 @@
+export * from './TimePickerOptionList';
+//# sourceMappingURL=index.js.map

package/dist/components/TimePicker/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}