@blerp/design 1.0.112 → 1.0.113
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/index.cjs.js +18 -9
- package/dist/index.esm.js +19 -10
- package/dist/index.umd.js +18 -9
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -3069,17 +3069,15 @@ EllipsisLoader.defaultProps = {
|
|
|
3069
3069
|
};
|
|
3070
3070
|
|
|
3071
3071
|
var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
|
|
3072
|
-
var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n
|
|
3073
|
-
return props.theme.
|
|
3074
|
-
}, function (props) {
|
|
3075
|
-
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
3072
|
+
var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
|
|
3073
|
+
return props.theme.colors.grey5;
|
|
3076
3074
|
});
|
|
3077
|
-
var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n
|
|
3078
|
-
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
3079
|
-
}, Slider$2, function (props) {
|
|
3075
|
+
var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", " svg {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n }\n"])), Slider$2, function (props) {
|
|
3080
3076
|
return props.theme.colors.seafoam;
|
|
3081
3077
|
}, Slider$2, Slider$2);
|
|
3082
|
-
var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width:
|
|
3078
|
+
var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 36px;\n min-width: 35px;\n height: 20px;\n border: 1px solid transparent;\n border-color: ", ";\n border-radius: 18px;\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
|
|
3079
|
+
return props.checked ? "transparent" : props.theme.colors.grey5;
|
|
3080
|
+
}, ToggleInput);
|
|
3083
3081
|
var BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
3084
3082
|
return props.theme.colors.notBlack;
|
|
3085
3083
|
});
|
|
@@ -3105,7 +3103,18 @@ var Toggle$1 = function Toggle(_ref) {
|
|
|
3105
3103
|
return null;
|
|
3106
3104
|
},
|
|
3107
3105
|
type: "checkbox"
|
|
3108
|
-
}), /*#__PURE__*/React__default['default'].createElement(Slider$2, null
|
|
3106
|
+
}), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
|
|
3107
|
+
sx: {
|
|
3108
|
+
position: "absolute",
|
|
3109
|
+
top: "2px",
|
|
3110
|
+
left: "3px",
|
|
3111
|
+
color: checked ? "seafoam.main" : "transparent",
|
|
3112
|
+
fontSize: "16px",
|
|
3113
|
+
backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
|
|
3114
|
+
borderRadius: "50%",
|
|
3115
|
+
transition: "0.2s"
|
|
3116
|
+
}
|
|
3117
|
+
}))));
|
|
3109
3118
|
};
|
|
3110
3119
|
|
|
3111
3120
|
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
package/dist/index.esm.js
CHANGED
|
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createRef, clo
|
|
|
6
6
|
import { ColorExtractor } from 'react-color-extractor';
|
|
7
7
|
import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
|
|
8
8
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
9
|
-
import { PauseCircleOutlineRounded, LockRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
|
|
9
|
+
import { PauseCircleOutlineRounded, LockRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
|
|
10
10
|
import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
|
|
11
11
|
import LockRoundedIcon from '@mui/icons-material/LockRounded';
|
|
12
12
|
import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
|
|
@@ -3000,17 +3000,15 @@ EllipsisLoader.defaultProps = {
|
|
|
3000
3000
|
};
|
|
3001
3001
|
|
|
3002
3002
|
var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
|
|
3003
|
-
var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n
|
|
3004
|
-
return props.theme.
|
|
3005
|
-
}, function (props) {
|
|
3006
|
-
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
3003
|
+
var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
|
|
3004
|
+
return props.theme.colors.grey5;
|
|
3007
3005
|
});
|
|
3008
|
-
var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: ", ";\n }\n
|
|
3009
|
-
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
3010
|
-
}, Slider$2, function (props) {
|
|
3006
|
+
var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: ", ";\n }\n\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", " svg {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n }\n"])), Slider$2, function (props) {
|
|
3011
3007
|
return props.theme.colors.seafoam;
|
|
3012
3008
|
}, Slider$2, Slider$2);
|
|
3013
|
-
var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n place-self: center;\n width:
|
|
3009
|
+
var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 36px;\n min-width: 35px;\n height: 20px;\n border: 1px solid transparent;\n border-color: ", ";\n border-radius: 18px;\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
|
|
3010
|
+
return props.checked ? "transparent" : props.theme.colors.grey5;
|
|
3011
|
+
}, ToggleInput);
|
|
3014
3012
|
var BlackSlider = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
3015
3013
|
return props.theme.colors.notBlack;
|
|
3016
3014
|
});
|
|
@@ -3036,7 +3034,18 @@ var Toggle$1 = function Toggle(_ref) {
|
|
|
3036
3034
|
return null;
|
|
3037
3035
|
},
|
|
3038
3036
|
type: "checkbox"
|
|
3039
|
-
}), /*#__PURE__*/React__default.createElement(Slider$2, null
|
|
3037
|
+
}), /*#__PURE__*/React__default.createElement(Slider$2, null, /*#__PURE__*/React__default.createElement(CheckRounded, {
|
|
3038
|
+
sx: {
|
|
3039
|
+
position: "absolute",
|
|
3040
|
+
top: "2px",
|
|
3041
|
+
left: "3px",
|
|
3042
|
+
color: checked ? "seafoam.main" : "transparent",
|
|
3043
|
+
fontSize: "16px",
|
|
3044
|
+
backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
|
|
3045
|
+
borderRadius: "50%",
|
|
3046
|
+
transition: "0.2s"
|
|
3047
|
+
}
|
|
3048
|
+
}))));
|
|
3040
3049
|
};
|
|
3041
3050
|
|
|
3042
3051
|
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
package/dist/index.umd.js
CHANGED
|
@@ -3021,17 +3021,15 @@
|
|
|
3021
3021
|
};
|
|
3022
3022
|
|
|
3023
3023
|
var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
|
|
3024
|
-
var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n
|
|
3025
|
-
return props.theme.
|
|
3026
|
-
}, function (props) {
|
|
3027
|
-
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
3024
|
+
var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
|
|
3025
|
+
return props.theme.colors.grey5;
|
|
3028
3026
|
});
|
|
3029
|
-
var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n
|
|
3030
|
-
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
3031
|
-
}, Slider$2, function (props) {
|
|
3027
|
+
var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", " svg {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n }\n"])), Slider$2, function (props) {
|
|
3032
3028
|
return props.theme.colors.seafoam;
|
|
3033
3029
|
}, Slider$2, Slider$2);
|
|
3034
|
-
var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width:
|
|
3030
|
+
var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 36px;\n min-width: 35px;\n height: 20px;\n border: 1px solid transparent;\n border-color: ", ";\n border-radius: 18px;\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
|
|
3031
|
+
return props.checked ? "transparent" : props.theme.colors.grey5;
|
|
3032
|
+
}, ToggleInput);
|
|
3035
3033
|
var BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
3036
3034
|
return props.theme.colors.notBlack;
|
|
3037
3035
|
});
|
|
@@ -3057,7 +3055,18 @@
|
|
|
3057
3055
|
return null;
|
|
3058
3056
|
},
|
|
3059
3057
|
type: "checkbox"
|
|
3060
|
-
}), /*#__PURE__*/React__default['default'].createElement(Slider$2, null
|
|
3058
|
+
}), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
|
|
3059
|
+
sx: {
|
|
3060
|
+
position: "absolute",
|
|
3061
|
+
top: "2px",
|
|
3062
|
+
left: "3px",
|
|
3063
|
+
color: checked ? "seafoam.main" : "transparent",
|
|
3064
|
+
fontSize: "16px",
|
|
3065
|
+
backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
|
|
3066
|
+
borderRadius: "50%",
|
|
3067
|
+
transition: "0.2s"
|
|
3068
|
+
}
|
|
3069
|
+
}))));
|
|
3061
3070
|
};
|
|
3062
3071
|
|
|
3063
3072
|
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|