@mailstep/design-system 0.6.16 → 0.6.18

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 (20) hide show
  1. package/package.json +6 -4
  2. package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -1
  3. package/ui/Blocks/CommonGrid/storybook/stories/default.stories.js +1 -1
  4. package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js +1 -1
  5. package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js +1 -1
  6. package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js +1 -1
  7. package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js +1 -1
  8. package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js +1 -1
  9. package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.js +1 -1
  10. package/ui/Blocks/CommonGrid/styles.js +1 -1
  11. package/ui/Elements/ErrorMessage/ErrorMessage.js +4 -5
  12. package/ui/Elements/Label/Label.d.ts +1 -3
  13. package/ui/Elements/Label/Label.js +1 -4
  14. package/ui/Elements/Select/themes/selectStyles.js +1 -1
  15. package/ui/Forms/Input/Input.js +2 -2
  16. package/ui/Forms/Input/styles.d.ts +4 -0
  17. package/ui/Forms/Input/styles.js +18 -14
  18. package/ui/Forms/TextArea/TextArea.js +1 -1
  19. package/ui/index.es.js +2439 -2448
  20. package/ui/index.umd.js +287 -294
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.6.16",
3
+ "version": "0.6.18",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -16,7 +16,8 @@
16
16
  "build-storybook": "storybook build",
17
17
  "deploy": "npm run build && npm publish ./build",
18
18
  "dev": "yarn storybook",
19
- "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
19
+ "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
20
+ "chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358"
20
21
  },
21
22
  "devDependencies": {
22
23
  "@babel/core": "^7.20.12",
@@ -30,8 +31,8 @@
30
31
  "@fortawesome/pro-regular-svg-icons": "^6.0.0",
31
32
  "@fortawesome/pro-solid-svg-icons": "^6.3.0",
32
33
  "@fortawesome/react-fontawesome": "^0.2.0",
33
- "@lingui/react": "3.17.2",
34
34
  "@lingui/core": "3.17.2",
35
+ "@lingui/react": "3.17.2",
35
36
  "@popperjs/core": "^2.11.8",
36
37
  "@storybook/addon-controls": "7.6.8",
37
38
  "@storybook/addon-essentials": "7.6.8",
@@ -57,6 +58,7 @@
57
58
  "babel-loader": "^9.1.3",
58
59
  "babel-plugin-macros": "^3.1.0",
59
60
  "babel-plugin-named-exports-order": "^0.0.2",
61
+ "chromatic": "^11.3.5",
60
62
  "eslint-plugin-storybook": "0.6.15",
61
63
  "faker": "^5.1.0",
62
64
  "immer": "9.0.7",
@@ -98,8 +100,8 @@
98
100
  "@fortawesome/pro-regular-svg-icons": "^6.0.0",
99
101
  "@fortawesome/pro-solid-svg-icons": "^6.3.0",
100
102
  "@fortawesome/react-fontawesome": "^0.2.0",
101
- "@lingui/react": "3.17.2",
102
103
  "@lingui/core": "3.17.2",
104
+ "@lingui/react": "3.17.2",
103
105
  "@popperjs/core": "^2.11.8",
104
106
  "@xstyled/styled-components": "^3.8.0",
105
107
  "babel-plugin-macros": "^3.1.0",
package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js CHANGED
@@ -22,7 +22,7 @@ var FilterSetter = function (_a) {
22
22
  };
23
23
  var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
24
24
  export default {
25
- title: '@Blocks/CommonGrid',
25
+ title: 'Blocks/CommonGrid',
26
26
  decorators: [withRedux],
27
27
  };
28
28
  export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
package/ui/Blocks/CommonGrid/storybook/stories/default.stories.js CHANGED
@@ -7,7 +7,7 @@ import withRouter from '../utils/withRouter';
7
7
  import withRedux from '../utils/withRedux';
8
8
  import { LinguiContainer } from '../utils/linguiContainer';
9
9
  export default {
10
- title: '@Blocks/CommonGrid',
10
+ title: 'Blocks/CommonGrid',
11
11
  decorators: [withTheme, withRouter, withRedux],
12
12
  };
13
13
  export var Default = function () {
package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js CHANGED
@@ -4,7 +4,7 @@ import { createRandomData, gridSelectors, gridDummyActions } from '../utils/util
4
4
  import { columnDefinitions } from '../utils/columnDefinition';
5
5
  import { LinguiContainer } from '../utils/linguiContainer';
6
6
  export default {
7
- title: '@Blocks/CommonGrid',
7
+ title: 'Blocks/CommonGrid',
8
8
  };
9
9
  export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
10
10
  LoadingState.story = {
package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js CHANGED
@@ -4,7 +4,7 @@ import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../u
4
4
  import { oversizedColumnDefinition } from '../utils/columnDefinition';
5
5
  import { LinguiContainer } from '../utils/linguiContainer';
6
6
  export default {
7
- title: '@Blocks/CommonGrid',
7
+ title: 'Blocks/CommonGrid',
8
8
  };
9
9
  export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
10
10
  ManyColumnsNoScrollLayout.story = {
package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js CHANGED
@@ -4,7 +4,7 @@ import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../u
4
4
  import { oversizedColumnDefinition } from '../utils/columnDefinition';
5
5
  import { LinguiContainer } from '../utils/linguiContainer';
6
6
  export default {
7
- title: '@Blocks/CommonGrid',
7
+ title: 'Blocks/CommonGrid',
8
8
  };
9
9
  export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
10
10
  ManyColumnsNormalLayoutANoControls.story = {
package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js CHANGED
@@ -7,7 +7,7 @@ import withRouter from '../utils/withRouter';
7
7
  import withRedux from '../utils/withRedux';
8
8
  import { LinguiContainer } from '../utils/linguiContainer';
9
9
  export default {
10
- title: '@Blocks/CommonGrid',
10
+ title: 'Blocks/CommonGrid',
11
11
  decorators: [withTheme, withRouter, withRedux],
12
12
  };
13
13
  export var Styled = function () {
package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js CHANGED
@@ -5,7 +5,7 @@ import { columnDefinitions } from '../utils/columnDefinition';
5
5
  import { onRowAction } from '../utils/actions';
6
6
  import { LinguiContainer } from '../utils/linguiContainer';
7
7
  export default {
8
- title: '@Blocks/CommonGrid',
8
+ title: 'Blocks/CommonGrid',
9
9
  };
10
10
  export var WithCustomGridActions = function () {
11
11
  return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions }) }));
package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.js CHANGED
@@ -15,7 +15,7 @@ var components = {
15
15
  },
16
16
  };
17
17
  export default {
18
- title: '@Blocks/CommonGrid',
18
+ title: 'Blocks/CommonGrid',
19
19
  decorators: [withRedux],
20
20
  excludeStories: ['ActionColumnCheckboxes'],
21
21
  };
package/ui/Blocks/CommonGrid/styles.js CHANGED
@@ -15,7 +15,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
15
15
  });
