contentoh-components-library 21.4.74 → 21.4.77

package/dist/assets/images/Icons/addv2.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_343_348" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_343_348)">
+<path d="M6.25 7.75H0V6.25H6.25V0H7.75V6.25H14V7.75H7.75V14H6.25V7.75Z" fill="#E33AA9"/>
+</g>
+</svg>

package/dist/assets/images/Icons/checkv2.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_372_2690" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+<rect width="48" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_372_2690)">
+<path d="M20.46 34.92L37.44 17.94L34.68 15.24L20.46 29.46L13.26 22.26L10.56 24.96L20.46 34.92ZM24 48C20.72 48 17.62 47.37 14.7 46.11C11.78 44.85 9.23 43.13 7.05 40.95C4.87 38.77 3.15 36.22 1.89 33.3C0.63 30.38 0 27.28 0 24C0 20.68 0.63 17.56 1.89 14.64C3.15 11.72 4.87 9.18 7.05 7.02C9.23 4.86 11.78 3.15 14.7 1.89C17.62 0.63 20.72 0 24 0C27.32 0 30.44 0.63 33.36 1.89C36.28 3.15 38.82 4.86 40.98 7.02C43.14 9.18 44.85 11.72 46.11 14.64C47.37 17.56 48 20.68 48 24C48 27.28 47.37 30.38 46.11 33.3C44.85 36.22 43.14 38.77 40.98 40.95C38.82 43.13 36.28 44.85 33.36 46.11C30.44 47.37 27.32 48 24 48ZM24 44.4C29.68 44.4 34.5 42.41 38.46 38.43C42.42 34.45 44.4 29.64 44.4 24C44.4 18.32 42.42 13.5 38.46 9.54C34.5 5.58 29.68 3.6 24 3.6C18.36 3.6 13.55 5.58 9.57 9.54C5.59 13.5 3.6 18.32 3.6 24C3.6 29.64 5.59 34.45 9.57 38.43C13.55 42.41 18.36 44.4 24 44.4Z" fill="#85BC5B"/>
+</g>
+</svg>

package/dist/assets/images/Icons/options.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="17" viewBox="0 0 6 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 14.25C2.5875 14.25 2.23438 14.1031 1.94063 13.8094C1.64688 13.5156 1.5 13.1625 1.5 12.75C1.5 12.3375 1.64688 11.9844 1.94063 11.6906C2.23438 11.3969 2.5875 11.25 3 11.25C3.4125 11.25 3.76562 11.3969 4.05938 11.6906C4.35313 11.9844 4.5 12.3375 4.5 12.75C4.5 13.1625 4.35313 13.5156 4.05938 13.8094C3.76562 14.1031 3.4125 14.25 3 14.25ZM3 9.75C2.5875 9.75 2.23438 9.60313 1.94063 9.30938C1.64688 9.01563 1.5 8.6625 1.5 8.25C1.5 7.8375 1.64688 7.48438 1.94063 7.19063C2.23438 6.89687 2.5875 6.75 3 6.75C3.4125 6.75 3.76562 6.89687 4.05938 7.19063C4.35313 7.48438 4.5 7.8375 4.5 8.25C4.5 8.6625 4.35313 9.01563 4.05938 9.30938C3.76562 9.60313 3.4125 9.75 3 9.75ZM3 5.25C2.5875 5.25 2.23438 5.10313 1.94063 4.80938C1.64688 4.51562 1.5 4.1625 1.5 3.75C1.5 3.3375 1.64688 2.98438 1.94063 2.69063C2.23438 2.39688 2.5875 2.25 3 2.25C3.4125 2.25 3.76562 2.39688 4.05938 2.69063C4.35313 2.98438 4.5 3.3375 4.5 3.75C4.5 4.1625 4.35313 4.51562 4.05938 4.80938C3.76562 5.10313 3.4125 5.25 3 5.25Z" fill="#CBCBCB"/>
+</svg>

package/dist/assets/images/Icons/trash.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_238_1737" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_238_1737)">
+<path d="M4.78333 10.5194L7.09722 8.16667L9.43056 10.5194L10.3444 9.58611L8.03056 7.23333L10.3444 4.88056L9.43056 3.94722L7.09722 6.3L4.78333 3.94722L3.85 4.88056L6.18333 7.23333L3.85 9.58611L4.78333 10.5194ZM2.83889 14C2.52778 14 2.25556 13.8833 2.02222 13.65C1.78889 13.4167 1.67222 13.1444 1.67222 12.8333V1.75H0.875V0.583333H4.53056V0H9.66389V0.583333H13.3194V1.75H12.5222V12.8333C12.5222 13.1444 12.4056 13.4167 12.1722 13.65C11.9389 13.8833 11.6667 14 11.3556 14H2.83889ZM11.3556 1.75H2.83889V12.8333H11.3556V1.75Z" fill="#B64545"/>
+</g>
+</svg>

