@gympass/yoga 7.87.0 → 7.88.0

package/cjs/Checkbox/web/Checkbox.js

@@ -1,67 +1,111 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _yogaCommon = require("@gympass/yoga-common");
-
-var _yogaIcons = require("@gympass/yoga-icons");
-
-var _shared = require("../../shared");
-
-var _excluded = ["value", "label", "helper", "disabled", "checked", "error", "style", "className", "inverted", "indeterminate", "theme"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var CheckboxWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? "cursor: not-allowed" : '';
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  default: () => Checkbox_default
 });
+module.exports = __toCommonJS(Checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_prop_types = require("prop-types");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_common = require("@gympass/yoga-common");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_shared = require("../../shared");
+const CheckboxWrapper = import_styled_components.default.div`
+  display: inline-block;
+
+  * {
+    box-sizing: border-box;
+  }
 
-var CheckMark = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  border-style: solid;\n\n  flex-shrink: 0;\n\n  ", "\n"])), function (_ref2) {
-  var checked = _ref2.checked,
-      disabled = _ref2.disabled,
-      inverted = _ref2.inverted,
-      error = _ref2.error,
-      indeterminate = _ref2.indeterminate,
-      _ref2$theme$yoga = _ref2.theme.yoga,
-      _ref2$theme$yoga$colo = _ref2$theme$yoga.colors,
-      primary = _ref2$theme$yoga$colo.primary,
-      feedback = _ref2$theme$yoga$colo.feedback,
-      elements = _ref2$theme$yoga$colo.elements,
-      white = _ref2$theme$yoga$colo.white,
-      checkbox = _ref2$theme$yoga.components.checkbox;
-  var borderColor = elements.selectionAndIcons;
-  var bgColor = 'transparent';
-  var checkColor = checkbox.checked.icon.color;
-
+  ${({ disabled }) => disabled ? `cursor: not-allowed` : ""}
+`;
+const CheckMark = import_styled_components.default.div`
+  position: relative;
+
+  border-style: solid;
+
+  flex-shrink: 0;
+
+  ${({
+  checked,
+  disabled,
+  inverted,
+  error,
+  indeterminate,
+  theme: {
+    yoga: {
+      colors: { primary, feedback, elements, white },
+      components: { checkbox }
+    }
+  }
+}) => {
+  let borderColor = elements.selectionAndIcons;
+  let bgColor = "transparent";
+  let checkColor = checkbox.checked.icon.color;
   if (error) {
-    var _feedback$attention = feedback.attention;
-    borderColor = _feedback$attention[1];
-
+    [, borderColor] = feedback.attention;
     if (checked || indeterminate) {
-      var _feedback$attention2 = feedback.attention;
-      bgColor = _feedback$attention2[1];
+      [, bgColor] = feedback.attention;
     }
   } else if (disabled) {
     borderColor = checkbox.disabled.border.color;
-
     if (checked || indeterminate) {
       bgColor = checkbox.disabled.backgroundColor;
       borderColor = elements.lineAndBorders;
@@ -70,7 +114,6 @@ var CheckMark = _styledComponents["default"].div(_templateObject2 || (_templateO
     borderColor = primary;
     bgColor = primary;
     checkColor = checkbox.checked.icon.color;
-
     if (inverted) {
       bgColor = white;
       borderColor = white;
@@ -80,146 +123,267 @@ var CheckMark = _styledComponents["default"].div(_templateObject2 || (_templateO
     borderColor = white;
     checkColor = primary;
   }
+  return `
+    width: ${checkbox.size}px;
+    height: ${checkbox.size}px;
 
-  return "\n    width: " + checkbox.size + "px;\n    height: " + checkbox.size + "px;\n\n    margin-right: " + checkbox.margin.right + "px;\n\n    background-color: " + bgColor + ";\n\n    border-radius: " + checkbox.border.radius + "px;\n    border-width: " + checkbox.border.width + "px;\n    border-color: " + borderColor + ";\n\n    svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      fill: " + checkColor + ";\n\n      transform: translate(-50%, -50%);\n    }";
-});
+    margin-right: ${checkbox.margin.right}px;
 
