contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/atoms/SliderToolTip/styles.js

@@ -1,13 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Slider = exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject, _templateObject2;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    margin: auto 0;\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
-const Slider = exports.Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -100px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 15px;\n        line-height: 15px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        display: flex;\n        justify-content: center;\n        background-color: #281f33;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    margin: auto 0;\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
+
+exports.Container = Container;
+
+var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -100px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 15px;\n        line-height: 15px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        display: flex;\n        justify-content: center;\n        background-color: #281f33;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
+
+exports.Slider = Slider;

package/dist/components/atoms/Status/Status.stories.js

@@ -1,19 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StatusDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/Status",
   component: _index.Status
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Status, {
-  ...args
-});
-const StatusDefault = exports.StatusDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Status, (0, _objectSpread2.default)({}, args));
+};
+
+var StatusDefault = Template.bind({});
+exports.StatusDefault = StatusDefault;
 StatusDefault.args = {
   statusType: "IE",
   ovalForm: false

package/dist/components/atoms/Status/index.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Status = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Status = _ref => {
-  let {
-    statusType,
-    ovalForm
-  } = _ref;
+
+var Status = function Status(_ref) {
+  var statusType = _ref.statusType,
+      ovalForm = _ref.ovalForm;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: "status-".concat(statusType === null || statusType === void 0 ? void 0 : statusType.replace(/\/.*/, ""), " ").concat(ovalForm && "oval-form"),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
@@ -18,4 +19,5 @@ const Status = _ref => {
     })
   });
 };
+
 exports.Status = Status;

package/dist/components/atoms/Status/styles.js

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R,\n  &.status-AS,\n  &.status-SAC,\n  &.status-PA {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AAC,\n  &.status-ACA {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RAC,\n  &.status-RCA {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-FAP,\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R,\n  &.status-AS,\n  &.status-SAC,\n  &.status-PA {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AAC,\n  &.status-ACA {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RAC,\n  &.status-RCA {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-FAP,\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/TabSection/TabSection.stories.js

@@ -1,26 +1,38 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TabSectionDefault = exports.TabSectionActive = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/TabSection",
   label: "Tab Section",
   argTypes: {},
   component: _.TabSection
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabSection, {
-  ...args
-});
-const TabSectionDefault = exports.TabSectionDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabSection, (0, _objectSpread2.default)({}, args));
+};
+
+var TabSectionDefault = Template.bind({});
+exports.TabSectionDefault = TabSectionDefault;
 TabSectionDefault.args = {
   label: "Default Tab",
   active: ""
 };
-const TabSectionActive = exports.TabSectionActive = Template.bind({});
+var TabSectionActive = Template.bind({});
+exports.TabSectionActive = TabSectionActive;
 TabSectionActive.args = {
   label: "Active Tab",
   active: "active"

package/dist/components/atoms/TabSection/index.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabSection = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const TabSection = _ref => {
-  let {
-    label,
-    active,
-    onClick
-  } = _ref;
+
+var TabSection = function TabSection(_ref) {
+  var label = _ref.label,
+      active = _ref.active,
+      onClick = _ref.onClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: active && "active",
     onClick: onClick,
@@ -20,4 +21,5 @@ const TabSection = _ref => {
     })
   });
 };
+
 exports.TabSection = TabSection;

package/dist/components/atoms/TabSection/styles.js

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  border-bottom: 2px solid ", ";\n  width: 149px;\n  padding-bottom: 5px;\n  transition: 0.1s all;\n  cursor: pointer;\n  &.active {\n    font-size: 18px;\n    border-bottom: 2px solid ", ";\n  }\n  & + * {\n    margin-left: 10px;\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  border-bottom: 2px solid ", ";\n  width: 149px;\n  padding-bottom: 5px;\n  transition: 0.1s all;\n  cursor: pointer;\n  &.active {\n    font-size: 18px;\n    border-bottom: 2px solid ", ";\n  }\n  & + * {\n    margin-left: 10px;\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/components/atoms/TabSectionv2/TabSection.stories.js

@@ -1,26 +1,38 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TabSectionv2Default = exports.TabSectionv2Active = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/TabSectionv2",
   label: "Tab Section",
   argTypes: {},
   component: _.TabSectionv2
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabSectionv2, {
-  ...args
-});
-const TabSectionv2Default = exports.TabSectionv2Default = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabSectionv2, (0, _objectSpread2.default)({}, args));
+};
+
+var TabSectionv2Default = Template.bind({});
+exports.TabSectionv2Default = TabSectionv2Default;
 TabSectionv2Default.args = {
   label: "Default Tab",
   active: ""
 };
-const TabSectionv2Active = exports.TabSectionv2Active = Template.bind({});
+var TabSectionv2Active = Template.bind({});
+exports.TabSectionv2Active = TabSectionv2Active;
 TabSectionv2Active.args = {
   label: "Active Tab",
   active: "active"

package/dist/components/atoms/TabSectionv2/index.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabSectionv2 = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const TabSectionv2 = _ref => {
-  let {
-    label,
-    active,
-    onClick,
-    className
-  } = _ref;
+
+var TabSectionv2 = function TabSectionv2(_ref) {
+  var label = _ref.label,
+      active = _ref.active,
+      onClick = _ref.onClick,
+      className = _ref.className;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: active && "active ".concat(className),
     onClick: onClick,
@@ -21,4 +22,5 @@ const TabSectionv2 = _ref => {
     })
   });
 };
