@mailstep/design-system 0.6.73 → 0.6.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/components/NumberRange/NumberRange.js +16 -11
  3. package/ui/Blocks/CommonGrid/components/NumberRange/types.d.ts +2 -6
  4. package/ui/Blocks/CommonGrid/components/TextRange/TextRange.js +15 -13
  5. package/ui/Blocks/CommonGrid/components/TextRange/types.d.ts +3 -7
  6. package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts +1 -6
  7. package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js +9 -9
  8. package/ui/Blocks/CommonGrid/types.d.ts +8 -3
  9. package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +2 -2
  10. package/ui/index.es.js +711 -706
  11. package/ui/index.umd.js +294 -294
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.6.73",
3
+ "version": "0.6.74",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/components/NumberRange/NumberRange.js CHANGED
@@ -22,11 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { useCallback, useState } from 'react';
25
- import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
26
25
  import { Input } from '../../../../Forms/Input/Input';
26
+ import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
27
+ import { useEvent } from '../../hooks/useEvent';
27
28
  import IconList from '../IconList';
28
29
  import { i18n } from '@lingui/core';
29
- import { useEvent } from '../../hooks/useEvent';
30
30
  var OverlayComponentDefault = function (_a) {
31
31
  var children = _a.children;
32
32
  return _jsx("div", { children: children });
@@ -38,25 +38,30 @@ var createNumberComparators = function () { return [
38
38
  {
39
39
  label: i18n._({ id: 'dataGrid.comparator.lessThanOrEquals', message: 'Less than or equals' }),
40
40
  value: 'lte',
41
- icon: 'lessThanEqual',
41
+ icon: 'lessThanEqual'
42
42
  },
43
43
  { label: i18n._({ id: 'dataGrid.comparator.greaterThan', message: 'Greater than' }), value: 'gt', icon: 'greaterThan' },
44
44
  {
45
45
  label: i18n._({ id: 'dataGrid.comparator.greaterThanOrEquals', message: 'Greater than or equal' }),
46
46
  value: 'gte',
47
- icon: 'greaterThanEqual',
48
- },
47
+ icon: 'greaterThanEqual'
48
+ }
49
49
  ]; };
