contentoh-components-library 21.5.3 → 21.5.4

package/src/assets/images/Icons/save-white-gray.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="34" height="34" rx="17" fill="#F0F0F0"/>
+<mask id="mask0_346_670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="14" height="14">
+<rect x="10" y="10" width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_346_670)">
+<path d="M24 13.0528V22.8333C24 23.1444 23.8833 23.4167 23.65 23.65C23.4167 23.8833 23.1444 24 22.8333 24H11.1667C10.8556 24 10.5833 23.8833 10.35 23.65C10.1167 23.4167 10 23.1444 10 22.8333V11.1667C10 10.8556 10.1167 10.5833 10.35 10.35C10.5833 10.1167 10.8556 10 11.1667 10H20.9472L24 13.0528ZM22.8333 13.5778L20.4222 11.1667H11.1667V22.8333H22.8333V13.5778ZM16.9954 21.5694C17.5559 21.5694 18.0338 21.3733 18.4292 20.981C18.8245 20.5886 19.0222 20.1123 19.0222 19.5518C19.0222 18.9913 18.8261 18.5134 18.4337 18.1181C18.0414 17.7227 17.565 17.525 17.0046 17.525C16.4441 17.525 15.9662 17.7212 15.5708 18.1135C15.1755 18.5058 14.9778 18.9822 14.9778 19.5427C14.9778 20.1031 15.1739 20.581 15.5663 20.9764C15.9586 21.3718 16.435 21.5694 16.9954 21.5694ZM12.1972 14.9778H19.1583V12.1972H12.1972V14.9778Z" fill="white"/>
+</g>
+</svg>

package/src/assets/images/Icons/save-white.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="34" height="34" rx="17" fill="#E33AA9"/>
+<mask id="mask0_346_670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="14" height="14">
+<rect x="10" y="10" width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_346_670)">
+<path d="M24 13.0528V22.8333C24 23.1444 23.8833 23.4167 23.65 23.65C23.4167 23.8833 23.1444 24 22.8333 24H11.1667C10.8556 24 10.5833 23.8833 10.35 23.65C10.1167 23.4167 10 23.1444 10 22.8333V11.1667C10 10.8556 10.1167 10.5833 10.35 10.35C10.5833 10.1167 10.8556 10 11.1667 10H20.9472L24 13.0528ZM22.8333 13.5778L20.4222 11.1667H11.1667V22.8333H22.8333V13.5778ZM16.9954 21.5694C17.5559 21.5694 18.0338 21.3733 18.4292 20.981C18.8245 20.5886 19.0222 20.1123 19.0222 19.5518C19.0222 18.9913 18.8261 18.5134 18.4337 18.1181C18.0414 17.7227 17.565 17.525 17.0046 17.525C16.4441 17.525 15.9662 17.7212 15.5708 18.1135C15.1755 18.5058 14.9778 18.9822 14.9778 19.5427C14.9778 20.1031 15.1739 20.581 15.5663 20.9764C15.9586 21.3718 16.435 21.5694 16.9954 21.5694ZM12.1972 14.9778H19.1583V12.1972H12.1972V14.9778Z" fill="white"/>
+</g>
+</svg>

package/src/assets/images/Icons/save.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_748_1469" 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_748_1469)">
+<path d="M14 3.05278V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H10.9472L14 3.05278ZM12.8333 3.57778L10.4222 1.16667H1.16667V12.8333H12.8333V3.57778ZM6.99543 11.5694C7.55588 11.5694 8.0338 11.3733 8.42917 10.981C8.82454 10.5886 9.02222 10.1123 9.02222 9.55179C9.02222 8.99134 8.82606 8.51343 8.43374 8.11806C8.04143 7.72269 7.56504 7.525 7.00457 7.525C6.44412 7.525 5.9662 7.72116 5.57083 8.11349C5.17546 8.5058 4.97778 8.98219 4.97778 9.54265C4.97778 10.1031 5.17394 10.581 5.56626 10.9764C5.95858 11.3718 6.43496 11.5694 6.99543 11.5694ZM2.19722 4.97778H9.15833V2.19722H2.19722V4.97778Z" fill="#E33AA9"/>
+</g>
+</svg>

