@gympass/yoga 7.87.1 → 7.88.0

package/esm/Checkbox/web/Checkbox.js

@@ -1,51 +1,80 @@
-var _excluded = ["value", "label", "helper", "disabled", "checked", "error", "style", "className", "inverted", "indeterminate", "theme"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-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; }
-
-import React, { useEffect, useRef } from 'react';
-import { bool, string, shape, oneOfType, node } from 'prop-types';
-import styled, { withTheme } from 'styled-components';
-import { hexToRgb } from '@gympass/yoga-common';
-import { Check, Rectangle } from '@gympass/yoga-icons';
-import { HiddenInput } from '../../shared';
-var CheckboxWrapper = styled.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 CheckMark = styled.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;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { bool, string, shape, oneOfType, node } from "prop-types";
+import styled, { withTheme } from "styled-components";
+import { hexToRgb } from "@gympass/yoga-common";
+import { Check, Rectangle } from "@gympass/yoga-icons";
+import { HiddenInput } from "../../shared";
+const CheckboxWrapper = styled.div`
+  display: inline-block;
 
-  if (error) {
-    var _feedback$attention = feedback.attention;
-    borderColor = _feedback$attention[1];
+  * {
+    box-sizing: border-box;
+  }
 
+  ${({ disabled }) => disabled ? `cursor: not-allowed` : ""}
+`;
+const CheckMark = styled.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) {
+    [, 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;
@@ -54,7 +83,6 @@ var CheckMark = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
     borderColor = primary;
     bgColor = primary;
     checkColor = checkbox.checked.icon.color;
-
     if (inverted) {
       bgColor = white;
       borderColor = white;
@@ -64,111 +92,243 @@ var CheckMark = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
     borderColor = white;
     checkColor = primary;
   }
+  return `
+    width: ${checkbox.size}px;
+    height: ${checkbox.size}px;
+
+    margin-right: ${checkbox.margin.right}px;
+
+    background-color: ${bgColor};
+
+    border-radius: ${checkbox.border.radius}px;
+    border-width: ${checkbox.border.width}px;
+    border-color: ${borderColor};
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      fill: ${checkColor};
+
+      transform: translate(-50%, -50%);
+    }`;
+}}
+`;
+const Label = styled.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 = styled.span`
+  position: absolute;
+  display: none;
 
-  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    }";
-});
-var Label = styled.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  ";
-});
-var Shadow = styled.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  ";
-});
-var CheckboxStyled = styled.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() {
+  ${({
+  theme: {
+    yoga: {
+      components: { checkbox }
+    }
+  }
+}) => `
+    width: ${checkbox.size}px;
+    height: ${checkbox.size}px;
+    border-radius: ${checkbox.hover.border.radius}px;
+  `}
+`;
+const CheckboxStyled = styled.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 `
+      ${disabled ? `pointer-events: none` : ""}
+
+      ${Label}:active,
+      &:focus-within,
+      &:hover  {
+        ${Shadow} {
+          display: block;
+        }
+      }
+
+      &:hover {
+        ${Shadow} {
+          background-color: ${hexToRgb(shadowColor(), 0.25)};
+
+          box-shadow: 0 0 0 ${shadowSize}px
+            ${hexToRgb(shadowColor(), 0.25)};
+        }
+      }
+
+      &:focus-within {
+        ${Shadow} {
+          background-color: ${hexToRgb(shadowColor(), 0.5)};
+
+          box-shadow: 0 0 0 ${shadowSize}px
+            ${hexToRgb(shadowColor(), 0.5)};
+        }
+      }
+
+      ${Label}:active {
+        ${Shadow} {
+          background-color: ${hexToRgb(shadowColor(), 0.75)};
 
-  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: " + hexToRgb(shadowColor(), 0.25) + ";\n\n          box-shadow: 0 0 0 " + shadowSize + "px\n            " + hexToRgb(shadowColor(), 0.25) + ";\n        }\n      }\n\n      &:focus-within {\n        " + Shadow + " {\n          background-color: " + hexToRgb(shadowColor(), 0.5) + ";\n\n          box-shadow: 0 0 0 " + shadowSize + "px\n            " + hexToRgb(shadowColor(), 0.5) + ";\n        }\n      }\n\n      " + Label + ":active {\n        " + Shadow + " {\n          background-color: " + hexToRgb(shadowColor(), 0.75) + ";\n\n          box-shadow: 0 0 0 " + shadowSize + "px\n            " + hexToRgb(shadowColor(), 0.75) + ";\n        }\n      }\n    ";
-});
-var HelperWrapper = styled.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 = styled.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 = useRef(null);
-  useEffect(function () {
+          box-shadow: 0 0 0 ${shadowSize}px
+            ${hexToRgb(shadowColor(), 0.75)};
+        }
+      }
+    `;
+}}
+`;
+const HelperWrapper = styled.div`
+  width: 100%;
+
+  ${({
+  theme: {
+    yoga: {
+      components: { checkbox }
+    }
+  }
+}) => `
+    margin-top: ${checkbox.helper.margin.top}px;
+  `}
+`;
+const Helper = styled.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 = useRef(null);
+  useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
   });
