@gympass/yoga 7.87.0 → 7.88.0

package/esm/Stepper/web/Stepper.test.js

@@ -1,82 +1,63 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ThemeProvider from '../../Theme';
-import Stepper from '..';
-describe('<Stepper />', function () {
-  describe('Snapshots', function () {
-    it('should match snapshot with first step active', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 0
-      }, /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step one"
-      }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step two"
-      }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step three"
-      }, "step three content")))),
-          container = _render.container;
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import ThemeProvider from "../../Theme";
+import Stepper from "..";
+describe("<Stepper />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with first step active", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Stepper, { activeStep: 0, children: [
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step one", children: "step one content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step two", children: "step two content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step three", children: "step three content" })
+        ] }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should match snapshot with first step active and color secondary', function () {
-      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 0,
-        secondary: true
-      }, /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step one"
-      }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step two"
-      }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step three"
-      }, "step three content")))),
-          container = _render2.container;
-
+    it("should match snapshot with first step active and color secondary", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Stepper, { activeStep: 0, secondary: true, children: [
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step one", children: "step one content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step two", children: "step two content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step three", children: "step three content" })
+        ] }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should match snapshot with second step active', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 1
-      }, /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step one"
-      }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step two"
-      }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step three"
-      }, "step three content")))),
-          container = _render3.container;
-
+    it("should match snapshot with second step active", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Stepper, { activeStep: 1, children: [
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step one", children: "step one content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step two", children: "step two content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step three", children: "step three content" })
+        ] }) })
+      );
       expect(container).toMatchSnapshot();
     });
   });
-  describe('Steps', function () {
-    it('should change the active step', function () {
-      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 0
-      }, /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step one"
-      }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step two"
-      }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step three"
-      }, "step three content")))),
-          queryByText = _render4.queryByText,
-          rerender = _render4.rerender;
-
-      expect(queryByText('step one content')).toBeTruthy();
-      expect(queryByText('step two content')).toBeFalsy();
-      expect(queryByText('step three content')).toBeFalsy();
-      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Stepper, {
-        activeStep: 1
-      }, /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step one"
-      }, "step one content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step two"
-      }, "step two content"), /*#__PURE__*/React.createElement(Stepper.Step, {
-        label: "step three"
-      }, "step three content"))));
-      expect(queryByText('step one content')).toBeFalsy();
-      expect(queryByText('step two content')).toBeTruthy();
-      expect(queryByText('step three content')).toBeFalsy();
+  describe("Steps", () => {
+    it("should change the active step", () => {
+      const { queryByText, rerender } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Stepper, { activeStep: 0, children: [
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step one", children: "step one content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step two", children: "step two content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step three", children: "step three content" })
+        ] }) })
+      );
+      expect(queryByText("step one content")).toBeTruthy();
+      expect(queryByText("step two content")).toBeFalsy();
+      expect(queryByText("step three content")).toBeFalsy();
+      rerender(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(Stepper, { activeStep: 1, children: [
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step one", children: "step one content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step two", children: "step two content" }),
+          /* @__PURE__ */ jsx(Stepper.Step, { label: "step three", children: "step three content" })
+        ] }) })
+      );
+      expect(queryByText("step one content")).toBeFalsy();
+      expect(queryByText("step two content")).toBeTruthy();
+      expect(queryByText("step three content")).toBeFalsy();
     });
   });
-});
+});

package/esm/Stepper/web/index.js

@@ -1,3 +1,6 @@
-import Stepper from './Stepper';
-import Step from './Step';
-export { Stepper, Step };
+import Stepper from "./Stepper";
+import Step from "./Step";
+export {
+  Step,
+  Stepper
+};

package/esm/Tag/web/Informative.js