package/src/assets/images/Icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2667 12L6.88333 7.61667C6.55 7.90556 6.16134 8.13056 5.71735 8.29167C5.27336 8.45278 4.80091 8.53333 4.3 8.53333C3.0982 8.53333 2.08108 8.11667 1.24865 7.28333C0.416217 6.45 0 5.44444 0 4.26667C0 3.08889 0.416667 2.08333 1.25 1.25C2.08333 0.416667 3.09167 0 4.275 0C5.45833 0 6.46389 0.416667 7.29167 1.25C8.11944 2.08333 8.53333 3.08972 8.53333 4.26917C8.53333 4.74528 8.45556 5.20556 8.3 5.65C8.14444 6.09444 7.91111 6.51111 7.6 6.9L12 11.2667L11.2667 12ZM4.28333 7.53333C5.18611 7.53333 5.95347 7.21389 6.58542 6.575C7.21736 5.93611 7.53333 5.16667 7.53333 4.26667C7.53333 3.36667 7.21736 2.59722 6.58542 1.95833C5.95347 1.31944 5.18611 1 4.28333 1C3.3713 1 2.59607 1.31944 1.95763 1.95833C1.31921 2.59722 1 3.36667 1 4.26667C1 5.16667 1.31921 5.93611 1.95763 6.575C2.59607 7.21389 3.3713 7.53333 4.28333 7.53333Z" fill="#707070"/>
+</svg>

package/src/assets/images/Icons/settings.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_801_1360" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_801_1360)">
+<path d="M4.62 12L4.32 10.11C4.13 10.04 3.93 9.945 3.72 9.825C3.51 9.705 3.325 9.58 3.165 9.45L1.395 10.26L0 7.8L1.62 6.615C1.6 6.525 1.5875 6.4225 1.5825 6.3075C1.5775 6.1925 1.575 6.09 1.575 6C1.575 5.91 1.5775 5.8075 1.5825 5.6925C1.5875 5.5775 1.6 5.475 1.62 5.385L0 4.2L1.395 1.74L3.165 2.55C3.325 2.42 3.51 2.295 3.72 2.175C3.93 2.055 4.13 1.965 4.32 1.905L4.62 0H7.38L7.68 1.89C7.87 1.96 8.0725 2.0525 8.2875 2.1675C8.5025 2.2825 8.685 2.41 8.835 2.55L10.605 1.74L12 4.2L10.38 5.355C10.4 5.455 10.4125 5.5625 10.4175 5.6775C10.4225 5.7925 10.425 5.9 10.425 6C10.425 6.1 10.4225 6.205 10.4175 6.315C10.4125 6.425 10.4 6.53 10.38 6.63L12 7.8L10.605 10.26L8.835 9.45C8.675 9.58 8.4925 9.7075 8.2875 9.8325C8.0825 9.9575 7.88 10.05 7.68 10.11L7.38 12H4.62ZM5.34 11.1H6.66L6.87 9.42C7.2 9.34 7.5125 9.215 7.8075 9.045C8.1025 8.875 8.37 8.67 8.61 8.43L10.2 9.12L10.8 8.04L9.39 7.005C9.43 6.835 9.4625 6.6675 9.4875 6.5025C9.5125 6.3375 9.525 6.17 9.525 6C9.525 5.83 9.515 5.6625 9.495 5.4975C9.475 5.3325 9.44 5.165 9.39 4.995L10.8 3.96L10.2 2.88L8.61 3.57C8.38 3.31 8.12 3.0925 7.83 2.9175C7.54 2.7425 7.22 2.63 6.87 2.58L6.66 0.9H5.34L5.13 2.58C4.79 2.65 4.4725 2.77 4.1775 2.94C3.8825 3.11 3.62 3.32 3.39 3.57L1.8 2.88L1.2 3.96L2.61 4.995C2.57 5.165 2.5375 5.3325 2.5125 5.4975C2.4875 5.6625 2.475 5.83 2.475 6C2.475 6.17 2.4875 6.3375 2.5125 6.5025C2.5375 6.6675 2.57 6.835 2.61 7.005L1.2 8.04L1.8 9.12L3.39 8.43C3.63 8.67 3.8975 8.875 4.1925 9.045C4.4875 9.215 4.8 9.34 5.13 9.42L5.34 11.1ZM6 7.95C6.54 7.95 7 7.76 7.38 7.38C7.76 7 7.95 6.54 7.95 6C7.95 5.46 7.76 5 7.38 4.62C7 4.24 6.54 4.05 6 4.05C5.46 4.05 5 4.24 4.62 4.62C4.24 5 4.05 5.46 4.05 6C4.05 6.54 4.24 7 4.62 7.38C5 7.76 5.46 7.95 6 7.95Z" fill="#E33AA9"/>
+</g>
+</svg>

