@gympass/yoga 7.87.1 → 7.88.1

package/esm/Banner/web/Banner.js

@@ -1,127 +1,163 @@
-var _excluded = ["button"],
-    _excluded2 = ["icon", "variant", "message", "primaryButton", "secondaryButton"];
-
-var _templateObject;
-
-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; }
+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, { forwardRef } from "react";
+import styled from "styled-components";
+import { borders, margins, paddings } from "@gympass/yoga-system";
+import {
+  checkPropTypes,
+  elementType,
+  element,
+  func,
+  oneOf,
+  oneOfType,
+  shape,
+  string
+} from "prop-types";
+import Box from "../../Box";
+import Button from "../../Button";
+import Icon from "../../Icon";
+import Text from "../../Text";
+const StyledBanner = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  ${({
+  variant,
+  theme: {
+    yoga: {
+      components: { banner },
+      spacing,
+      colors: {
+        feedback: {
+          [variant]: backgroundColor = {
+            light: banner.defaultBackgroundColor
+          }
+        }
+      }
+    }
+  }
+}) => `
+    background-color: ${backgroundColor.light};
+    padding: ${spacing.xxsmall}px
+      ${spacing.small}px;
+    border-radius: ${banner.border.radius}px;
+  `}
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  ${margins}
 
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { borders, margins, paddings } from '@gympass/yoga-system';
-import { checkPropTypes, elementType, element, func, oneOf, oneOfType, shape, string } from 'prop-types';
-import Box from '../../Box';
-import Button from '../../Button';
-import Icon from '../../Icon';
-import Text from '../../Text';
-var StyledBanner = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      _ref$theme$yoga = _ref.theme.yoga,
-      banner = _ref$theme$yoga.components.banner,
-      spacing = _ref$theme$yoga.spacing,
-      _ref$theme$yoga$color = _ref$theme$yoga.colors.feedback[variant],
-      backgroundColor = _ref$theme$yoga$color === void 0 ? {
-    light: banner.defaultBackgroundColor
-  } : _ref$theme$yoga$color;
-  return "\n    background-color: " + backgroundColor.light + ";\n    padding: " + spacing.xxsmall + "px\n      " + spacing.small + "px;\n    border-radius: " + banner.border.radius + "px;\n  ";
-}, margins, paddings, borders);
-var BannerActionButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _ref2$button = _ref2.button,
-      label = _ref2$button.label,
-      action = _ref2$button.action,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  ${paddings}
 
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: Button.Text,
-    small: true,
-    secondary: true,
-    onClick: action,
-    ref: ref
-  }, props), label);
-});
+  ${borders}
+`;
+const BannerActionButton = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { button: { label, action } } = _b, props = __objRest(_b, ["button"]);
+    return /* @__PURE__ */ jsx(Box, __spreadProps(__spreadValues({ as: Button.Text, small: true, secondary: true, onClick: action, ref }, props), { children: label }));
+  }
+);
 BannerActionButton.propTypes = {
   button: shape({
     label: string.isRequired,
     action: func.isRequired
   }).isRequired
 };
-/** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
-
-var Banner = /*#__PURE__*/forwardRef(function (props, ref) {
-  var icon = props.icon,
-      variant = props.variant,
-      message = props.message,
-      primaryButton = props.primaryButton,
-      secondaryButton = props.secondaryButton,
-      rest = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  return /*#__PURE__*/React.createElement(StyledBanner, _extends({
-    ref: ref,
-    variant: variant
-  }, rest), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flex: 1,
-    alignItems: "center"
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    as: icon,
-    size: "medium",
-    fill: "secondary",
-    marginRight: "xxsmall"
-  }), /*#__PURE__*/React.createElement(Text.Small, {
-    flex: 1,
-    marginVertical: "xxsmall"
-  }, message), primaryButton && !secondaryButton && /*#__PURE__*/React.createElement(BannerActionButton, {
-    button: primaryButton,
-    marginLeft: "xxsmall"
-  })), primaryButton && secondaryButton && /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flex: 1,
-    justifyContent: "flex-end",
-    marginBottom: "xxsmall"
-  }, /*#__PURE__*/React.createElement(BannerActionButton, {
-    button: primaryButton,
-    marginRight: "xxxsmall"
-  }), /*#__PURE__*/React.createElement(BannerActionButton, {
-    button: secondaryButton
-  })));
+const Banner = forwardRef((props, ref) => {
+  const _a = props, { icon, variant, message, primaryButton, secondaryButton } = _a, rest = __objRest(_a, ["icon", "variant", "message", "primaryButton", "secondaryButton"]);
+  return /* @__PURE__ */ jsxs(StyledBanner, __spreadProps(__spreadValues({ ref, variant }, rest), { children: [
+    /* @__PURE__ */ jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [
+      icon && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          as: icon,
+          size: "medium",
+          fill: "secondary",
+          marginRight: "xxsmall"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text.Small, { flex: 1, marginVertical: "xxsmall", children: message }),
+      primaryButton && !secondaryButton && /* @__PURE__ */ jsx(BannerActionButton, { button: primaryButton, marginLeft: "xxsmall" })
+    ] }),
+    primaryButton && secondaryButton && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        flex: 1,
+        justifyContent: "flex-end",
+        marginBottom: "xxsmall",
+        children: [
+          /* @__PURE__ */ jsx(BannerActionButton, { button: primaryButton, marginRight: "xxxsmall" }),
+          /* @__PURE__ */ jsx(BannerActionButton, { button: secondaryButton })
+        ]
+      }
+    )
+  ] }));
 });
-var BannerActionButtonType = shape({
+const BannerActionButtonType = shape({
   label: string.isRequired,
   action: func.isRequired
 });
 Banner.propTypes = {
   /** SVG to be rendered. */
   icon: elementType,
-
   /** style the banner following the theme (success, informative, attention) */
-  variant: oneOf(['success', 'informative', 'attention']),
-
+  variant: oneOf(["success", "informative", "attention"]),
   /** the message to display */
   message: oneOfType([string, element]).isRequired,
-
   /** the label and action fuction are required for banner action buttons  */
   primaryButton: BannerActionButtonType,
-
   /** the secondary button should only be used assemble the primary button (the label and action fuction are required for banner action buttons).  */
-  secondaryButton: function secondaryButton(props, propName, componentName) {
-    var _checkPropTypes;
-
-    var primaryButton = props.primaryButton;
-
+  secondaryButton: (props, propName, componentName) => {
+    const { primaryButton } = props;
     if (!primaryButton && !!props[propName]) {
-      return new Error("The " + propName + " must only be used ensemble with the primaryButton.");
+      return new Error(
+        `The ${propName} must only be used ensemble with the primaryButton.`
+      );
     }
-
-    return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = BannerActionButtonType, _checkPropTypes), props, 'prop', componentName);
+    return checkPropTypes(
+      { [propName]: BannerActionButtonType },
+      props,
+      "prop",
+      componentName
+    );
   }
 };
 Banner.defaultProps = {
-  icon: undefined,
-  variant: 'informative',
-  primaryButton: undefined,
-  secondaryButton: undefined
+  icon: void 0,
+  variant: "informative",
+  primaryButton: void 0,
+  secondaryButton: void 0
+};
+var Banner_default = Banner;
+export {
+  Banner_default as default
 };
-export default Banner;

package/esm/Banner/web/Banner.test.js

@@ -1,109 +1,113 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { CheckedFull } from '@gympass/yoga-icons';
-import { ThemeProvider, Banner } from '../..';
-describe('<Banner />', function () {
-  it('should match snapshot', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      message: "Feedback message."
-    }))),
-        container = _render.container;
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { CheckedFull } from "@gympass/yoga-icons";
+import { ThemeProvider, Banner } from "../..";
+describe("<Banner />", () => {
+  it("should match snapshot", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Banner, { message: "Feedback message." }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with custom variant', function () {
-    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      variant: "success",
-      message: "Success banner without button"
-    }), /*#__PURE__*/React.createElement(Banner, {
-      variant: "informative",
-      message: "Informative banner without button"
-    }), /*#__PURE__*/React.createElement(Banner, {
-      variant: "attention",
-      message: "Attention banner without button"
-    }))),
-        container = _render2.container;
-
+  it("should match snapshot with custom variant", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Banner, { variant: "success", message: "Success banner without button" }),
+        /* @__PURE__ */ jsx(
+          Banner,
+          {
+            variant: "informative",
+            message: "Informative banner without button"
+          }
+        ),
+        /* @__PURE__ */ jsx(Banner, { variant: "attention", message: "Attention banner without button" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with icon', function () {
-    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      icon: CheckedFull,
-      message: "Banner with icon"
-    }))),
-        container = _render3.container;
-
+  it("should match snapshot with icon", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Banner, { icon: CheckedFull, message: "Banner with icon" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with button', function () {
-    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      message: "Banner with button",
-      primaryButton: {
-        label: 'Action',
-        action: function action() {}
-      }
-    }))),
-        container = _render4.container;
-
+  it("should match snapshot with button", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Action",
+            action: () => {
+            }
+          }
+        }
+      ) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should call button action function when the banner button is clicked', function () {
-    var onButtonClickMock = jest.fn();
-
-    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      message: "Banner with button",
-      primaryButton: {
-        label: 'Action',
-        action: onButtonClickMock
-      }
-    }))),
-        getByRole = _render5.getByRole;
-
-    fireEvent.click(getByRole('button', {
-      name: 'Action'
-    }));
+  it("should call button action function when the banner button is clicked", () => {
+    const onButtonClickMock = jest.fn();
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Action",
+            action: onButtonClickMock
+          }
+        }
+      ) })
+    );
+    fireEvent.click(getByRole("button", { name: "Action" }));
     expect(onButtonClickMock).toHaveBeenCalled();
   });
-  it('should match snapshot with two action buttons', function () {
-    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      message: "Banner with two action buttons",
-      primaryButton: {
-        label: 'Primary Action',
-        action: function action() {}
-      },
-      secondaryButton: {
-        label: 'Secondary Action',
-        action: function action() {}
-      }
-    }))),
-        container = _render6.container;
-
+  it("should match snapshot with two action buttons", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Banner,
+        {
+          message: "Banner with two action buttons",
+          primaryButton: {
+            label: "Primary Action",
+            action: () => {
+            }
+          },
+          secondaryButton: {
+            label: "Secondary Action",
+            action: () => {
+            }
+          }
+        }
+      ) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should call both buttons action function when each banner action button are clicked', function () {
-    var onPrimaryButtonClickMock = jest.fn();
-    var onSecondaryButtonClickMock = jest.fn();
-
-    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
-      message: "Banner with button",
-      primaryButton: {
-        label: 'Primary Action',
-        action: onPrimaryButtonClickMock
-      },
-      secondaryButton: {
-        label: 'Secondary Action',
-        action: onSecondaryButtonClickMock
-      }
-    }))),
-        getByRole = _render7.getByRole;
-
-    fireEvent.click(getByRole('button', {
-      name: 'Primary Action'
-    }));
+  it("should call both buttons action function when each banner action button are clicked", () => {
+    const onPrimaryButtonClickMock = jest.fn();
+    const onSecondaryButtonClickMock = jest.fn();
+    const { getByRole } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+        Banner,
+        {
+          message: "Banner with button",
+          primaryButton: {
+            label: "Primary Action",
+            action: onPrimaryButtonClickMock
+          },
+          secondaryButton: {
+            label: "Secondary Action",
+            action: onSecondaryButtonClickMock
+          }
+        }
+      ) })
+    );
+    fireEvent.click(getByRole("button", { name: "Primary Action" }));
     expect(onPrimaryButtonClickMock).toHaveBeenCalled();
-    fireEvent.click(getByRole('button', {
-      name: 'Secondary Action'
-    }));
+    fireEvent.click(getByRole("button", { name: "Secondary Action" }));
     expect(onSecondaryButtonClickMock).toHaveBeenCalled();
   });
-});
+});

package/esm/Banner/web/index.js

@@ -1,2 +1,5 @@
-import Banner from './Banner';
-export default Banner;
+import Banner from "./Banner";
+var web_default = Banner;
+export {
+  web_default as default
+};

package/esm/BottomSheet/BottomSheet.theme.js

@@ -1,26 +1,24 @@
-var BottomSheet = function BottomSheet(_ref) {
-  var radii = _ref.radii,
-      spacing = _ref.spacing;
-  return {
-    border: {
-      radius: radii.regular
-    },
-    padding: {
-      top: spacing.large,
-      right: spacing.medium,
-      bottom: spacing.large,
-      left: spacing.medium
-    },
-    width: {
-      "default": 100
-    },
-    height: {
-      min: 160
-    },
-    position: {
-      "default": spacing.zero
-    }
-  };
+const BottomSheet = ({ radii, spacing }) => ({
+  border: {
+    radius: radii.regular
+  },
+  padding: {
+    top: spacing.large,
+    right: spacing.medium,
+    bottom: spacing.large,
+    left: spacing.medium
+  },
+  width: {
+    default: 100
+  },
+  height: {
+    min: 160
+  },
+  position: {
+    default: spacing.zero
+  }
+});
+var BottomSheet_theme_default = BottomSheet;
+export {
+  BottomSheet_theme_default as default
 };
-
-export default BottomSheet;

package/esm/BottomSheet/index.js

@@ -1,2 +1,5 @@
-import BottomSheet from './web';
-export default BottomSheet;
+import BottomSheet from "./web";
+var BottomSheet_default = BottomSheet;
+export {
+  BottomSheet_default as default
+};

package/esm/BottomSheet/web/BottomSheet.js

@@ -1,25 +1,57 @@
-var _templateObject;
-
-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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import React from 'react';
-import styled from 'styled-components';
-import { node } from 'prop-types';
-import Dialog from '../../Dialog';
-var StyledBottomSheet = styled(Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  align-self: flex-end;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  @keyframes content {\n    0% {\n      transform: translateY(100vh);\n    }\n    100% {\n      transform: translateY(0);\n    }\n  }\n"])), function (_ref) {
-  var bottomsheet = _ref.theme.yoga.components.bottomsheet;
-  return "\n  padding: " + bottomsheet.padding.top + "px " + bottomsheet.padding.right + "px " + bottomsheet.padding.bottom + "px " + bottomsheet.padding.left + "px;\n  width: " + bottomsheet.width["default"] + "%;\n  border-radius: " + bottomsheet.border.radius + "px " + bottomsheet.border.radius + "px 0 0;\n  ";
-});
-var BottomSheet = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
-  return /*#__PURE__*/React.createElement(StyledBottomSheet, _extends({
-    hideCloseButton: true
-  }, props, {
-    ref: forwardedRef
-  }));
-});
+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));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+import { node } from "prop-types";
+import Dialog from "../../Dialog";
+const StyledBottomSheet = styled(Dialog)`
+  ${({
+  theme: {
+    yoga: {
+      components: { bottomsheet }
+    }
+  }
+}) => `
+  padding: ${bottomsheet.padding.top}px ${bottomsheet.padding.right}px ${bottomsheet.padding.bottom}px ${bottomsheet.padding.left}px;
+  width: ${bottomsheet.width.default}%;
+  border-radius: ${bottomsheet.border.radius}px ${bottomsheet.border.radius}px 0 0;
+  `}
+  align-self: flex-end;
+  animation: content;
+  animation-duration: 400ms;
+  animation-fill-mode: forwards;
+  @keyframes content {
+    0% {
+      transform: translateY(100vh);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+`;
+const BottomSheet = React.forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(StyledBottomSheet, __spreadProps(__spreadValues({ hideCloseButton: true }, props), { ref: forwardedRef })));
 BottomSheet.propTypes = {
   children: node.isRequired
 };
-export default BottomSheet;
+var BottomSheet_default = BottomSheet;
+export {
+  BottomSheet_default as default
+};