@heathmont/moon-components - npm Package Compare versions

Comparing version 2.34.1 to 2.34.2-alpha.3

lib/button/Button.js

@@ -72,3 +72,4 @@ "use strict";
     borderRadius: (0, _moonUtils.rem)(radius.largest),
-    transition: "background-color ".concat(transitionDuration["default"], "s")
+    transition: "background-color ".concat(transitionDuration["default"], "s"),
+    whiteSpace: 'nowrap'
   }, (0, _moonUtils.disabled)(opacity.disabled));
@@ -95,3 +96,3 @@ }, function (_ref2) {
     perspective: (0, _moonUtils.rem)(1000),
-    color: color.bulma[100],
+    color: color.goten[100],
     backgroundColor: color.chiChi[100]
@@ -176,3 +177,3 @@ }, (0, _states.buttonHover)({
     left: (0, _moonUtils.rem)(16),
-    top: (0, _moonUtils.rem)(11)
+    top: (0, _moonUtils.rem)(12)
   }, fullWidth && size === 'large' && {
@@ -212,3 +213,3 @@ position: 'absolute',
     right: (0, _moonUtils.rem)(16),
-    top: (0, _moonUtils.rem)(11)
+    top: (0, _moonUtils.rem)(12)
   }, fullWidth && size === 'large' && {
@@ -215,0 +216,0 @@ position: 'absolute',

lib/card/Card.js

@@ -58,3 +58,3 @@ "use strict";
     display: 'block',
-    minHeight: (0, _moonUtils.rem)(170)
+    minHeight: (0, _moonUtils.rem)(168)
   }, (0, _padding["default"])((0, _moonUtils.rem)(space["default"]), (0, _moonUtils.rem)(space.medium))), {}, {
@@ -61,0 +61,0 @@ position: 'relative',

lib/cardBalance/CardBalance.js

@@ -36,3 +36,3 @@ "use strict";
   margin: 0,
-  fontSize: (0, _moonUtils.rem)(31),
+  fontSize: (0, _moonUtils.rem)(32),
   lineHeight: (0, _moonUtils.rem)(38)
@@ -39,0 +39,0 @@ });

lib/checkbox/Checkbox.js

@@ -106,4 +106,4 @@ "use strict";
     '&::after': {
-      border: "".concat((0, _settings.inputBorderWidth)(theme), "px solid ").concat(theme.color.trunks[100]),
-      borderRadius: (0, _moonUtils.rem)(theme.radius.small),
+      border: "".concat((0, _moonUtils.rem)(2), " solid ").concat(theme.color.trunks[100]),
+      borderRadius: (0, _moonUtils.rem)(2),
       backgroundColor: 'transparent',
@@ -128,2 +128,13 @@ transitionProperty: 'border-color'
   return _objectSpread(_objectSpread({}, (0, _hideVisually["default"])()), {}, {
+    '& + span': {
+      cursor: 'pointer',
+      '&::after': {
+        backgroundImage: (0, _moonUtils.inlineSvg)( /*#__PURE__*/_react["default"].createElement(_icon.CheckboxIcon, {
+          color: theme.color.goten[100]
+        })),
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundSize: 0
+      }
+    },
     '&:hover:enabled, &:focus:enabled': {
@@ -137,3 +148,3 @@ /* Show the Pseudo Checkbox Circle */
         opacity: 0.1,
-        backgroundColor: theme.color.piccolo[80]
+        backgroundColor: theme.color.piccolo[100]
         /* [1] */
@@ -151,7 +162,3 @@
     '&:checked + span::after': {
-      backgroundImage: (0, _moonUtils.inlineSvg)( /*#__PURE__*/_react["default"].createElement(_icon.CheckboxIcon, {
-        color: theme.color.piccolo[100]
-      })),
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
+      backgroundColor: theme.color.piccolo[100],
       backgroundSize: (0, _moonUtils.rem)(10),
@@ -161,7 +168,4 @@ borderColor: theme.color.piccolo[100]
     '&[disabled] + span': {
-      color: (0, _settings.inputColors)('disabled')(theme),
-      cursor: 'not-allowed',
-      '&::after': {
-        borderColor: (0, _settings.inputColors)('disabled')(theme)
-      }
+      opacity: 0.5,
+      cursor: 'not-allowed'
     }
@@ -190,3 +194,3 @@ });
     type: "checkbox",
-    "aria-label": ariaLabel && ariaLabel
+    "aria-label": ariaLabel
   }, inputProps)), /*#__PURE__*/_react["default"].createElement(CheckboxCaption, null, label));
@@ -193,0 +197,0 @@ };

lib/datepicker/private/Day.js

@@ -43,3 +43,3 @@ "use strict";
       border: "1px solid ".concat(theme.color.trunks[100]),
-      borderRadius: (0, _polished.rem)(3)
+      borderRadius: (0, _polished.rem)(4)
     }