package/dist/assets/images/Icons/undo.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_267_1812" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_267_1812)">
+<path d="M2.16563 13.7083V12.3958H8.94688C9.96771 12.3958 10.8464 12.0567 11.5828 11.3786C12.3193 10.7004 12.6875 9.85825 12.6875 8.852C12.6875 7.84575 12.3193 7.00356 11.5828 6.32544C10.8464 5.64731 9.96771 5.30825 8.94688 5.30825H2.49375L4.9875 7.802L4.06875 8.72075L0 4.652L4.06875 0.583252L4.9875 1.502L2.49375 3.99575H8.925C10.3104 3.99575 11.5026 4.46242 12.5016 5.39575C13.5005 6.32909 14 7.48117 14 8.852C14 10.2228 13.5005 11.3749 12.5016 12.3083C11.5026 13.2416 10.3104 13.7083 8.925 13.7083H2.16563Z" fill="white"/>
+</g>
+</svg>

package/dist/assets/images/Icons/warningv2.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9988 35.9047C24.555 35.9047 25.0217 35.7166 25.3986 35.3403C25.7756 34.964 25.9641 34.4977 25.9641 33.9415C25.9641 33.3852 25.776 32.9186 25.3997 32.5416C25.0234 32.1646 24.5571 31.9761 24.0009 31.9761C23.4446 31.9761 22.978 32.1643 22.601 32.5406C22.224 32.9169 22.0355 33.3831 22.0355 33.9394C22.0355 34.4956 22.2237 34.9623 22.6 35.3392C22.9763 35.7162 23.4425 35.9047 23.9988 35.9047ZM22.3927 26.7976H25.9641V11.738H22.3927V26.7976ZM24.0157 47.8095C20.7326 47.8095 17.6473 47.1845 14.7597 45.9345C11.8722 44.6845 9.34705 42.9781 7.18436 40.8154C5.02166 38.6527 3.31531 36.1261 2.06531 33.2356C0.815308 30.3451 0.190308 27.2567 0.190308 23.9702C0.190308 20.6837 0.815308 17.5953 2.06531 14.7048C3.31531 11.8143 5.02166 9.29757 7.18436 7.15472C9.34705 5.01186 11.8737 3.31543 14.7642 2.06543C17.6547 0.81543 20.7431 0.19043 24.0296 0.19043C27.3161 0.19043 30.4045 0.81543 33.295 2.06543C36.1855 3.31543 38.7022 5.01186 40.8451 7.15472C42.9879 9.29757 44.6844 11.8174 45.9344 14.7142C47.1844 17.6111 47.8094 20.701 47.8094 23.9841C47.8094 27.2672 47.1844 30.3525 45.9344 33.2401C44.6844 36.1276 42.9879 38.6491 40.8451 40.8045C38.7022 42.9599 36.1824 44.6662 33.2855 45.9235C30.3887 47.1808 27.2988 47.8095 24.0157 47.8095ZM24.0296 44.238C29.6447 44.238 34.4165 42.2638 38.3451 38.3154C42.2736 34.367 44.2379 29.5853 44.2379 23.9702C44.2379 18.3551 42.2774 13.5833 38.3563 9.65472C34.4351 5.72614 29.6496 3.76186 23.9998 3.76186C18.4046 3.76186 13.6328 5.72241 9.68435 9.64353C5.73594 13.5647 3.76174 18.3502 3.76174 24C3.76174 29.5952 5.73594 34.367 9.68435 38.3154C13.6328 42.2638 18.4145 44.238 24.0296 44.238Z" fill="#B64545"/>
+</svg>

package/dist/assets/images/checkBox/checkrosa.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2222 0H1.77778C0.791111 0 0 0.8 0 1.77778V14.2222C0 15.2 0.791111 16 1.77778 16H14.2222C15.2089 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2089 0 14.2222 0ZM6.22222 12.4444L1.77778 8L3.03111 6.74667L6.22222 9.92889L12.9689 3.18222L14.2222 4.44444L6.22222 12.4444Z" fill="#E33AA9"/>
+</svg>

