@sikka/hawa 0.0.8 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/es/index.es.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/package.json +3 -2
  4. package/src/blocks/Account/UserProfile.js +55 -50
  5. package/src/blocks/Account/UserSettings.js +0 -1
  6. package/src/blocks/AuthForms/NewPasswordForm.js +57 -85
  7. package/src/blocks/AuthForms/ResetPasswordForm.js +43 -42
  8. package/src/blocks/AuthForms/SignInForm.js +92 -95
  9. package/src/blocks/AuthForms/SignUpForm.js +105 -104
  10. package/src/blocks/Payment/PaymentMethod.js +0 -1
  11. package/src/blocks/Payment/SelectPayment.js +53 -54
  12. package/src/index.js +0 -1
  13. package/src/layout/Box.js +36 -33
  14. package/src/stories/BlocksStories/AuthForm.stories.js +105 -39
  15. package/src/stories/BlocksStories/PaymentForm.stories.js +20 -35
  16. package/src/stories/BlocksStories/UserForm.stories.js +2 -16
  17. package/src/stories/LayoutStories/Box.stories.js +4 -10
  18. package/src/stories/UIStories/ActionButton.stories.js +1 -6
  19. package/src/stories/UIStories/AdaptiveButton.stories.js +1 -6
  20. package/src/stories/UIStories/Alert.stories.js +2 -3
  21. package/src/stories/UIStories/LogoButtons.stories.js +2 -6
  22. package/src/stories/UIStories/RadioSelector.stories.js +0 -3
  23. package/src/stories/UIStories/SettingsRow.stories.js +3 -16
  24. package/src/themes/HawaProvider.js +187 -178
  25. package/src/themes/QawaimTheme.js +199 -0
  26. package/src/ui/ActionButton.js +32 -35
  27. package/src/ui/AdaptiveButton.js +3 -8
  28. package/src/ui/HawaAlert.js +22 -24
  29. package/src/ui/HawaButton.js +43 -44
  30. package/src/ui/HawaInputLabel.js +22 -23
  31. package/src/ui/HawaLogoButton.js +7 -45
  32. package/src/ui/HawaRadio.js +25 -34
  33. package/src/ui/HawaSettingsRow.js +1 -27
  34. package/src/ui/HawaTextArea.js +1 -1
  35. package/src/ui/HawaTextField.js +146 -93
  36. package/src/ui/HawaTypography.js +19 -21
  37. package/src/ui/Row.js +1 -1
  38. package/src/ui/StyledTooltip.js +1 -1
  39. package/src/ui/TabPanel.js +1 -1
  40. package/storybook-static/8.1bf48ea7.iframe.bundle.js +1 -0
  41. package/storybook-static/iframe.html +1 -1
  42. package/storybook-static/main.b00949db.iframe.bundle.js +1 -0
  43. package/storybook-static/{runtime~main.cfefe972.iframe.bundle.js → runtime~main.f1ebae9b.iframe.bundle.js} +1 -1
  44. package/storybook-static/vendors~main.f8d30727.iframe.bundle.js +76 -0
  45. package/storybook-static/{vendors~main.aa1d952a.iframe.bundle.js.LICENSE.txt → vendors~main.f8d30727.iframe.bundle.js.LICENSE.txt} +0 -0
  46. package/storybook-static/vendors~main.f8d30727.iframe.bundle.js.map +1 -0
  47. package/src/stories/HawaProvider.stories.js +0 -22
  48. package/storybook-static/8.c4cb6081.iframe.bundle.js +0 -1
  49. package/storybook-static/main.5731dbe3.iframe.bundle.js +0 -1
  50. package/storybook-static/vendors~main.aa1d952a.iframe.bundle.js +0 -76
  51. package/storybook-static/vendors~main.aa1d952a.iframe.bundle.js.map +0 -1