@@ -50,3 +50,3 @@ }, (isInRange || isInRangePreview) && {
     background: theme.color.piccolo[100],
-    borderRadius: (0, _polished.rem)(3),
+    borderRadius: (0, _polished.rem)(4),
     color: theme.color.bulma[100]
@@ -53,0 +53,0 @@ }, isToday && {

lib/datepicker/private/InputsPanel.js

@@ -72,3 +72,3 @@ "use strict";
   return _defineProperty({}, (0, _moonUtils.mq)(breakpoint.medium), {
-    maxWidth: (0, _polished.rem)(230)
+    maxWidth: (0, _polished.rem)(228)
   });
@@ -75,0 +75,0 @@ });

lib/datepicker/private/Picker.js

@@ -60,3 +60,3 @@ "use strict";
   gridArea: 'firstMonth',
-  maxWidth: (0, _polished.rem)(238),
+  maxWidth: (0, _polished.rem)(236),
   position: 'relative'
@@ -70,3 +70,3 @@ });
   gridArea: 'secondMonth',
-  maxWidth: (0, _polished.rem)(238),
+  maxWidth: (0, _polished.rem)(236),
   position: 'relative'
@@ -84,3 +84,3 @@ });
     position: 'absolute',
-    left: (0, _polished.rem)(15),
+    left: (0, _polished.rem)(16),
     fontSize: (0, _polished.rem)(16),
@@ -99,3 +99,3 @@ top: (0, _polished.rem)(2)
     position: 'absolute',
-    right: (0, _polished.rem)(15),
+    right: (0, _polished.rem)(16),
     fontSize: (0, _polished.rem)(16),
@@ -102,0 +102,0 @@ top: (0, _polished.rem)(2)

lib/datepicker/types/config.d.ts

@@ -10,4 +10,4 @@ import { WeekStartsOn } from './weekStartsOn';
     without24AndToday?: boolean;
-    locale?: Locale;
+    locale?: any;
 }
 //# sourceMappingURL=config.d.ts.map

lib/es/button/Button.js

@@ -61,3 +61,4 @@ import _styled6 from "styled-components";
     borderRadius: rem(radius.largest),
-    transition: "background-color ".concat(transitionDuration["default"], "s")
+    transition: "background-color ".concat(transitionDuration["default"], "s"),
+    whiteSpace: 'nowrap'
   }, disabled(opacity.disabled));
@@ -84,3 +85,3 @@ }, function (_ref2) {
     perspective: rem(1000),
-    color: color.bulma[100],
+    color: color.goten[100],
     backgroundColor: color.chiChi[100]
@@ -163,3 +164,3 @@ }, buttonHover({
     left: rem(16),
-    top: rem(11)
+    top: rem(12)
   }, fullWidth && size === 'large' && {
@@ -198,3 +199,3 @@ position: 'absolute',
     right: rem(16),
-    top: rem(11)
+    top: rem(12)
   }, fullWidth && size === 'large' && {
@@ -201,0 +202,0 @@ position: 'absolute',

lib/es/card/Card.js

@@ -45,3 +45,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
     display: 'block',
-    minHeight: rem(170)
+    minHeight: rem(168)
   }, padding(rem(space["default"]), rem(space.medium))), {}, {
@@ -48,0 +48,0 @@ position: 'relative',

lib/es/cardBalance/CardBalance.js

@@ -23,3 +23,3 @@ import React from 'react';
   margin: 0,
-  fontSize: rem(31),
+  fontSize: rem(32),
   lineHeight: rem(38)
@@ -26,0 +26,0 @@ });

lib/es/checkbox/Checkbox.js

@@ -91,4 +91,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     '&::after': {
-      border: "".concat(inputBorderWidth(theme), "px solid ").concat(theme.color.trunks[100]),
-      borderRadius: rem(theme.radius.small),
+      border: "".concat(rem(2), " solid ").concat(theme.color.trunks[100]),
+      borderRadius: rem(2),
       backgroundColor: 'transparent',
@@ -112,2 +112,13 @@ transitionProperty: 'border-color'
   return _objectSpread(_objectSpread({}, hideVisually()), {}, {
+    '& + span': {
+      cursor: 'pointer',
+      '&::after': {
+        backgroundImage: inlineSvg( /*#__PURE__*/React.createElement(CheckboxIcon, {
+          color: theme.color.goten[100]
+        })),
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundSize: 0
+      }
+    },
     '&:hover:enabled, &:focus:enabled': {
@@ -121,3 +132,3 @@ /* Show the Pseudo Checkbox Circle */
         opacity: 0.1,
-        backgroundColor: theme.color.piccolo[80]
+        backgroundColor: theme.color.piccolo[100]
         /* [1] */
@@ -135,7 +146,3 @@
     '&:checked + span::after': {
-      backgroundImage: inlineSvg( /*#__PURE__*/React.createElement(CheckboxIcon, {
-        color: theme.color.piccolo[100]
-      })),
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center',
+      backgroundColor: theme.color.piccolo[100],
       backgroundSize: rem(10),
@@ -145,7 +152,4 @@ borderColor: theme.color.piccolo[100]
     '&[disabled] + span': {
-      color: inputColors('disabled')(theme),
-      cursor: 'not-allowed',
-      '&::after': {
-        borderColor: inputColors('disabled')(theme)
-      }
+      opacity: 0.5,
+      cursor: 'not-allowed'
     }
@@ -173,3 +177,3 @@ });
     type: "checkbox",
-    "aria-label": ariaLabel && ariaLabel
+    "aria-label": ariaLabel
   }, inputProps)), /*#__PURE__*/React.createElement(CheckboxCaption, null, label));