package/src/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/src/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/src/assets/images/Icons/upload-file-white.svg

@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="48" viewBox="0 0 40 48" fill="none">
+  <path d="M18.32 40.68H21.92V28.62L26.8401 33.54L29.3601 31.02L20 21.9L10.76 31.14L13.2801 33.66L18.32 28.62V40.68ZM4.40005 48C3.44005 48 2.60005 47.64 1.88005 46.92C1.16005 46.2 0.800049 45.36 0.800049 44.4V3.6C0.800049 2.64 1.16005 1.8 1.88005 1.08C2.60005 0.36 3.44005 0 4.40005 0H26.0601L39.2001 13.14V44.4C39.2001 45.36 38.84 46.2 38.1201 46.92C37.4001 47.64 36.5601 48 35.6001 48H4.40005ZM24.2601 14.76V3.6H4.40005V44.4H35.6001V14.76H24.2601Z" fill="#E33AA9"/>
+</svg>

package/src/assets/images/Icons/upload-file.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="upload_file">
+<mask id="mask0_498_701" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect id="Bounding box" x="0.5" y="0.5" width="11" height="11" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_498_701)">
+<path id="upload_file_2" d="M5.61485 9.8225H6.43985V7.05875L7.56735 8.18625L8.14485 7.60875L5.99985 5.51875L3.88235 7.63625L4.45985 8.21375L5.61485 7.05875V9.8225ZM2.42485 11.5C2.20485 11.5 2.01235 11.4175 1.84735 11.2525C1.68235 11.0875 1.59985 10.895 1.59985 10.675V1.325C1.59985 1.105 1.68235 0.9125 1.84735 0.7475C2.01235 0.5825 2.20485 0.5 2.42485 0.5H7.3886L10.3999 3.51125V10.675C10.3999 10.895 10.3174 11.0875 10.1524 11.2525C9.98735 11.4175 9.79485 11.5 9.57485 11.5H2.42485ZM6.9761 3.8825V1.325H2.42485V10.675H9.57485V3.8825H6.9761Z" fill="white"/>
+</g>
+</g>
+</svg>

package/src/assets/images/Icons/upload_file.svg

@@ -0,0 +1,10 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="upload_file">
+<mask id="mask0_496_1928" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+<rect id="Bounding box" width="48" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_496_1928)">
+<path id="upload_file_2" d="M22.32 40.68H25.92V28.62L30.8401 33.54L33.3601 31.02L24 21.9L14.76 31.14L17.2801 33.66L22.32 28.62V40.68ZM8.40005 48C7.44005 48 6.60005 47.64 5.88005 46.92C5.16005 46.2 4.80005 45.36 4.80005 44.4V3.6C4.80005 2.64 5.16005 1.8 5.88005 1.08C6.60005 0.36 7.44005 0 8.40005 0H30.0601L43.2001 13.14V44.4C43.2001 45.36 42.84 46.2 42.1201 46.92C41.4001 47.64 40.5601 48 39.6001 48H8.40005ZM28.2601 14.76V3.6H8.40005V44.4H39.6001V14.76H28.2601Z" fill="#E33AA9"/>
+</g>
+</g>
+</svg>

package/src/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/src/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/src/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/src/assets/images/flagsv2/highPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#FC3030"/>
+</svg>

package/src/assets/images/flagsv2/lowPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#71DE56"/>
+</svg>