@@ -1,107 +1,160 @@
1
- import React, { useContext } from "react";
2
- import InputBase from "@mui/material/InputBase";
3
- import Typography from "@mui/material/Typography";
4
- import { styled } from "@mui/material/styles";
5
- import PropTypes from "prop-types";
6
- import { ThemeProvider } from "../themes/HawaProvider";
7
- import { HawaInputLabel } from "./HawaInputLabel";
8
- import { Controller, useFormContext } from "react-hook-form";
1
+ import React from "react";
2
+ // import InputBase from "@mui/material/InputBase";
3
+ // import Typography from "@mui/material/Typography";
4
+ // import { styled } from "@mui/material/styles";
5
+ // import PropTypes from "prop-types";
6
+ // import { HawaInputLabel } from "./HawaInputLabel";
7
+ // import { Controller, useFormContext } from "react-hook-form";
8
+ import Input from "@mui/material/Input";
9
+ import InputLabel from "@mui/material/InputLabel";
9
10
 
10
11
  export const HawaTextField = (props) => {
11
- const { control, register } = useFormContext();
12
+ // const { control, register } = useFormContext();
12
13
 
13
- const { hawaTheme, themeName } = useContext(ThemeProvider);
14
- const currentTheme = Object.keys(hawaTheme.inputFields).find(
15
- (tName) => tName.toLowerCase() === themeName?.toLowerCase()
16
- );
17
- let textFieldStyle = {};
14
+ // const currentTheme = Object.keys(hawaTheme.inputFields).find(
15
+ // (tName) => tName.toLowerCase() === themeName?.toLowerCase()
16
+ // );
17
+ // let textFieldStyle = {};
18
+
19
+ // if (currentTheme) {
20
+ // textFieldStyle = {
21
+ // ...hawaTheme.inputFields[currentTheme],
22
+ // margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
23
+ // marginTop: props.last
24
+ // ? hawaTheme.inputFields[currentTheme].margin * 2
25
+ // : 0,
26
+ // };
27
+ // } else {
28
+ // textFieldStyle = {
29
+ // backgroundColor: "white"
30
+ // };
31
+ // }
32
+
33
+ // const StyledTextField = styled(InputBase)(({ theme }) => {
34
+ // return {
35
+ // // "& .MuiInputBase-input": {
36
+ // // // border: "1px solid #ced4da",
37
+ // // fontSize: 16,
38
+ // // // padding: "10px 12px",
39
+ // // marginBottom: props.helperText ? 5 : 0,
40
+ // // // paddingLeft: 10,
41
+ // // // paddingRight: 10,
42
+ // // ...textFieldStyle
43
+ // // },
44
+ // // "& .MuiInputBase-root": {
45
+ // // border: "1px solid #ced4da",
46
+ // // fontSize: 16,
47
+ // // // width: "auto",
48
+ // // // padding: "10px 12px",
49
+ // // marginBottom: props.helperText ? 5 : 0,
50
+ // // // paddingLeft: 10,
51
+ // // // paddingRight: 10,
18
52
 
19
- if (currentTheme) {
20
- textFieldStyle = {
21
- ...hawaTheme.inputFields[currentTheme],
22
- margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
23
- marginTop: props.last ? hawaTheme.inputFields[currentTheme].margin * 2 : 0
24
- };
25
- } else {
26
- textFieldStyle = {
27
- backgroundColor: "white"
28
- };
29
- }
53
+ // // // ...textFieldStyle,
54
+ // // backgroundColor: "blue"
55
+ // // // "&:focus": {
56
+ // // // borderColor: "red",
57
+ // // // borderWidth: 1,
58
+ // // // outline: "1px solid black",
59
+ // // // backgroundColor: "red"
60
+ // // // }
61
+ // // // "& input:valid + fieldset": {
62
+ // // // borderColor: "green",
63
+ // // // borderWidth: 2
64
+ // // // },
65
+ // // // "& input:invalid + fieldset": {
66
+ // // // borderColor: "red",
67
+ // // // borderWidth: 2
68
+ // // // },
69
+ // // // "& input:valid:focus + fieldset": {
70
+ // // // borderLeftWidth: 6,
71
+ // // // padding: "4px !important" // override inline-style
72
+ // // // }
73
+ // // },
30
74
 
31
- const StyledTextField = styled(InputBase)(({ theme }) => {
32
- return {
33
- // "label + &": {
34
- // marginTop: theme.spacing(3)
35
- // },
36
- "& .MuiInputBase-input": {
37
- // backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
38
- transition: theme.transitions.create([
39
- "border-color",
40
- "background-color",
41
- "box-shadow"
42
- ])
75
+ // // "&:hover": {
76
+ // // borderColor: "red",
77
+ // // borderWidth: 1,
78
+ // // outline: "1px solid black"
79
+ // // },
43
80
 
44
- // backgroundColor: "red"
45
- },
81
+ // // paddingLeft: 10,
82
+ // // paddingRight: 10,
83
+ // // border: "none"
46
84
 
47
- // position: "relative",
48
- border: "1px solid #ced4da",
49
- fontSize: 16,
50
- // width: "auto",
51
- padding: "10px 12px",
52
- marginBottom: props.helperText ? 5 : 0,
53
- paddingLeft: 10,
54
- paddingRight: 10,
55
- ...textFieldStyle
56
- // backgroundColor: "green"
57
- };
58
- });
85
+ // // position: "relative",
86
+ // // backgroundColor: "green"
87
+ // ...textFieldStyle
88
+ // };
89
+ // });
59
90
 
60
91
  return (
61
- <Controller
62
- render={({ field }) => (
63
- <>
64
- {props.inputLabel && <HawaInputLabel label={props.inputLabel} />}
92
+ <>
93
+ <InputLabel>{props.label}</InputLabel>
94
+ <Input disableUnderline {...props} />
95
+ </>
96
+ // <FormControl variant="hawa" style={{ marginTop: 10 }}>
65
97
 
66
- <StyledTextField
67
- fullWidth={true}
68
- // helperText={props.helperText}
69
- type={props.type ?? "text"}
70
- // placeholder={props.placeholder}
71
- // inputProps={
72
- // props.type === "number"
73
- // ? {
74
- // inputMode: "numeric",
75
- // min: "0",
76
- // max: "9999999",
77
- // step: "0.01"
78
- // }
79
- // : {}
80
- // }
98
+ // </FormControl>
99
+ // <TextField
100
+ // fullWidth
101
+ // type="text"
102
+ // // inputProps={{
103
+ // // shrink: true
104
+ // // }}
105
+ // // InputProps={{
106
+ // // disableUnderline: true,
107
+ // // shrink: true
108
+ // // }}
109
+ // InputLabelProps={{
110
+ // shrink: true
111
+ // }}
112
+ // {...props}
113
+ // />
114
+ // <Controller
115
+ // render={({ field }) => (
116
+ // <>
117
+ // {props.inputLabel && <InputLabel label={props.inputLabel} />}
81
118
 
82
- defaultValue={props.defaultValue && ""}
83
- value={props.value && ""}
84
- {...props}
85
- // {...field}
86
- {...register(props.name)}
87
- />
88
- <Typography
89
- variant="caption"
90
- style={{ margin: 5, marginBottom: 0, color: "red" }}
91
- >
92
- {props.helperText}
93
- </Typography>
94
- </>
95
- )}
96
- name={props.name}
97
- rules={props.rules}
98
- control={control}
99
- shouldUnregister={props.shouldUnregister}
100
- />
119
+ // <TextField
120
+ // fullWidth={true}
121
+ // // helperText={props.helperText}
122
+ // type={props.type ?? "text"}
123
+ // // placeholder={props.placeholder}
124
+ // // inputProps={
125
+ // // props.type === "number"
126
+ // // ? {
127
+ // // inputMode: "numeric",
128
+ // // min: "0",
129
+ // // max: "9999999",
130
+ // // step: "0.01"
131
+ // // }
132
+ // // : {}
133
+ // // }
134
+
135
+ // defaultValue={props.defaultValue && ""}
136
+ // value={props.value && ""}
137
+ // {...props}
138
+ // // {...field}
139
+ // {...register(props.name)}
140
+ // />
141
+ // <Typography
142
+ // variant="caption"
143
+ // style={{ margin: 5, marginBottom: 0, color: "red" }}
144
+ // >
145
+ // {props.helperText}
146
+ // </Typography>
147
+ // </>
148
+ // )}
149
+ // name={props.name}
150
+ // rules={props.rules}
151
+ // control={control}
152
+ // shouldUnregister={props.shouldUnregister}
153
+ // />
101
154
  );
102
155
  };