16
16
  export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"])));
17
17
  export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
18
- export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
18
+ export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
19
19
  export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: sticky;\n right: 20px;\n > span > svg {\n stroke: ", ";\n width: 18px;\n height: 18px;\n }\n > span > H6 {\n display: none;\n }\n @media (min-width: 1024px) {\n > span > H6 {\n display: flex;\n margin-left: 5px;\n }\n }\n"], ["\n position: sticky;\n right: 20px;\n > span > svg {\n stroke: ", ";\n width: 18px;\n height: 18px;\n }\n > span > H6 {\n display: none;\n }\n @media (min-width: 1024px) {\n > span > H6 {\n display: flex;\n margin-left: 5px;\n }\n }\n"])), th('colors.blue2'));
20
20
  export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 20px;\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 20px;\n flex-grow: 1;\n }\n & .gridWrapper {\n background-color: ", ";\n width: ", ";\n padding-bottom: ", ";\n\n @media (min-width: 1024px) {\n height: ", ";\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n & .sticky {\n background-color: #fff;\n :hover {\n background-color: #fdf4f3;\n }\n }\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &.selected,\n &.selected > .sticky {\n background-color: #fdf4f3;\n }\n\n :hover {\n background-color: #fdf4f3;\n\n .sticky {\n background-color: #fdf4f3;\n }\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 20px;\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 20px;\n flex-grow: 1;\n }\n & .gridWrapper {\n background-color: ", ";\n width: ", ";\n padding-bottom: ", ";\n\n @media (min-width: 1024px) {\n height: ", ";\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n & .sticky {\n background-color: #fff;\n :hover {\n background-color: #fdf4f3;\n }\n }\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &.selected,\n &.selected > .sticky {\n background-color: #fdf4f3;\n }\n\n :hover {\n background-color: #fdf4f3;\n\n .sticky {\n background-color: #fdf4f3;\n }\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), th('fonts.primary'), th('fonts.primary'), function (_a) {
21
21
  var theme = _a.theme;
package/ui/Elements/ErrorMessage/ErrorMessage.js CHANGED
@@ -2,16 +2,15 @@ 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import styled, { css } from '@xstyled/styled-components';
7
7
  import { th } from '@xstyled/styled-components';
8
- import { Icon } from '../Icon';
9
8
  var tooltip = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: red1;\n color: white;\n text-align: center;\n border-radius: md;\n padding: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n margin-top: -4px;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 3px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"], ["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: red1;\n color: white;\n text-align: center;\n border-radius: md;\n padding: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n margin-top: -4px;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 3px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"])), th.color('red1'));
10
- var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n\n svg {\n min-width: 13px;\n width: 13px;\n fill: red1;\n }\n"], ["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n\n svg {\n min-width: 13px;\n width: 13px;\n fill: red1;\n }\n"])));
11
- var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .inline {\n margin-top: 1;\n svg {\n margin-right: 2;\n }\n }\n .tooltip {\n ", "\n svg {\n position: absolute;\n top: 0;\n right: 0;\n }\n }\n"], ["\n .inline {\n margin-top: 1;\n svg {\n margin-right: 2;\n }\n }\n .tooltip {\n ", "\n svg {\n position: absolute;\n top: 0;\n right: 0;\n }\n }\n"])), tooltip);
9
+ var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n"], ["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n"])));
10
+ var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .inline {\n margin-top: 1;\n }\n .tooltip {\n ", "\n }\n"], ["\n .inline {\n margin-top: 1;\n }\n .tooltip {\n ", "\n }\n"])), tooltip);
12
11
  var ErrorMessage = function (_a) {
13
12
  var children = _a.children, appearance = _a.appearance;
14
- return (_jsx(StyledWrapper, { children: _jsxs(ErrorWrap, { className: appearance, children: [_jsx(Icon, { icon: "deleteX" }), _jsx("span", { children: children })] }) }));
13
+ return (_jsx(StyledWrapper, { children: _jsx(ErrorWrap, { className: appearance, children: _jsx("span", { children: children }) }) }));
15
14
  };
16
15
  export default ErrorMessage;
17
16
  var templateObject_1, templateObject_2, templateObject_3;
package/ui/Elements/Label/Label.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {
2
2
  fontSize?: string | number | undefined;
3
3
  }, never>;
4
- export declare const FieldLabel: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {
5
- $isInvalid?: boolean | undefined;
6
- }, never>;
4
+ export declare const FieldLabel: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;
package/ui/Elements/Label/Label.js CHANGED
@@ -4,10 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import styled, { css } from '@xstyled/styled-components';
6
6
  import { system, th } from '@xstyled/styled-components';
7
- var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"], ["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"])), function (_a) {
8
- var $isInvalid = _a.$isInvalid;
9
- return ($isInvalid ? th.color('red1') : th.color('typoPrimary'));
10
- }, th('fonts.primary'));
7
+ var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"], ["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"])), th.color('typoPrimary'), th('fonts.primary'));
11
8
  export var Label = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: 8px;\n ", ";\n ", "\n ", ";\n"], ["\n margin-left: 8px;\n ", ";\n ", "\n ", ";\n"])), style, function (_a) {
12
9
  var fontSize = _a.fontSize;
13
10
  return fontSize
package/ui/Elements/Select/themes/selectStyles.js CHANGED
@@ -16,7 +16,7 @@ export var CustomStyles = {
16
16
  var _b;
17
17
  var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
18
18
  var colors = theme.colors;
19
- return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
19
+ return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
20
20
  fontWeight: theme.textWeightNormal,
21
21
  fontFamily: theme.font,
22
22
  }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: 'min-content', '.inputIcon': {
package/ui/Forms/Input/Input.js CHANGED
@@ -22,7 +22,7 @@ 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 { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
25
+ import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip, } from './styles';
26
26
  import { FieldLabel } from '../../Elements/Label';
27
27
  import { SpaceAroundWrap } from '../../Elements/SpaceAround';
28
28
  import { ErrorMessage } from '../../Elements/ErrorMessage';
@@ -60,5 +60,5 @@ export var Input = function (_a) {
60
60
  onEnter === null || onEnter === void 0 ? void 0 : onEnter();
61
61
  }
62
62
  }, [onEnter]);