@@ -1,75 +1,120 @@
-var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
-
-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; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+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 from "react";
+import styled, { withTheme } from "styled-components";
+import { func, oneOf, node, bool } from "prop-types";
+import { margins } from "@gympass/yoga-system";
+import Tag from "./Tag";
+import Icon from "../../Icon";
+const Informative = styled(Tag)`
+  justify-content: center;
+  align-items: center;
 
-import React from 'react';
-import styled, { withTheme } from 'styled-components';
-import { func, oneOf, node, bool } from 'prop-types';
-import { margins } from '@gympass/yoga-system';
-import Tag from './Tag';
-import Icon from '../../Icon';
-var Informative = styled(Tag)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  justify-content: center;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      _ref$theme$yoga = _ref.theme.yoga,
-      _ref$theme$yoga$color = _ref$theme$yoga.colors,
-      text = _ref$theme$yoga$color.text,
-      _ref$theme$yoga$color2 = _ref$theme$yoga$color.feedback[variant],
-      color = _ref$theme$yoga$color2 === void 0 ? {
-    light: text.secondary
-  } : _ref$theme$yoga$color2,
-      tag = _ref$theme$yoga.components.tag;
-  return "\n    background-color: " + color.light + ";\n    color: " + text.primary + ";\n    border-radius: " + tag.border.radius + "px;\n    border-color: " + color.light + ";\n\n    font-size: " + tag.font.size + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
-}, margins);
-/** Tags should be keywords to categorize or organize an item. */
+  ${({
+  variant,
+  theme: {
+    yoga: {
+      colors: {
+        text,
+        feedback: { [variant]: color = { light: text.secondary } }
+      },
+      components: { tag }
+    }
+  }
+}) => `
+    background-color: ${color.light};
+    color: ${text.primary};
+    border-radius: ${tag.border.radius}px;
+    border-color: ${color.light};
 
-var TagInformative = function TagInformative(_ref2) {
-  var children = _ref2.children,
-      icon = _ref2.icon,
-      _ref2$theme$yoga = _ref2.theme.yoga,
-      text = _ref2$theme$yoga.colors.text,
-      tag = _ref2$theme$yoga.components.tag,
-      small = _ref2.small,
-      ellipsis = _ref2.ellipsis,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    font-size: ${tag.font.size}px;
+    font-weight: ${tag.font.weight};
+  `}
 
-  return /*#__PURE__*/React.createElement(Informative, _extends({
-    small: small,
-    ellipsis: ellipsis
-  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
-    as: icon,
-    size: small ? tag.icon.size.small : tag.icon.size["default"],
-    fill: text.primary,
-    marginRight: tag.icon.margin.right
-  }), children);
+  ${margins}
+`;
+const TagInformative = (_a) => {
+  var _b = _a, {
+    children,
+    icon,
+    theme: {
+      yoga: {
+        colors: { text },
+        components: { tag }
+      }
+    },
+    small,
+    ellipsis
+  } = _b, props = __objRest(_b, [
+    "children",
+    "icon",
+    "theme",
+    "small",
+    "ellipsis"
+  ]);
+  return /* @__PURE__ */ jsxs(Informative, __spreadProps(__spreadValues({ small, ellipsis }, props), { children: [
+    icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        as: icon,
+        size: small ? tag.icon.size.small : tag.icon.size.default,
+        fill: text.primary,
+        marginRight: tag.icon.margin.right
+      }
+    ),
+    children
+  ] }));
 };
-
 TagInformative.propTypes = {
   /** Values: neutral, success, informative, attention */
-  variant: oneOf(['neutral', 'success', 'informative', 'attention']),
-
+  variant: oneOf(["neutral", "success", "informative", "attention"]),
   /** Icon reference from our library */
   icon: func,
-
   /** The tag's content */
   children: node.isRequired,
-
   /** The tag's size */
   small: bool,
-
   /** After set a max-width can put ellipses for large texts */
   ellipsis: bool
 };
 TagInformative.defaultProps = {
-  icon: undefined,
+  icon: void 0,
   small: false,
-  variant: 'neutral',
+  variant: "neutral",
   ellipsis: false
 };
-TagInformative.displayName = 'Tag.Informative';
-export default withTheme(TagInformative);
+TagInformative.displayName = "Tag.Informative";
+var Informative_default = withTheme(TagInformative);
+export {
+  Informative_default as default
+};

package/esm/Tag/web/Tag.js