103
156
 
104
- HawaTextField.propTypes = {
105
- type: PropTypes.oneOf(["text", "number", "password"]),
106
- helperText: PropTypes.string
107
- };
157
+ // HawaTextField.propTypes = {
158
+ // type: PropTypes.oneOf(["text", "number", "password"]),
159
+ // helperText: PropTypes.string
160
+ // };
@@ -1,28 +1,26 @@
1
- import React, { useContext } from "react";
2
- import { styled } from "@mui/material/styles";
3
- import { ThemeProvider } from "../themes/HawaProvider";
1
+ import React from "react";
2
+ // import { styled } from "@mui/material/styles";
4
3
  import Typography from "@mui/material/Typography";
5
4
 
6
5
  export const HawaTypography = (props) => {
7
- const { hawaTheme, themeName } = useContext(ThemeProvider);
8
- const currentTheme = Object.keys(hawaTheme.typography).find(
9
- (tName) => tName.toLowerCase() === themeName?.toLowerCase()
10
- );
11
- let typographyStyle = {};
6
+ // const currentTheme = Object.keys(hawaTheme.typography).find(
7
+ // (tName) => tName.toLowerCase() === themeName?.toLowerCase()
8
+ // );
9
+ // let typographyStyle = {};
12
10
 
13
- if (currentTheme) {
14
- typographyStyle = { ...hawaTheme.typography[currentTheme] };
15
- } else {
16
- typographyStyle = {
17
- color: "black"
18
- };
19
- }
11
+ // if (currentTheme) {
12
+ // typographyStyle = { ...hawaTheme.typography[currentTheme] };
13
+ // } else {
14
+ // typographyStyle = {
15
+ // color: "black"
16
+ // };
17
+ // }
20
18
 
21
- const StyledTypography = styled(Typography)(({ theme }) => {
22
- return {
23
- ...typographyStyle
24
- };
25
- });
19
+ // const StyledTypography = styled(Typography)(({ theme }) => {
20
+ // return {
21
+ // ...typographyStyle
22
+ // };
23
+ // });
26
24
 
27
- return <StyledTypography {...props}>{props.children}</StyledTypography>;
25
+ return <Typography {...props}>{props.children}</Typography>;
28
26
  };