-  return /*#__PURE__*/React.createElement(CheckboxWrapper, _extends({
-    style: style,
-    className: className,
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement(CheckboxStyled, {
-    checked: checked,
-    indeterminate: indeterminate,
-    inverted: inverted,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Shadow, null), /*#__PURE__*/React.createElement(CheckMark, {
-    disabled: disabled,
-    checked: checked,
-    error: error,
-    inverted: inverted,
-    indeterminate: indeterminate
-  }, checked && !indeterminate && /*#__PURE__*/React.createElement(Check, {
-    width: checkbox.size,
-    height: checkbox.size
-  }), indeterminate && /*#__PURE__*/React.createElement(Rectangle, {
-    width: checkbox.size,
-    height: checkbox.size
-  })), /*#__PURE__*/React.createElement(HiddenInput, _extends({
-    type: "checkbox",
-    ref: inputRef,
-    checked: checked,
-    disabled: disabled
-  }, value ? {
-    value: value
-  } : {}, rest)), label)), (helper || error) && /*#__PURE__*/React.createElement(HelperWrapper, null, /*#__PURE__*/React.createElement(Helper, {
-    error: error
-  }, error || helper)));
+  return /* @__PURE__ */ jsxs(
+    CheckboxWrapper,
+    __spreadProps(__spreadValues({
+      style,
+      className,
+      disabled
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx(
+          CheckboxStyled,
+          {
+            checked,
+            indeterminate,
+            inverted,
+            disabled,
+            children: /* @__PURE__ */ jsxs(Label, { children: [
+              /* @__PURE__ */ jsx(Shadow, {}),
+              /* @__PURE__ */ jsxs(
+                CheckMark,
+                __spreadProps(__spreadValues({}, {
+                  disabled,
+                  checked,
+                  error,
+                  inverted,
+                  indeterminate
+                }), {
+                  children: [
+                    checked && !indeterminate && /* @__PURE__ */ jsx(Check, { width: checkbox.size, height: checkbox.size }),
+                    indeterminate && /* @__PURE__ */ jsx(Rectangle, { width: checkbox.size, height: checkbox.size })
+                  ]
+                })
+              ),
+              /* @__PURE__ */ jsx(
+                HiddenInput,
+                __spreadValues(__spreadValues({
+                  type: "checkbox",
+                  ref: inputRef,
+                  checked,
+                  disabled
+                }, value ? { value } : {}), rest)
+              ),
+              label
+            ] })
+          }
+        ),
+        (helper || error) && /* @__PURE__ */ jsx(HelperWrapper, { children: /* @__PURE__ */ jsx(Helper, { error, children: error || helper }) })
+      ]
+    })
+  );
 };
-
 Checkbox.propTypes = {
   label: oneOfType([string, node]),
-
   /** short helper text under checkbox */
   helper: string,
   value: string,
@@ -176,25 +336,26 @@ Checkbox.propTypes = {
   disabled: bool,
   inverted: bool,
   error: string,
-
   /** if true, the component appears indeterminate */
   indeterminate: bool,
-
   /** set a style to the checkbox container */
   style: shape({}),
   className: 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 Checkbox_default = withTheme(Checkbox);
+export {
+  Checkbox_default as default
 };
-Checkbox.displayName = 'Checkbox';
-export default withTheme(Checkbox);