63
- return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, "$isInvalid": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "lightGray3" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
63
+ return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
64
64
  };
package/ui/Forms/Input/styles.d.ts CHANGED
@@ -13,8 +13,12 @@ type StyledInputProps = {
13
13
  };
14
14
  type InputIconProps = {
15
15
  right?: boolean;
16
+ disabled?: boolean;
17
+ hasValue?: boolean;
18
+ $isInvalid?: boolean;
16
19
  };
17
20
  export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
21
+ export declare const ClearableInputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
18
22
  export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
19
23
  export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
20
24
  export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
package/ui/Forms/Input/styles.js CHANGED
@@ -14,44 +14,48 @@ var resolvePaddingRight = function (props) {
14
14
  padding += 2;
15
15
  return String(padding);
16
16
  };
17
- export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n }\n"], ["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n }\n"])), function (_a) {
17
+ export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n color: ", ";\n }\n"], ["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n color: ", ";\n }\n"])), function (_a) {
18
18
  var right = _a.right;
19
19
  return (right ? 'auto' : '1em');
20
20
  }, function (_a) {
21
21
  var right = _a.right;
22
22
  return (right ? '0.5em' : 'auto');
23
+ }, function (_a) {
24
+ var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue, disabled = _a.disabled;
25
+ return $isInvalid ? th.color('red1') : disabled || !hasValue ? th.color('lightGray6') : th.color('blue2');
23
26
  });