@@ -1,51 +1,99 @@
-var _templateObject;
+var __defProp = Object.defineProperty;
+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;
+};
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+import { oneOf, node, bool } from "prop-types";
+import { margins, maxWidth } from "@gympass/yoga-system";
+const StyledTag = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  border-style: solid;
 
-import React from 'react';
-import styled from 'styled-components';
-import { oneOf, node, bool } from 'prop-types';
-import { margins, maxWidth } from '@gympass/yoga-system';
-var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
-  var variant = _ref.variant,
-      small = _ref.small,
-      ellipsis = _ref.ellipsis,
-      _ref$theme$yoga = _ref.theme.yoga,
-      _ref$theme$yoga$color = _ref$theme$yoga.colors,
-      text = _ref$theme$yoga$color.text,
-      elements = _ref$theme$yoga$color.elements,
-      _ref$theme$yoga$color2 = _ref$theme$yoga$color.feedback,
-      _ref$theme$yoga$color3 = _ref$theme$yoga$color2[variant],
-      color = _ref$theme$yoga$color3 === void 0 ? {
-    dark: text.secondary
-  } : _ref$theme$yoga$color3,
-      _ref$theme$yoga$color4 = _ref$theme$yoga$color2[variant],
-      borderColor = _ref$theme$yoga$color4 === void 0 ? {
-    dark: elements.selectionAndIcons
-  } : _ref$theme$yoga$color4,
-      tag = _ref$theme$yoga.components.tag;
-  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n\n    " + (ellipsis ? "\n      display: block;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    " : "") + "\n\n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
-}, margins, maxWidth);
-/** Tags should be keywords to categorize or organize an item. */
+  ${({
+  variant,
+  small,
+  ellipsis,
+  theme: {
+    yoga: {
+      colors: {
+        text,
+        elements,
+        feedback: {
+          [variant]: color = { dark: text.secondary },
+          [variant]: borderColor = { dark: elements.selectionAndIcons }
+        }
+      },
+      components: { tag }
+    }
+  }
+}) => `
+    ${small ? `
+            padding:
+              ${tag.padding.small.top}
+              ${tag.padding.small.right}px
+              ${tag.padding.small.bottom}
+              ${tag.padding.small.left}px;
+          ` : `
+            padding:
+              ${tag.padding.default.top}px
+              ${tag.padding.default.right}px
+              ${tag.padding.default.bottom}px
+              ${tag.padding.default.left}px;
+          `}
 
-var Tag = function Tag(props) {
-  return /*#__PURE__*/React.createElement(StyledTag, props);
-};
+    ${ellipsis ? `
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    ` : ``}
+
+    color: ${color.dark};
+    border-radius: ${tag.border.radius}px;
+    border-width: ${tag.border.width}px;
+    border-color: ${borderColor.dark};
+
+    font-size: ${tag.font.size}px;
+    line-height: ${tag.font.lineHeight}px;
+    font-weight: ${tag.font.weight};
+  `}
 
