@mailstep/design-system 0.7.38 → 0.7.40-beta.0
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.
- package/package.json +1 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts +1 -1
- package/ui/Blocks/SideMenu/styles.d.ts +1 -1
- package/ui/Elements/Button/Button.d.ts +2 -2
- package/ui/Elements/Button/Button.js +3 -3
- package/ui/Elements/Button/stories/Button.stories.d.ts +1 -1
- package/ui/Elements/Button/styles.d.ts +2 -1
- package/ui/Elements/Button/styles.js +5 -2
- package/ui/Elements/Button/types.d.ts +1 -0
- package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js +1 -1
- package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +9 -5
- package/ui/Elements/Icon/Icon.d.ts +5 -4
- package/ui/Elements/Icon/Icon.js +13 -10
- package/ui/Elements/Icon/icons/Valuable.d.ts +2 -3
- package/ui/Elements/Icon/icons/Valuable.js +1 -1
- package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts +1 -1
- package/ui/Elements/Icon/stories/Icon.stories.d.ts +2 -1
- package/ui/Elements/Icon/stories/Icon.stories.js +21 -12
- package/ui/Elements/Icon/types.d.ts +2 -2
- package/ui/Elements/Pagination/styled.d.ts +2 -2
- package/ui/Forms/Checkbox/styles.d.ts +1 -1
- package/ui/Forms/Input/Input.js +3 -3
- package/ui/Forms/Input/types.d.ts +1 -1
- package/ui/index.es.js +7275 -7259
- package/ui/index.umd.js +411 -411
package/package.json
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
3
3
|
export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
4
4
|
export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
5
|
-
export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../../../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
|
|
5
|
+
export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: import("../../../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
|
|
@@ -9,7 +9,7 @@ export declare const ItemLabel: import("styled-components").StyledComponent<"div
|
|
|
9
9
|
$isCompact?: boolean | undefined;
|
|
10
10
|
isSubitem?: boolean | undefined;
|
|
11
11
|
}, never>;
|
|
12
|
-
export declare const ItemDropdownArrow: import("styled-components").StyledComponent<(
|
|
12
|
+
export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
|
|
13
13
|
$lightMode?: boolean | undefined;
|
|
14
14
|
}, never>;
|
|
15
15
|
export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { Props } from './types';
|
|
2
|
-
declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: Props) => JSX.Element;
|
|
1
|
+
import type { Props } from './types';
|
|
2
|
+
declare const Button: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: Props) => JSX.Element;
|
|
3
3
|
export default Button;
|
|
@@ -21,10 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
|
|
25
24
|
import { Spinner } from '../Spinner';
|
|
25
|
+
import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
|
|
26
26
|
var Button = function (_a) {
|
|
27
|
-
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "buttonRef", "onClick"]);
|
|
28
|
-
return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
|
|
27
|
+
var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, height = _a.height, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "height", "buttonRef", "onClick"]);
|
|
28
|
+
return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, height: height, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
|
|
29
29
|
};
|
|
30
30
|
export default Button;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
|
|
5
|
+
component: ({ isLoading, loadingText, icon, iconLeft, iconRight, variant, appearance, disabled, fullWidth, height, buttonRef, onClick, ...props }: import("../types").Props) => JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
parameters: {
|
|
@@ -3,7 +3,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
|
|
|
3
3
|
export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
4
4
|
$addMarginRight: boolean;
|
|
5
5
|
}, never>;
|
|
6
|
-
export declare const StyledIcon: import("styled-components").StyledComponent<(
|
|
6
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
|
|
7
7
|
$addMarginRight?: boolean | undefined;
|
|
8
8
|
$addMarginLeft?: boolean | undefined;
|
|
9
9
|
}, never>;
|
|
@@ -13,4 +13,5 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
|
|
|
13
13
|
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
14
14
|
iconPadding?: boolean | undefined;
|
|
15
15
|
fullWidth?: boolean | undefined;
|
|
16
|
+
height?: string | undefined;
|
|
16
17
|
}, never>;
|
|
@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
6
5
|
import { Icon } from '../Icon';
|
|
6
|
+
import styled, { th } from '@xstyled/styled-components';
|
|
7
7
|
export var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
8
8
|
export var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & svg {\n margin-right: ", ";\n }\n"], ["\n & svg {\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
9
9
|
var $addMarginRight = _a.$addMarginRight;
|
|
@@ -16,10 +16,13 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height:
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: ", ";\n border: none;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
23
|
+
var height = _a.height;
|
|
24
|
+
return height || '38px';
|
|
25
|
+
}, function (_a) {
|
|
23
26
|
var iconPadding = _a.iconPadding;
|
|
24
27
|
return (iconPadding ? '9px' : '7px 18px');
|
|
25
28
|
}, function (_a) {
|
|
@@ -27,5 +27,5 @@ export var DateRepeater = function (_a) {
|
|
|
27
27
|
}
|
|
28
28
|
onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
|
|
29
29
|
}, [onChangeOthers, reset, others]);
|
|
30
|
-
return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "
|
|
30
|
+
return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, background: "white", cursor: "pointer", border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
|
|
31
31
|
};
|
|
@@ -4,12 +4,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useCallback, useEffect, useState } from 'react';
|
|
7
|
+
import Icon from '../../../Icon/Icon';
|
|
8
|
+
import { i18n } from '@lingui/core';
|
|
7
9
|
import styled, { x } from '@xstyled/styled-components';
|
|
8
10
|
import { th } from '@xstyled/system';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
import { FooterRow } from './FooterRow';
|
|
12
|
+
import { FooterRowLabel } from './FooterRowLabel';
|
|
13
|
+
var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform: rotate(90deg);\n font-size: 18px;\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: 18px;\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'));
|
|
14
|
+
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: 6px;\n padding: 0 4px;\n margin: 0 4px;\n"], ["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 6px;\n padding: 0 4px;\n margin: 0 4px;\n"])), th('colors.lightGray2'));
|
|
15
|
+
var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
|
|
16
|
+
var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
|
|
13
17
|
var regExp = '^[0-9]*$';
|
|
14
18
|
export var Timepicker = function (_a) {
|
|
15
19
|
var _b, _c, _d, _e;
|
|
@@ -52,6 +56,6 @@ export var Timepicker = function (_a) {
|
|
|
52
56
|
useEffect(function () {
|
|
53
57
|
!!value && setTime('minutes', minutes);
|
|
54
58
|
}, [minutes]);
|
|
55
|
-
return (_jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "4px", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: String(hours).padStart(2, '0'), disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "
|
|
59
|
+
return (_jsxs(FooterRow, { disabled: disabled, children: [_jsxs("div", { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "4px", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: String(hours).padStart(2, '0'), disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "1px", children: ":" }), _jsx(Minutes, { value: String(minutes).padStart(2, '0'), disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, type: "button", children: "\u203A" })] })] }) })] }));
|
|
56
60
|
};
|
|
57
61
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
|
|
3
|
+
import type { FlipProp } from '@fortawesome/fontawesome-svg-core';
|
|
4
|
+
import type { IconProps } from './types';
|
|
4
5
|
export declare const iconDictionary: {
|
|
5
6
|
[name: string]: IconDefinition | [IconDefinition, FlipProp];
|
|
6
7
|
};
|
|
7
|
-
declare const Icon:
|
|
8
|
+
declare const Icon: FC<IconProps>;
|
|
8
9
|
export default Icon;
|
package/ui/Elements/Icon/Icon.js
CHANGED
|
@@ -20,6 +20,7 @@ import { faBell } from '@fortawesome/pro-regular-svg-icons/faBell';
|
|
|
20
20
|
import { faBox as faBoxRegular } from '@fortawesome/pro-regular-svg-icons/faBox';
|
|
21
21
|
import { faCalendar } from '@fortawesome/pro-regular-svg-icons/faCalendar';
|
|
22
22
|
import { faCalendarPlus } from '@fortawesome/pro-regular-svg-icons/faCalendarPlus';
|
|
23
|
+
import { faCartFlatbedBoxes } from '@fortawesome/pro-regular-svg-icons/faCartFlatbedBoxes';
|
|
23
24
|
import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
|
|
24
25
|
import { faChevronRight as farChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
|
|
25
26
|
import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
|
|
@@ -48,7 +49,6 @@ import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare'
|
|
|
48
49
|
import { faShareSquare } from '@fortawesome/pro-regular-svg-icons/faShareSquare';
|
|
49
50
|
import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus';
|
|
50
51
|
import { faTrashCan } from '@fortawesome/pro-regular-svg-icons/faTrashCan';
|
|
51
|
-
import { faCartFlatbedBoxes } from '@fortawesome/pro-regular-svg-icons/faCartFlatbedBoxes';
|
|
52
52
|
import { faTriangleExclamation as farTriangleExclamation } from '@fortawesome/pro-regular-svg-icons/faTriangleExclamation';
|
|
53
53
|
import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
|
|
54
54
|
import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
|
|
@@ -58,12 +58,12 @@ import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
|
|
|
58
58
|
import { faArrowsRotate } from '@fortawesome/pro-solid-svg-icons/faArrowsRotate';
|
|
59
59
|
import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons/faBadgeCheck';
|
|
60
60
|
import { faBan } from '@fortawesome/pro-solid-svg-icons/faBan';
|
|
61
|
+
import { faBatteryBolt } from '@fortawesome/pro-solid-svg-icons/faBatteryBolt';
|
|
61
62
|
import { faBox } from '@fortawesome/pro-solid-svg-icons/faBox';
|
|
62
63
|
import { faBoxArchive } from '@fortawesome/pro-solid-svg-icons/faBoxArchive';
|
|
63
64
|
import { faBoxCircleCheck } from '@fortawesome/pro-solid-svg-icons/faBoxCircleCheck';
|
|
64
65
|
import { faBoxOpen } from '@fortawesome/pro-solid-svg-icons/faBoxOpen';
|
|
65
66
|
import { faBoxesStacked } from '@fortawesome/pro-solid-svg-icons/faBoxesStacked';
|
|
66
|
-
import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
|
|
67
67
|
import { faCamera } from '@fortawesome/pro-solid-svg-icons/faCamera';
|
|
68
68
|
import { faCartArrowDown } from '@fortawesome/pro-solid-svg-icons/faCartArrowDown';
|
|
69
69
|
import { faChartLine } from '@fortawesome/pro-solid-svg-icons/faChartLine';
|
|
@@ -80,13 +80,10 @@ import { faComputerMouseScrollwheel } from '@fortawesome/pro-solid-svg-icons/faC
|
|
|
80
80
|
import { faCrop } from '@fortawesome/pro-solid-svg-icons/faCrop';
|
|
81
81
|
import { faCube } from '@fortawesome/pro-solid-svg-icons/faCube';
|
|
82
82
|
import { faEquals } from '@fortawesome/pro-solid-svg-icons/faEquals';
|
|
83
|
-
import { faFluxCapacitor } from '@fortawesome/pro-solid-svg-icons/faFluxCapacitor';
|
|
84
|
-
import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCrack';
|
|
85
|
-
import { faBatteryBolt } from '@fortawesome/pro-solid-svg-icons/faBatteryBolt';
|
|
86
|
-
import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
|
|
87
|
-
import { faFlaskRoundPotion } from '@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion';
|
|
88
83
|
import { faExchange } from '@fortawesome/pro-solid-svg-icons/faExchange';
|
|
89
84
|
import { faFlag } from '@fortawesome/pro-solid-svg-icons/faFlag';
|
|
85
|
+
import { faFlaskRoundPotion } from '@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion';
|
|
86
|
+
import { faFluxCapacitor } from '@fortawesome/pro-solid-svg-icons/faFluxCapacitor';
|
|
90
87
|
import { faGlobe } from '@fortawesome/pro-solid-svg-icons/faGlobe';
|
|
91
88
|
import { faGreaterThanEqual } from '@fortawesome/pro-solid-svg-icons/faGreaterThanEqual';
|
|
92
89
|
import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
|
|
@@ -98,6 +95,7 @@ import { faLuggageCart } from '@fortawesome/pro-solid-svg-icons/faLuggageCart';
|
|
|
98
95
|
import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
|
|
99
96
|
import { faNotEqual } from '@fortawesome/pro-solid-svg-icons/faNotEqual';
|
|
100
97
|
import { faNoteSticky } from '@fortawesome/pro-solid-svg-icons/faNoteSticky';
|
|
98
|
+
import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
|
|
101
99
|
import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
|
|
102
100
|
import { faPeopleCarry as fasPeopleCarry } from '@fortawesome/pro-solid-svg-icons/faPeopleCarry';
|
|
103
101
|
import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
|
|
@@ -110,14 +108,15 @@ import { faTags } from '@fortawesome/pro-solid-svg-icons/faTags';
|
|
|
110
108
|
import { faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation';
|
|
111
109
|
import { faTruck } from '@fortawesome/pro-solid-svg-icons/faTruck';
|
|
112
110
|
import { faTruckRampBox } from '@fortawesome/pro-solid-svg-icons/faTruckRampBox';
|
|
111
|
+
import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
|
|
113
112
|
import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
|
|
114
113
|
import { faUsersGear } from '@fortawesome/pro-solid-svg-icons/faUsersGear';
|
|
115
114
|
import { faWatch } from '@fortawesome/pro-solid-svg-icons/faWatch';
|
|
116
115
|
import { faWebhook } from '@fortawesome/pro-solid-svg-icons/faWebhook';
|
|
116
|
+
import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCrack';
|
|
117
117
|
import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark';
|
|
118
118
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
119
|
-
import styled, { useTheme } from '@xstyled/styled-components';
|
|
120
|
-
import { th } from '@xstyled/styled-components';
|
|
119
|
+
import styled, { useTheme, th } from '@xstyled/styled-components';
|
|
121
120
|
export var iconDictionary = {
|
|
122
121
|
greaterThan: faAngleRight,
|
|
123
122
|
startsWith: faAnglesRight,
|
|
@@ -255,7 +254,7 @@ var Icon = function (_a) {
|
|
|
255
254
|
var theme = useTheme();
|
|
256
255
|
var colorFill = fill && th.color(fill)({ theme: theme }); // React.Text wont return number here
|
|
257
256
|
var colorSecondary = secondaryColor && th.color(secondaryColor)({ theme: theme });
|
|
258
|
-
var namedIcon = (typeof icon
|
|
257
|
+
var namedIcon = (typeof icon === 'string' && (iconDictionary === null || iconDictionary === void 0 ? void 0 : iconDictionary[icon])) || false;
|
|
259
258
|
var iconProp = React.useMemo(function () {
|
|
260
259
|
if (namedIcon) {
|
|
261
260
|
return Array.isArray(namedIcon) ? namedIcon[0] : namedIcon;
|
|
@@ -263,6 +262,10 @@ var Icon = function (_a) {
|
|
|
263
262
|
return [iconPrefixMap[style], icon];
|
|
264
263
|
}, [icon, style, namedIcon]);
|
|
265
264
|
var flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined;
|
|
265
|
+
if (!namedIcon && typeof icon === 'function') {
|
|
266
|
+
var IconComponent = icon;
|
|
267
|
+
return _jsx(IconComponent, { width: size, height: size, fill: colorFill, stroke: colorSecondary });
|
|
268
|
+
}
|
|
266
269
|
return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: _jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') }) }));
|
|
267
270
|
};
|
|
268
271
|
export default Icon;
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { type FC } from 'react';
|
|
2
|
-
|
|
3
|
-
export declare const Valuable: FC<SvgProps>;
|
|
1
|
+
import { type FC, type SVGProps } from 'react';
|
|
2
|
+
export declare const Valuable: FC<SVGProps<SVGSVGElement>>;
|
|
@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
export var Valuable = function (props) { return (_jsxs("svg", __assign({ width: "
|
|
13
|
+
export var Valuable = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", stroke: "black", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M2 9L6 2H18L22 9L12 22L2 9Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 22L8 9M12 22L16 9M2 9H22", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 2L12 9L18 2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
@@ -7,7 +7,7 @@ declare const meta: {
|
|
|
7
7
|
} & import("..").IconProps) => JSX.Element;
|
|
8
8
|
decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
|
|
9
9
|
badge: "warning";
|
|
10
|
-
icon: string
|
|
10
|
+
icon: string | import("react").FC<import("react").SVGProps<SVGSVGElement>>;
|
|
11
11
|
style?: "normal" | "light" | "solid" | undefined;
|
|
12
12
|
fill?: string | undefined;
|
|
13
13
|
size?: string | number | undefined;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: (
|
|
5
|
+
component: import("react").FC<import("../types").IconProps>;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
};
|
|
@@ -14,3 +14,4 @@ export declare const SmallExpedition: Story;
|
|
|
14
14
|
export declare const BigExpedition: Story;
|
|
15
15
|
export declare const ExpeditionPink: Story;
|
|
16
16
|
export declare const ExpeditionPinkSolid: Story;
|
|
17
|
+
export declare const CustomIcon: Story;
|
|
@@ -1,48 +1,57 @@
|
|
|
1
1
|
import { Icon } from '../';
|
|
2
|
+
import { Valuable } from '../icons/Valuable';
|
|
2
3
|
var meta = {
|
|
3
4
|
title: 'Elements/Icon',
|
|
4
5
|
component: Icon,
|
|
5
6
|
tags: ['autodocs'],
|
|
6
|
-
argTypes: {}
|
|
7
|
+
argTypes: {}
|
|
7
8
|
};
|
|
8
9
|
export default meta;
|
|
9
10
|
export var Expedition = {
|
|
10
11
|
args: {
|
|
11
12
|
icon: 'expedition',
|
|
12
|
-
size: '40px'
|
|
13
|
-
}
|
|
13
|
+
size: '40px'
|
|
14
|
+
}
|
|
14
15
|
};
|
|
15
16
|
export var Spinning = {
|
|
16
17
|
args: {
|
|
17
18
|
icon: 'expedition',
|
|
18
19
|
size: '40px',
|
|
19
20
|
spinning: true
|
|
20
|
-
}
|
|
21
|
+
}
|
|
21
22
|
};
|
|
22
23
|
export var SmallExpedition = {
|
|
23
24
|
args: {
|
|
24
25
|
icon: 'expedition',
|
|
25
|
-
size: '20px'
|
|
26
|
-
}
|
|
26
|
+
size: '20px'
|
|
27
|
+
}
|
|
27
28
|
};
|
|
28
29
|
export var BigExpedition = {
|
|
29
30
|
args: {
|
|
30
31
|
icon: 'expedition',
|
|
31
|
-
size: '80px'
|
|
32
|
-
}
|
|
32
|
+
size: '80px'
|
|
33
|
+
}
|
|
33
34
|
};
|
|
34
35
|
export var ExpeditionPink = {
|
|
35
36
|
args: {
|
|
36
37
|
icon: 'expedition',
|
|
37
38
|
fill: 'pink',
|
|
38
|
-
size: '40px'
|
|
39
|
-
}
|
|
39
|
+
size: '40px'
|
|
40
|
+
}
|
|
40
41
|
};
|
|
41
42
|
export var ExpeditionPinkSolid = {
|
|
42
43
|
args: {
|
|
43
44
|
icon: 'expedition',
|
|
44
45
|
style: 'solid',
|
|
45
46
|
fill: 'pink',
|
|
46
|
-
size: '40px'
|
|
47
|
-
}
|
|
47
|
+
size: '40px'
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
export var CustomIcon = {
|
|
51
|
+
args: {
|
|
52
|
+
icon: Valuable,
|
|
53
|
+
size: '60px',
|
|
54
|
+
fill: 'pink',
|
|
55
|
+
secondaryColor: 'red1'
|
|
56
|
+
}
|
|
48
57
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { MouseEventHandler } from 'react';
|
|
1
|
+
import type { MouseEventHandler, SVGProps } from 'react';
|
|
2
2
|
export type IconProps = {
|
|
3
|
-
icon: string
|
|
3
|
+
icon: string | React.FC<SVGProps<SVGSVGElement>>;
|
|
4
4
|
style?: 'normal' | 'light' | 'solid';
|
|
5
5
|
fill?: string;
|
|
6
6
|
size?: number | string;
|
|
@@ -3,10 +3,10 @@ export declare const Wrapper: import("styled-components").StyledComponent<(props
|
|
|
3
3
|
export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
|
|
4
4
|
disabled: boolean;
|
|
5
5
|
}, never>;
|
|
6
|
-
export declare const ArrowIcon: import("styled-components").StyledComponent<(
|
|
6
|
+
export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
|
|
7
7
|
isActive: boolean;
|
|
8
8
|
}, never>;
|
|
9
|
-
export declare const GoIcon: import("styled-components").StyledComponent<(
|
|
9
|
+
export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
|
|
10
10
|
isActive: boolean;
|
|
11
11
|
}, never>;
|
|
12
12
|
export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
3
3
|
size: string | number;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const CheckIcon: import("styled-components").StyledComponent<(
|
|
5
|
+
export declare const CheckIcon: import("styled-components").StyledComponent<import("react").FC<import("../../Elements/Icon").IconProps>, import("@xstyled/system").Theme, {
|
|
6
6
|
size: string | number;
|
|
7
7
|
}, never>;
|
|
8
8
|
export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
package/ui/Forms/Input/Input.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, useEffect, useRef } from 'react';
|
|
25
|
-
import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip, } from './styles';
|
|
26
|
-
import { FieldLabel } from '../../Elements/Label';
|
|
27
|
-
import { SpaceAroundWrap } from '../../Elements/SpaceAround';
|
|
28
25
|
import { ErrorMessage } from '../../Elements/ErrorMessage';
|
|
29
26
|
import { Icon } from '../../Elements/Icon';
|
|
27
|
+
import { FieldLabel } from '../../Elements/Label';
|
|
28
|
+
import { SpaceAroundWrap } from '../../Elements/SpaceAround';
|
|
30
29
|
import { Spinner } from '../../Elements/Spinner';
|
|
30
|
+
import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
|
|
31
31
|
var allowedInputTypes = ['text', 'number', 'password'];
|
|
32
32
|
export var Input = function (_a) {
|
|
33
33
|
var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
|
|
1
|
+
import type { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
|
|
2
2
|
export type SpaceAround = boolean | SpaceAroundProps;
|
|
3
3
|
export type SpaceAroundProps = {
|
|
4
4
|
marginTop?: number;
|