50
50
  var createEqualComparators = [
51
51
  { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
52
- { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
52
+ { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' }
53
53
  ];
54
54
  var NumberRange = function (props) {
55
+ var _a;
55
56
  var numberComparators = createNumberComparators();
56
- var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "isEqual"]);
57
- var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
58
- var comparator = (value === null || value === void 0 ? void 0 : value.comparator) || numberComparators[0].value;
59
- var renderedComparator = isEqual ? createEqualComparators : numberComparators;
57
+ var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, decimals = props.decimals, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, comparators = props.comparators, defaultComparator = props.defaultComparator, isEqual = props.isEqual, rest = __rest(props, ["name", "value", "label", "onChange", "decimals", "className", "OverlayComponent", "comparators", "defaultComparator", "isEqual"]);
58
+ var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
59
+ var comparator = (value === null || value === void 0 ? void 0 : value.comparator) ||
60
+ defaultComparator ||
61
+ ((_a = comparators === null || comparators === void 0 ? void 0 : comparators[0]) === null || _a === void 0 ? void 0 : _a.value) ||
62
+ numberComparators[0].value;
63
+ var defaultComparators = isEqual ? createEqualComparators : numberComparators;
64
+ var comparatorOptions = comparators || defaultComparators;
60
65
  var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || (value === null || value === void 0 ? void 0 : value.value) === 0 ? value.value : '';
61
66
  var onClose = useCallback(function () { return setOpen(false); }, []);
62
67
  var pickerRef = useClickOutside({ onClose: onClose });
@@ -70,6 +75,6 @@ var NumberRange = function (props) {
70
75
  var onChangeComparator = useEvent(function (option) {
71
76
  onChange({ comparator: option.value, value: fieldValue });
72
77
  });
73
- return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
78
+ return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, value: fieldValue, label: label, "data-cy": "".concat(name, "Inp"), onChange: onChangeTextInput, iconOnClick: togglePicker, icon: "ellipsisVertical", iconPlacement: "right", type: "text", className: className, autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
74
79
  };
75
80
  export default NumberRange;
package/ui/Blocks/CommonGrid/components/NumberRange/types.d.ts CHANGED
@@ -1,17 +1,13 @@
1
- import { FilterComponentProps } from '../../types';
1
+ import { Comparator, FilterComponentProps } from '../../types';
2
2
  export type ComparatorValue = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
3
3
  export type NumberRangeValue = {
4
4
  comparator?: ComparatorValue;
5
5
  value?: string | number;
6
6
  };
7
- export type Comparator = {
8
- label: string;
9
- value: string;
10
- icon: string;
11
- };
12
7
  export type NumberRangeProps = FilterComponentProps<NumberRangeValue> & {
13
8
  decimals?: number;
14
9
  label?: string;
15
10
  className?: string;
16
11
  isEqual?: boolean;
12
+ comparators?: Comparator[];
17
13
  };
package/ui/Blocks/CommonGrid/components/TextRange/TextRange.js CHANGED
@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { useCallback, useState } from 'react';
25
- import { Trans } from '@lingui/react';
26
- import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
27
25
  import { Input } from '../../../../Forms/Input/Input';
26
+ import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
27
+ import { useEvent } from '../../hooks/useEvent';
28
28
  import IconList from '../IconList/IconList';
29
29
  import { i18n } from '@lingui/core';
30
- import { useEvent } from '../../hooks/useEvent';
30
+ import { Trans } from '@lingui/react';
31
31
  var OverlayComponentDefault = function (_a) {
32
32
  var children = _a.children;
33
33
  return _jsx("div", { children: children });
@@ -39,32 +39,34 @@ var createTextComparators = function () { return [
39
39
  { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
40
40
  { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
41
41
  { label: i18n._({ id: 'dataGrid.comparator.startsWith', message: 'Starts with' }), value: 'startsWith', icon: 'startsWith' },
42
- { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' },
42
+ { label: i18n._({ id: 'dataGrid.comparator.endsWith', message: 'Ends with' }), value: 'endsWith', icon: 'endsWith' }
43
43
  ]; };
44
44
  var createPresentTextComparators = function () { return [
45
45
  { label: i18n._({ id: 'dataGrid.comparator.contains', message: 'Contains' }), value: 'like', icon: 'check' },
46
- { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' },
46
+ { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'in', icon: 'equals' }
47
47
  ]; };
48
48
  var createEqualComparators = function () { return [
49
49
  { label: i18n._({ id: 'dataGrid.comparator.equals', message: 'Equals' }), value: 'eq', icon: 'equals' },
50
- { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' },
50
+ { label: i18n._({ id: 'dataGrid.comparator.notEquals', message: 'Not equal' }), value: 'neq', icon: 'notEqual' }
51
51
  ]; };
52
52
  var validations = {
53
53
  ip: {
54
54
  check: function (value) { return ipv4.test(value.trim()); },
55
- errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }),
56
- },
55
+ errorMsg: _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" })
56
+ }
57
57
  };
58
58
  var TextRange = function (props) {
59
- var name = props.name, _a = props.value, value = _a === void 0 ? {} : _a, label = props.label, onChange = props.onChange, className = props.className, _b = props.OverlayComponent, OverlayComponent = _b === void 0 ? OverlayComponentDefault : _b, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "validation"]);
59
+ var _a;
60
+ var name = props.name, _b = props.value, value = _b === void 0 ? {} : _b, label = props.label, onChange = props.onChange, className = props.className, _c = props.OverlayComponent, OverlayComponent = _c === void 0 ? OverlayComponentDefault : _c, eqOnly = props.eqOnly, isPresent = props.isPresent, isEqual = props.isEqual, defaultComparator = props.defaultComparator, comparators = props.comparators, validationKey = props.validation, rest = __rest(props, ["name", "value", "label", "onChange", "className", "OverlayComponent", "eqOnly", "isPresent", "isEqual", "defaultComparator", "comparators", "validation"]);
60
61
  var eqOnlyTxt = i18n._({ id: 'dataGrid.filterTxtEqWarning', message: 'This filter can only do exact match' });
61
- var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
62
+ var _d = useState(false), isOpen = _d[0], setOpen = _d[1];
62
63
  var textComparators = createTextComparators();
63
64
  var presentTextComparators = createPresentTextComparators();
64
65
  var equalComparators = createEqualComparators();
65
- var fallbackComparator = defaultComparator || textComparators[0].value;
66
+ var fallbackComparator = defaultComparator || ((_a = comparators === null || comparators === void 0 ? void 0 : comparators[0]) === null || _a === void 0 ? void 0 : _a.value) || textComparators[0].value;
66
67
  var comparator = eqOnly ? 'eq' : (value === null || value === void 0 ? void 0 : value.comparator) || fallbackComparator;
67
- var renderedComparator = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
68
+ var defaultComparators = isEqual ? equalComparators : isPresent ? presentTextComparators : textComparators;
69
+ var comparatorOptions = comparators || defaultComparators;
68
70
  var fieldValue = (value === null || value === void 0 ? void 0 : value.value) || '';
69
71
  var onClose = useCallback(function () {
70
72
  setOpen(false);
@@ -85,6 +87,6 @@ var TextRange = function (props) {
85
87
  var onChangeComparator = useEvent(function (option) {
86
88
  onChange({ comparator: option.value, value: fieldValue, isInvalid: isInvalid });
87
89
  });
88
- return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: renderedComparator, selected: comparator, onClick: onChangeComparator }) }))] }));
90
+ return (_jsxs("div", { ref: pickerRef, children: [_jsx(Input, __assign({ name: name, "data-test": name, "data-cy": "".concat(name, "Inp"), value: fieldValue, label: label, onChange: onChangeTextInput, iconOnClick: !eqOnly ? togglePicker : undefined, icon: !eqOnly ? 'ellipsisVertical' : 'warning', iconPlacement: "right", iconTooltip: eqOnly ? eqOnlyTxt : undefined, type: "text", className: className, error: (!!validation && isInvalid && validation.errorMsg) || '', errorAppearance: 'tooltip', autoComplete: "off" }, rest)), isOpen && (_jsx(OverlayComponent, { children: _jsx(IconList, { list: comparatorOptions, selected: comparator, onClick: onChangeComparator }) }))] }));
89
91
  };