package/dist/assets/images/checkBox/checkverde.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2222 0H1.77778C0.791111 0 0 0.8 0 1.77778V14.2222C0 15.2 0.791111 16 1.77778 16H14.2222C15.2089 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2089 0 14.2222 0ZM6.22222 12.4444L1.77778 8L3.03111 6.74667L6.22222 9.92889L12.9689 3.18222L14.2222 4.44444L6.22222 12.4444Z" fill="#85BC5B"/>
+</svg>

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

@@ -19,12 +19,13 @@ var Avatar = function Avatar(_ref) {
   var image = _ref.image,
       altText = _ref.altText,
       imageType = _ref.imageType,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      fallbackImage = _ref.fallbackImage;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     className: imageType,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
       src: image,
-      fallbackImage: _defaultProfileImage.default,
+      fallbackImage: fallbackImage || _defaultProfileImage.default,
       alt: altText,
       onClick: onClick
     })

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

@@ -20,7 +20,7 @@ var _default = {
   component: _index.ButtonV2,
   argTypes: {
     type: {
-      options: [undefined, "white", "whiteS2", "whiteS3", "whiteS4", "pink", "gray", "purple", "purpleS2", "black"],
+      options: [undefined, "white", "whiteS2", "whiteS3", "whiteS4", "pink", "gray", "purple", "purpleS2", "black", "red"],
       control: {
         type: "select"
       }

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

@@ -50,7 +50,7 @@ var ButtonV2 = function ButtonV2(props) {
     disabled: disabled,
     isLoading: isLoading,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-      className: "button " + (["white", "whiteS2", "whiteS3", "whiteS4", "pink", "gray", "purple", "purpleS2", "black"].includes(type) ? type : "white") + (transparent ? " transparent" : " fill"),
+      className: "button " + (["white", "whiteS2", "whiteS3", "whiteS4", "pink", "gray", "purple", "purpleS2", "black", "red"].includes(type) ? type : "white") + (transparent ? " transparent" : " fill"),
       variant: "text",
       disabled: disabled || isLoading,
       onClick: /*#__PURE__*/function () {

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0px;\n  cursor: ", ";\n  border-radius: ", ";\n  border: none;\n\n  .button {\n    --size: ", "px;\n    width: 100%;\n    min-width: min-content;\n    cursor: inherit;\n    display: flex;\n    flex-direction: ", ";\n    gap: 7px;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border-radius: inherit;\n    border: ", ";\n    font-family: ", ", sans-serif;\n    font-size: var(--size);\n    line-height: 1.2;\n    text-transform: none;\n\n    // tipos de botones fill\n    &.fill {\n      &.white {\n        background-color: white;\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS2 {\n        background-color: white;\n        color: #7b7979;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS3 {\n        background-color: white;\n        color: #262626;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS4 {\n        background-color: white;\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #e0e0f1;\n        }\n      }\n      &.pink {\n        background-color: #e33aa9;\n        color: #f0f0f0;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #b42983;\n        }\n      }\n      &.gray {\n        background-color: #e8e5e5;\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n        }\n        &:hover {\n          background-color: #d6d3d3;\n        }\n      }\n      &.purple {\n        background-color: #f7f7fc;\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #e0e0f1;\n        }\n      }\n      &.purpleS2 {\n        background-color: #8a6caa;\n        color: white;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #61467e;\n        }\n      }\n    }\n\n    // tipos de botones transparent\n    &.transparent {\n      &:hover {\n        background-color: transparent;\n      }\n      &.white {\n        color: white;\n        border-color: #e33aa9;\n        &:hover {\n          color: #d6d4d4;\n        }\n      }\n      &.pink {\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          color: #b42983;\n        }\n      }\n      &.gray {\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n          transition: inherit;\n        }\n        &:hover {\n          color: #7b7979;\n          .icon,\n          .iconLoading {\n            color: #bdbbbb;\n          }\n        }\n      }\n      &.purple {\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          color: #714f95;\n        }\n      }\n      &.black {\n        color: #262626;\n        border-color: #262626;\n        &:hover {\n          color: #7b7979;\n        }\n      }\n    }\n\n    .icon,\n    .iconLoading {\n      display: grid;\n      place-items: center;\n      color: inherit;\n      font-size: ", ";\n    }\n    .iconLoading {\n      font-size: ", ";\n    }\n\n    // mismo estilo desabilitado para cualquier tipo de boton\n    &:disabled {\n      background-color: #fcebf7 !important;\n      color: #7b7979 !important;\n      border-color: #7b7979 !important;\n\n      .icon {\n        color: #9e9c9c !important;\n      }\n      .iconLoading {\n        color: #9e2674 !important;\n      }\n\n      &:hover {\n        background-color: #fcebf7 !important;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0px;\n  cursor: ", ";\n  border-radius: ", ";\n  border: none;\n\n  .button {\n    --size: ", "px;\n    width: 100%;\n    min-width: min-content;\n    cursor: inherit;\n    display: flex;\n    flex-direction: ", ";\n    gap: 7px;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border-radius: inherit;\n    border: ", ";\n    font-family: ", ", sans-serif;\n    font-size: var(--size);\n    line-height: 1.2;\n    text-transform: none;\n\n    // tipos de botones fill\n    &.fill {\n      &.white {\n        background-color: white;\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS2 {\n        background-color: white;\n        color: #7b7979;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS3 {\n        background-color: white;\n        color: #262626;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS4 {\n        background-color: white;\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #e0e0f1;\n        }\n      }\n      &.pink {\n        background-color: #e33aa9;\n        color: #f0f0f0;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #b42983;\n        }\n      }\n      &.gray {\n        background-color: #e8e5e5;\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n        }\n        &:hover {\n          background-color: #d6d3d3;\n        }\n      }\n      &.purple {\n        background-color: #f7f7fc;\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #e0e0f1;\n        }\n      }\n      &.purpleS2 {\n        background-color: #8a6caa;\n        color: white;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #61467e;\n        }\n      }\n      &.red {\n        background-color: #B64545;\n        color: white;\n        border-color: #B64545;\n        &:hover {\n          background-color: 9C4646;\n        }\n      }\n    }\n\n    // tipos de botones transparent\n    &.transparent {\n      &:hover {\n        background-color: transparent;\n      }\n      &.white {\n        color: white;\n        border-color: #e33aa9;\n        &:hover {\n          color: #d6d4d4;\n        }\n      }\n      &.pink {\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          color: #b42983;\n        }\n      }\n      &.gray {\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n          transition: inherit;\n        }\n        &:hover {\n          color: #7b7979;\n          .icon,\n          .iconLoading {\n            color: #bdbbbb;\n          }\n        }\n      }\n      &.purple {\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          color: #714f95;\n        }\n      }\n      &.black {\n        color: #262626;\n        border-color: #262626;\n        &:hover {\n          color: #7b7979;\n        }\n      }\n      &.red {\n        background-color: #B64545;\n        color: white;\n        border-color: #B64545;\n        &:hover {\n          background-color: 9C4646;\n        }\n      }\n    }\n\n    .icon,\n    .iconLoading {\n      display: grid;\n      place-items: center;\n      color: inherit;\n      font-size: ", ";\n    }\n    .iconLoading {\n      font-size: ", ";\n    }\n\n    // mismo estilo desabilitado para cualquier tipo de boton\n    &:disabled {\n      background-color: #fcebf7 !important;\n      color: #7b7979 !important;\n      border-color: #7b7979 !important;\n\n      .icon {\n        color: #9e9c9c !important;\n      }\n      .iconLoading {\n        color: #9e2674 !important;\n      }\n\n      &:hover {\n        background-color: #fcebf7 !important;\n      }\n    }\n  }\n"])), function (_ref) {
   var disabled = _ref.disabled,
       isLoading = _ref.isLoading;
   return disabled || isLoading ? "not-allowed" : "pointer";

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

@@ -20,6 +20,12 @@ var _default = {
     isFilter: {
       options: [true, false],
       type: "boolean"
+    },
+    typeColor: {
+      options: ["purple", "green", "pink"],
+      control: {
+        type: "select"
+      }
     }
   }
 };
@@ -33,5 +39,6 @@ var CheckBoxDefault = Template.bind({});
 exports.CheckBoxDefault = CheckBoxDefault;
 CheckBoxDefault.args = {
   id: "chk-default",
-  label: "chk-default"
+  label: "chk-default",
+  typeColor: "purple"
 };

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

@@ -1,10 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckBox = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
+var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
+
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,10 +24,12 @@ var CheckBox = function CheckBox(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       checked = _ref.checked,
+      typeColor = _ref.typeColor,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: className,
+    typeColor: typeColor,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "checkbox",
       name: id,

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

@@ -13,12 +13,19 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _checked = _interopRequireDefault(require("../../../assets/images/checkBox/checked.svg"));
 
+var _checkverde = _interopRequireDefault(require("../../../assets/images/checkBox/checkverde.svg"));
+
+var _checkrosa = _interopRequireDefault(require("../../../assets/images/checkBox/checkrosa.svg"));
+
 var _unchecked = _interopRequireDefault(require("../../../assets/images/checkBox/unchecked.svg"));
 
 var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input {\n    display: none;\n    &:checked + label {\n      &:before {\n        background-color: ", ";\n        background-image: url(", ");\n      }\n    }\n  }\n\n  label {\n    position: relative;\n    min-height: 16px;\n    min-width: 16px;\n    display: inline-block;\n\n    p {\n      display: inline;\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      margin-left: 20px;\n\n      &.filter-text {\n        color: ", ";\n        font-size: 18px;\n        line-height: 24px;\n        margin-left: 23px;\n      }\n    }\n\n    &:before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      position: absolute;\n      display: inline-block;\n      top: 50%;\n      transform: translateY(-50%);\n      background-image: url(", ");\n    }\n  }\n"])), _variables.GlobalColors.white, _checked.default, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.magenta_s2, _unchecked.default);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input {\n    display: none;\n    &:checked + label {\n      &:before {\n        background-color: ", ";\n        background-image: ", "\n      } \n    }\n  }\n\n  label {\n    position: relative;\n    min-height: 16px;\n    min-width: 16px;\n    display: inline-block;\n\n    p {\n      display: inline;\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      margin-left: 20px;\n\n      &.filter-text {\n        color: ", ";\n        font-size: 18px;\n        line-height: 24px;\n        margin-left: 23px;\n      }\n    }\n\n    &:before {\n      content: \"\";\n      width: 16px;\n      height: 16px;\n      position: absolute;\n      display: inline-block;\n      top: 50%;\n      transform: translateY(-50%);\n      background-image: url(", ");\n      z-index: 5;\n      cursor: pointer;\n    }\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
+  var typeColor = _ref.typeColor;
+  return typeColor === "purple" ? "url(".concat(_checked.default, ")") : typeColor === "green" ? "url(".concat(_checkverde.default, ")") : "url(".concat(_checkrosa.default, ")");
+}, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.magenta_s2, _unchecked.default);
 
 exports.Container = Container;

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

@@ -23,6 +23,10 @@ var _openModal = _interopRequireDefault(require("../../../assets/images/generalB
 
 var _closeIcon = _interopRequireDefault(require("../../../assets/images/generalButton/closeIcon.svg"));
 
+var _closeIconv = _interopRequireDefault(require("../../../assets/images/generalButton/closeIconv2.svg"));
+
+var _closeIconWhite = _interopRequireDefault(require("../../../assets/images/generalButton/closeIconWhite.svg"));
+
 var _rowLayout = _interopRequireDefault(require("../../../assets/images/generalButton/rowLayout.svg"));
 
 var _gridLayout = _interopRequireDefault(require("../../../assets/images/generalButton/gridLayout.svg"));
@@ -43,8 +47,8 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.buttonFont;
-}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
 
 exports.Container = Container;

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

@@ -15,11 +15,11 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .quill {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 2px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n    }\n  }\n  .description-limit {\n    font-size: 12px;\n    font-family: ", ";\n    color: ", ";\n    text-align: right;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .quill {\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 5px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n\n      .ql-editor{\n        padding: 8px 10px;\n      }\n    }\n  }\n  .description-limit {\n    font-size: 12px;\n    font-family: ", ";\n    color: ", ";\n    text-align: right;\n    margin-top: 5px;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
   var focus = _ref.focus,
       isRequired = _ref.isRequired;
-  return focus ? _variables.GlobalColors.magenta_s2 : isRequired ? "red" : _variables.GlobalColors.s3;
-}, _variables.GlobalColors.s2, _variables.GlobalColors.s3, function (_ref2) {
+  return focus ? _variables.GlobalColors.magenta_s2 : isRequired ? "red" : _variables.GlobalColors.gray_light;
+}, _variables.GlobalColors.s2, _variables.GlobalColors.gray_light, function (_ref2) {
   var selection = _ref2.selection;
   return selection ? "visible" : "hidden";
 }, function (_ref3) {

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PriorityFlagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/ObservationFlag",
+  component: _index.ObservationFlag,
+  argTypes: {
+    observation: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ObservationFlag, (0, _objectSpread2.default)({}, args));
+};
+
+var PriorityFlagDefault = Template.bind({});
+exports.PriorityFlagDefault = PriorityFlagDefault;
+PriorityFlagDefault.args = {
+  observation: "no observation"
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObservationFlag = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _styles = require("./styles");
+
+var _Tooltip = require("../Tooltip");
+
+var _noPriority = _interopRequireDefault(require("../../../assets/images/flags/noPriority.svg"));
+
+var _highPriority = _interopRequireDefault(require("../../../assets/images/flags/highPriority.svg"));
+
+var _mediumPriority = _interopRequireDefault(require("../../../assets/images/flags/mediumPriority.svg"));
+
+var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ObservationFlag = function ObservationFlag(_ref) {
+  var _PriorityFlags;
+
+  var observation = _ref.observation,
+      contentObservation = _ref.contentObservation;
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Observaciones del producto"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        children: [contentObservation, " "]
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: PriorityFlags[observation],
+        alt: observation
+      })
+    }),
+    classNameTooltip: "container-tooltip"
+  });
+};
+
+exports.ObservationFlag = ObservationFlag;

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