24
- export var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"], ["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"])));
25
- export var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
27
+ export var ClearableInputIcon = styled(InputIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n svg {\n color: gray1;\n }\n"], ["\n svg {\n color: gray1;\n }\n"])));
28
+ export var IconsController = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"], ["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"])));
29
+ export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
26
30
  export var StyledInput = styled.input.attrs(function (props) { return ({
27
31
  as: props.$asTextArea ? 'textarea' : 'input',
28
- }); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: lightGray1;\n border-color: lightGray3;\n color: gray;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: medium;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: lightGray1;\n border-color: lightGray3;\n color: gray;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
32
+ }); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: lightGray6;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: lightGray6;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
29
33
  var $isInvalid = _a.$isInvalid;
30
34
  return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
31
35
  }, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
32
36
  var big = _a.big;
33
37
  return big
34
- ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
38
+ ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
35
39
  }, function (_a) {
36
40
  var variant = _a.variant;
37
41
  return variant === 'gray'
38
- ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "], ["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "]))) : '';
42
+ ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "], ["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "]))) : '';
39
43
  });
40
- export var InputWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
41
- export var Suffix = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"])), th('fonts.primary'), function (_a) {
44
+ export var InputWrap = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
45
+ export var Suffix = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"])), th('fonts.primary'), function (_a) {
42
46
  var $isPointer = _a.$isPointer;
43
47
  return $isPointer
44
- ? css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))) : '';
48
+ ? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))) : '';
45
49
  });
46
- export var InputRow = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
50
+ export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
47
51
  var $isInvalid = _a.$isInvalid;
48
52
  return ($isInvalid ? th.color('red1') : th.color('gray'));
49
53
  }, function (_a) {
50
54
  var $isInvalid = _a.$isInvalid, variant = _a.variant;
51
55
  return $isInvalid ? th.color('red1') : variant === 'gray' ? th.color('neutral20') : th.color('lightGray6');
52
56
  }, function (_a) {
53
- var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue;
54
- return $isInvalid ? th.color('red1') : hasValue ? th.color('typoPrimary') : th.color('gray');
57
+ var hasValue = _a.hasValue;
58
+ return (hasValue ? th.color('typoPrimary') : th.color('gray'));
55
59
  }, function (_a) {
56
60
  var disabled = _a.disabled;
57
61
  return (disabled ? th.color('lightGray3') : th.color('gray5'));
@@ -59,5 +63,5 @@ export var InputRow = styled.div(templateObject_10 || (templateObject_10 = __mak
59
63
  var $icon = _a.$icon;
60
64
  return ($icon ? '3em' : '1em');
61
65
  });
62
- export var Tooltip = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"], ["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"])), th.color('red1'));
63
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
66
+ export var Tooltip = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"], ["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"])), th.color('red1'));
67
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
package/ui/Forms/TextArea/TextArea.js CHANGED
@@ -29,6 +29,6 @@ import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
29
29
  var TextArea = function (_a) {
30
30
  var name = _a.name, label = _a.label, value = _a.value, disabled = _a.disabled, error = _a.error, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, className = _a.className, resize = _a.resize, icon = _a.icon, _d = _a.rows, rows = _d === void 0 ? 4 : _d, Footer = _a.Footer, rest = __rest(_a, ["name", "label", "value", "disabled", "error", "spaceAround", "isInvalid", "className", "resize", "icon", "rows", "Footer"]);
31
31
  var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
32
- return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, children: [_jsxs(TextAreaWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, "$isInvalid": $isInvalid, children: label })), _jsxs(BorderWrap, { "$isInvalid": $isInvalid, disabled: disabled, children: [_jsxs(InnerWrap, { children: [icon && (_jsx(IconWrap, { children: _jsx(FaIcon, { icon: icon }) })), _jsx(StyledTextArea, __assign({ name: name, value: value, disabled: disabled, className: className, "$isInvalid": $isInvalid, "$resize": resize }, rest, { rows: rows }))] }), Footer] })] }), error && _jsx(ErrorMessage, { children: error })] }));
32
+ return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, children: [_jsxs(TextAreaWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(BorderWrap, { "$isInvalid": $isInvalid, disabled: disabled, children: [_jsxs(InnerWrap, { children: [icon && (_jsx(IconWrap, { children: _jsx(FaIcon, { icon: icon }) })), _jsx(StyledTextArea, __assign({ name: name, value: value, disabled: disabled, className: className, "$isInvalid": $isInvalid, "$resize": resize }, rest, { rows: rows }))] }), Footer] })] }), error && _jsx(ErrorMessage, { children: error })] }));
33
33
  };
34
34
  export default TextArea;