@citygross/components 0.7.37 → 0.7.38
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/build/@types/components/Header/Header.stories.d.ts +1 -0
- package/build/@types/components/IconToolTip/IconToolTip.d.ts +8 -0
- package/build/@types/components/IconToolTip/IconToolTip.stories.d.ts +13 -0
- package/build/@types/components/IconToolTip/IconToolTip.styles.d.ts +9 -0
- package/build/@types/index.d.ts +1 -0
- package/build/cjs/components/src/components/Header/Header.styles.js +2 -2
- package/build/cjs/components/src/components/IconToolTip/IconToolTip.js +33 -0
- package/build/cjs/components/src/components/IconToolTip/IconToolTip.js.map +1 -0
- package/build/cjs/components/src/components/IconToolTip/IconToolTip.styles.js +30 -0
- package/build/cjs/components/src/components/IconToolTip/IconToolTip.styles.js.map +1 -0
- package/build/cjs/components/src/components/Menu/Menu.styles.js +2 -2
- package/build/cjs/components/src/index.js +2 -0
- package/build/cjs/components/src/index.js.map +1 -1
- package/build/cjs/design-tokens/build/index.js +6 -1
- package/build/cjs/design-tokens/build/index.js.map +1 -1
- package/build/es/components/src/components/Header/Header.styles.js +2 -2
- package/build/es/components/src/components/IconToolTip/IconToolTip.js +25 -0
- package/build/es/components/src/components/IconToolTip/IconToolTip.js.map +1 -0
- package/build/es/components/src/components/IconToolTip/IconToolTip.styles.js +18 -0
- package/build/es/components/src/components/IconToolTip/IconToolTip.styles.js.map +1 -0
- package/build/es/components/src/components/Menu/Menu.styles.js +2 -2
- package/build/es/components/src/index.js +1 -0
- package/build/es/components/src/index.js.map +1 -1
- package/build/es/design-tokens/build/index.js +6 -1
- package/build/es/design-tokens/build/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { IconToolTip } from './IconToolTip';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
component: typeof IconToolTip;
|
|
4
|
+
title: string;
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
7
|
+
export declare const Default: {
|
|
8
|
+
(args: any): JSX.Element;
|
|
9
|
+
args: {
|
|
10
|
+
header: JSX.Element;
|
|
11
|
+
children: JSX.Element;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare type TToolTipBox = {
|
|
2
|
+
right?: number;
|
|
3
|
+
left?: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const IconToolTipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const ArrowUp: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const ToolTipBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TToolTipBox, never>;
|
|
8
|
+
export declare const ToolTipheader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
+
export declare const ToolTipIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
package/build/@types/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export * from './components/FormElements/Switch/Switch';
|
|
|
26
26
|
export * from './components/FormGroup/FormGroup';
|
|
27
27
|
export * from './components/GridContainer/GridContainer';
|
|
28
28
|
export * from './components/Header/Header';
|
|
29
|
+
export * from './components/IconToolTip/IconToolTip';
|
|
29
30
|
export * from './components/InfoTextBlock/InfoTextBlock';
|
|
30
31
|
export * from './components/LayoutBox/LayoutBox';
|
|
31
32
|
export * from './components/ListItem/ListItem';
|
|
@@ -10,9 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var Wrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
|
|
13
|
-
var HeaderWrapper = styled__default['default'].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding:
|
|
13
|
+
var HeaderWrapper = styled__default['default'].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"], ["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
14
14
|
var HeaderContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"])), function (props) { return props.maxWidth; });
|
|
15
|
-
var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding: 0
|
|
15
|
+
var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"], ["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
|
|
16
16
|
var Relative = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
17
17
|
var Fade = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 500ms;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 500ms;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) === false ? '0' : '1'); });
|
|
18
18
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var Icon = require('@citygross/icons');
|
|
7
|
+
var IconToolTip_styles = require('./IconToolTip.styles.js');
|
|
8
|
+
var Spacer = require('../Spacer/Spacer.js');
|
|
9
|
+
var index = require('../../../../design-tokens/build/index.js');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
+
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
+
|
|
15
|
+
function IconToolTip(_a) {
|
|
16
|
+
var _b, _c;
|
|
17
|
+
var _d = _a.icon, icon = _d === void 0 ? React__default['default'].createElement(Icon.Icons.Info, { width: 17, height: 17, color: (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }) : _d, header = _a.header, right = _a.right, left = _a.left, children = _a.children;
|
|
18
|
+
var _e = React.useState(false), open = _e[0], setOpen = _e[1];
|
|
19
|
+
return (React__default['default'].createElement(IconToolTip_styles.IconToolTipContainer, null,
|
|
20
|
+
React__default['default'].createElement("div", { onClick: function () { return setOpen(!open); } }, icon),
|
|
21
|
+
open && (React__default['default'].createElement(React__default['default'].Fragment, null,
|
|
22
|
+
React__default['default'].createElement(IconToolTip_styles.ArrowUp, null),
|
|
23
|
+
React__default['default'].createElement(IconToolTip_styles.ToolTipBox, { left: left, right: right },
|
|
24
|
+
React__default['default'].createElement(IconToolTip_styles.ToolTipheader, null,
|
|
25
|
+
header,
|
|
26
|
+
React__default['default'].createElement(IconToolTip_styles.ToolTipIconContainer, { onClick: function () { return setOpen(false); } },
|
|
27
|
+
React__default['default'].createElement(Icon.Icons.Cross, { color: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }))),
|
|
28
|
+
React__default['default'].createElement(Spacer.Spacer, null),
|
|
29
|
+
children)))));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
exports.IconToolTip = IconToolTip;
|
|
33
|
+
//# sourceMappingURL=IconToolTip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconToolTip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
+
var styled = require('styled-components');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
|
+
|
|
12
|
+
var IconToolTipContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"], ["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"])));
|
|
13
|
+
var ArrowUp = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"], ["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
|
|
14
|
+
var ToolTipBox = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
|
|
15
|
+
return props.right
|
|
16
|
+
? "right: " + props.right + "px"
|
|
17
|
+
: props.left
|
|
18
|
+
? "left:" + props.left + "px"
|
|
19
|
+
: null;
|
|
20
|
+
}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipBoxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
21
|
+
var ToolTipheader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
22
|
+
var ToolTipIconContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
24
|
+
|
|
25
|
+
exports.ArrowUp = ArrowUp;
|
|
26
|
+
exports.IconToolTipContainer = IconToolTipContainer;
|
|
27
|
+
exports.ToolTipBox = ToolTipBox;
|
|
28
|
+
exports.ToolTipIconContainer = ToolTipIconContainer;
|
|
29
|
+
exports.ToolTipheader = ToolTipheader;
|
|
30
|
+
//# sourceMappingURL=IconToolTip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconToolTip.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n
|
|
13
|
-
var MenuItem = styled__default['default'].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n
|
|
12
|
+
var MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n gap: ", "px;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"], ["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n gap: ", "px;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
13
|
+
var MenuItem = styled__default['default'].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
14
14
|
var Fade = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16
16
|
|
|
@@ -30,6 +30,7 @@ var Radio = require('./components/FormElements/Radio/Radio.js');
|
|
|
30
30
|
var Switch = require('./components/FormElements/Switch/Switch.js');
|
|
31
31
|
var FormGroup = require('./components/FormGroup/FormGroup.js');
|
|
32
32
|
var GridContainer = require('./components/GridContainer/GridContainer.js');
|
|
33
|
+
var IconToolTip = require('./components/IconToolTip/IconToolTip.js');
|
|
33
34
|
var InfoTextBlock = require('./components/InfoTextBlock/InfoTextBlock.js');
|
|
34
35
|
var LayoutBox = require('./components/LayoutBox/LayoutBox.js');
|
|
35
36
|
var ListItem = require('./components/ListItem/ListItem.js');
|
|
@@ -104,6 +105,7 @@ exports.Radio = Radio.Radio;
|
|
|
104
105
|
exports.Switch = Switch.Switch;
|
|
105
106
|
exports.FormGroup = FormGroup.FormGroup;
|
|
106
107
|
exports.GridContainer = GridContainer.GridContainer;
|
|
108
|
+
exports.IconToolTip = IconToolTip.IconToolTip;
|
|
107
109
|
exports.InfoWithButtonBlock = InfoTextBlock.InfoWithButtonBlock;
|
|
108
110
|
exports.LayoutBox = LayoutBox.LayoutBox;
|
|
109
111
|
exports.ListItem = ListItem.ListItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -62,7 +62,12 @@ var constants = {
|
|
|
62
62
|
infoBlockBorderWidth: 4,
|
|
63
63
|
tableRowVerticalPadding: 16,
|
|
64
64
|
tableRowHorizontalPadding: 14,
|
|
65
|
-
tableHeaderVerticalPadding: 12
|
|
65
|
+
tableHeaderVerticalPadding: 12,
|
|
66
|
+
headerWrapperVerticalPadding: 20,
|
|
67
|
+
iconToolTipArrowLeft: 2.5,
|
|
68
|
+
iconToolTipArrowTop: 32,
|
|
69
|
+
iconToolTipBoxWidth: 300,
|
|
70
|
+
iconToolTipTop: 36
|
|
66
71
|
};
|
|
67
72
|
|
|
68
73
|
var palette = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1232,\n infoBlockBorderWidth: 4,\n tableRowVerticalPadding: 16,\n tableRowHorizontalPadding: 14,\n tableHeaderVerticalPadding: 12\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1232,\n infoBlockBorderWidth: 4,\n tableRowVerticalPadding: 16,\n tableRowHorizontalPadding: 14,\n tableHeaderVerticalPadding: 12,\n headerWrapperVerticalPadding: 20,\n iconToolTipArrowLeft: 2.5,\n iconToolTipArrowTop: 32,\n iconToolTipBoxWidth: 300,\n iconToolTipTop: 36\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
|
|
@@ -2,9 +2,9 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
|
|
5
|
-
var HeaderWrapper = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding:
|
|
5
|
+
var HeaderWrapper = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"], ["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
6
6
|
var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"])), function (props) { return props.maxWidth; });
|
|
7
|
-
var MenuContainer = styled.nav(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding: 0
|
|
7
|
+
var MenuContainer = styled.nav(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"], ["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
|
|
8
8
|
var Relative = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
9
9
|
var Fade = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 500ms;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 500ms;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) === false ? '0' : '1'); });
|
|
10
10
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Icons } from '@citygross/icons';
|
|
3
|
+
import { IconToolTipContainer, ArrowUp, ToolTipBox, ToolTipheader, ToolTipIconContainer } from './IconToolTip.styles.js';
|
|
4
|
+
import { Spacer } from '../Spacer/Spacer.js';
|
|
5
|
+
import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
|
|
6
|
+
|
|
7
|
+
function IconToolTip(_a) {
|
|
8
|
+
var _b, _c;
|
|
9
|
+
var _d = _a.icon, icon = _d === void 0 ? React.createElement(Icons.Info, { width: 17, height: 17, color: (_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }) : _d, header = _a.header, right = _a.right, left = _a.left, children = _a.children;
|
|
10
|
+
var _e = useState(false), open = _e[0], setOpen = _e[1];
|
|
11
|
+
return (React.createElement(IconToolTipContainer, null,
|
|
12
|
+
React.createElement("div", { onClick: function () { return setOpen(!open); } }, icon),
|
|
13
|
+
open && (React.createElement(React.Fragment, null,
|
|
14
|
+
React.createElement(ArrowUp, null),
|
|
15
|
+
React.createElement(ToolTipBox, { left: left, right: right },
|
|
16
|
+
React.createElement(ToolTipheader, null,
|
|
17
|
+
header,
|
|
18
|
+
React.createElement(ToolTipIconContainer, { onClick: function () { return setOpen(false); } },
|
|
19
|
+
React.createElement(Icons.Cross, { color: (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.white }))),
|
|
20
|
+
React.createElement(Spacer, null),
|
|
21
|
+
children)))));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { IconToolTip };
|
|
25
|
+
//# sourceMappingURL=IconToolTip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconToolTip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
|
|
4
|
+
var IconToolTipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"], ["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"])));
|
|
5
|
+
var ArrowUp = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"], ["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
|
|
6
|
+
var ToolTipBox = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
|
|
7
|
+
return props.right
|
|
8
|
+
? "right: " + props.right + "px"
|
|
9
|
+
: props.left
|
|
10
|
+
? "left:" + props.left + "px"
|
|
11
|
+
: null;
|
|
12
|
+
}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipBoxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
|
|
13
|
+
var ToolTipheader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
14
|
+
var ToolTipIconContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
16
|
+
|
|
17
|
+
export { ArrowUp, IconToolTipContainer, ToolTipBox, ToolTipIconContainer, ToolTipheader };
|
|
18
|
+
//# sourceMappingURL=IconToolTip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconToolTip.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n
|
|
5
|
-
var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n
|
|
4
|
+
var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n gap: ", "px;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"], ["\n position: relative;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n gap: ", "px;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
5
|
+
var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
6
6
|
var Fade = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
|
|
7
7
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
8
8
|
|
|
@@ -26,6 +26,7 @@ export { Radio } from './components/FormElements/Radio/Radio.js';
|
|
|
26
26
|
export { Switch } from './components/FormElements/Switch/Switch.js';
|
|
27
27
|
export { FormGroup } from './components/FormGroup/FormGroup.js';
|
|
28
28
|
export { GridContainer } from './components/GridContainer/GridContainer.js';
|
|
29
|
+
export { IconToolTip } from './components/IconToolTip/IconToolTip.js';
|
|
29
30
|
export { InfoWithButtonBlock } from './components/InfoTextBlock/InfoTextBlock.js';
|
|
30
31
|
export { LayoutBox } from './components/LayoutBox/LayoutBox.js';
|
|
31
32
|
export { ListItem } from './components/ListItem/ListItem.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -59,7 +59,12 @@ var constants = {
|
|
|
59
59
|
infoBlockBorderWidth: 4,
|
|
60
60
|
tableRowVerticalPadding: 16,
|
|
61
61
|
tableRowHorizontalPadding: 14,
|
|
62
|
-
tableHeaderVerticalPadding: 12
|
|
62
|
+
tableHeaderVerticalPadding: 12,
|
|
63
|
+
headerWrapperVerticalPadding: 20,
|
|
64
|
+
iconToolTipArrowLeft: 2.5,
|
|
65
|
+
iconToolTipArrowTop: 32,
|
|
66
|
+
iconToolTipBoxWidth: 300,
|
|
67
|
+
iconToolTipTop: 36
|
|
63
68
|
};
|
|
64
69
|
|
|
65
70
|
var palette = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1232,\n infoBlockBorderWidth: 4,\n tableRowVerticalPadding: 16,\n tableRowHorizontalPadding: 14,\n tableHeaderVerticalPadding: 12\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 960,\n xl: 1060,\n xxl: 1280,\n xxxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n ListImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12,\n pageContentMaxWidth: 1232,\n infoBlockBorderWidth: 4,\n tableRowVerticalPadding: 16,\n tableRowHorizontalPadding: 14,\n tableHeaderVerticalPadding: 12,\n headerWrapperVerticalPadding: 20,\n iconToolTipArrowLeft: 2.5,\n iconToolTipArrowTop: 32,\n iconToolTipBoxWidth: 300,\n iconToolTipTop: 36\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.38",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -62,14 +62,14 @@
|
|
|
62
62
|
"styled-components": "^5.2.1"
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@citygross/design-tokens": "^0.2.
|
|
65
|
+
"@citygross/design-tokens": "^0.2.15",
|
|
66
66
|
"@citygross/icons": "^0.1.1",
|
|
67
67
|
"@citygross/react-use-bg-wizard": "^0.0.7",
|
|
68
|
-
"@citygross/typography": "^0.0.
|
|
68
|
+
"@citygross/typography": "^0.0.42",
|
|
69
69
|
"@citygross/utils": "^0.0.19",
|
|
70
70
|
"framer-motion": "^4.1.17",
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "179014eb6104f75edd8bded518acef86bab9b2d6"
|
|
75
75
|
}
|