90
92
  export default TextRange;
package/ui/Blocks/CommonGrid/components/TextRange/types.d.ts CHANGED
@@ -1,15 +1,10 @@
1
- import { FilterComponentProps } from '../../types';
2
- export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith';
1
+ import { FilterComponentProps, Comparator } from '../../types';
2
+ export type TextRangeComparator = 'like' | 'notLike' | 'eq' | 'neq' | 'startsWith' | 'endsWith' | 'contains';
3
3
  export type TextRangeValue = {
4
4
  comparator?: TextRangeComparator;
5
5
  value?: string | number;
6
6
  isInvalid?: boolean;
7
7
  };
8
- export type Comparator = {
9
- label: string;
10
- value: string;
11
- icon: string;
12
- };
13
8
  export type Props = FilterComponentProps<TextRangeValue> & {
14
9
  eqOnly?: boolean;
15
10
  isPresent?: boolean;
@@ -18,4 +13,5 @@ export type Props = FilterComponentProps<TextRangeValue> & {
18
13
  validation?: string;
19
14
  className?: string;
20
15
  isEqual?: boolean;
16
+ comparators?: Comparator[];
21
17
  };
package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts CHANGED
@@ -18,11 +18,6 @@ declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displa
18
18
  onClear: () => void;
19
19
  isMobileInputView: boolean;
20
20
  isMobile: boolean;
21
- filter: {
22
- [column: string]: {
23
- value: any;
24
- filterProps: import("../types").FilterProps;
25
- };
26
- } | undefined;
21
+ filter: import("../types").Filtering | undefined;
27
22
  };
28
23
  export default useQuickFilter;