@@ -176,0 +180,0 @@ };

lib/es/datepicker/private/Day.js

@@ -30,3 +30,3 @@ import React from 'react';
       border: "1px solid ".concat(theme.color.trunks[100]),
-      borderRadius: rem(3)
+      borderRadius: rem(4)
     }
@@ -37,3 +37,3 @@ }, (isInRange || isInRangePreview) && {
     background: theme.color.piccolo[100],
-    borderRadius: rem(3),
+    borderRadius: rem(4),
     color: theme.color.bulma[100]
@@ -40,0 +40,0 @@ }, isToday && {

lib/es/datepicker/private/InputsPanel.js

@@ -53,3 +53,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
   return _defineProperty({}, mq(breakpoint.medium), {
-    maxWidth: rem(230)
+    maxWidth: rem(228)
   });
@@ -56,0 +56,0 @@ });

lib/es/datepicker/private/Picker.js

@@ -40,3 +40,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   gridArea: 'firstMonth',
-  maxWidth: rem(238),
+  maxWidth: rem(236),
   position: 'relative'
@@ -49,3 +49,3 @@ });
   gridArea: 'secondMonth',
-  maxWidth: rem(238),
+  maxWidth: rem(236),
   position: 'relative'
@@ -62,3 +62,3 @@ });
     position: 'absolute',
-    left: rem(15),
+    left: rem(16),
     fontSize: rem(16),
@@ -77,3 +77,3 @@ top: rem(2)
     position: 'absolute',
-    right: rem(15),
+    right: rem(16),
     fontSize: rem(16),
@@ -80,0 +80,0 @@ top: rem(2)

lib/es/header/Header.js

@@ -37,7 +37,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
     fontSize: rem(20),
-    lineHeight: rem(25),
+    lineHeight: rem(24),
     fontWeight: fontWeight.semibold
   }, mq(breakpoint.small), {
     fontSize: rem(32),
-    lineHeight: rem(39)
+    lineHeight: rem(40)
   });
@@ -44,0 +44,0 @@ });

lib/header/Header.js

@@ -48,7 +48,7 @@ "use strict";
     fontSize: (0, _moonUtils.rem)(20),
-    lineHeight: (0, _moonUtils.rem)(25),
+    lineHeight: (0, _moonUtils.rem)(24),
     fontWeight: fontWeight.semibold
   }, (0, _moonUtils.mq)(breakpoint.small), {
     fontSize: (0, _moonUtils.rem)(32),
-    lineHeight: (0, _moonUtils.rem)(39)
+    lineHeight: (0, _moonUtils.rem)(40)
   });
@@ -55,0 +55,0 @@ });

package.json

 {
   "name": "@heathmont/moon-components",
   "sideEffects": false,
-  "version": "2.34.1",
+  "version": "2.34.2-alpha.3+332a2736",
   "files": [
@@ -18,5 +18,5 @@ "lib"
   "dependencies": {
-    "@heathmont/moon-assets": "^2.34.1",
-    "@heathmont/moon-themes": "^2.34.1",
-    "@heathmont/moon-utils": "^2.34.1",
+    "@heathmont/moon-assets": "^2.34.2-alpha.3+332a2736",
+    "@heathmont/moon-themes": "^2.34.2-alpha.3+332a2736",
+    "@heathmont/moon-utils": "^2.34.2-alpha.3+332a2736",
     "@reach/dialog": "0.3.0",
@@ -39,3 +39,3 @@ "@types/date-fns": "2.6.0",
   },
-  "gitHead": "4624782e9215f7b233c0bf3ec07c807b8f31993f"
+  "gitHead": "332a27362a0c434f8ac5397fef15bea5200a7938"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2223419

increased by12.1%

Number of package files

1039

increased by28.75%

Lines of code

23215

increased by15.1%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@heathmont/moon-assets@^2.34.2-alpha.3+332a2736

• Updated@heathmont/moon-themes@^2.34.2-alpha.3+332a2736

• Updated@heathmont/moon-utils@^2.34.2-alpha.3+332a2736