@hitachivantara/uikit-react-core 3.67.14 → 3.67.17
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/dist/Slider/styles.js +12 -2
- package/dist/Slider/styles.js.map +1 -1
- package/dist/Snackbar/stories/SnackbarProvider.stories.mdx +12 -12
- package/dist/legacy/Slider/styles.js +12 -2
- package/dist/legacy/Slider/styles.js.map +1 -1
- package/dist/legacy/Snackbar/stories/SnackbarProvider.stories.mdx +12 -12
- package/dist/modern/Slider/styles.js +12 -2
- package/dist/modern/Slider/styles.js.map +1 -1
- package/dist/modern/Snackbar/stories/SnackbarProvider.stories.mdx +12 -12
- package/package.json +4 -4
package/dist/Slider/styles.js
CHANGED
|
@@ -23,6 +23,8 @@ exports.default = void 0;
|
|
|
23
23
|
|
|
24
24
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
25
|
|
|
26
|
+
var _styles = require("../Focus/styles");
|
|
27
|
+
|
|
26
28
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
29
|
|
|
28
30
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -122,7 +124,14 @@ var styles = function styles(theme) {
|
|
|
122
124
|
"&:hover": {
|
|
123
125
|
"&::before": _objectSpread({}, ring),
|
|
124
126
|
"&::after": _objectSpread({}, border)
|
|
125
|
-
}
|
|
127
|
+
},
|
|
128
|
+
// Note about the usage of `!important below`: the way the rc-slider allows us to
|
|
129
|
+
// style the knobs is through inline styles. This means that the `box-shadow`, which
|
|
130
|
+
// is an inline style and is set to `none` to prevent the default rc-slider style to
|
|
131
|
+
// show, can't be overriden for the focus scenario unless we use the `!important` flag.
|
|
132
|
+
"&:focus-visible": _objectSpread(_objectSpread({}, _styles.outlineStyles), {}, {
|
|
133
|
+
boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)!important"
|
|
134
|
+
})
|
|
126
135
|
}
|
|
127
136
|
},
|
|
128
137
|
handle: {},
|
|
@@ -208,7 +217,8 @@ var styles = function styles(theme) {
|
|
|
208
217
|
},
|
|
209
218
|
mark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
|
|
210
219
|
fontFamily: theme.hv.typography.fontFamily,
|
|
211
|
-
top: "-2px"
|
|
220
|
+
top: "-2px",
|
|
221
|
+
zIndex: -1
|
|
212
222
|
}),
|
|
213
223
|
disabledMark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
|
|
214
224
|
fontFamily: theme.hv.typography.fontFamily,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","ring","width","height","borderRadius","border","hv","palette","accent","acce1","opacity","content","position","top","left","atmosphere","atmo1","dragSquare","cursor","background","borderTop","atmo3","borderBottom","zIndex","dot","bottom","marginLeft","backgroundColor","atmo4","verticalAlign","root","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","marginTop","handle","handleContainerDisabled","handleHiddenContainer","display","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","dotDisabled","rail","knobInner","borderColor","boxShadow","knobOuter","knobHidden","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","disabledMark","color","atmo5","sliderTooltip","maxWidth","spacing","sm","normalText","visibility"],"sources":["../../src/Slider/styles.js"],"sourcesContent":["const styles = (theme) => {\n const ring = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.hv.palette.accent.acce1}`,\n opacity: \"20%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n };\n const border = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.hv.palette.atmosphere.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n };\n const dragSquare = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n borderBottom: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n zIndex: \"-2\",\n };\n const dot = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n };\n\n return {\n root: {},\n rootDisabled: {\n cursor: \"not-allowed\",\n \"& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: {\n marginBottom: \"18px\",\n padding: \"0 23px\",\n },\n error: {\n padding: \"0 8px\",\n },\n trackDragging: {\n cursor: \"grabbing\",\n \"& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: {\n zIndex: 0,\n },\n rootRange: {},\n handleContainer: {\n \"& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: {\n display: \"none\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: {\n justifyContent: \"space-between\",\n },\n onlyInput: {\n justifyContent: \"flex-end\",\n },\n label: {},\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n rail: {\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n height: \"1px\",\n zIndex: \"-3\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.accent.acce1,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n knobHidden: {\n display: \"none\",\n },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n track: {\n backgroundColor: theme.hv.palette.accent.acce1,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n mark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n top: \"-2px\",\n },\n disabledMark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n color: `${theme.hv.palette.atmosphere.atmo5}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n sliderTooltip: {\n \"& .rc-slider-tooltip-inner\": {\n background: theme.hv.palette.atmosphere.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: `${theme.hv.spacing.sm}px`,\n ...theme.hv.typography.normalText,\n fontFamily: theme.hv.typography.fontFamily,\n boxShadow: \"none\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n };\n};\n\nexport default styles;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","ring","width","height","borderRadius","border","hv","palette","accent","acce1","opacity","content","position","top","left","atmosphere","atmo1","dragSquare","cursor","background","borderTop","atmo3","borderBottom","zIndex","dot","bottom","marginLeft","backgroundColor","atmo4","verticalAlign","root","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","marginTop","outlineStyles","boxShadow","handle","handleContainerDisabled","handleHiddenContainer","display","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","dotDisabled","rail","knobInner","borderColor","knobOuter","knobHidden","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","disabledMark","color","atmo5","sliderTooltip","maxWidth","spacing","sm","normalText","visibility"],"sources":["../../src/Slider/styles.js"],"sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => {\n const ring = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.hv.palette.accent.acce1}`,\n opacity: \"20%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n };\n const border = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.hv.palette.atmosphere.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n };\n const dragSquare = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n borderBottom: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n zIndex: \"-2\",\n };\n const dot = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n };\n\n return {\n root: {},\n rootDisabled: {\n cursor: \"not-allowed\",\n \"& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: {\n marginBottom: \"18px\",\n padding: \"0 23px\",\n },\n error: {\n padding: \"0 8px\",\n },\n trackDragging: {\n cursor: \"grabbing\",\n \"& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: {\n zIndex: 0,\n },\n rootRange: {},\n handleContainer: {\n \"& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overriden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)!important\",\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: {\n display: \"none\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: {\n justifyContent: \"space-between\",\n },\n onlyInput: {\n justifyContent: \"flex-end\",\n },\n label: {},\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n rail: {\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n height: \"1px\",\n zIndex: \"-3\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.accent.acce1,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n knobHidden: {\n display: \"none\",\n },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n track: {\n backgroundColor: theme.hv.palette.accent.acce1,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n mark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n color: `${theme.hv.palette.atmosphere.atmo5}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n sliderTooltip: {\n \"& .rc-slider-tooltip-inner\": {\n background: theme.hv.palette.atmosphere.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: `${theme.hv.spacing.sm}px`,\n ...theme.hv.typography.normalText,\n fontFamily: theme.hv.typography.fontFamily,\n boxShadow: \"none\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n };\n};\n\nexport default styles;\n"],"mappings":"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"}
|
|
@@ -4,36 +4,35 @@ import LinkTo from "@storybook/addon-links/react";
|
|
|
4
4
|
|
|
5
5
|
import { Usage } from "storybook-root/blocks/Usage";
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
SnackbarProvider,
|
|
9
|
-
} from "./SnackbarProvider.stories.js";
|
|
7
|
+
import { SnackbarProvider } from "./SnackbarProvider.stories.js";
|
|
10
8
|
|
|
11
|
-
<Meta title="
|
|
9
|
+
<Meta title="Feedback/Snackbar/Provider" />
|
|
12
10
|
|
|
13
11
|
# Snackbar Provider
|
|
14
12
|
|
|
15
|
-
The UI Kit library provides a snackbar provider
|
|
13
|
+
The UI Kit library provides a snackbar provider
|
|
16
14
|
to control the stacking of multiple snackbars in the app.
|
|
17
15
|
|
|
18
|
-
The providers is not meant to be 100% feature complete, but instead,
|
|
19
|
-
ease the majority of use-cases we have been encountering.
|
|
20
|
-
If you need any customization or extension to the behavior,
|
|
16
|
+
The providers is not meant to be 100% feature complete, but instead,
|
|
17
|
+
ease the majority of use-cases we have been encountering.
|
|
18
|
+
If you need any customization or extension to the behavior,
|
|
21
19
|
please feel free to copy and customize it.
|
|
22
20
|
|
|
23
|
-
This feature needs both the
|
|
21
|
+
This feature needs both the _HvSnackbarProvider_ provider and the hook _useHvSnackbar_.
|
|
24
22
|
The provider and the hook are wrappers of the [Notistack](https://github.com/iamhosseindhv/notistack) API.
|
|
25
23
|
|
|
26
24
|
Ideally the `HvSnackbarProvider` should be at the top of the component tree of your application.
|
|
27
|
-
This will allow the snackbar to be triggered in any page.
|
|
25
|
+
This will allow the snackbar to be triggered in any page.
|
|
28
26
|
For more information of the provider API check the [notistack documentation](https://iamhosseindhv.com/notistack/api).
|
|
29
27
|
|
|
30
28
|
<Usage>{'import { HvSnackbarProvider } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
31
29
|
|
|
32
|
-
After adding the provider at the root of your app, you can call the
|
|
30
|
+
After adding the provider at the root of your app, you can call the `useHvSnackbar` at any
|
|
33
31
|
component inside your app. This hook will allow you to request the rendering of a snackbar through the use
|
|
34
|
-
of the
|
|
32
|
+
of the `enqueueSnackbar` function which follows the API bellow:
|
|
35
33
|
|
|
36
34
|
parameters:
|
|
35
|
+
|
|
37
36
|
- `message: string | React.node`: The message to render inside the snackbar.
|
|
38
37
|
- `options: HvEnqueueOptions`: The options to configure the snackbar.
|
|
39
38
|
- `HvEnqueueOptions`:
|
|
@@ -42,6 +41,7 @@ parameters:
|
|
|
42
41
|
- `snackbarContentProps?: HvSnackbarContentProps`: Extra properties to be passed onto the snackbar
|
|
43
42
|
|
|
44
43
|
output:
|
|
44
|
+
|
|
45
45
|
- `SnackbarKey: string | number`: How many snackbars to render.
|
|
46
46
|
|
|
47
47
|
<Usage>{'import { useHvSnackbar } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
@@ -11,6 +11,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
11
11
|
|
|
12
12
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13
13
|
|
|
14
|
+
import { outlineStyles } from "../Focus/styles";
|
|
15
|
+
|
|
14
16
|
var styles = function styles(theme) {
|
|
15
17
|
var ring = {
|
|
16
18
|
width: "32px",
|
|
@@ -106,7 +108,14 @@ var styles = function styles(theme) {
|
|
|
106
108
|
"&:hover": {
|
|
107
109
|
"&::before": _objectSpread({}, ring),
|
|
108
110
|
"&::after": _objectSpread({}, border)
|
|
109
|
-
}
|
|
111
|
+
},
|
|
112
|
+
// Note about the usage of `!important below`: the way the rc-slider allows us to
|
|
113
|
+
// style the knobs is through inline styles. This means that the `box-shadow`, which
|
|
114
|
+
// is an inline style and is set to `none` to prevent the default rc-slider style to
|
|
115
|
+
// show, can't be overriden for the focus scenario unless we use the `!important` flag.
|
|
116
|
+
"&:focus-visible": _objectSpread(_objectSpread({}, outlineStyles), {}, {
|
|
117
|
+
boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)!important"
|
|
118
|
+
})
|
|
110
119
|
}
|
|
111
120
|
},
|
|
112
121
|
handle: {},
|
|
@@ -192,7 +201,8 @@ var styles = function styles(theme) {
|
|
|
192
201
|
},
|
|
193
202
|
mark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
|
|
194
203
|
fontFamily: theme.hv.typography.fontFamily,
|
|
195
|
-
top: "-2px"
|
|
204
|
+
top: "-2px",
|
|
205
|
+
zIndex: -1
|
|
196
206
|
}),
|
|
197
207
|
disabledMark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
|
|
198
208
|
fontFamily: theme.hv.typography.fontFamily,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","ring","width","height","borderRadius","border","hv","palette","accent","acce1","opacity","content","position","top","left","atmosphere","atmo1","dragSquare","cursor","background","borderTop","atmo3","borderBottom","zIndex","dot","bottom","marginLeft","backgroundColor","atmo4","verticalAlign","root","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","marginTop","handle","handleContainerDisabled","handleHiddenContainer","display","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","dotDisabled","rail","knobInner","borderColor","boxShadow","knobOuter","knobHidden","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","disabledMark","color","atmo5","sliderTooltip","maxWidth","spacing","sm","normalText","visibility"],"sources":["../../../src/Slider/styles.js"],"sourcesContent":["const styles = (theme) => {\n const ring = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.hv.palette.accent.acce1}`,\n opacity: \"20%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n };\n const border = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.hv.palette.atmosphere.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n };\n const dragSquare = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n borderBottom: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n zIndex: \"-2\",\n };\n const dot = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n };\n\n return {\n root: {},\n rootDisabled: {\n cursor: \"not-allowed\",\n \"& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: {\n marginBottom: \"18px\",\n padding: \"0 23px\",\n },\n error: {\n padding: \"0 8px\",\n },\n trackDragging: {\n cursor: \"grabbing\",\n \"& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: {\n zIndex: 0,\n },\n rootRange: {},\n handleContainer: {\n \"& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: {\n display: \"none\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: {\n justifyContent: \"space-between\",\n },\n onlyInput: {\n justifyContent: \"flex-end\",\n },\n label: {},\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n rail: {\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n height: \"1px\",\n zIndex: \"-3\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.accent.acce1,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n knobHidden: {\n display: \"none\",\n },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n track: {\n backgroundColor: theme.hv.palette.accent.acce1,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n mark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n top: \"-2px\",\n },\n disabledMark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n color: `${theme.hv.palette.atmosphere.atmo5}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n sliderTooltip: {\n \"& .rc-slider-tooltip-inner\": {\n background: theme.hv.palette.atmosphere.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: `${theme.hv.spacing.sm}px`,\n ...theme.hv.typography.normalText,\n fontFamily: theme.hv.typography.fontFamily,\n boxShadow: \"none\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n };\n};\n\nexport default styles;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","names":["outlineStyles","styles","theme","ring","width","height","borderRadius","border","hv","palette","accent","acce1","opacity","content","position","top","left","atmosphere","atmo1","dragSquare","cursor","background","borderTop","atmo3","borderBottom","zIndex","dot","bottom","marginLeft","backgroundColor","atmo4","verticalAlign","root","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","marginTop","boxShadow","handle","handleContainerDisabled","handleHiddenContainer","display","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","dotDisabled","rail","knobInner","borderColor","knobOuter","knobHidden","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","disabledMark","color","atmo5","sliderTooltip","maxWidth","spacing","sm","normalText","visibility"],"sources":["../../../src/Slider/styles.js"],"sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => {\n const ring = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.hv.palette.accent.acce1}`,\n opacity: \"20%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n };\n const border = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.hv.palette.atmosphere.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n };\n const dragSquare = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n borderBottom: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n zIndex: \"-2\",\n };\n const dot = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n };\n\n return {\n root: {},\n rootDisabled: {\n cursor: \"not-allowed\",\n \"& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: {\n marginBottom: \"18px\",\n padding: \"0 23px\",\n },\n error: {\n padding: \"0 8px\",\n },\n trackDragging: {\n cursor: \"grabbing\",\n \"& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: {\n zIndex: 0,\n },\n rootRange: {},\n handleContainer: {\n \"& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overriden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)!important\",\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: {\n display: \"none\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: {\n justifyContent: \"space-between\",\n },\n onlyInput: {\n justifyContent: \"flex-end\",\n },\n label: {},\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n rail: {\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n height: \"1px\",\n zIndex: \"-3\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.accent.acce1,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n knobHidden: {\n display: \"none\",\n },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n track: {\n backgroundColor: theme.hv.palette.accent.acce1,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n mark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n color: `${theme.hv.palette.atmosphere.atmo5}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n sliderTooltip: {\n \"& .rc-slider-tooltip-inner\": {\n background: theme.hv.palette.atmosphere.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: `${theme.hv.spacing.sm}px`,\n ...theme.hv.typography.normalText,\n fontFamily: theme.hv.typography.fontFamily,\n boxShadow: \"none\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n };\n};\n\nexport default styles;\n"],"mappings":";;;;;;;;;;;;;AAAA,SAASA,aAAT,QAA8B,iBAA9B;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;EACxB,IAAMC,IAAI,GAAG;IACXC,KAAK,EAAE,MADI;IAEXC,MAAM,EAAE,MAFG;IAGXC,YAAY,EAAE,KAHH;IAIXC,MAAM,sBAAeL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAAvC,CAJK;IAKXC,OAAO,EAAE,KALE;IAMXC,OAAO,EAAE,IANE;IAOXC,QAAQ,EAAE,UAPC;IAQXC,GAAG,EAAE,OARM;IASXC,IAAI,EAAE;EATK,CAAb;EAWA,IAAMT,MAAM,GAAG;IACbH,KAAK,EAAE,MADM;IAEbC,MAAM,EAAE,MAFK;IAGbC,YAAY,EAAE,KAHD;IAIbC,MAAM,sBAAeL,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4BC,KAA3C,CAJO;IAKbL,OAAO,EAAE,IALI;IAMbC,QAAQ,EAAE,UANG;IAObC,GAAG,EAAE,MAPQ;IAQbC,IAAI,EAAE;EARO,CAAf;EAUA,IAAMG,UAAU,GAAG;IACjBC,MAAM,EAAE,MADS;IAEjBhB,KAAK,EAAE,mBAFU;IAGjBY,IAAI,EAAE,MAHW;IAIjBX,MAAM,EAAE,MAJS;IAKjBS,QAAQ,EAAE,UALO;IAMjBC,GAAG,EAAE,OANY;IAOjBF,OAAO,EAAE,IAPQ;IAQjBQ,UAAU,EAAE,aARK;IASjBC,SAAS,uBAAgBpB,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4BM,KAA5C,CATQ;IAUjBC,YAAY,uBAAgBtB,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4BM,KAA5C,CAVK;IAWjBE,MAAM,EAAE;EAXS,CAAnB;EAaA,IAAMC,GAAG,GAAG;IACVZ,QAAQ,EAAE,UADA;IAEVa,MAAM,EAAE,MAFE;IAGVC,UAAU,EAAE,KAHF;IAIVxB,KAAK,EAAE,KAJG;IAKVC,MAAM,EAAE,KALE;IAMVE,MAAM,EAAE,MANE;IAOVD,YAAY,EAAE,IAPJ;IAQVuB,eAAe,EAAE3B,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4Ba,KARnC;IASVV,MAAM,EAAE,SATE;IAUVW,aAAa,EAAE,QAVL;IAWVN,MAAM,EAAE;EAXE,CAAZ;EAcA,OAAO;IACLO,IAAI,EAAE,EADD;IAELC,YAAY,EAAE;MACZb,MAAM,EAAE,aADI;MAEZ,yBAAyB;QACvBC,UAAU,EAAE;MADW;IAFb,CAFT;IAQLa,eAAe,EAAE;MACfC,YAAY,EAAE,MADC;MAEfC,OAAO,EAAE;IAFM,CARZ;IAYLC,KAAK,EAAE;MACLD,OAAO,EAAE;IADJ,CAZF;IAeLE,aAAa,EAAE;MACblB,MAAM,EAAE,UADK;MAEb,sBAAsB;QACpB,6CACKD,UADL;UAEEC,MAAM,EAAE;QAFV;MADoB;IAFT,CAfV;IAwBLmB,YAAY,EAAE;MACZ,sBAAsB;QACpB,WAAW;UACT,+BACKpB,UADL;QADS;MADS;IADV,CAxBT;IAiCLqB,UAAU,EAAE;MACVf,MAAM,EAAE;IADE,CAjCP;IAoCLgB,SAAS,EAAE,EApCN;IAqCLC,eAAe,EAAE;MACf,uBAAuB;QACrBtB,MAAM,EAAE,SADa;QAErBuB,SAAS,EAAE,MAFU;QAGrB/B,OAAO,EAAE,CAHY;QAIrB,YAAY;UACVQ,MAAM,EAAE,MADE;UAEV,+BACKjB,IADL,CAFU;UAKV,8BACKI,MADL;QALU,CAJS;QAarB,WAAW;UACT,+BACKJ,IADL,CADS;UAIT,8BACKI,MADL;QAJS,CAbU;QAqBrB;QACA;QACA;QACA;QACA,mDACKP,aADL;UAEE4C,SAAS,EAAE;QAFb;MAzBqB;IADR,CArCZ;IAqELC,MAAM,EAAE,EArEH;IAsELC,uBAAuB,EAAE;MACvB,uBAAuB;QACrB1B,MAAM,EAAE,aADa;QAErBuB,SAAS,EAAE,MAFU;QAGrB/B,OAAO,EAAE,CAHY;QAIrB,YAAY;UACVQ,MAAM,EAAE;QADE,CAJS;QAOrB,WAAW;UACTA,MAAM,EAAE;QADC;MAPU;IADA,CAtEpB;IAmFL2B,qBAAqB,EAAE;MACrBC,OAAO,EAAE;IADY,CAnFlB;IAsFLC,cAAc,EAAE;MACdD,OAAO,EAAE,MADK;MAEdE,UAAU,EAAE,QAFE;MAGdC,cAAc,EAAE,eAHF;MAIdhB,YAAY,EAAE,MAJA;MAKdP,UAAU,EAAE,MALE;MAMdwB,WAAW,EAAE;IANC,CAtFX;IA8FLC,aAAa,EAAE;MACbF,cAAc,EAAE;IADH,CA9FV;IAiGLG,SAAS,EAAE;MACTH,cAAc,EAAE;IADP,CAjGN;IAoGLI,KAAK,EAAE,EApGF;IAqGL7B,GAAG,oBACEA,GADF,CArGE;IAwGL8B,WAAW,kCACN9B,GADM;MAETN,MAAM,EAAE;IAFC,EAxGN;IA4GLqC,IAAI,EAAE;MACJ5B,eAAe,EAAE3B,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4Ba,KADzC;MAEJzB,MAAM,EAAE,KAFJ;MAGJoB,MAAM,EAAE;IAHJ,CA5GD;IAiHLiC,SAAS,EAAE;MACTC,WAAW,EAAE,aADJ;MAETf,SAAS,EAAE,MAFF;MAGTf,eAAe,EAAE3B,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAHhC;MAITP,KAAK,EAAE,MAJE;MAKTC,MAAM,EAAE;IALC,CAjHN;IAwHLuD,SAAS,EAAE;MACT9C,QAAQ,EAAE,UADD;MAET6C,WAAW,EAAE,aAFJ;MAGTrD,YAAY,EAAE,KAHL;MAITsC,SAAS,EAAE,MAJF;MAKTf,eAAe,EAAE3B,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4Ba,KALpC;MAMT1B,KAAK,EAAE,MANE;MAOTC,MAAM,EAAE,MAPC;MAQTU,GAAG,EAAE,MARI;MASTC,IAAI,EAAE,MATG;MAUTS,MAAM,EAAE;IAVC,CAxHN;IAoILoC,UAAU,EAAE;MACVb,OAAO,EAAE;IADC,CApIP;IAuILc,cAAc,EAAE;MACdH,WAAW,EAAE,aADC;MAEdtD,MAAM,EAAE,KAFM;MAGdD,KAAK,EAAE,KAHO;MAIdwB,UAAU,EAAE,MAJE;MAKdrB,MAAM,EAAE,MALM;MAMdD,YAAY,EAAE,GANA;MAOdqC,SAAS,EAAE,KAPG;MAQd3B,IAAI,EAAE,MARQ;MASd+C,WAAW,EAAE,MATC;MAUd3C,MAAM,EAAE;IAVM,CAvIX;IAmJL4C,KAAK,EAAE;MACLnC,eAAe,EAAE3B,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KADpC;MAELN,MAAM,EAAE,KAFH;MAGLoB,MAAM,EAAE,IAHH;MAILkB,SAAS,EAAE;IAJN,CAnJF;IAyJLsB,IAAI,kCACC/D,KAAK,CAACM,EAAN,CAAS0D,UAAT,CAAoBC,OADrB;MAEFC,UAAU,EAAElE,KAAK,CAACM,EAAN,CAAS0D,UAAT,CAAoBE,UAF9B;MAGFrD,GAAG,EAAE,MAHH;MAIFU,MAAM,EAAE,CAAC;IAJP,EAzJC;IA+JL4C,YAAY,kCACPnE,KAAK,CAACM,EAAN,CAAS0D,UAAT,CAAoBC,OADb;MAEVC,UAAU,EAAElE,KAAK,CAACM,EAAN,CAAS0D,UAAT,CAAoBE,UAFtB;MAGVE,KAAK,YAAKpE,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4BsD,KAAjC,CAHK;MAIVnD,MAAM,EAAE,aAJE;MAKVL,GAAG,EAAE;IALK,EA/JP;IAsKLyD,aAAa,EAAE;MACb;QACEnD,UAAU,EAAEnB,KAAK,CAACM,EAAN,CAASC,OAAT,CAAiBQ,UAAjB,CAA4BC,KAD1C;QAEEZ,YAAY,EAAE,CAFhB;QAGEmE,QAAQ,EAAE,OAHZ;QAIEpE,MAAM,EAAE,MAJV;QAKE+B,OAAO,YAAKlC,KAAK,CAACM,EAAN,CAASkE,OAAT,CAAiBC,EAAtB;MALT,GAMKzE,KAAK,CAACM,EAAN,CAAS0D,UAAT,CAAoBU,UANzB;QAOER,UAAU,EAAElE,KAAK,CAACM,EAAN,CAAS0D,UAAT,CAAoBE,UAPlC;QAQExB,SAAS,EAAE;MARb,EADa;MAWb,8BAA8B;QAC5BiC,UAAU,EAAE;MADgB;IAXjB;EAtKV,CAAP;AAsLD,CAvOD;;AAyOA,eAAe5E,MAAf"}
|
|
@@ -4,36 +4,35 @@ import LinkTo from "@storybook/addon-links/react";
|
|
|
4
4
|
|
|
5
5
|
import { Usage } from "storybook-root/blocks/Usage";
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
SnackbarProvider,
|
|
9
|
-
} from "./SnackbarProvider.stories.js";
|
|
7
|
+
import { SnackbarProvider } from "./SnackbarProvider.stories.js";
|
|
10
8
|
|
|
11
|
-
<Meta title="
|
|
9
|
+
<Meta title="Feedback/Snackbar/Provider" />
|
|
12
10
|
|
|
13
11
|
# Snackbar Provider
|
|
14
12
|
|
|
15
|
-
The UI Kit library provides a snackbar provider
|
|
13
|
+
The UI Kit library provides a snackbar provider
|
|
16
14
|
to control the stacking of multiple snackbars in the app.
|
|
17
15
|
|
|
18
|
-
The providers is not meant to be 100% feature complete, but instead,
|
|
19
|
-
ease the majority of use-cases we have been encountering.
|
|
20
|
-
If you need any customization or extension to the behavior,
|
|
16
|
+
The providers is not meant to be 100% feature complete, but instead,
|
|
17
|
+
ease the majority of use-cases we have been encountering.
|
|
18
|
+
If you need any customization or extension to the behavior,
|
|
21
19
|
please feel free to copy and customize it.
|
|
22
20
|
|
|
23
|
-
This feature needs both the
|
|
21
|
+
This feature needs both the _HvSnackbarProvider_ provider and the hook _useHvSnackbar_.
|
|
24
22
|
The provider and the hook are wrappers of the [Notistack](https://github.com/iamhosseindhv/notistack) API.
|
|
25
23
|
|
|
26
24
|
Ideally the `HvSnackbarProvider` should be at the top of the component tree of your application.
|
|
27
|
-
This will allow the snackbar to be triggered in any page.
|
|
25
|
+
This will allow the snackbar to be triggered in any page.
|
|
28
26
|
For more information of the provider API check the [notistack documentation](https://iamhosseindhv.com/notistack/api).
|
|
29
27
|
|
|
30
28
|
<Usage>{'import { HvSnackbarProvider } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
31
29
|
|
|
32
|
-
After adding the provider at the root of your app, you can call the
|
|
30
|
+
After adding the provider at the root of your app, you can call the `useHvSnackbar` at any
|
|
33
31
|
component inside your app. This hook will allow you to request the rendering of a snackbar through the use
|
|
34
|
-
of the
|
|
32
|
+
of the `enqueueSnackbar` function which follows the API bellow:
|
|
35
33
|
|
|
36
34
|
parameters:
|
|
35
|
+
|
|
37
36
|
- `message: string | React.node`: The message to render inside the snackbar.
|
|
38
37
|
- `options: HvEnqueueOptions`: The options to configure the snackbar.
|
|
39
38
|
- `HvEnqueueOptions`:
|
|
@@ -42,6 +41,7 @@ parameters:
|
|
|
42
41
|
- `snackbarContentProps?: HvSnackbarContentProps`: Extra properties to be passed onto the snackbar
|
|
43
42
|
|
|
44
43
|
output:
|
|
44
|
+
|
|
45
45
|
- `SnackbarKey: string | number`: How many snackbars to render.
|
|
46
46
|
|
|
47
47
|
<Usage>{'import { useHvSnackbar } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
@@ -4,6 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
4
4
|
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
|
|
7
|
+
import { outlineStyles } from "../Focus/styles";
|
|
8
|
+
|
|
7
9
|
const styles = theme => {
|
|
8
10
|
const ring = {
|
|
9
11
|
width: "32px",
|
|
@@ -99,7 +101,14 @@ const styles = theme => {
|
|
|
99
101
|
"&:hover": {
|
|
100
102
|
"&::before": _objectSpread({}, ring),
|
|
101
103
|
"&::after": _objectSpread({}, border)
|
|
102
|
-
}
|
|
104
|
+
},
|
|
105
|
+
// Note about the usage of `!important below`: the way the rc-slider allows us to
|
|
106
|
+
// style the knobs is through inline styles. This means that the `box-shadow`, which
|
|
107
|
+
// is an inline style and is set to `none` to prevent the default rc-slider style to
|
|
108
|
+
// show, can't be overriden for the focus scenario unless we use the `!important` flag.
|
|
109
|
+
"&:focus-visible": _objectSpread(_objectSpread({}, outlineStyles), {}, {
|
|
110
|
+
boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)!important"
|
|
111
|
+
})
|
|
103
112
|
}
|
|
104
113
|
},
|
|
105
114
|
handle: {},
|
|
@@ -185,7 +194,8 @@ const styles = theme => {
|
|
|
185
194
|
},
|
|
186
195
|
mark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
|
|
187
196
|
fontFamily: theme.hv.typography.fontFamily,
|
|
188
|
-
top: "-2px"
|
|
197
|
+
top: "-2px",
|
|
198
|
+
zIndex: -1
|
|
189
199
|
}),
|
|
190
200
|
disabledMark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
|
|
191
201
|
fontFamily: theme.hv.typography.fontFamily,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styles","theme","ring","width","height","borderRadius","border","hv","palette","accent","acce1","opacity","content","position","top","left","atmosphere","atmo1","dragSquare","cursor","background","borderTop","atmo3","borderBottom","zIndex","dot","bottom","marginLeft","backgroundColor","atmo4","verticalAlign","root","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","marginTop","handle","handleContainerDisabled","handleHiddenContainer","display","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","dotDisabled","rail","knobInner","borderColor","boxShadow","knobOuter","knobHidden","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","disabledMark","color","atmo5","sliderTooltip","maxWidth","spacing","sm","normalText","visibility"],"sources":["../../../src/Slider/styles.js"],"sourcesContent":["const styles = (theme) => {\n const ring = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.hv.palette.accent.acce1}`,\n opacity: \"20%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n };\n const border = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.hv.palette.atmosphere.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n };\n const dragSquare = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n borderBottom: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n zIndex: \"-2\",\n };\n const dot = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n };\n\n return {\n root: {},\n rootDisabled: {\n cursor: \"not-allowed\",\n \"& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: {\n marginBottom: \"18px\",\n padding: \"0 23px\",\n },\n error: {\n padding: \"0 8px\",\n },\n trackDragging: {\n cursor: \"grabbing\",\n \"& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: {\n zIndex: 0,\n },\n rootRange: {},\n handleContainer: {\n \"& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: {\n display: \"none\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: {\n justifyContent: \"space-between\",\n },\n onlyInput: {\n justifyContent: \"flex-end\",\n },\n label: {},\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n rail: {\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n height: \"1px\",\n zIndex: \"-3\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.accent.acce1,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n knobHidden: {\n display: \"none\",\n },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n track: {\n backgroundColor: theme.hv.palette.accent.acce1,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n mark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n top: \"-2px\",\n },\n disabledMark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n color: `${theme.hv.palette.atmosphere.atmo5}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n sliderTooltip: {\n \"& .rc-slider-tooltip-inner\": {\n background: theme.hv.palette.atmosphere.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: `${theme.hv.spacing.sm}px`,\n ...theme.hv.typography.normalText,\n fontFamily: theme.hv.typography.fontFamily,\n boxShadow: \"none\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n };\n};\n\nexport default styles;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","names":["outlineStyles","styles","theme","ring","width","height","borderRadius","border","hv","palette","accent","acce1","opacity","content","position","top","left","atmosphere","atmo1","dragSquare","cursor","background","borderTop","atmo3","borderBottom","zIndex","dot","bottom","marginLeft","backgroundColor","atmo4","verticalAlign","root","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","marginTop","boxShadow","handle","handleContainerDisabled","handleHiddenContainer","display","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","dotDisabled","rail","knobInner","borderColor","knobOuter","knobHidden","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","disabledMark","color","atmo5","sliderTooltip","maxWidth","spacing","sm","normalText","visibility"],"sources":["../../../src/Slider/styles.js"],"sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => {\n const ring = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.hv.palette.accent.acce1}`,\n opacity: \"20%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n };\n const border = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.hv.palette.atmosphere.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n };\n const dragSquare = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n borderBottom: `12px solid ${theme.hv.palette.atmosphere.atmo3}`,\n zIndex: \"-2\",\n };\n const dot = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n };\n\n return {\n root: {},\n rootDisabled: {\n cursor: \"not-allowed\",\n \"& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: {\n marginBottom: \"18px\",\n padding: \"0 23px\",\n },\n error: {\n padding: \"0 8px\",\n },\n trackDragging: {\n cursor: \"grabbing\",\n \"& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: {\n zIndex: 0,\n },\n rootRange: {},\n handleContainer: {\n \"& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overriden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)!important\",\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: {\n display: \"none\",\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: {\n justifyContent: \"space-between\",\n },\n onlyInput: {\n justifyContent: \"flex-end\",\n },\n label: {},\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n rail: {\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n height: \"1px\",\n zIndex: \"-3\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.accent.acce1,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n knobHidden: {\n display: \"none\",\n },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n track: {\n backgroundColor: theme.hv.palette.accent.acce1,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n mark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.hv.typography.vizText,\n fontFamily: theme.hv.typography.fontFamily,\n color: `${theme.hv.palette.atmosphere.atmo5}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n sliderTooltip: {\n \"& .rc-slider-tooltip-inner\": {\n background: theme.hv.palette.atmosphere.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: `${theme.hv.spacing.sm}px`,\n ...theme.hv.typography.normalText,\n fontFamily: theme.hv.typography.fontFamily,\n boxShadow: \"none\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n };\n};\n\nexport default styles;\n"],"mappings":"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"}
|
|
@@ -4,36 +4,35 @@ import LinkTo from "@storybook/addon-links/react";
|
|
|
4
4
|
|
|
5
5
|
import { Usage } from "storybook-root/blocks/Usage";
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
SnackbarProvider,
|
|
9
|
-
} from "./SnackbarProvider.stories.js";
|
|
7
|
+
import { SnackbarProvider } from "./SnackbarProvider.stories.js";
|
|
10
8
|
|
|
11
|
-
<Meta title="
|
|
9
|
+
<Meta title="Feedback/Snackbar/Provider" />
|
|
12
10
|
|
|
13
11
|
# Snackbar Provider
|
|
14
12
|
|
|
15
|
-
The UI Kit library provides a snackbar provider
|
|
13
|
+
The UI Kit library provides a snackbar provider
|
|
16
14
|
to control the stacking of multiple snackbars in the app.
|
|
17
15
|
|
|
18
|
-
The providers is not meant to be 100% feature complete, but instead,
|
|
19
|
-
ease the majority of use-cases we have been encountering.
|
|
20
|
-
If you need any customization or extension to the behavior,
|
|
16
|
+
The providers is not meant to be 100% feature complete, but instead,
|
|
17
|
+
ease the majority of use-cases we have been encountering.
|
|
18
|
+
If you need any customization or extension to the behavior,
|
|
21
19
|
please feel free to copy and customize it.
|
|
22
20
|
|
|
23
|
-
This feature needs both the
|
|
21
|
+
This feature needs both the _HvSnackbarProvider_ provider and the hook _useHvSnackbar_.
|
|
24
22
|
The provider and the hook are wrappers of the [Notistack](https://github.com/iamhosseindhv/notistack) API.
|
|
25
23
|
|
|
26
24
|
Ideally the `HvSnackbarProvider` should be at the top of the component tree of your application.
|
|
27
|
-
This will allow the snackbar to be triggered in any page.
|
|
25
|
+
This will allow the snackbar to be triggered in any page.
|
|
28
26
|
For more information of the provider API check the [notistack documentation](https://iamhosseindhv.com/notistack/api).
|
|
29
27
|
|
|
30
28
|
<Usage>{'import { HvSnackbarProvider } from "@hitachivantara/uikit-react-core";'}</Usage>
|
|
31
29
|
|
|
32
|
-
After adding the provider at the root of your app, you can call the
|
|
30
|
+
After adding the provider at the root of your app, you can call the `useHvSnackbar` at any
|
|
33
31
|
component inside your app. This hook will allow you to request the rendering of a snackbar through the use
|
|
34
|
-
of the
|
|
32
|
+
of the `enqueueSnackbar` function which follows the API bellow:
|
|
35
33
|
|
|
36
34
|
parameters:
|
|
35
|
+
|
|
37
36
|
- `message: string | React.node`: The message to render inside the snackbar.
|
|
38
37
|
- `options: HvEnqueueOptions`: The options to configure the snackbar.
|
|
39
38
|
- `HvEnqueueOptions`:
|
|
@@ -42,6 +41,7 @@ parameters:
|
|
|
42
41
|
- `snackbarContentProps?: HvSnackbarContentProps`: Extra properties to be passed onto the snackbar
|
|
43
42
|
|
|
44
43
|
output:
|
|
44
|
+
|
|
45
45
|
- `SnackbarKey: string | number`: How many snackbars to render.
|
|
46
46
|
|
|
47
47
|
<Usage>{'import { useHvSnackbar } from "@hitachivantara/uikit-react-core";'}</Usage>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "3.67.
|
|
3
|
+
"version": "3.67.17",
|
|
4
4
|
"description": "A collection of React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@babel/runtime": "^7.17.9",
|
|
50
|
-
"@hitachivantara/uikit-common-themes": "^3.
|
|
51
|
-
"@hitachivantara/uikit-react-icons": "^3.8.
|
|
50
|
+
"@hitachivantara/uikit-common-themes": "^3.5.0",
|
|
51
|
+
"@hitachivantara/uikit-react-icons": "^3.8.13",
|
|
52
52
|
"@popperjs/core": "2.11.5",
|
|
53
53
|
"@types/plotly.js": "^1.54.20",
|
|
54
54
|
"attr-accept": "^2.2.2",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"publishConfig": {
|
|
106
106
|
"access": "public"
|
|
107
107
|
},
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "538d1dace7a3e62d46d002c0421cc304b13d6c2b"
|
|
109
109
|
}
|