package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { useCallback, useEffect, useState } from 'react';
2
+ import { isObject } from 'lodash';
2
3
  import { useCheckDeviceWidth } from '../../../utils/CheckDeviceWidth/checkDeviceWidth';
3
4
  import { createFilterType } from '../utils';
4
- import { useAddFilter } from './useAddFilter';
5
- import { isObject } from 'lodash';
6
5
  import { i18n } from '@lingui/core';
6
+ import { useAddFilter } from './useAddFilter';
7
7
  var defaultVoidFunction = function () {
8
8
  var args = [];
9
9
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -46,7 +46,7 @@ var useQuickFilter = function (_a) {
46
46
  setSearchedValue(e.target.value);
47
47
  var value = {
48
48
  comparator: searchComparator,
49
- value: e.target.value,
49
+ value: e.target.value
50
50
  };
51
51
  searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
52
52
  }, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
@@ -67,11 +67,11 @@ var useQuickFilter = function (_a) {
67
67
  resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
68
68
  setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
69
69
  }, [resetFilters, setSearchedValue]);
70
- var translatedValue = searchedColumnsDefinitions &&
71
- isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
72
- 'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
73
- ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
74
- i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
70
+ var translatedValue = searchedColumnsDefinitions && isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title)
71
+ ? 'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
72
+ ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
73
+ i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message })
74
+ : searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title;
75
75
  return {
76
76
  searchedValue: searchedValue,
77
77
  translatedValue: translatedValue,
@@ -82,7 +82,7 @@ var useQuickFilter = function (_a) {
82
82
  onClear: onClear,
83
83
  isMobileInputView: isMobileInputView,
84
84
  isMobile: isMobile,
85
- filter: filter,
85
+ filter: filter
86
86
  };
87
87
  };
88
88
  export default useQuickFilter;
package/ui/Blocks/CommonGrid/types.d.ts CHANGED
@@ -65,13 +65,13 @@ export type FiltersConfig = {
65
65
  };
66
66
  };
67
67
  };
68
- type Filtering = {
68
+ export type Filtering = {
69
69
  [column: string]: {
70
70
  value: any;
71
71
  filterProps: FilterProps;
72
72
  };
73
73
  };
74
- type Sorting = {
74
+ export type Sorting = {
75
75
  column: string;
76
76
  direction: SortingValueType;
77
77
  }[];
@@ -106,7 +106,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
106
106
  disableRowTouch?: boolean;
107
107
  filterExtraProps?: {
108
108
  isMulti?: boolean;
109
- comparators?: any;
109
+ comparators?: Comparator[];
110
110
  filterTime?: boolean;
111
111
  decimals?: number;
112
112
  isFloat?: boolean;
@@ -311,4 +311,9 @@ export type FloatingButtonProps = {
311
311
  options?: Item[];
312
312
  onClick?: (value?: string) => void;
313
313
  };
314
+ export type Comparator = {
315
+ label: string;
316
+ value: string;
317
+ icon: string;
318
+ };
314
319
  export {};
package/ui/Elements/DatePicker/Datetime/components/Timepicker.js CHANGED
@@ -8,8 +8,8 @@ import styled, { x } from '@xstyled/styled-components';
8
8
  import { th } from '@xstyled/system';
9
9
  var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform: rotate(90deg);\n font-size: 24px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"], ["\n transform: rotate(90deg);\n font-size: 24px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
10
10
  var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 0.7rem;\n padding: 4px 10px;\n margin: 0 10px;\n"], ["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 0.7rem;\n padding: 4px 10px;\n margin: 0 10px;\n"])), th('colors.lightGray2'));
11
- var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 22px;\n font-weight: 700;\n width: 24px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 22px;\n font-weight: 700;\n width: 24px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
12
- var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 16px;\n width: 20px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 700;\n font-size: 16px;\n width: 20px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
11
+ var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 22px;\n font-weight: 700;\n width: 30px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 22px;\n font-weight: 700;\n width: 30px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
12
+ var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 16px;\n width: 25px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 700;\n font-size: 16px;\n width: 25px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
13
13
  export var Timepicker = function (_a) {
14
14
  var _b, _c, _d, _e;
15
15
  var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;