+
 exports.TabSectionv2 = TabSectionv2;

package/dist/components/atoms/TabSectionv2/styles.js

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  border-bottom: 2px solid ", ";\n  width: 149px;\n  padding-bottom: 5px;\n  transition: 0.1s all;\n  cursor: pointer;\n\n  &.active {\n    font-size: 18px;\n    border-bottom: 2px solid ", ";\n  }\n\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 14px;\n  line-height: 21px;\n  border-bottom: 2px solid ", ";\n  width: 149px;\n  padding-bottom: 5px;\n  transition: 0.1s all;\n  cursor: pointer;\n\n  &.active {\n    font-size: 18px;\n    border-bottom: 2px solid ", ";\n  }\n\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s5, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/components/atoms/Tooltip/Tooltip.stories.js

@@ -1,12 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TooltipDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/Tooltip",
   component: _index.Tooltip,
   argTypes: {
@@ -36,10 +43,14 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tooltip, {
-  ...args
-});
-const TooltipDefault = exports.TooltipDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tooltip, (0, _objectSpread2.default)({}, args));
+};
+
+var TooltipDefault = Template.bind({});
+exports.TooltipDefault = TooltipDefault;
 TooltipDefault.args = {
   componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     children: " hola soy tooltip de prueba en storybook "

package/dist/components/atoms/Tooltip/index.js

@@ -1,34 +1,36 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tooltip = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _material = require("@mui/material");
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Tooltip = props => {
+
+var Tooltip = function Tooltip(props) {
   var _positions$position;
-  const {
-    componentTooltip,
-    // (jsx) componente que aparecera en el tooltip
-    children,
-    // (jsx) componente interno que va dentro de la etiqueta <Tooltip>
-    className,
-    // (string) clase del container trigger
-    classNameTooltip,
-    // (string) clase del contenedor tooltip
-    position,
-    // (string) posicion del contenedor tooltip (values en object positions)
-    addArrow,
-    // (boolean) add flecha en la parte posterior del tooltip?
-    transitionType,
-    // (string) -> 'grow' (default) | 'fade' | 'zoom'
-    followCursor //  (boolean) true -> el tooltip se movera junto al cursor
-  } = props;
-  const positions = {
+
+  var componentTooltip = props.componentTooltip,
+      children = props.children,
+      className = props.className,
+      classNameTooltip = props.classNameTooltip,
+      position = props.position,
+      addArrow = props.addArrow,
+      transitionType = props.transitionType,
+      followCursor = props.followCursor;
+  var positions = {
     topStart: "top-start",
     topEnd: "top-end",
     topCenter: "top",
@@ -42,8 +44,7 @@ const Tooltip = props => {
     leftEnd: "left-end",
     leftCenter: "left"
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-    ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     placement: (_positions$position = positions[position]) !== null && _positions$position !== void 0 ? _positions$position : positions.topCenter,
     arrow: addArrow || addArrow === undefined ? true : false,
     componentsProps: {
@@ -65,6 +66,7 @@ const Tooltip = props => {
       className: className,
       children: [" ", children, " "]
     })
-  });
+  }));
 };
+
 exports.Tooltip = Tooltip;