package/src/ui/Row.js CHANGED
@@ -3,7 +3,7 @@ export const Row = (props) => {
3
3
  <div
4
4
  style={{
5
5
  backgroundColor: "var(--light)",
6
- borderRadius: "var(--borderR)",
6
+ // borderRadius: "var(--borderR)",
7
7
  display: "flex",
8
8
  flexDirection: "row",
9
9
  justifyContent: "space-between",
@@ -1,4 +1,4 @@
1
- import React, { useState, useContext } from "react";
1
+ import React from "react";
2
2
  import Tooltip from "@mui/material/Tooltip";
3
3
 
4
4
  export const StyledTooltip = (props) => {
@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme) => ({
8
8
  },
9
9
  panel: {
10
10
  backgroundColor: "var(--lightGrey)",
11
- borderRadius: "var(--borderR)",
11
+ // borderRadius: "var(--borderR)",
12
12
  height: "100%",
13
13
  width: "100%",
14
14
  padding: 10
@@ -0,0 +1 @@
1
+ (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{"./node_modules/@storybook/components/dist/esm/ScrollArea/GlobalScrollAreaStyles.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getScrollAreaStyles",(function(){return getScrollAreaStyles}));__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.object.freeze.js");var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@emotion/react/dist/emotion-react.browser.esm.js");var hsResizeObserverDummyAnimation=Object(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.c)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.mediumdark,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.a,{styles:getScrollAreaStyles})};GlobalScrollAreaStyles.displayName="GlobalScrollAreaStyles",__webpack_exports__.default=GlobalScrollAreaStyles}}]);
@@ -345,4 +345,4 @@
345
345
 
346
346
 
347
347
 
348
- window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.cfefe972.iframe.bundle.js"></script><script src="vendors~main.aa1d952a.iframe.bundle.js"></script><script src="main.5731dbe3.iframe.bundle.js"></script></body></html>
348
+ window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.f8d30727.iframe.bundle.js"></script><script src="main.b00949db.iframe.bundle.js"></script></body></html>