@janiscommerce/ui-web 0.7.2 → 0.8.0
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/CHANGELOG.md +12 -0
- package/dist/index.umd.js +96 -80
- package/dist/index.umd.js.map +1 -1
- package/dist/package.json +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.8.0] - 2022-01-23
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Changed Button to use Icon component
|
|
15
|
+
|
|
16
|
+
## [0.7.3] - 2022-12-04
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- Fixed postpublish script permission
|
|
21
|
+
|
|
10
22
|
## [0.7.2] - 2022-12-04
|
|
11
23
|
|
|
12
24
|
### Fixed
|
package/dist/index.umd.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('react-dom')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'react-dom'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$
|
|
5
|
-
})(this, (function (exports, React, styled$
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$b, global.require$$1));
|
|
5
|
+
})(this, (function (exports, React, styled$b, require$$1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
9
9
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$b);
|
|
11
11
|
var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
|
|
12
12
|
|
|
13
13
|
function ownKeys(object, enumerableOnly) {
|
|
@@ -917,6 +917,10 @@
|
|
|
917
917
|
path: "M482.525 839.6h-54.9l113.85-655.2h54.9z",
|
|
918
918
|
size: 24
|
|
919
919
|
};
|
|
920
|
+
var item = {
|
|
921
|
+
path: "M704 892.587c-92.16 0-167.253-75.093-167.253-167.253s75.093-167.253 167.253-167.253 167.253 75.093 167.253 167.253-75.093 167.253-167.253 167.253zM704 600.747c-68.693 0-124.587 55.893-124.587 124.587s55.893 124.587 124.587 124.587 124.587-55.893 124.587-124.587-55.893-124.587-124.587-124.587zM459.947 874.24h-307.2v-307.2h307.2v307.2zM195.413 831.573h221.867v-221.867h-221.867v221.867zM727.040 490.24h-414.293l206.933-358.827 207.36 358.827zM386.56 447.573h266.667l-133.12-230.827-133.12 230.827z",
|
|
922
|
+
size: 24
|
|
923
|
+
};
|
|
920
924
|
var journey = {
|
|
921
925
|
path: "M938.473 490.522v21.479c0 235.75-191.292 427.542-426.458 427.542-235.75 0-427.542-191.792-427.542-427.542s191.792-427.542 427.542-427.542h21.333c11.792 0 21.333 9.542 21.333 21.333s-9.542 21.333-21.333 21.333h-21.333c-212.208 0-384.875 172.646-384.875 384.875s172.667 384.875 384.875 384.875c211.625 0 383.792-172.646 383.792-384.875v-21.479c0-11.792 9.542-21.333 21.333-21.333s21.333 9.542 21.333 21.333zM490.64 298.793c-11.792 0-21.333 9.542-21.333 21.333v244.542c0 7.688 4.125 14.792 10.833 18.583l170.417 96.25c3.333 1.854 6.917 2.75 10.5 2.75 7.417 0 14.667-3.896 18.583-10.833 5.792-10.271 2.167-23.292-8.083-29.083l-159.583-90.125v-232.084c-0-11.792-9.542-21.333-21.334-21.333zM661.145 170.501c11.758 0 21.271-9.513 21.271-21.271s-9.513-21.271-21.271-21.271h-0.414c-11.758 0-21.062 9.513-21.062 21.271s9.721 21.271 21.476 21.271zM789.145 255.834c11.758 0 21.271-9.513 21.271-21.271s-9.513-21.271-21.271-21.271h-0.414c-11.758 0-21.062 9.513-21.062 21.271s9.721 21.271 21.476 21.271zM874.731 383.665c11.755 0 21.271-9.513 21.271-21.268 0-11.758-9.516-21.271-21.271-21.271h-0.417c-11.755 0-21.062 9.513-21.062 21.271 0 11.755 9.722 21.268 21.479 21.268z",
|
|
922
926
|
size: 24
|
|
@@ -1568,6 +1572,7 @@
|
|
|
1568
1572
|
ingreso_mercaderias: ingreso_mercaderias,
|
|
1569
1573
|
iso_janis: iso_janis,
|
|
1570
1574
|
italic: italic,
|
|
1575
|
+
item: item,
|
|
1571
1576
|
journey: journey,
|
|
1572
1577
|
key: key,
|
|
1573
1578
|
keyboard: keyboard,
|
|
@@ -1794,11 +1799,11 @@
|
|
|
1794
1799
|
base = mainPallet.base,
|
|
1795
1800
|
black = mainPallet.black,
|
|
1796
1801
|
error = mainPallet.error,
|
|
1797
|
-
grey = mainPallet.grey,
|
|
1802
|
+
grey$1 = mainPallet.grey,
|
|
1798
1803
|
primary = mainPallet.primary,
|
|
1799
1804
|
success = mainPallet.success,
|
|
1800
1805
|
warning = mainPallet.warning,
|
|
1801
|
-
white = mainPallet.white;
|
|
1806
|
+
white$1 = mainPallet.white;
|
|
1802
1807
|
var viewsPallet = {
|
|
1803
1808
|
black: black.main,
|
|
1804
1809
|
blackHover: black.hover,
|
|
@@ -1807,24 +1812,24 @@
|
|
|
1807
1812
|
blueHover: primary.hover,
|
|
1808
1813
|
bluePressed: primary.pressed,
|
|
1809
1814
|
blueDisabled: primary.disabled,
|
|
1810
|
-
darkGrey: grey.dark,
|
|
1811
|
-
darkGreyHover: grey.darkHover,
|
|
1812
|
-
darkGreyPressed: grey.darkPressed,
|
|
1815
|
+
darkGrey: grey$1.dark,
|
|
1816
|
+
darkGreyHover: grey$1.darkHover,
|
|
1817
|
+
darkGreyPressed: grey$1.darkPressed,
|
|
1813
1818
|
fizzGreen: success.main,
|
|
1814
1819
|
fizzGreenHover: success.hover,
|
|
1815
1820
|
fizzGreenPressed: success.pressed,
|
|
1816
1821
|
green: '#74C655',
|
|
1817
1822
|
greenHover: '#8FD177',
|
|
1818
1823
|
greenPressed: '#54B039',
|
|
1819
|
-
grey: grey.main,
|
|
1820
|
-
greyHover: grey.hover,
|
|
1821
|
-
greyPressed: grey.pressed,
|
|
1824
|
+
grey: grey$1.main,
|
|
1825
|
+
greyHover: grey$1.hover,
|
|
1826
|
+
greyPressed: grey$1.pressed,
|
|
1822
1827
|
lightBlue: '#08C4C4',
|
|
1823
1828
|
lightBlueHover: '#39CFCF',
|
|
1824
1829
|
lightBluePressed: '#04ADAD',
|
|
1825
|
-
lightGrey: white.main,
|
|
1826
|
-
lightGreyHover: white.hover,
|
|
1827
|
-
lightGreyPressed: white.pressed,
|
|
1830
|
+
lightGrey: white$1.main,
|
|
1831
|
+
lightGreyHover: white$1.hover,
|
|
1832
|
+
lightGreyPressed: white$1.pressed,
|
|
1828
1833
|
orange: warning.main,
|
|
1829
1834
|
orangeHover: warning.hover,
|
|
1830
1835
|
orangePressed: warning.pressed,
|
|
@@ -19076,9 +19081,9 @@
|
|
|
19076
19081
|
accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
|
|
19077
19082
|
};
|
|
19078
19083
|
var mixins = {
|
|
19079
|
-
flexCenter: styled$
|
|
19084
|
+
flexCenter: styled$b.css(["display:flex;align-items:center;justify-content:center;"]),
|
|
19080
19085
|
placeholder: function placeholder(styles) {
|
|
19081
|
-
return styled$
|
|
19086
|
+
return styled$b.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
|
|
19082
19087
|
},
|
|
19083
19088
|
transition: function transition() {
|
|
19084
19089
|
var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
|
|
@@ -19086,11 +19091,11 @@
|
|
|
19086
19091
|
var transitionProperty;
|
|
19087
19092
|
if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
|
|
19088
19093
|
var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
|
|
19089
|
-
return styled$
|
|
19094
|
+
return styled$b.css(["transition:", ";", ";"], transition, transitionProperty);
|
|
19090
19095
|
},
|
|
19091
19096
|
scrollbar: function scrollbar(thumbColor, shadowColor) {
|
|
19092
19097
|
var colors = palette.colors;
|
|
19093
|
-
return styled$
|
|
19098
|
+
return styled$b.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || colors.white, thumbColor);
|
|
19094
19099
|
}
|
|
19095
19100
|
};
|
|
19096
19101
|
|
|
@@ -19122,25 +19127,25 @@
|
|
|
19122
19127
|
};
|
|
19123
19128
|
var mediaBreaks = {
|
|
19124
19129
|
mobile: function mobile() {
|
|
19125
|
-
return styled$
|
|
19130
|
+
return styled$b.css(["", "{", "}"], devices.mobile, styled$b.css.apply(void 0, arguments));
|
|
19126
19131
|
},
|
|
19127
19132
|
tablet: function tablet() {
|
|
19128
|
-
return styled$
|
|
19133
|
+
return styled$b.css(["", "{", "}"], devices.tablet, styled$b.css.apply(void 0, arguments));
|
|
19129
19134
|
},
|
|
19130
19135
|
tabletLg: function tabletLg() {
|
|
19131
|
-
return styled$
|
|
19136
|
+
return styled$b.css(["", "{", "}"], devices.tabletLg, styled$b.css.apply(void 0, arguments));
|
|
19132
19137
|
},
|
|
19133
19138
|
onlyDesktop: function onlyDesktop() {
|
|
19134
|
-
return styled$
|
|
19139
|
+
return styled$b.css(["", "{", "}"], devices.onlyDesktop, styled$b.css.apply(void 0, arguments));
|
|
19135
19140
|
},
|
|
19136
19141
|
desktopSm: function desktopSm() {
|
|
19137
|
-
return styled$
|
|
19142
|
+
return styled$b.css(["", "{", "}"], devices.desktopSm, styled$b.css.apply(void 0, arguments));
|
|
19138
19143
|
},
|
|
19139
19144
|
desktopLg: function desktopLg() {
|
|
19140
|
-
return styled$
|
|
19145
|
+
return styled$b.css(["", "{", "}"], devices.desktopLg, styled$b.css.apply(void 0, arguments));
|
|
19141
19146
|
},
|
|
19142
19147
|
onlyPrint: function onlyPrint() {
|
|
19143
|
-
return styled$
|
|
19148
|
+
return styled$b.css(["@media print{", "}"], styled$b.css.apply(void 0, arguments));
|
|
19144
19149
|
}
|
|
19145
19150
|
};
|
|
19146
19151
|
|
|
@@ -19185,10 +19190,10 @@
|
|
|
19185
19190
|
viewBox = _ref.viewBox,
|
|
19186
19191
|
props = _objectWithoutProperties(_ref, _excluded$7);
|
|
19187
19192
|
|
|
19188
|
-
|
|
19189
|
-
|
|
19190
|
-
|
|
19191
|
-
defaultSize =
|
|
19193
|
+
if (!icons[name]) return null;
|
|
19194
|
+
var _icons$name = icons[name],
|
|
19195
|
+
path = _icons$name.path,
|
|
19196
|
+
defaultSize = _icons$name.size;
|
|
19192
19197
|
var size = sizeProp || defaultSize;
|
|
19193
19198
|
if (!path) return null;
|
|
19194
19199
|
return /*#__PURE__*/React__default["default"].createElement(styles.Svg, _extends$1({
|
|
@@ -19209,10 +19214,15 @@
|
|
|
19209
19214
|
viewBox: '0 0 1024 1024'
|
|
19210
19215
|
};
|
|
19211
19216
|
|
|
19212
|
-
var StyledIcon = styles.Svg;
|
|
19213
|
-
|
|
19214
19217
|
var mainPaletteColors = ['black', 'primary', 'success', 'grey', 'warning', 'error', 'white', 'alert'];
|
|
19215
19218
|
var validColors = ['blue', 'darkGrey', 'grey.dark', 'fizzGreen', 'green', 'lightBlue', 'lightGrey', 'orange', 'red', 'statusRed', 'yellow'].concat(mainPaletteColors);
|
|
19219
|
+
var white = palette.white,
|
|
19220
|
+
grey = palette.grey,
|
|
19221
|
+
lightGreyHover = palette.lightGreyHover,
|
|
19222
|
+
lightGrey = palette.lightGrey,
|
|
19223
|
+
blue = palette.blue,
|
|
19224
|
+
blueHover = palette.blueHover,
|
|
19225
|
+
bluePressed = palette.bluePressed;
|
|
19216
19226
|
/**
|
|
19217
19227
|
* Find normal, hover and pressed color
|
|
19218
19228
|
* @param {string} color
|
|
@@ -19244,49 +19254,54 @@
|
|
|
19244
19254
|
};
|
|
19245
19255
|
|
|
19246
19256
|
var getColor = function getColor(color) {
|
|
19247
|
-
return isValidColor(color) ? findColor(color) :
|
|
19257
|
+
return isValidColor(color) ? findColor(color) : blue;
|
|
19248
19258
|
};
|
|
19249
19259
|
var getHoverColor = function getHoverColor(color) {
|
|
19250
|
-
return isValidColor(color) ? findColor(color, 'hover') :
|
|
19260
|
+
return isValidColor(color) ? findColor(color, 'hover') : blueHover;
|
|
19251
19261
|
};
|
|
19252
19262
|
var getPressedColor = function getPressedColor(color) {
|
|
19253
|
-
return isValidColor(color) ? findColor(color, 'pressed') :
|
|
19254
|
-
};
|
|
19255
|
-
|
|
19256
|
-
|
|
19257
|
-
|
|
19258
|
-
|
|
19259
|
-
|
|
19260
|
-
|
|
19261
|
-
|
|
19262
|
-
|
|
19263
|
-
|
|
19264
|
-
|
|
19265
|
-
|
|
19266
|
-
|
|
19267
|
-
|
|
19268
|
-
|
|
19269
|
-
|
|
19270
|
-
return
|
|
19271
|
-
}
|
|
19272
|
-
return props.hasText && '8px';
|
|
19273
|
-
}, palette.white, mixins.transition('fill', '250ms'), function (props) {
|
|
19274
|
-
switch (props.variant) {
|
|
19275
|
-
case 'contained':
|
|
19276
|
-
return styled$a.css(["color:", ";&:before{background-color:", ";}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor$1(props.fontColor), getColor(props.color), StyledIcon, palette.white, getHoverColor(props.color), getPressedColor(props.color), palette.grey);
|
|
19277
|
-
|
|
19278
|
-
case 'outlined':
|
|
19279
|
-
case 'cleaned':
|
|
19280
|
-
return styled$a.css(["color:", ";&:after{background-color:transparent;}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}", "{fill:", ";}}"], getColor(props.color), StyledIcon, getColor(props.color), palette.lightGreyHover, palette.lightGrey, palette.grey, StyledIcon, palette.grey);
|
|
19263
|
+
return isValidColor(color) ? findColor(color, 'pressed') : bluePressed;
|
|
19264
|
+
};
|
|
19265
|
+
var getButtonStyles = function getButtonStyles(_ref) {
|
|
19266
|
+
var fontColor = _ref.fontColor,
|
|
19267
|
+
color = _ref.color,
|
|
19268
|
+
variant = _ref.variant;
|
|
19269
|
+
var variantStyles = {
|
|
19270
|
+
contained: function contained() {
|
|
19271
|
+
return styled$b.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor$1(fontColor), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
|
|
19272
|
+
},
|
|
19273
|
+
outlined: function outlined() {
|
|
19274
|
+
return styled$b.css(["color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}}"], getColor(color), getColor(color), lightGreyHover, lightGrey, grey, grey);
|
|
19275
|
+
},
|
|
19276
|
+
cleaned: function cleaned() {
|
|
19277
|
+
return styled$b.css(["color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}}"], getColor(color), getColor(color), lightGreyHover, lightGrey, grey, grey);
|
|
19278
|
+
}
|
|
19279
|
+
};
|
|
19280
|
+
return variantStyles[variant] || '';
|
|
19281
|
+
};
|
|
19281
19282
|
|
|
19282
|
-
|
|
19283
|
-
|
|
19284
|
-
|
|
19285
|
-
|
|
19286
|
-
|
|
19287
|
-
|
|
19288
|
-
|
|
19289
|
-
|
|
19283
|
+
var styled$a = {
|
|
19284
|
+
Button: styled__default["default"].button.withConfig({
|
|
19285
|
+
displayName: "styles__Button",
|
|
19286
|
+
componentId: "sc-buf2do-0"
|
|
19287
|
+
})(["display:flex;align-items:center;justify-content:center;height:36px;width:", ";flex-shrink:", ";border-radius:", ";padding:", ";cursor:", ";border:", ";font-size:13px;font-weight:500;position:relative;", ";z-index:0;&:before{content:'';border-radius:50px;position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;}&:after{content:'';border-radius:50px;position:absolute;z-index:-1;width:100%;height:100%;transition:all 0.25s ", ";transform:scale(0,0);top:0;bottom:0;left:0;right:0;}&:focus:after,&:hover:after,&:active:after{transform:scale(1,1);}&:active{-webkit-tap-highlight-color:", ";}.button-icon{margin-right:", ";fill:", ";", ";}", " .button-icon{fill:", ";}"], function (props) {
|
|
19288
|
+
return props.rounded && '36px';
|
|
19289
|
+
}, function (props) {
|
|
19290
|
+
return props.rounded ? '0' : 'initial';
|
|
19291
|
+
}, function (props) {
|
|
19292
|
+
return props.rounded ? '50%' : '50px';
|
|
19293
|
+
}, function (props) {
|
|
19294
|
+
return !props.rounded && (props.hasText && props.hasIcon ? '0 12px' : '0 16px');
|
|
19295
|
+
}, function (props) {
|
|
19296
|
+
return props.disabled ? 'default' : 'pointer';
|
|
19297
|
+
}, function (props) {
|
|
19298
|
+
return props.variant === 'outlined' ? "1px solid ".concat(getColor$1('grey')) : 'none';
|
|
19299
|
+
}, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, function (props) {
|
|
19300
|
+
return props.hasText && '8px';
|
|
19301
|
+
}, palette.white, mixins.transition('fill', '250ms'), getButtonStyles, function (props) {
|
|
19302
|
+
return getColor$1(props.iconColor);
|
|
19303
|
+
})
|
|
19304
|
+
};
|
|
19290
19305
|
|
|
19291
19306
|
var _excluded$6 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant"];
|
|
19292
19307
|
|
|
@@ -19303,7 +19318,7 @@
|
|
|
19303
19318
|
variant = _ref.variant,
|
|
19304
19319
|
props = _objectWithoutProperties(_ref, _excluded$6);
|
|
19305
19320
|
|
|
19306
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
19321
|
+
return /*#__PURE__*/React__default["default"].createElement(styled$a.Button, _extends$1({
|
|
19307
19322
|
color: color,
|
|
19308
19323
|
iconColor: iconColor || fontColor,
|
|
19309
19324
|
fontColor: fontColor,
|
|
@@ -19314,9 +19329,10 @@
|
|
|
19314
19329
|
hasIcon: !!icon,
|
|
19315
19330
|
tabIndex: "0"
|
|
19316
19331
|
}, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
19332
|
+
className: "button-icon",
|
|
19317
19333
|
name: icon,
|
|
19318
19334
|
size: iconSize
|
|
19319
|
-
}), children);
|
|
19335
|
+
}), !hideLabel && children);
|
|
19320
19336
|
};
|
|
19321
19337
|
|
|
19322
19338
|
Button.defaultProps = {
|
|
@@ -19343,7 +19359,7 @@
|
|
|
19343
19359
|
displayName: "styles__Input",
|
|
19344
19360
|
componentId: "sc-18bfcwf-1"
|
|
19345
19361
|
})(["opacity:0;position:absolute;cursor:pointer;"]),
|
|
19346
|
-
iconCheckStyles: styled$
|
|
19362
|
+
iconCheckStyles: styled$b.css(["transform:translateY(-5%);fill:", ";", ""], getColor$1('base.white'), function (props) {
|
|
19347
19363
|
return !!props.rounded && "\n\t\t\tflex-shrink: 0;\n\t\t\tpadding-right: 1px;\n\t\t";
|
|
19348
19364
|
})
|
|
19349
19365
|
};
|
|
@@ -19418,13 +19434,13 @@
|
|
|
19418
19434
|
}, function (props) {
|
|
19419
19435
|
switch (props.variant) {
|
|
19420
19436
|
case 'outlined':
|
|
19421
|
-
return styled$
|
|
19437
|
+
return styled$b.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? palette.primary.main : '#EAEBED', props.selected ? palette.primary.main : palette.black.main, palette.white.hover, props.selected ? palette.primary.main : palette.black.main, palette.primary.main, palette.primary.main, palette.primary.main);
|
|
19422
19438
|
|
|
19423
19439
|
case 'contained':
|
|
19424
|
-
return styled$
|
|
19440
|
+
return styled$b.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? palette.primary.main : palette.white.hover, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.grey.dark, props.selected ? palette.primary.mainHover : palette.white.main, props.selected ? palette.base.white : palette.black.main, palette.primary.main, palette.base.white, palette.base.white, palette.grey.main, palette.grey.main);
|
|
19425
19441
|
|
|
19426
19442
|
case 'status':
|
|
19427
|
-
return styled$
|
|
19443
|
+
return styled$b.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor$1(props.color || 'grey'), getColor$1(props.sizeColor || 'base.white'));
|
|
19428
19444
|
|
|
19429
19445
|
default:
|
|
19430
19446
|
return '';
|
|
@@ -19438,12 +19454,12 @@
|
|
|
19438
19454
|
}, function (props) {
|
|
19439
19455
|
return props.textColor && "color: ".concat(getColor$1(props.textColor), ";");
|
|
19440
19456
|
}, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.grey.dark)),
|
|
19441
|
-
iconPathStyles: styled$
|
|
19457
|
+
iconPathStyles: styled$b.css(["", ";"], mixins.transition('fill')),
|
|
19442
19458
|
DeleteButton: styled__default["default"].button.withConfig({
|
|
19443
19459
|
displayName: "styles__DeleteButton",
|
|
19444
19460
|
componentId: "sc-1vnh4co-1"
|
|
19445
19461
|
})(["width:16px;height:16px;margin-left:12px;"]),
|
|
19446
|
-
deleteButtonPathStyles: styled$
|
|
19462
|
+
deleteButtonPathStyles: styled$b.css(["", ";"], mixins.transition('fill')),
|
|
19447
19463
|
Children: styled__default["default"].div.withConfig({
|
|
19448
19464
|
displayName: "styles__Children",
|
|
19449
19465
|
componentId: "sc-1vnh4co-2"
|
|
@@ -19568,7 +19584,7 @@
|
|
|
19568
19584
|
})(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], palette.base.white, timingFunctions$1.standard, function (props) {
|
|
19569
19585
|
return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
|
|
19570
19586
|
});
|
|
19571
|
-
var iconCheckStyles = styled$
|
|
19587
|
+
var iconCheckStyles = styled$b.css(["position:absolute;fill:", ";", ""], function (props) {
|
|
19572
19588
|
return statusColor(props);
|
|
19573
19589
|
}, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
|
|
19574
19590
|
return props.checked ? palette.black : palette.darkGrey;
|
|
@@ -19752,7 +19768,7 @@
|
|
|
19752
19768
|
}, function (_ref4) {
|
|
19753
19769
|
var hasIcon = _ref4.hasIcon;
|
|
19754
19770
|
return hasIcon && "padding-left: 32px;";
|
|
19755
|
-
}, mixins.placeholder(styled$
|
|
19771
|
+
}, mixins.placeholder(styled$b.css(["font-weight:400;color:", ";"], function (_ref5) {
|
|
19756
19772
|
var error = _ref5.error;
|
|
19757
19773
|
return error ? palette.error.main : palette.grey.darkPressed;
|
|
19758
19774
|
})), function (props) {
|
|
@@ -19971,7 +19987,7 @@
|
|
|
19971
19987
|
componentId: "sc-wtau65-1"
|
|
19972
19988
|
})(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], palette.grey.main, fontSize, palette.black.main, mixins.transition('color,border-color', '0.2s'), function (props) {
|
|
19973
19989
|
return props.fullWidth ? '100%' : 'auto';
|
|
19974
|
-
}, mixins.placeholder(styled$
|
|
19990
|
+
}, mixins.placeholder(styled$b.css(["opacity:1;color:", ";"], function (props) {
|
|
19975
19991
|
return placeholderColor(props);
|
|
19976
19992
|
})), mixins.scrollbar(palette.grey.main, palette.base.white), palette.black.main, palette.primary.main, palette.primary.main, palette.base.white, palette.grey.main, palette.grey.main, function (props) {
|
|
19977
19993
|
return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(palette.error.main, "\n\t\t\t}\n\t\t");
|