-var Label = _styledComponents["default"].label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  cursor: pointer;\n\n  ", "\n"])), function (_ref3) {
-  var checkbox = _ref3.theme.yoga.components.checkbox;
-  return "\n    font-size: " + checkbox.label.font.size + "px;\n    color: " + checkbox.label.font.color + ";\n  ";
-});
+    background-color: ${bgColor};
 
-var Shadow = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: none;\n\n  ", "\n"])), function (_ref4) {
-  var checkbox = _ref4.theme.yoga.components.checkbox;
-  return "\n    width: " + checkbox.size + "px;\n    height: " + checkbox.size + "px;\n    border-radius: " + checkbox.hover.border.radius + "px;\n  ";
-});
+    border-radius: ${checkbox.border.radius}px;
+    border-width: ${checkbox.border.width}px;
+    border-color: ${borderColor};
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      fill: ${checkColor};
 
-var CheckboxStyled = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ", "\n"])), function (_ref5) {
-  var checked = _ref5.checked,
-      inverted = _ref5.inverted,
-      disabled = _ref5.disabled,
-      indeterminate = _ref5.indeterminate,
-      _ref5$theme$yoga = _ref5.theme.yoga,
-      _ref5$theme$yoga$colo = _ref5$theme$yoga.colors,
-      primary = _ref5$theme$yoga$colo.primary,
-      elements = _ref5$theme$yoga$colo.elements,
-      white = _ref5$theme$yoga$colo.white,
-      checkbox = _ref5$theme$yoga.components.checkbox;
-  var shadowSize = Math.round(checkbox.size * 0.33);
-
-  var shadowColor = function shadowColor() {
+      transform: translate(-50%, -50%);
+    }`;
+}}
+`;
+const Label = import_styled_components.default.label`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  cursor: pointer;
+
+  ${({
+  theme: {
+    yoga: {
+      components: { checkbox }
+    }
+  }
+}) => `
+    font-size: ${checkbox.label.font.size}px;
+    color: ${checkbox.label.font.color};
+  `}
+`;
+const Shadow = import_styled_components.default.span`
+  position: absolute;
+  display: none;
+
+  ${({
+  theme: {
+    yoga: {
+      components: { checkbox }
+    }
+  }
+}) => `
+    width: ${checkbox.size}px;
+    height: ${checkbox.size}px;
+    border-radius: ${checkbox.hover.border.radius}px;
+  `}
+`;
+const CheckboxStyled = import_styled_components.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  ${({
+  checked,
+  inverted,
+  disabled,
+  indeterminate,
+  theme: {
+    yoga: {
+      colors: { primary, elements, white },
+      components: { checkbox }
+    }
+  }
+}) => {
+  const shadowSize = Math.round(checkbox.size * 0.33);
+  const shadowColor = () => {
     if (inverted) {
       return white;
     }
-
     return checked || indeterminate ? primary : elements.backgroundAndDisabled;
   };
-
-  return "\n      " + (disabled ? "pointer-events: none" : '') + "\n\n      " + Label + ":active,\n      &:focus-within,\n      &:hover  {\n        " + Shadow + " {\n          display: block;\n        }\n      }\n\n      &:hover {\n        " + Shadow + " {\n          background-color: " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.25) + ";\n\n          box-shadow: 0 0 0 " + shadowSize + "px\n            " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.25) + ";\n        }\n      }\n\n      &:focus-within {\n        " + Shadow + " {\n          background-color: " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.5) + ";\n\n          box-shadow: 0 0 0 " + shadowSize + "px\n            " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.5) + ";\n        }\n      }\n\n      " + Label + ":active {\n        " + Shadow + " {\n          background-color: " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.75) + ";\n\n          box-shadow: 0 0 0 " + shadowSize + "px\n            " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.75) + ";\n        }\n      }\n    ";
-});
-
-var HelperWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  ", "\n"])), function (_ref6) {
-  var checkbox = _ref6.theme.yoga.components.checkbox;
-  return "\n    margin-top: " + checkbox.helper.margin.top + "px;\n  ";
-});
-
-var Helper = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
-  var error = _ref7.error,
-      _ref7$theme$yoga = _ref7.theme.yoga,
-      feedback = _ref7$theme$yoga.colors.feedback,
-      checkbox = _ref7$theme$yoga.components.checkbox;
-  return "\n    color: " + (error ? feedback.attention[1] : checkbox.helper.font.color) + ";\n\n    font-size: " + checkbox.helper.font.size + "px;\n  ";
-});
-/** The checkbox component is used when the user needs to select one or more
- * items on a task. This component can also allow the user to turn an option on
- * or off.  */
-
-
-var Checkbox = function Checkbox(_ref8) {
-  var value = _ref8.value,
-      label = _ref8.label,
-      helper = _ref8.helper,
-      disabled = _ref8.disabled,
-      checked = _ref8.checked,
-      error = _ref8.error,
-      style = _ref8.style,
-      className = _ref8.className,
-      inverted = _ref8.inverted,
-      indeterminate = _ref8.indeterminate,
-      checkbox = _ref8.theme.yoga.components.checkbox,
-      rest = _objectWithoutPropertiesLoose(_ref8, _excluded);
-
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  return `
+      ${disabled ? `pointer-events: none` : ""}
+
+      ${Label}:active,
+      &:focus-within,
+      &:hover  {
+        ${Shadow} {
+          display: block;
+        }
+      }
+
+      &:hover {
+        ${Shadow} {
+          background-color: ${(0, import_yoga_common.hexToRgb)(shadowColor(), 0.25)};
+
+          box-shadow: 0 0 0 ${shadowSize}px
+            ${(0, import_yoga_common.hexToRgb)(shadowColor(), 0.25)};
+        }
+      }
+
+      &:focus-within {
+        ${Shadow} {
+          background-color: ${(0, import_yoga_common.hexToRgb)(shadowColor(), 0.5)};
+
+          box-shadow: 0 0 0 ${shadowSize}px
+            ${(0, import_yoga_common.hexToRgb)(shadowColor(), 0.5)};
+        }
+      }
+
+      ${Label}:active {
+        ${Shadow} {
+          background-color: ${(0, import_yoga_common.hexToRgb)(shadowColor(), 0.75)};
+
+          box-shadow: 0 0 0 ${shadowSize}px
+            ${(0, import_yoga_common.hexToRgb)(shadowColor(), 0.75)};
+        }
+      }
+    `;
+}}
+`;
+const HelperWrapper = import_styled_components.default.div`
+  width: 100%;
+
+  ${({
+  theme: {
+    yoga: {
+      components: { checkbox }
+    }
+  }
+}) => `
+    margin-top: ${checkbox.helper.margin.top}px;
+  `}
+`;
+const Helper = import_styled_components.default.span`
+  ${({
+  error,
+  theme: {
+    yoga: {
+      colors: { feedback },
+      components: { checkbox }
+    }
+  }
+}) => `
+    color: ${error ? feedback.attention[1] : checkbox.helper.font.color};
+
+    font-size: ${checkbox.helper.font.size}px;
+  `}
+`;
+const Checkbox = (_a) => {
+  var _b = _a, {
+    value,
+    label,
+    helper,
+    disabled,
+    checked,
+    error,
+    style,
+    className,
+    inverted,
+    indeterminate,
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "label",
+    "helper",
+    "disabled",
+    "checked",
+    "error",
+    "style",
+    "className",
+    "inverted",
+    "indeterminate",
+    "theme"
+  ]);
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
   });
-  return /*#__PURE__*/_react["default"].createElement(CheckboxWrapper, _extends({
-    style: style,
-    className: className,
-    disabled: disabled
-  }, rest), /*#__PURE__*/_react["default"].createElement(CheckboxStyled, {
-    checked: checked,
-    indeterminate: indeterminate,
-    inverted: inverted,
-    disabled: disabled
-  }, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(Shadow, null), /*#__PURE__*/_react["default"].createElement(CheckMark, {
-    disabled: disabled,
-    checked: checked,
-    error: error,
-    inverted: inverted,
-    indeterminate: indeterminate
-  }, checked && !indeterminate && /*#__PURE__*/_react["default"].createElement(_yogaIcons.Check, {
-    width: checkbox.size,
-    height: checkbox.size
-  }), indeterminate && /*#__PURE__*/_react["default"].createElement(_yogaIcons.Rectangle, {
-    width: checkbox.size,
-    height: checkbox.size
-  })), /*#__PURE__*/_react["default"].createElement(_shared.HiddenInput, _extends({
-    type: "checkbox",
-    ref: inputRef,
-    checked: checked,
-    disabled: disabled
-  }, value ? {
-    value: value
-  } : {}, rest)), label)), (helper || error) && /*#__PURE__*/_react["default"].createElement(HelperWrapper, null, /*#__PURE__*/_react["default"].createElement(Helper, {
-    error: error
-  }, error || helper)));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    CheckboxWrapper,
+    __spreadProps(__spreadValues({
+      style,
+      className,
+      disabled
+    }, rest), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CheckboxStyled,
+          {
+            checked,
+            indeterminate,
+            inverted,
+            disabled,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shadow, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                CheckMark,
+                __spreadProps(__spreadValues({}, {
+                  disabled,
+                  checked,
+                  error,
+                  inverted,
+                  indeterminate
+                }), {
+                  children: [
+                    checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Check, { width: checkbox.size, height: checkbox.size }),
+                    indeterminate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Rectangle, { width: checkbox.size, height: checkbox.size })
+                  ]
+                })
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_shared.HiddenInput,
+                __spreadValues(__spreadValues({
+                  type: "checkbox",
+                  ref: inputRef,
+                  checked,
+                  disabled
+                }, value ? { value } : {}), rest)
+              ),
+              label
+            ] })
+          }
+        ),
+        (helper || error) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelperWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Helper, { error, children: error || helper }) })
+      ]
+    })
+  );
 };
-
 Checkbox.propTypes = {
-  label: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]),
-
+  label: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.node]),
   /** short helper text under checkbox */
-  helper: _propTypes.string,
-  value: _propTypes.string,
-  checked: _propTypes.bool,
-  disabled: _propTypes.bool,
-  inverted: _propTypes.bool,
-  error: _propTypes.string,
-
+  helper: import_prop_types.string,
+  value: import_prop_types.string,
+  checked: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  inverted: import_prop_types.bool,
+  error: import_prop_types.string,
   /** if true, the component appears indeterminate */
-  indeterminate: _propTypes.bool,
-
+  indeterminate: import_prop_types.bool,
   /** set a style to the checkbox container */
-  style: (0, _propTypes.shape)({}),
-  className: _propTypes.string
+  style: (0, import_prop_types.shape)({}),
+  className: import_prop_types.string
 };
 Checkbox.defaultProps = {
-  label: undefined,
-  value: undefined,
-  helper: undefined,
+  label: void 0,
+  value: void 0,
+  helper: void 0,
   checked: false,
   disabled: false,
   inverted: false,
   indeterminate: false,
-  error: undefined,
-  style: undefined,
-  className: undefined
+  error: void 0,
+  style: void 0,
+  className: void 0
 };
-Checkbox.displayName = 'Checkbox';
-
-var _default = (0, _styledComponents.withTheme)(Checkbox);
-
-exports["default"] = _default;
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = (0, import_styled_components.withTheme)(Checkbox);