@@ -0,0 +1,18 @@
+"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 _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.Container = Container;

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

@@ -19,6 +19,6 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 
 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% + -70px);\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 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/molecules/BoxAttribute/index.js

@@ -63,7 +63,7 @@ var BoxAttribute = function BoxAttribute(props) {
     var theme = _ref2.theme;
     return (0, _defineProperty2.default)({}, "& .".concat(_Tooltip.tooltipClasses.tooltip), {
       backgroundColor: _variables.GlobalColors.white,
-      color: 'rgba(0, 0, 0, 0.87)',
+      color: "rgba(0, 0, 0, 0.87)",
       boxShadow: theme.shadows[1],
       fontSize: 11,
       fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif")
@@ -92,8 +92,8 @@ var BoxAttribute = function BoxAttribute(props) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         children: [text, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: required ? 'required-text' : '',
-          children: required ? '*' : ''
+          className: required ? "required-text" : "",
+          children: required ? "*" : ""
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         hiddenLabel: true,

package/dist/components/molecules/BoxAttribute/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap:4px;\n  #atr-alto {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .caja-borde {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    border-radius: ", ";\n  }\n  span {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n  }\n  .icon {\n    width: 8px;\n    height: 8px;\n  }\n  .required-text {\n    color: red;\n  }\n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  #atr-alto {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .caja-borde {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    border-radius: ", ";\n  }\n  span {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n  }\n  .icon {\n    width: 8px;\n    height: 8px;\n  }\n  .required-text {\n    color: red;\n  }\n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
   var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "5px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "none";
 }, _variables.FontFamily.RobotoMedium);

package/dist/components/molecules/BoxButtons/index.js

@@ -17,7 +17,6 @@ var BoxButtons = function BoxButtons(_ref) {
       onDelete = _ref.onDelete,
       isTheFirstBox = _ref.isTheFirstBox,
       index = _ref.index;
-  console.log("index", index);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     index: index,
     children: [!isTheFirstBox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {

package/dist/components/molecules/CarouselImagesLogin/index.js

@@ -47,7 +47,7 @@ var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
       Array.from(circulos).forEach(function (cir) {
         return cir.classList.remove("resaltado");
       });
-      circulo_actual.classList.add("resaltado");
+      circulo_actual === null || circulo_actual === void 0 ? void 0 : circulo_actual.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;

package/dist/components/molecules/GroupSelect/GroupSelect.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GroupSelectDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _starIcon = _interopRequireDefault(require("../../../assets/images/customSelect/starIcon.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/GroupSelect",
+  component: _index.GroupSelect
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GroupSelect, (0, _objectSpread2.default)({}, args));
+};
+
+var GroupSelectDefault = Template.bind({});
+exports.GroupSelectDefault = GroupSelectDefault;
+GroupSelectDefault.args = {
+  // selectLabel: "Todos los departamentos",
+  defaultOption: "Todos los departamentos",
+  options: [{
+    id: 47,
+    name: "Enero 2023",
+    isSelected: true
+  }, {
+    id: 49,
+    name: "Mis Favoritos"
+  }],
+  onClickItem: function onClickItem(v, id) {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: _starIcon.default,
+  showSearchBar: true,
+  customOptions: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    children: "Esto es un customOptions"
+  })
+};