package/src/assets/images/flagsv2/mediumPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#EFD963"/>
+</svg>

package/src/assets/images/flagsv2/noPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#CBCBCB"/>
+</svg>

package/src/assets/images/generalButton/closeIconWhite.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="13.3585" y1="12.1333" x2="39.8661" y2="38.641" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.8672 12.1333L13.8672 38.1333" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/generalButton/closeIconv2.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="13.3585" y1="12.1333" x2="39.8661" y2="38.641" stroke="#707070" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.8672 12.1333L13.8672 38.1333" stroke="#707070" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/generalButton/saveIconpink.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.76419 1.25748L8.05551 0.488358C7.76757 0.1754 7.37713 0 6.96975 0H1.05581C0.472617 0 0 0.512924 0 1.14586V8.85414C0 9.48708 0.472617 10 1.05581 10H8.15836C8.74156 10 9.21417 9.48708 9.21417 8.85414V2.43584C9.21417 1.99371 9.05256 1.56998 8.76419 1.25748ZM1.53567 2.60414V1.5625C1.53567 1.39 1.66467 1.25 1.82361 1.25H5.85482C6.01376 1.25 6.14276 1.39 6.14276 1.5625V2.60414C6.14276 2.77664 6.01376 2.91664 5.85482 2.91664H1.82361C1.66467 2.91664 1.53567 2.77664 1.53567 2.60414ZM4.60709 8.33336C3.65306 8.33336 2.87943 7.49374 2.87943 6.45836C2.87943 5.4229 3.65306 4.58336 4.60709 4.58336C5.56111 4.58336 6.33474 5.4229 6.33474 6.45836C6.33474 7.49374 5.56111 8.33336 4.60709 8.33336Z" fill="#E33AA9"/>
+</svg>

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

@@ -2,12 +2,18 @@ import { Container } from "./styles";
 import ReactImageFallback from "react-image-fallback";
 import defaultProfile from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 
-export const Avatar = ({ image, altText, imageType, onClick }) => {
+export const Avatar = ({
+  image,
+  altText,
+  imageType,
+  onClick,
+  fallbackImage,
+}) => {
   return (
     <Container className={imageType}>
       <ReactImageFallback
         src={image}
-        fallbackImage={defaultProfile}
+        fallbackImage={fallbackImage || defaultProfile}
         alt={altText}
         onClick={onClick}
       />

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

@@ -17,6 +17,7 @@ export default {
         "purple",
         "purpleS2",
         "black",
+        "red"
       ],
       control: { type: "select" },
     },

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

@@ -53,6 +53,7 @@ export const ButtonV2 = (props) => {
             "purple",
             "purpleS2",
             "black",
+            "red"
           ].includes(type)
             ? type
             : "white") +

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

@@ -128,6 +128,14 @@ export const Container = styled.div`
           background-color: #61467e;
         }
       }
+      &.red {
+        background-color: #B64545;
+        color: white;
+        border-color: #B64545;
+        &:hover {
+          background-color: 9C4646;
+        }
+      }
     }
 
     // tipos de botones transparent
@@ -179,6 +187,14 @@ export const Container = styled.div`
           color: #7b7979;
         }
       }
+      &.red {
+        background-color: #B64545;
+        color: white;
+        border-color: #B64545;
+        &:hover {
+          background-color: 9C4646;
+        }
+      }
     }
 
     .icon,

package/src/components/atoms/CharsMissing/Wysiwyg.stories.js

@@ -0,0 +1,12 @@
+import { CharsMissing } from "./index";
+
+export default {
+  title: "Components/atoms/CharsMissing",
+  component: CharsMissing,
+};
+
+const Template = (args) => <CharsMissing {...args} />;
+
+export const DefaultCharsMissing = Template.bind({});
+
+DefaultCharsMissing.args = { text: "hola mundo" };

package/src/components/atoms/CharsMissing/index.js