+  ${margins}
+  ${maxWidth}
+`;
+const Tag = (props) => /* @__PURE__ */ jsx(StyledTag, __spreadValues({}, props));
 Tag.propTypes = {
   /** style the tag following the theme (success, informative, attention) */
-  variant: oneOf(['', 'success', 'informative', 'attention']),
+  variant: oneOf(["", "success", "informative", "attention"]),
   children: node.isRequired,
-
   /** Can send small to use this variant */
   small: bool,
-
   /** After set a max-width can put ellipses for large texts */
   ellipsis: bool
 };
 Tag.defaultProps = {
-  variant: '',
+  variant: "",
   small: false,
   ellipsis: false
 };
-export default Tag;
+var Tag_default = Tag;
+export {
+  Tag_default as default
+};

package/esm/Tag/web/Tag.test.js

@@ -1,106 +1,81 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Building } from '@gympass/yoga-icons';
-import { ThemeProvider, Tag } from '../..';
-describe('<Tag />', function () {
-  it('should match snapshot', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, null, "default"))),
-        container = _render.container;
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react";
+import { Building } from "@gympass/yoga-icons";
+import { ThemeProvider, Tag } from "../..";
+describe("<Tag />", () => {
+  it("should match snapshot", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Tag, { children: "default" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with custom icon and informative type', function () {
-    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "success",
-      icon: Building
-    }, "success with custom icon"))),
-        container = _render2.container;
-
+  it("should match snapshot with custom icon and informative type", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Tag.Informative, { variant: "success", icon: Building, children: "success with custom icon" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with without icon and informative type', function () {
-    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "success"
-    }, "success without icon"))),
-        container = _render3.container;
-
+  it("should match snapshot with without icon and informative type", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Tag.Informative, { variant: "success", children: "success without icon" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with variant prop', function () {
-    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, {
-      variant: "success"
-    }, "success"), /*#__PURE__*/React.createElement(Tag, {
-      variant: "informative"
-    }, "informative"), /*#__PURE__*/React.createElement(Tag, {
-      variant: "attention"
-    }, "attention"))),
-        container = _render4.container;
-
+  it("should match snapshot with variant prop", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Tag, { variant: "success", children: "success" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "informative", children: "informative" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "attention", children: "attention" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with variant prop and informative type', function () {
-    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "success"
-    }, "success"), /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "informative"
-    }, "informative"), /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "attention"
-    }, "attention"))),
-        container = _render5.container;
-
+  it("should match snapshot with variant prop and informative type", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "success", children: "success" }),
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "informative", children: "informative" }),
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "attention", children: "attention" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with variant and margin prop ', function () {
-    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, {
-      variant: "success"
-    }, "success"), /*#__PURE__*/React.createElement(Tag, {
-      mv: "medium",
-      variant: "informative"
-    }, "informative"), /*#__PURE__*/React.createElement(Tag, {
-      variant: "attention"
-    }, "attention"))),
-        container = _render6.container;
-
+  it("should match snapshot with variant and margin prop ", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Tag, { variant: "success", children: "success" }),
+        /* @__PURE__ */ jsx(Tag, { mv: "medium", variant: "informative", children: "informative" }),
+        /* @__PURE__ */ jsx(Tag, { variant: "attention", children: "attention" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with variant prop and informative type with margin prop', function () {
-    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "success"
-    }, "success"), /*#__PURE__*/React.createElement(Tag.Informative, {
-      mv: "medium",
-      variant: "informative"
-    }, "informative"), /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "attention"
-    }, "attention"))),
-        container = _render7.container;
-
+  it("should match snapshot with variant prop and informative type with margin prop", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "success", children: "success" }),
+        /* @__PURE__ */ jsx(Tag.Informative, { mv: "medium", variant: "informative", children: "informative" }),
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "attention", children: "attention" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with ellipsis prop', function () {
-    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, {
-      maxWidth: "10px",
-      ellipsis: true
-    }, "Default with ellipsis"))),
-        container = _render8.container;
-
+  it("should match snapshot with ellipsis prop", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Tag, { maxWidth: "10px", ellipsis: true, children: "Default with ellipsis" }) })
+    );
     expect(container).toMatchSnapshot();
   });
-  it('should match snapshot with variant, informative type and ellipsis prop', function () {
-    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "success",
-      maxWidth: "10px",
-      ellipsis: true
-    }, "Success with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "attention",
-      maxWidth: "10px",
-      ellipsis: true
-    }, "Attention with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
-      variant: "informative",
-      maxWidth: "10px",
-      ellipsis: true
-    }, "Informative with ellipsis"))),
-        container = _render9.container;
-
+  it("should match snapshot with variant, informative type and ellipsis prop", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "success", maxWidth: "10px", ellipsis: true, children: "Success with ellipsis" }),
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "attention", maxWidth: "10px", ellipsis: true, children: "Attention with ellipsis" }),
+        /* @__PURE__ */ jsx(Tag.Informative, { variant: "informative", maxWidth: "10px", ellipsis: true, children: "Informative with ellipsis" })
+      ] })
+    );
     expect(container).toMatchSnapshot();
   });
-});
+});