package/dist/components/atoms/Tooltip/styles.js

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _variables = require("../../../global-files/variables");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  //margin: 100px 0px 0px 100px;\tmodo dev\n  //border: 1px solid red;\tmodo dev\n\n  + .MuiTooltip-popper {\n    background-color: transparent;\n\n    .MuiTooltip-tooltip {\n      --background: white;\n      box-shadow: 0px 0px 10px 1px gray;\n      background-color: var(--background);\n      padding: 10px;\n      border-radius: 7px;\n      max-width: 60vw;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: left;\n      color: #262626;\n\n      .MuiTooltip-arrow {\n        color: var(--background);\n      }\n    }\n\n    &[data-popper-placement*=\"bottom\"] .MuiTooltip-tooltip {\n      margin-top: 10px;\n    }\n    &[data-popper-placement*=\"top\"] .MuiTooltip-tooltip {\n      margin-bottom: 10px;\n    }\n    &[data-popper-placement*=\"left\"] .MuiTooltip-tooltip {\n      margin-right: 10px;\n    }\n    &[data-popper-placement*=\"right\"] .MuiTooltip-tooltip {\n      margin-left: 10px;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  //margin: 100px 0px 0px 100px;\tmodo dev\n  //border: 1px solid red;\tmodo dev\n\n  + .MuiTooltip-popper {\n    background-color: transparent;\n\n    .MuiTooltip-tooltip {\n      --background: white;\n      box-shadow: 0px 0px 10px 1px gray;\n      background-color: var(--background);\n      padding: 10px;\n      border-radius: 7px;\n      max-width: 60vw;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: left;\n      color: #262626;\n\n      .MuiTooltip-arrow {\n        color: var(--background);\n      }\n    }\n\n    &[data-popper-placement*=\"bottom\"] .MuiTooltip-tooltip {\n      margin-top: 10px;\n    }\n    &[data-popper-placement*=\"top\"] .MuiTooltip-tooltip {\n      margin-bottom: 10px;\n    }\n    &[data-popper-placement*=\"left\"] .MuiTooltip-tooltip {\n      margin-right: 10px;\n    }\n    &[data-popper-placement*=\"right\"] .MuiTooltip-tooltip {\n      margin-left: 10px;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;

package/dist/components/atoms/TooltipLight/Tooltip.stories.js

@@ -1,20 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TooltipLightDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/TooltipLight",
   component: _index.TooltipLight,
   argTypes: {}
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TooltipLight, {
-  ...args
-});
-const TooltipLightDefault = exports.TooltipLightDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TooltipLight, (0, _objectSpread2.default)({}, args));
+};
+
+var TooltipLightDefault = Template.bind({});
+exports.TooltipLightDefault = TooltipLightDefault;
 TooltipLightDefault.args = {
   description: "Aquí va la descripción del campo",
   required: true,

package/dist/components/atoms/TooltipLight/index.js

@@ -1,55 +1,65 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipLight = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _styles = require("./styles");
+
 var _info = _interopRequireDefault(require("../../../assets/images/Icons/info.svg"));
+
 var _infoNR = _interopRequireDefault(require("../../../assets/images/Icons/infoNR.svg"));
+
 var _Tooltip = _interopRequireWildcard(require("@mui/material/Tooltip"));
+
 var _styles2 = require("@mui/material/styles");
+
 var _variables = require("../../../global-files/variables");
+
 var _react = _interopRequireDefault(require("react"));
+
 var _jsxRuntime = require("react/jsx-runtime");
-const TooltipLight = _ref => {
-  let {
-    description,
-    description_small,
-    required,
-    min_chars,
-    max_chars,
-    min_words,
-    max_words
-  } = _ref;
-  const LightTooltip = (0, _styles2.styled)(_ref2 => {
-    let {
-      className,
-      ...props
-    } = _ref2;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-      ...props,
+
+var _excluded = ["className"];
+
+var TooltipLight = function TooltipLight(_ref) {
+  var description = _ref.description,
+      description_small = _ref.description_small,
+      required = _ref.required,
+      min_chars = _ref.min_chars,
+      max_chars = _ref.max_chars,
+      min_words = _ref.min_words,
+      max_words = _ref.max_words;
+  var LightTooltip = (0, _styles2.styled)(function (_ref2) {
+    var className = _ref2.className,
+        props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
       classes: {
         popper: className
       }
+    }));
+  })(function (_ref3) {
+    var theme = _ref3.theme;
+    return (0, _defineProperty2.default)({}, "& .".concat(_Tooltip.tooltipClasses.tooltip), {
+      className: "tooltip",
+      backgroundColor: _variables.GlobalColors.white,
+      color: "rgba(0, 0, 0, 0.87)",
+      boxShadow: theme.shadows[1],
+      fontSize: 12,
+      fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif"),
+      lineHeight: 1.2
     });
-  })(_ref3 => {
-    let {
-      theme
-    } = _ref3;
-    return {
-      ["& .".concat(_Tooltip.tooltipClasses.tooltip)]: {
-        className: "tooltip",
-        backgroundColor: _variables.GlobalColors.white,
-        color: "rgba(0, 0, 0, 0.87)",
-        boxShadow: theme.shadows[1],
-        fontSize: 12,
-        fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif"),
-        lineHeight: 1.2
-      }
-    };
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LightTooltip, {
     title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -103,4 +113,5 @@ const TooltipLight = _ref => {
     })
   });
 };
+
 exports.TooltipLight = TooltipLight;