@@ -0,0 +1,60 @@
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import { useState } from "react";
+import { Container } from "./styles";
+
+export const CharsMissing = ({
+  mainValue = "",
+  inputId,
+  articleId,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  isRequired,
+  maxChar,
+}) => {
+  const [inputValue, setInputValue] = useState(mainValue);
+  const [selection, setSelection] = useState(false);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+  const [charsCounter, setCharsCounter] = useState(0);
+  const [quillState, setQuillState] = useState({});
+  const maxLength = maxChar ? maxChar : 999;
+
+  const getValue = (value) => {
+    let temp = value
+      .replace(/\n/gm, "<br>")
+      .replace(/\&nbsp;/gm, " ")
+      .replace(/\&amp;/gm, "&");
+    return temp;
+  };
+
+  //const quillRef = useRef();
+  const setQuill = (ref) => {
+    if (!ref || ref === null) return;
+    if (typeof ref.getEditor !== "function") return;
+    setQuillState(ref.getEditor());
+  };
+
+  const valueFormater = (value) => {
+    return value
+      .replace(/<\/p><p>/gm, "\n")
+      .replace(/<\/?br>|<\/?p>/gm, "")
+      .replace(/\&nbsp;/gm, " ")
+      .replace(/\&amp;/gm, "&");
+  };
+
+
+  return (
+    <Container
+      isRequired={
+        isRequired &&
+        (inputValue.replace(/<.*?>/gm, "").length === 0 || !inputValue)
+      }
+      selection={selection}
+      position={position}
+    >
+      <p className="description-limit">
+        C. {charsCounter}/{maxLength}
+      </p>
+    </Container>
+  );
+};

package/src/components/atoms/CharsMissing/styles.js

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .description-limit {
+    font-size: 8px;
+    font-family: ${FontFamily.Roboto}, sans-serif;
+    color: ${GlobalColors.gray_medium};
+  }
+  .quill {
+    background-color: ${GlobalColors.white};
+    border: 1px solid
+      ${({ focus, isRequired }) =>
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.gray_light};
+    position: relative;
+    border-radius: 5px;
+
+    .ql-toolbar {
+      background-color: ${GlobalColors.s2};
+      position: absolute;
+      z-index: 10;
+      border: 1px solid ${GlobalColors.gray_light};
+      width: 45px;
+      height: 45px;
+      border-radius: 4px;
+      visibility: ${({ selection }) => (selection ? "visible" : "hidden")};
+      top: ${({ position }) => position.top}px;
+      left: ${({ position }) => position.left}px;
+    }
+
+    .ql-container {
+      border: none;
+      font-family: ${FontFamily.AvenirNext};
+      color: ${GlobalColors.deep_gray};
+      strong {
+        font-family: ${FontFamily.Raleway_900};
+      }
+
+      .ql-editor{
+        padding: 8px 10px;
+      }
+    }
+  }
+`;

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

@@ -8,6 +8,10 @@ export default {
       options: [true, false],
       type: "boolean",
     },
+    typeColor: {
+        options: ["purple", "green", "pink"],
+        control: { type: "select" },
+      },
   },
 };
 
@@ -17,4 +21,5 @@ export const CheckBoxDefault = Template.bind({});
 CheckBoxDefault.args = {
   id: "chk-default",
   label: "chk-default",
+  typeColor: "purple",
 };

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { Container } from "./styles";
 
 export const CheckBox = ({
@@ -8,10 +10,11 @@ export const CheckBox = ({
   defaultChecked,
   disabled = false,
   checked,
+  typeColor,
   className = "",
 }) => {
   return (
-    <Container key={`check-${id}`} className={className}>
+    <Container key={`check-${id}`} className={className} typeColor={typeColor}>
       <input
         type="checkbox"
         name={id}
@@ -23,6 +26,7 @@ export const CheckBox = ({
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
+        
       </label>
     </Container>
   );

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

@@ -1,5 +1,7 @@
 import styled from "styled-components";
-import checked from "../../../assets/images/checkBox/checked.svg";
+import checkedPurple from "../../../assets/images/checkBox/checked.svg";
+import checkedGreen from "../../../assets/images/checkBox/checkverde.svg";
+import checkedPink from "../../../assets/images/checkBox/checkrosa.svg";
 import unchecked from "../../../assets/images/checkBox/unchecked.svg";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
@@ -9,8 +11,10 @@ export const Container = styled.div`
     &:checked + label {
       &:before {
         background-color: ${GlobalColors.white};
-        background-image: url(${checked});
-      }
+        background-image: ${({ typeColor }) => ( typeColor === "purple" ? 
+        `url(${checkedPurple})` : typeColor === "green" 
+        ? `url(${checkedGreen})` : `url(${checkedPink})` )}
+      } 
     }
   }
 
