@bolio-ui/core 1.0.0 → 1.0.1
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/card/index.js +7 -5
- package/dist/index.js +26 -21
- package/dist/input/index.js +9 -8
- package/dist/snippet/index.js +10 -8
- package/esm/card/card.js +7 -5
- package/esm/input/input.js +9 -8
- package/esm/input/stories.js +32 -0
- package/esm/snippet/snippet.js +10 -8
- package/esm/snippet/stories.js +44 -0
- package/package.json +1 -1
package/dist/card/index.js
CHANGED
|
@@ -1211,12 +1211,14 @@ var ImageBrowser$1 = ImageBrowser;
|
|
|
1211
1211
|
|
|
1212
1212
|
Image$1.Browser = ImageBrowser$1;
|
|
1213
1213
|
|
|
1214
|
-
var _excluded = ["children", "hoverable", "className", "shadow", "type"];
|
|
1214
|
+
var _excluded = ["children", "hoverable", "rounded", "className", "shadow", "type"];
|
|
1215
1215
|
|
|
1216
1216
|
function CardComponent(_ref) {
|
|
1217
1217
|
var children = _ref.children,
|
|
1218
1218
|
_ref$hoverable = _ref.hoverable,
|
|
1219
1219
|
hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
|
|
1220
|
+
_ref$rounded = _ref.rounded,
|
|
1221
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
1220
1222
|
_ref$className = _ref.className,
|
|
1221
1223
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
1222
1224
|
_ref$shadow = _ref.shadow,
|
|
@@ -1254,13 +1256,13 @@ function CardComponent(_ref) {
|
|
|
1254
1256
|
|
|
1255
1257
|
var hasContent = hasChild(withoutImageChildren, CardContent$1);
|
|
1256
1258
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
|
|
1257
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1259
|
+
className: styledJsx_cjs.style.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
|
|
1258
1260
|
}), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, {
|
|
1259
1261
|
className: "card"
|
|
1260
1262
|
}, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
1261
|
-
id: "
|
|
1262
|
-
dynamic: [theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
|
|
1263
|
-
}, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
|
|
1263
|
+
id: "470877697",
|
|
1264
|
+
dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
|
|
1265
|
+
}, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
|
|
1264
1266
|
}
|
|
1265
1267
|
|
|
1266
1268
|
CardComponent.displayName = 'BolioUICard';
|
package/dist/index.js
CHANGED
|
@@ -3186,12 +3186,14 @@ var ImageBrowser$1 = ImageBrowser;
|
|
|
3186
3186
|
|
|
3187
3187
|
Image$1.Browser = ImageBrowser$1;
|
|
3188
3188
|
|
|
3189
|
-
var _excluded$10 = ["children", "hoverable", "className", "shadow", "type"];
|
|
3189
|
+
var _excluded$10 = ["children", "hoverable", "rounded", "className", "shadow", "type"];
|
|
3190
3190
|
|
|
3191
3191
|
function CardComponent(_ref) {
|
|
3192
3192
|
var children = _ref.children,
|
|
3193
3193
|
_ref$hoverable = _ref.hoverable,
|
|
3194
3194
|
hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
|
|
3195
|
+
_ref$rounded = _ref.rounded,
|
|
3196
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
3195
3197
|
_ref$className = _ref.className,
|
|
3196
3198
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
3197
3199
|
_ref$shadow = _ref.shadow,
|
|
@@ -3229,13 +3231,13 @@ function CardComponent(_ref) {
|
|
|
3229
3231
|
|
|
3230
3232
|
var hasContent = hasChild(withoutImageChildren, CardContent$1);
|
|
3231
3233
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
|
|
3232
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
3234
|
+
className: styledJsx_cjs.style.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
|
|
3233
3235
|
}), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, {
|
|
3234
3236
|
className: "card"
|
|
3235
3237
|
}, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
3236
|
-
id: "
|
|
3237
|
-
dynamic: [theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
|
|
3238
|
-
}, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
|
|
3238
|
+
id: "470877697",
|
|
3239
|
+
dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
|
|
3240
|
+
}, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
|
|
3239
3241
|
}
|
|
3240
3242
|
|
|
3241
3243
|
CardComponent.displayName = 'BolioUICard';
|
|
@@ -5302,7 +5304,7 @@ var defaultProps$2 = {
|
|
|
5302
5304
|
initialValue: ''
|
|
5303
5305
|
};
|
|
5304
5306
|
|
|
5305
|
-
var _excluded$B = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "backgroundColor"];
|
|
5307
|
+
var _excluded$B = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor"];
|
|
5306
5308
|
|
|
5307
5309
|
var simulateChangeEvent = function simulateChangeEvent(el, event) {
|
|
5308
5310
|
return _objectSpread2(_objectSpread2({}, event), {}, {
|
|
@@ -5333,6 +5335,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
5333
5335
|
placeholder = _ref.placeholder,
|
|
5334
5336
|
children = _ref.children,
|
|
5335
5337
|
disabled = _ref.disabled,
|
|
5338
|
+
rounded = _ref.rounded,
|
|
5336
5339
|
backgroundColor = _ref.backgroundColor,
|
|
5337
5340
|
props = _objectWithoutProperties(_ref, _excluded$B);
|
|
5338
5341
|
|
|
@@ -5426,11 +5429,11 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
5426
5429
|
var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
|
|
5427
5430
|
|
|
5428
5431
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5429
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
5432
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
|
|
5430
5433
|
}, children && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, null, children), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5431
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
5434
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
|
|
5432
5435
|
}, label && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, null, label), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5433
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
5436
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
|
|
5434
5437
|
hover: hover,
|
|
5435
5438
|
disabled: disabled
|
|
5436
5439
|
}, labelClasses) || "")
|
|
@@ -5447,7 +5450,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
5447
5450
|
onChange: changeHandler,
|
|
5448
5451
|
autoComplete: autoComplete
|
|
5449
5452
|
}, inputProps, {
|
|
5450
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
5453
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
|
|
5451
5454
|
disabled: disabled
|
|
5452
5455
|
}, iconClasses) || "")
|
|
5453
5456
|
})), clearable && /*#__PURE__*/React__default["default"].createElement(InputClearIcon, {
|
|
@@ -5459,9 +5462,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
5459
5462
|
}, iconProps))), labelRight && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, {
|
|
5460
5463
|
isRight: true
|
|
5461
5464
|
}, labelRight)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
5462
|
-
id: "
|
|
5463
|
-
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.
|
|
5464
|
-
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.
|
|
5465
|
+
id: "68057575",
|
|
5466
|
+
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
|
|
5467
|
+
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
|
|
5465
5468
|
});
|
|
5466
5469
|
InputComponent.defaultProps = defaultProps$2;
|
|
5467
5470
|
InputComponent.displayName = 'BolioUIInput';
|
|
@@ -8951,7 +8954,7 @@ var useToasts = function useToasts(layout) {
|
|
|
8951
8954
|
|
|
8952
8955
|
var useToasts$1 = useToasts;
|
|
8953
8956
|
|
|
8954
|
-
var _excluded$8 = ["type", "filled", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
|
|
8957
|
+
var _excluded$8 = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
|
|
8955
8958
|
|
|
8956
8959
|
var textArrayToString = function textArrayToString(text) {
|
|
8957
8960
|
return text.reduce(function (pre, current) {
|
|
@@ -8965,6 +8968,8 @@ function SnippetComponent(_ref) {
|
|
|
8965
8968
|
type = _ref$type === void 0 ? 'default' : _ref$type,
|
|
8966
8969
|
_ref$filled = _ref.filled,
|
|
8967
8970
|
filled = _ref$filled === void 0 ? false : _ref$filled,
|
|
8971
|
+
_ref$rounded = _ref.rounded,
|
|
8972
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
8968
8973
|
children = _ref.children,
|
|
8969
8974
|
_ref$symbol = _ref.symbol,
|
|
8970
8975
|
symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
|
|
@@ -9019,22 +9024,22 @@ function SnippetComponent(_ref) {
|
|
|
9019
9024
|
};
|
|
9020
9025
|
|
|
9021
9026
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
|
|
9022
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
9027
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses$1('snippet', className) || "")
|
|
9023
9028
|
}), isMultiLine ? text.map(function (t, index) {
|
|
9024
9029
|
return /*#__PURE__*/React__default["default"].createElement("pre", {
|
|
9025
9030
|
key: "snippet-".concat(index, "-").concat(t),
|
|
9026
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
9031
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
|
|
9027
9032
|
}, t);
|
|
9028
9033
|
}) : /*#__PURE__*/React__default["default"].createElement("pre", {
|
|
9029
9034
|
ref: ref,
|
|
9030
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
9035
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
|
|
9031
9036
|
}, children || text), showCopyIcon && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
9032
9037
|
onClick: clickHandler,
|
|
9033
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
9038
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
|
|
9034
9039
|
}, /*#__PURE__*/React__default["default"].createElement(SnippetIcon$1, null)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
9035
|
-
id: "
|
|
9036
|
-
dynamic: [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
|
|
9037
|
-
}, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
|
|
9040
|
+
id: "1826028201",
|
|
9041
|
+
dynamic: [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
|
|
9042
|
+
}, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
|
|
9038
9043
|
}
|
|
9039
9044
|
|
|
9040
9045
|
SnippetComponent.displayName = 'BolioUISnippet';
|
package/dist/input/index.js
CHANGED
|
@@ -892,7 +892,7 @@ var withScale$1 = withScale;
|
|
|
892
892
|
|
|
893
893
|
var useScale = useScale$1;
|
|
894
894
|
|
|
895
|
-
var _excluded$2 = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "backgroundColor"];
|
|
895
|
+
var _excluded$2 = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor"];
|
|
896
896
|
|
|
897
897
|
var simulateChangeEvent = function simulateChangeEvent(el, event) {
|
|
898
898
|
return _objectSpread2(_objectSpread2({}, event), {}, {
|
|
@@ -923,6 +923,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
923
923
|
placeholder = _ref.placeholder,
|
|
924
924
|
children = _ref.children,
|
|
925
925
|
disabled = _ref.disabled,
|
|
926
|
+
rounded = _ref.rounded,
|
|
926
927
|
backgroundColor = _ref.backgroundColor,
|
|
927
928
|
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
928
929
|
|
|
@@ -1016,11 +1017,11 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
1016
1017
|
var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
|
|
1017
1018
|
|
|
1018
1019
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1019
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1020
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
|
|
1020
1021
|
}, children && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, null, children), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1021
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1022
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
|
|
1022
1023
|
}, label && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, null, label), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1023
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1024
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
|
|
1024
1025
|
hover: hover,
|
|
1025
1026
|
disabled: disabled
|
|
1026
1027
|
}, labelClasses) || "")
|
|
@@ -1037,7 +1038,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
1037
1038
|
onChange: changeHandler,
|
|
1038
1039
|
autoComplete: autoComplete
|
|
1039
1040
|
}, inputProps, {
|
|
1040
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1041
|
+
className: styledJsx_cjs.style.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
|
|
1041
1042
|
disabled: disabled
|
|
1042
1043
|
}, iconClasses) || "")
|
|
1043
1044
|
})), clearable && /*#__PURE__*/React__default["default"].createElement(InputClearIcon, {
|
|
@@ -1049,9 +1050,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
1049
1050
|
}, iconProps))), labelRight && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, {
|
|
1050
1051
|
isRight: true
|
|
1051
1052
|
}, labelRight)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
1052
|
-
id: "
|
|
1053
|
-
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.
|
|
1054
|
-
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.
|
|
1053
|
+
id: "68057575",
|
|
1054
|
+
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
|
|
1055
|
+
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
|
|
1055
1056
|
});
|
|
1056
1057
|
InputComponent.defaultProps = defaultProps;
|
|
1057
1058
|
InputComponent.displayName = 'BolioUIInput';
|
package/dist/snippet/index.js
CHANGED
|
@@ -1114,7 +1114,7 @@ var useClasses = function useClasses() {
|
|
|
1114
1114
|
|
|
1115
1115
|
var useClasses$1 = useClasses;
|
|
1116
1116
|
|
|
1117
|
-
var _excluded = ["type", "filled", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
|
|
1117
|
+
var _excluded = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
|
|
1118
1118
|
|
|
1119
1119
|
var textArrayToString = function textArrayToString(text) {
|
|
1120
1120
|
return text.reduce(function (pre, current) {
|
|
@@ -1128,6 +1128,8 @@ function SnippetComponent(_ref) {
|
|
|
1128
1128
|
type = _ref$type === void 0 ? 'default' : _ref$type,
|
|
1129
1129
|
_ref$filled = _ref.filled,
|
|
1130
1130
|
filled = _ref$filled === void 0 ? false : _ref$filled,
|
|
1131
|
+
_ref$rounded = _ref.rounded,
|
|
1132
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
1131
1133
|
children = _ref.children,
|
|
1132
1134
|
_ref$symbol = _ref.symbol,
|
|
1133
1135
|
symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
|
|
@@ -1182,22 +1184,22 @@ function SnippetComponent(_ref) {
|
|
|
1182
1184
|
};
|
|
1183
1185
|
|
|
1184
1186
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
|
|
1185
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1187
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses$1('snippet', className) || "")
|
|
1186
1188
|
}), isMultiLine ? text.map(function (t, index) {
|
|
1187
1189
|
return /*#__PURE__*/React__default["default"].createElement("pre", {
|
|
1188
1190
|
key: "snippet-".concat(index, "-").concat(t),
|
|
1189
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1191
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
|
|
1190
1192
|
}, t);
|
|
1191
1193
|
}) : /*#__PURE__*/React__default["default"].createElement("pre", {
|
|
1192
1194
|
ref: ref,
|
|
1193
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1195
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
|
|
1194
1196
|
}, children || text), showCopyIcon && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1195
1197
|
onClick: clickHandler,
|
|
1196
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
1198
|
+
className: styledJsx_cjs.style.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
|
|
1197
1199
|
}, /*#__PURE__*/React__default["default"].createElement(SnippetIcon$1, null)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
1198
|
-
id: "
|
|
1199
|
-
dynamic: [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
|
|
1200
|
-
}, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
|
|
1200
|
+
id: "1826028201",
|
|
1201
|
+
dynamic: [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
|
|
1202
|
+
}, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
|
|
1201
1203
|
}
|
|
1202
1204
|
|
|
1203
1205
|
SnippetComponent.displayName = 'BolioUISnippet';
|
package/esm/card/card.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["children", "hoverable", "className", "shadow", "type"];
|
|
4
|
+
var _excluded = ["children", "hoverable", "rounded", "className", "shadow", "type"];
|
|
5
5
|
import _JSXStyle from "../styled-jsx.es.js";
|
|
6
6
|
import React, { useMemo } from 'react';
|
|
7
7
|
import useTheme from '../use-theme';
|
|
@@ -17,6 +17,8 @@ function CardComponent(_ref) {
|
|
|
17
17
|
var children = _ref.children,
|
|
18
18
|
_ref$hoverable = _ref.hoverable,
|
|
19
19
|
hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
|
|
20
|
+
_ref$rounded = _ref.rounded,
|
|
21
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
20
22
|
_ref$className = _ref.className,
|
|
21
23
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
22
24
|
_ref$shadow = _ref.shadow,
|
|
@@ -54,13 +56,13 @@ function CardComponent(_ref) {
|
|
|
54
56
|
|
|
55
57
|
var hasContent = hasChild(withoutImageChildren, CardContent);
|
|
56
58
|
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
|
|
57
|
-
className: _JSXStyle.dynamic([["
|
|
59
|
+
className: _JSXStyle.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
|
|
58
60
|
}), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, {
|
|
59
61
|
className: "card"
|
|
60
62
|
}, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
61
|
-
id: "
|
|
62
|
-
dynamic: [theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
|
|
63
|
-
}, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
|
|
63
|
+
id: "470877697",
|
|
64
|
+
dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
|
|
65
|
+
}, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
CardComponent.displayName = 'BolioUICard';
|
package/esm/input/input.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
-
var _excluded = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "backgroundColor"];
|
|
4
|
+
var _excluded = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor"];
|
|
5
5
|
import _JSXStyle from "../styled-jsx.es.js";
|
|
6
6
|
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
7
7
|
import useTheme from '../use-theme';
|
|
@@ -43,6 +43,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
43
43
|
placeholder = _ref.placeholder,
|
|
44
44
|
children = _ref.children,
|
|
45
45
|
disabled = _ref.disabled,
|
|
46
|
+
rounded = _ref.rounded,
|
|
46
47
|
backgroundColor = _ref.backgroundColor,
|
|
47
48
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
48
49
|
|
|
@@ -136,11 +137,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
136
137
|
var inputProps = _extends({}, props, controlledValue);
|
|
137
138
|
|
|
138
139
|
return /*#__PURE__*/React.createElement("div", {
|
|
139
|
-
className: _JSXStyle.dynamic([["
|
|
140
|
+
className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
|
|
140
141
|
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
|
|
141
|
-
className: _JSXStyle.dynamic([["
|
|
142
|
+
className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
|
|
142
143
|
}, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
|
|
143
|
-
className: _JSXStyle.dynamic([["
|
|
144
|
+
className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
|
|
144
145
|
hover: hover,
|
|
145
146
|
disabled: disabled
|
|
146
147
|
}, labelClasses) || "")
|
|
@@ -157,7 +158,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
157
158
|
onChange: changeHandler,
|
|
158
159
|
autoComplete: autoComplete
|
|
159
160
|
}, inputProps, {
|
|
160
|
-
className: _JSXStyle.dynamic([["
|
|
161
|
+
className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
|
|
161
162
|
disabled: disabled
|
|
162
163
|
}, iconClasses) || "")
|
|
163
164
|
})), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
|
|
@@ -169,9 +170,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
169
170
|
}, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
|
|
170
171
|
isRight: true
|
|
171
172
|
}, labelRight)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
172
|
-
id: "
|
|
173
|
-
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.
|
|
174
|
-
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.
|
|
173
|
+
id: "68057575",
|
|
174
|
+
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
|
|
175
|
+
}, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
|
|
175
176
|
});
|
|
176
177
|
InputComponent.defaultProps = defaultProps;
|
|
177
178
|
InputComponent.displayName = 'BolioUIInput';
|
package/esm/input/stories.js
CHANGED
|
@@ -84,6 +84,38 @@ export var Type = function Type() {
|
|
|
84
84
|
placeholder: "Info"
|
|
85
85
|
})));
|
|
86
86
|
};
|
|
87
|
+
export var Rounded = function Rounded() {
|
|
88
|
+
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
89
|
+
gap: 2
|
|
90
|
+
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
91
|
+
placeholder: "Default",
|
|
92
|
+
rounded: true
|
|
93
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
94
|
+
type: "primary",
|
|
95
|
+
placeholder: "Primary",
|
|
96
|
+
rounded: true
|
|
97
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
98
|
+
type: "secondary",
|
|
99
|
+
placeholder: "Secondary",
|
|
100
|
+
rounded: true
|
|
101
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
102
|
+
type: "success",
|
|
103
|
+
placeholder: "Success",
|
|
104
|
+
rounded: true
|
|
105
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
106
|
+
type: "warning",
|
|
107
|
+
placeholder: "Warning",
|
|
108
|
+
rounded: true
|
|
109
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
110
|
+
type: "error",
|
|
111
|
+
placeholder: "Error",
|
|
112
|
+
rounded: true
|
|
113
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input, {
|
|
114
|
+
type: "info",
|
|
115
|
+
placeholder: "Info",
|
|
116
|
+
rounded: true
|
|
117
|
+
})));
|
|
118
|
+
};
|
|
87
119
|
export var Icon = function Icon() {
|
|
88
120
|
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
89
121
|
gap: 2
|
package/esm/snippet/snippet.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["type", "filled", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
|
|
3
|
+
var _excluded = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
|
|
4
4
|
import _JSXStyle from "../styled-jsx.es.js";
|
|
5
5
|
import React, { useMemo, useRef } from 'react';
|
|
6
6
|
import useTheme from '../use-theme';
|
|
@@ -23,6 +23,8 @@ function SnippetComponent(_ref) {
|
|
|
23
23
|
type = _ref$type === void 0 ? 'default' : _ref$type,
|
|
24
24
|
_ref$filled = _ref.filled,
|
|
25
25
|
filled = _ref$filled === void 0 ? false : _ref$filled,
|
|
26
|
+
_ref$rounded = _ref.rounded,
|
|
27
|
+
rounded = _ref$rounded === void 0 ? false : _ref$rounded,
|
|
26
28
|
children = _ref.children,
|
|
27
29
|
_ref$symbol = _ref.symbol,
|
|
28
30
|
symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
|
|
@@ -77,22 +79,22 @@ function SnippetComponent(_ref) {
|
|
|
77
79
|
};
|
|
78
80
|
|
|
79
81
|
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
|
|
80
|
-
className: _JSXStyle.dynamic([["
|
|
82
|
+
className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses('snippet', className) || "")
|
|
81
83
|
}), isMultiLine ? text.map(function (t, index) {
|
|
82
84
|
return /*#__PURE__*/React.createElement("pre", {
|
|
83
85
|
key: "snippet-".concat(index, "-").concat(t),
|
|
84
|
-
className: _JSXStyle.dynamic([["
|
|
86
|
+
className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
|
|
85
87
|
}, t);
|
|
86
88
|
}) : /*#__PURE__*/React.createElement("pre", {
|
|
87
89
|
ref: ref,
|
|
88
|
-
className: _JSXStyle.dynamic([["
|
|
90
|
+
className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
|
|
89
91
|
}, children || text), showCopyIcon && /*#__PURE__*/React.createElement("div", {
|
|
90
92
|
onClick: clickHandler,
|
|
91
|
-
className: _JSXStyle.dynamic([["
|
|
93
|
+
className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
|
|
92
94
|
}, /*#__PURE__*/React.createElement(SnippetIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
93
|
-
id: "
|
|
94
|
-
dynamic: [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
|
|
95
|
-
}, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
|
|
95
|
+
id: "1826028201",
|
|
96
|
+
dynamic: [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
|
|
97
|
+
}, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
|
|
96
98
|
}
|
|
97
99
|
|
|
98
100
|
SnippetComponent.displayName = 'BolioUISnippet';
|
package/esm/snippet/stories.js
CHANGED
|
@@ -60,6 +60,50 @@ export var Types = function Types() {
|
|
|
60
60
|
width: "300px"
|
|
61
61
|
})));
|
|
62
62
|
};
|
|
63
|
+
export var Rounded = function Rounded() {
|
|
64
|
+
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
65
|
+
gap: 2
|
|
66
|
+
}, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
67
|
+
text: "yarn add @bolio-ui/core",
|
|
68
|
+
width: "300px",
|
|
69
|
+
rounded: true
|
|
70
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
71
|
+
text: "yarn add @bolio-ui/core",
|
|
72
|
+
type: "primary",
|
|
73
|
+
width: "300px",
|
|
74
|
+
rounded: true
|
|
75
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
76
|
+
text: "yarn add @bolio-ui/core",
|
|
77
|
+
type: "secondary",
|
|
78
|
+
width: "300px",
|
|
79
|
+
rounded: true
|
|
80
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
81
|
+
text: "yarn add @bolio-ui/core",
|
|
82
|
+
type: "success",
|
|
83
|
+
width: "300px",
|
|
84
|
+
rounded: true
|
|
85
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
86
|
+
text: "yarn add @bolio-ui/core",
|
|
87
|
+
type: "warning",
|
|
88
|
+
width: "300px",
|
|
89
|
+
rounded: true
|
|
90
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
91
|
+
text: "yarn add @bolio-ui/core",
|
|
92
|
+
type: "error",
|
|
93
|
+
width: "300px",
|
|
94
|
+
rounded: true
|
|
95
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
96
|
+
text: "yarn add @bolio-ui/core",
|
|
97
|
+
type: "lite",
|
|
98
|
+
width: "300px",
|
|
99
|
+
rounded: true
|
|
100
|
+
})), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
|
|
101
|
+
text: "yarn add @bolio-ui/core",
|
|
102
|
+
type: "dark",
|
|
103
|
+
width: "300px",
|
|
104
|
+
rounded: true
|
|
105
|
+
})));
|
|
106
|
+
};
|
|
63
107
|
export var Multiline = function Multiline() {
|
|
64
108
|
return /*#__PURE__*/React.createElement(Grid.Container, {
|
|
65
109
|
gap: 2
|