@@ -46,6 +50,8 @@ export const Container = styled.div`
       top: 50%;
       transform: translateY(-50%);
       background-image: url(${unchecked});
+      z-index: 5;
+      cursor: pointer;
     }
   }
 `;

package/src/components/atoms/CustomChip/CustomChip.stories.js

@@ -0,0 +1,16 @@
+import { CustomChip } from "./index";
+
+export default {
+  title: "Components/atoms/CustomChip",
+  component: CustomChip,
+  argTypes: {
+  }
+};
+
+const Template = (args) => <CustomChip {...args} />;
+
+export const CustomChipDefault = Template.bind({});
+
+CustomChipDefault.args = {
+  name:"legal"
+}

package/src/components/atoms/CustomChip/index.js

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import { Container } from "./styles";
+import MuiChip from "@mui/material/Chip";
+import DeleteIcon from "@mui/icons-material/DeleteForeverOutlined";
+
+export const CustomChip = ({ key, label, onDelete, showDelete }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <MuiChip
+      key={key}
+      label={label}
+      onDelete={onDelete}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      deleteIcon={showDelete ? <DeleteIcon sx={{color:"#B64545!important",fontSize:"14px!important",cursor:"pointer",}}/> : <DeleteIcon sx={{display:"none"}}/> }
+      style={{
+        height:"30px",
+        borderRadius: "5px",
+        background: "transparent",
+        border: `1px solid ${showDelete && isHovered ? "#B64545" : "#F0F0F0"}`,
+        color: `${showDelete && isHovered ? "#B64545" : "#707070"}`,
+      }}
+    />
+  );
+};

package/src/components/atoms/CustomChip/styles.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+
+`;

package/src/components/atoms/FeatureTagv2/FeatureTagv2.stories.js

@@ -0,0 +1,16 @@
+import { FeatureTagv2 } from "./index";
+
+export default {
+  title: "Components/atoms/FeatureTagv2",
+  label: "Feature Tag",
+  component: FeatureTagv2,
+};
+
+const Template = (args) => <FeatureTagv2 {...args} />;
+
+export const FeatureTagDefault = Template.bind({});
+
+FeatureTagDefault.args = {
+  feature: "Feature",
+  value: "Value",
+};

package/src/components/atoms/FeatureTagv2/index.js

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+
+export const FeatureTagv2 = ({ feature, value, contClassName ,tagClassName }) => {
+  return (
+    <Container className={`${contClassName}`}>
+      <p className={`feature-name ${tagClassName}`}>{feature}</p>
+      <p className="feature-value">{value}</p>
+    </Container>
+  );
+};

package/src/components/atoms/FeatureTagv2/styles.js

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border-radius: 3px;
+  display: flex;
+  width: fit-content;
+  height: 20px;
+  padding: 4px 5px;
+  align-items: center;
+
+  .feature-name {
+    font-size: 10px;
+    font-family: ${FontFamily.Raleway_500};
+    font-style: normal;
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 12px;
+    color: ${GlobalColors.gray};
+
+    & + * {
+      margin-left: 5px;
+    }
+    &.bar-container {
+      background-color: #f0eef2;
+      border-radius: 3px;
+      height: 20px;
+      padding: 4px 5px;
+      min-width: 70px;
+      text-align: center;
+    }
+  }
+  .feature-value {
+    font-family: ${FontFamily.AvenirNext};
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    height: 12px;
+    letter-spacing: -0.015em;
+    color: ${GlobalColors.gray};
+  }
+
+  &:last-of-type {
+    p {
+      font-size: 10px;
+    }
+  }
+  &.bar-sku-cont {
+    background-color: ${GlobalColors.purple};
+    p{
+      color: ${GlobalColors.white};
+    }
+  }
+`;