@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/cjs/components/Icons/hlWrench.js

@@ -9,10 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const hlWrench = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default.default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color }, props),
-        React__default.default.createElement("path", { d: "M17.8356 3.75735C18.7837 4.42728 19.5924 5.24539 20.2424 6.16546L19.7227 7.19317C19.2342 8.1584 19.6207 9.33686 20.5859 9.82534C20.6743 9.87005 20.7659 9.90801 20.86 9.93887L21.954 10.2973C22.1451 11.4077 22.1519 12.5583 21.9551 13.7028L20.86 14.0619C19.8321 14.399 19.272 15.5056 19.6092 16.5335C19.64 16.6276 19.678 16.7193 19.7227 16.8076L20.2431 17.8359C19.573 18.7843 18.7546 19.5931 17.8343 20.2432L16.8072 19.723C15.842 19.2346 14.6636 19.621 14.1751 20.5863C14.1304 20.6746 14.0924 20.7663 14.0615 20.8604L13.7023 21.9545C12.5921 22.1455 11.4418 22.1522 10.2977 21.9554L9.9385 20.8604C9.60139 19.8324 8.49481 19.2724 7.46689 19.6095C7.37279 19.6404 7.28116 19.6783 7.1928 19.723L6.16449 20.2434C5.21611 19.5733 4.40728 18.755 3.75717 17.8346L4.27737 16.8076C4.76585 15.8424 4.37937 14.6639 3.41415 14.1754C3.32579 14.1307 3.23416 14.0928 3.14006 14.0619L2.04601 13.7035C1.85492 12.593 1.84819 11.4425 2.04497 10.298L3.14006 9.93887C4.16799 9.60176 4.728 8.49518 4.3909 7.46725C4.36004 7.37315 4.32208 7.28153 4.27737 7.19317L3.75699 6.16486C4.42708 5.21647 5.24543 4.40765 6.16577 3.75754L7.1928 4.27773C8.15803 4.76621 9.33649 4.37974 9.82497 3.41451C9.86969 3.32615 9.90764 3.23453 9.9385 3.14043L10.2969 2.04637C11.4074 1.85529 12.5579 1.84856 13.7024 2.04534L14.0615 3.14043C14.3987 4.16835 15.5052 4.72837 16.5332 4.39126C16.6273 4.3604 16.7189 4.32245 16.8072 4.27773L17.8356 3.75735ZM17.7062 5.14001L17.3379 5.32727C17.1966 5.39882 17.05 5.45954 16.8994 5.50892C15.3156 6.02832 13.6152 5.21667 13.0098 3.68724L12.9448 3.50761L12.8156 3.11426L12.752 3.10823C12.2498 3.06562 11.7457 3.0661 11.2447 3.10913L11.184 3.11474L11.0552 3.50759C11.0223 3.60796 10.9844 3.70657 10.9415 3.80305L10.8736 3.94612C10.119 5.43722 8.33522 6.0651 6.82274 5.40299L6.66179 5.3271L6.29419 5.14091L6.24641 5.1795C5.86174 5.50331 5.50498 5.8594 5.18 6.24464L5.1392 6.29394L5.326 6.66341C5.3737 6.75766 5.41659 6.85423 5.45451 6.95275L5.50765 7.10194C6.02704 8.68571 5.2154 10.3862 3.68596 10.9916L3.50634 11.0565L3.11345 11.1845L3.10696 11.2494C3.06435 11.7516 3.06482 12.2557 3.10785 12.7566L3.11446 12.8175L3.50631 12.9461C3.60669 12.979 3.7053 13.017 3.80178 13.0598L3.94485 13.1278C5.43595 13.8824 6.06382 15.6661 5.40172 17.1786L5.32582 17.3396L5.13972 17.7069L5.17822 17.7549C5.50203 18.1396 5.85813 18.4964 6.24337 18.8214L6.29313 18.861L6.66214 18.6754C6.75639 18.6277 6.85296 18.5848 6.95148 18.5468L7.10067 18.4937C8.68443 17.9743 10.3849 18.786 10.9903 20.3154L11.0552 20.495L11.1837 20.8867L11.2479 20.8944C11.75 20.937 12.254 20.9365 12.7548 20.8935L12.8163 20.8866L12.9448 20.495C12.9777 20.3947 13.0157 20.2961 13.0586 20.1996L13.1265 20.0565C13.6071 19.1068 14.5051 18.5073 15.4847 18.3682C14.4605 17.4678 13.4273 16.5068 13.3496 16.4342L13.186 16.2813L13.1415 16.2973C12.9958 16.3498 12.7264 16.4231 12.5478 16.4588C11.9872 16.5711 11.397 16.579 10.8435 16.4818C10.0888 16.3494 9.38092 16.0341 8.78274 15.5641C8.66017 15.4678 8.61894 15.4323 8.4848 15.3075C7.69767 14.5756 7.19127 13.5897 7.05411 12.522C7.03043 12.3377 7.02127 12.2009 7.0188 11.9943C7.01549 11.7177 7.02702 11.5348 7.06444 11.2702C7.09126 11.0805 7.11899 10.9789 7.1812 10.8423C7.27334 10.6399 7.42386 10.4533 7.60069 10.3222C7.7391 10.2196 7.82937 10.1868 7.96812 10.1886C8.08327 10.1901 8.16809 10.2148 8.25535 10.2721C8.28152 10.2892 8.70917 10.6875 9.45088 11.3854C10.5612 12.4302 10.6265 12.4942 10.7048 12.5245C10.7145 12.5282 10.7244 12.5315 10.7365 12.536C10.8258 12.5693 10.9445 12.5761 11.0408 12.5534C11.1316 12.5321 11.2329 12.4756 11.2942 12.4122C11.3102 12.3957 11.502 12.2126 11.7203 12.0054C11.9386 11.7982 12.1272 11.616 12.1394 11.6006C12.1893 11.5372 12.2319 11.4381 12.2442 11.3567C12.2516 11.3078 12.2487 11.2122 12.2384 11.1636C12.2236 11.0941 12.1947 11.0285 12.1498 10.9629C12.1357 10.9423 11.7137 10.5399 10.9869 9.85401C10.2043 9.11553 9.83773 8.76565 9.81946 8.73994C9.72147 8.60198 9.69231 8.42995 9.73999 8.27119C9.77177 8.16539 9.85476 8.01083 9.94024 7.89824C9.99129 7.83101 10.1012 7.71931 10.1686 7.66613C10.3439 7.52784 10.5055 7.45256 10.7252 7.40685C11.04 7.34138 11.3603 7.30896 11.6858 7.30965C12.5983 7.31156 13.4861 7.58519 14.2484 8.09948C14.5898 8.32985 14.9204 8.626 15.1799 8.93402C15.5284 9.3476 15.7924 9.796 15.9788 10.2909C16.1195 10.6644 16.202 11.0131 16.2509 11.4413C16.2653 11.5671 16.2785 11.8957 16.2744 12.0239C16.2601 12.466 16.1898 12.8984 16.0721 13.2684L16.0451 13.3533L18.3573 15.5564C18.4895 14.4427 19.2172 13.4452 20.3141 13.011L20.4937 12.9461L20.8859 12.8164L20.8931 12.7532C20.9357 12.251 20.9353 11.747 20.8922 11.246L20.8854 11.1848L20.4938 11.0565C20.3934 11.0236 20.2948 10.9856 20.1983 10.9428L20.0552 10.8749C18.5641 10.1203 17.9363 8.33649 18.5981 6.82461L18.6739 6.66373L18.8605 6.29447L18.8215 6.24726C18.4977 5.86271 18.1417 5.50605 17.7566 5.18115L17.7062 5.14001ZM18.8438 17.6747C17.2076 16.1141 15.0091 13.8477 14.9954 13.8299C14.925 13.7385 14.887 13.6309 14.8835 13.5131C14.8811 13.4338 14.8926 13.3771 14.9318 13.2753C15.0951 12.8503 15.1624 12.563 15.1951 12.151C15.205 12.0262 15.1952 11.6288 15.1792 11.5062C15.1486 11.2714 15.1091 11.0844 15.0484 10.8855C14.9203 10.4665 14.705 10.056 14.4377 9.72142C13.9474 9.10764 13.2957 8.68561 12.5372 8.49054C12.4549 8.46937 12.4255 8.46295 12.305 8.43977C12.136 8.40729 11.9335 8.38678 11.7357 8.3821C11.6319 8.37965 11.4035 8.38966 11.298 8.40128C11.2154 8.4104 11.057 8.43322 11.0533 8.43654C11.0533 8.43654 11.4662 8.83098 11.9741 9.31015C12.5458 9.84943 12.9147 10.2019 12.9424 10.2351C13.1398 10.4719 13.2725 10.7712 13.3096 11.0631C13.3286 11.2121 13.3248 11.4057 13.3001 11.5492C13.2676 11.7378 13.1957 11.9322 13.0986 12.0945C12.9919 12.2727 12.9658 12.3011 12.5016 12.7425C12.2752 12.9577 12.069 13.155 12.0434 13.1808C11.8069 13.4192 11.4679 13.5843 11.1241 13.6285C11.0438 13.6388 10.8853 13.6434 10.8019 13.6378C10.507 13.6181 10.1884 13.4986 9.9469 13.3171C9.92303 13.2992 9.49894 12.9038 9.00446 12.4385L8.10541 11.5925L8.10034 11.6516C8.07724 11.9214 8.09419 12.2678 8.14458 12.5557C8.25003 13.1581 8.52763 13.7491 8.9259 14.219C9.06929 14.3881 9.2718 14.5839 9.4388 14.7148C10.0201 15.1702 10.7058 15.4293 11.4422 15.4715C11.5814 15.4795 11.8851 15.4722 12.009 15.4579C12.3661 15.4167 12.7076 15.3276 13.0246 15.1928C13.1348 15.1459 13.1667 15.1358 13.2357 15.1258C13.3733 15.1058 13.5294 15.1492 13.6365 15.2371C13.655 15.2523 16.1034 17.3811 17.7123 18.8561L17.7537 18.8231C18.1383 18.4993 18.4951 18.1432 18.8201 17.758L18.8602 17.707L18.8438 17.6747Z" })));
+const hlWrench = _a => {
+  var {
+      size,
+      color
+    } = _a,
+    props = tslib.__rest(_a, ["size", "color"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    fill: color
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M17.8356 3.75735C18.7837 4.42728 19.5924 5.24539 20.2424 6.16546L19.7227 7.19317C19.2342 8.1584 19.6207 9.33686 20.5859 9.82534C20.6743 9.87005 20.7659 9.90801 20.86 9.93887L21.954 10.2973C22.1451 11.4077 22.1519 12.5583 21.9551 13.7028L20.86 14.0619C19.8321 14.399 19.272 15.5056 19.6092 16.5335C19.64 16.6276 19.678 16.7193 19.7227 16.8076L20.2431 17.8359C19.573 18.7843 18.7546 19.5931 17.8343 20.2432L16.8072 19.723C15.842 19.2346 14.6636 19.621 14.1751 20.5863C14.1304 20.6746 14.0924 20.7663 14.0615 20.8604L13.7023 21.9545C12.5921 22.1455 11.4418 22.1522 10.2977 21.9554L9.9385 20.8604C9.60139 19.8324 8.49481 19.2724 7.46689 19.6095C7.37279 19.6404 7.28116 19.6783 7.1928 19.723L6.16449 20.2434C5.21611 19.5733 4.40728 18.755 3.75717 17.8346L4.27737 16.8076C4.76585 15.8424 4.37937 14.6639 3.41415 14.1754C3.32579 14.1307 3.23416 14.0928 3.14006 14.0619L2.04601 13.7035C1.85492 12.593 1.84819 11.4425 2.04497 10.298L3.14006 9.93887C4.16799 9.60176 4.728 8.49518 4.3909 7.46725C4.36004 7.37315 4.32208 7.28153 4.27737 7.19317L3.75699 6.16486C4.42708 5.21647 5.24543 4.40765 6.16577 3.75754L7.1928 4.27773C8.15803 4.76621 9.33649 4.37974 9.82497 3.41451C9.86969 3.32615 9.90764 3.23453 9.9385 3.14043L10.2969 2.04637C11.4074 1.85529 12.5579 1.84856 13.7024 2.04534L14.0615 3.14043C14.3987 4.16835 15.5052 4.72837 16.5332 4.39126C16.6273 4.3604 16.7189 4.32245 16.8072 4.27773L17.8356 3.75735ZM17.7062 5.14001L17.3379 5.32727C17.1966 5.39882 17.05 5.45954 16.8994 5.50892C15.3156 6.02832 13.6152 5.21667 13.0098 3.68724L12.9448 3.50761L12.8156 3.11426L12.752 3.10823C12.2498 3.06562 11.7457 3.0661 11.2447 3.10913L11.184 3.11474L11.0552 3.50759C11.0223 3.60796 10.9844 3.70657 10.9415 3.80305L10.8736 3.94612C10.119 5.43722 8.33522 6.0651 6.82274 5.40299L6.66179 5.3271L6.29419 5.14091L6.24641 5.1795C5.86174 5.50331 5.50498 5.8594 5.18 6.24464L5.1392 6.29394L5.326 6.66341C5.3737 6.75766 5.41659 6.85423 5.45451 6.95275L5.50765 7.10194C6.02704 8.68571 5.2154 10.3862 3.68596 10.9916L3.50634 11.0565L3.11345 11.1845L3.10696 11.2494C3.06435 11.7516 3.06482 12.2557 3.10785 12.7566L3.11446 12.8175L3.50631 12.9461C3.60669 12.979 3.7053 13.017 3.80178 13.0598L3.94485 13.1278C5.43595 13.8824 6.06382 15.6661 5.40172 17.1786L5.32582 17.3396L5.13972 17.7069L5.17822 17.7549C5.50203 18.1396 5.85813 18.4964 6.24337 18.8214L6.29313 18.861L6.66214 18.6754C6.75639 18.6277 6.85296 18.5848 6.95148 18.5468L7.10067 18.4937C8.68443 17.9743 10.3849 18.786 10.9903 20.3154L11.0552 20.495L11.1837 20.8867L11.2479 20.8944C11.75 20.937 12.254 20.9365 12.7548 20.8935L12.8163 20.8866L12.9448 20.495C12.9777 20.3947 13.0157 20.2961 13.0586 20.1996L13.1265 20.0565C13.6071 19.1068 14.5051 18.5073 15.4847 18.3682C14.4605 17.4678 13.4273 16.5068 13.3496 16.4342L13.186 16.2813L13.1415 16.2973C12.9958 16.3498 12.7264 16.4231 12.5478 16.4588C11.9872 16.5711 11.397 16.579 10.8435 16.4818C10.0888 16.3494 9.38092 16.0341 8.78274 15.5641C8.66017 15.4678 8.61894 15.4323 8.4848 15.3075C7.69767 14.5756 7.19127 13.5897 7.05411 12.522C7.03043 12.3377 7.02127 12.2009 7.0188 11.9943C7.01549 11.7177 7.02702 11.5348 7.06444 11.2702C7.09126 11.0805 7.11899 10.9789 7.1812 10.8423C7.27334 10.6399 7.42386 10.4533 7.60069 10.3222C7.7391 10.2196 7.82937 10.1868 7.96812 10.1886C8.08327 10.1901 8.16809 10.2148 8.25535 10.2721C8.28152 10.2892 8.70917 10.6875 9.45088 11.3854C10.5612 12.4302 10.6265 12.4942 10.7048 12.5245C10.7145 12.5282 10.7244 12.5315 10.7365 12.536C10.8258 12.5693 10.9445 12.5761 11.0408 12.5534C11.1316 12.5321 11.2329 12.4756 11.2942 12.4122C11.3102 12.3957 11.502 12.2126 11.7203 12.0054C11.9386 11.7982 12.1272 11.616 12.1394 11.6006C12.1893 11.5372 12.2319 11.4381 12.2442 11.3567C12.2516 11.3078 12.2487 11.2122 12.2384 11.1636C12.2236 11.0941 12.1947 11.0285 12.1498 10.9629C12.1357 10.9423 11.7137 10.5399 10.9869 9.85401C10.2043 9.11553 9.83773 8.76565 9.81946 8.73994C9.72147 8.60198 9.69231 8.42995 9.73999 8.27119C9.77177 8.16539 9.85476 8.01083 9.94024 7.89824C9.99129 7.83101 10.1012 7.71931 10.1686 7.66613C10.3439 7.52784 10.5055 7.45256 10.7252 7.40685C11.04 7.34138 11.3603 7.30896 11.6858 7.30965C12.5983 7.31156 13.4861 7.58519 14.2484 8.09948C14.5898 8.32985 14.9204 8.626 15.1799 8.93402C15.5284 9.3476 15.7924 9.796 15.9788 10.2909C16.1195 10.6644 16.202 11.0131 16.2509 11.4413C16.2653 11.5671 16.2785 11.8957 16.2744 12.0239C16.2601 12.466 16.1898 12.8984 16.0721 13.2684L16.0451 13.3533L18.3573 15.5564C18.4895 14.4427 19.2172 13.4452 20.3141 13.011L20.4937 12.9461L20.8859 12.8164L20.8931 12.7532C20.9357 12.251 20.9353 11.747 20.8922 11.246L20.8854 11.1848L20.4938 11.0565C20.3934 11.0236 20.2948 10.9856 20.1983 10.9428L20.0552 10.8749C18.5641 10.1203 17.9363 8.33649 18.5981 6.82461L18.6739 6.66373L18.8605 6.29447L18.8215 6.24726C18.4977 5.86271 18.1417 5.50605 17.7566 5.18115L17.7062 5.14001ZM18.8438 17.6747C17.2076 16.1141 15.0091 13.8477 14.9954 13.8299C14.925 13.7385 14.887 13.6309 14.8835 13.5131C14.8811 13.4338 14.8926 13.3771 14.9318 13.2753C15.0951 12.8503 15.1624 12.563 15.1951 12.151C15.205 12.0262 15.1952 11.6288 15.1792 11.5062C15.1486 11.2714 15.1091 11.0844 15.0484 10.8855C14.9203 10.4665 14.705 10.056 14.4377 9.72142C13.9474 9.10764 13.2957 8.68561 12.5372 8.49054C12.4549 8.46937 12.4255 8.46295 12.305 8.43977C12.136 8.40729 11.9335 8.38678 11.7357 8.3821C11.6319 8.37965 11.4035 8.38966 11.298 8.40128C11.2154 8.4104 11.057 8.43322 11.0533 8.43654C11.0533 8.43654 11.4662 8.83098 11.9741 9.31015C12.5458 9.84943 12.9147 10.2019 12.9424 10.2351C13.1398 10.4719 13.2725 10.7712 13.3096 11.0631C13.3286 11.2121 13.3248 11.4057 13.3001 11.5492C13.2676 11.7378 13.1957 11.9322 13.0986 12.0945C12.9919 12.2727 12.9658 12.3011 12.5016 12.7425C12.2752 12.9577 12.069 13.155 12.0434 13.1808C11.8069 13.4192 11.4679 13.5843 11.1241 13.6285C11.0438 13.6388 10.8853 13.6434 10.8019 13.6378C10.507 13.6181 10.1884 13.4986 9.9469 13.3171C9.92303 13.2992 9.49894 12.9038 9.00446 12.4385L8.10541 11.5925L8.10034 11.6516C8.07724 11.9214 8.09419 12.2678 8.14458 12.5557C8.25003 13.1581 8.52763 13.7491 8.9259 14.219C9.06929 14.3881 9.2718 14.5839 9.4388 14.7148C10.0201 15.1702 10.7058 15.4293 11.4422 15.4715C11.5814 15.4795 11.8851 15.4722 12.009 15.4579C12.3661 15.4167 12.7076 15.3276 13.0246 15.1928C13.1348 15.1459 13.1667 15.1358 13.2357 15.1258C13.3733 15.1058 13.5294 15.1492 13.6365 15.2371C13.655 15.2523 16.1034 17.3811 17.7123 18.8561L17.7537 18.8231C18.1383 18.4993 18.4951 18.1432 18.8201 17.758L18.8602 17.707L18.8438 17.6747Z"
+  }));
 };
 
 exports.default = hlWrench;

package/build/cjs/components/Icons/hlX.js

@@ -9,10 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const hlX = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default.default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color }, props),
-        React__default.default.createElement("path", { d: "M12.85 12l7.38-7.38a.6.6 0 0 0-.85-.85L12 11.15 4.62 3.78a.6.6 0 0 0-.85.85L11.15 12l-7.37 7.38a.6.6 0 1 0 .85.85L12 12.85l7.38 7.38a.6.6 0 0 0 .85-.85z" })));
+const hlX = _a => {
+  var {
+      size,
+      color
+    } = _a,
+    props = tslib.__rest(_a, ["size", "color"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    fill: color
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M12.85 12l7.38-7.38a.6.6 0 0 0-.85-.85L12 11.15 4.62 3.78a.6.6 0 0 0-.85.85L11.15 12l-7.37 7.38a.6.6 0 1 0 .85.85L12 12.85l7.38 7.38a.6.6 0 0 0 .85-.85z"
+  }));
 };
 
 exports.default = hlX;

package/build/cjs/components/InfoDialog/InfoDialog.js

@@ -13,56 +13,41 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const positionMap = {
-    left: 'left: 1.875rem',
-    right: 'right: 1.875rem',
-    middle: 'left: 50%; transform: translateX(-50%)',
+  left: 'left: 1.875rem',
+  right: 'right: 1.875rem',
+  middle: 'left: 50%; transform: translateX(-50%)'
 };
 const colorMap = {
-    default: theme.default.color.default.pink,
-    sale: theme.default.color.accent.orange,
+  default: theme.default.color.default.pink,
+  sale: theme.default.color.accent.orange
 };
-const InfoDialogContainer = styledComponents.styled.div `
-    position: relative;
-    font-size: ${theme.default.fontSize.s};
-    line-height: ${theme.default.lineHeight.s};
-    font-weight: ${theme.default.fontWeight.medium};
-    background-color: ${theme.default.color.background.white.default};
-    color: ${theme.default.color.text.black};
-    border-radius: ${theme.default.radius.default};
-    border: 2px solid ${({ type }) => colorMap[type]};
-    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
-    margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
-    width: 100%;
-
-    &:before,
-    &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.9)};
-        z-index: 2;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        border: 20px solid transparent;
-        border-top: 0;
-        width: auto;
-        border-bottom-color: ${theme.default.color.default.white};
-        ${({ $position }) => positionMap[$position]};
-        border-width: 0px ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)}
-            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
-    }
-
-    &:before {
-        top: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
-        z-index: 1;
-        border-bottom-color: ${({ type }) => colorMap[type]};
-    }
-`;
+const InfoDialogContainer = styledComponents.styled.div.withConfig({
+  displayName: "InfoDialog__InfoDialogContainer",
+  componentId: "sc-zadhzk-0"
+})(["position:relative;font-size:", ";line-height:", ";font-weight:", ";background-color:", ";color:", ";border-radius:", ";border:2px solid ", ";padding:", ";margin-top:", ";width:100%;&:before,&:after{content:'';display:block;position:absolute;top:-", ";z-index:2;width:0;height:0;overflow:hidden;border:20px solid transparent;border-top:0;width:auto;border-bottom-color:", ";", ";border-width:0px ", " ", ";}&:before{top:-", ";z-index:1;border-bottom-color:", ";}"], theme.default.fontSize.s, theme.default.lineHeight.s, theme.default.fontWeight.medium, theme.default.color.background.white.default, theme.default.color.text.black, theme.default.radius.default, ({
+  type
+}) => colorMap[type], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.9), theme.default.color.default.white, ({
+  $position
+}) => positionMap[$position], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2), ({
+  type
+}) => colorMap[type]);
 /** @visibleName Info Dialog */
-const InfoDialog = (_a) => {
-    var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, "$position": position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
+const InfoDialog = _a => {
+  var {
+      position = 'middle',
+      type = 'default',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["position", "type", 'data-testid']);
+  return /*#__PURE__*/React__default.default.createElement(InfoDialogContainer, {
+    id: props.id,
+    "data-testid": dataTestId,
+    className: props.className,
+    "$position": position,
+    type: type,
+    role: "region",
+    "aria-label": props.ariaLabel
+  }, props.children);
 };
 
 exports.default = InfoDialog;

package/build/cjs/components/Input/Input.js

@@ -17,178 +17,162 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const iconsMap = {
-    success: icons.Check,
-    error: icons.Error,
+  success: icons.Check,
+  error: icons.Error
 };
-const FieldContainer = styledComponents.styled.div `
-    color: ${theme.default.color.text.black};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-`;
-const FieldWrapper = styledComponents.styled.div `
-    position: relative;
-    display: flex;
-    border-radius: ${theme.default.radius.s};
-    border: 1px solid ${theme.default.color.line.L01};
-    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
-    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-    background-color: ${theme.default.color.background.white.default};
-    align-items: center;
-
-    ${({ $status }) => $status === 'error' &&
-    `
+const FieldContainer = styledComponents.styled.div.withConfig({
+  displayName: "Input__FieldContainer",
+  componentId: "sc-1fin9kc-0"
+})(["color:", ";margin-bottom:", ";"], theme.default.color.text.black, styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1));
+const FieldWrapper = styledComponents.styled.div.withConfig({
+  displayName: "Input__FieldWrapper",
+  componentId: "sc-1fin9kc-1"
+})(["position:relative;display:flex;border-radius:", ";border:1px solid ", ";height:", ";padding:0 ", ";background-color:", ";align-items:center;", " ", " ", "  ", " &:focus-within{border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";border-radius:", ";}"], theme.default.radius.s, theme.default.color.line.L01, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), theme.default.color.background.white.default, ({
+  $status
+}) => $status === 'error' && `
         border-bottom: 4px solid ${theme.default.color.notification.error};
-    `}
-
-    ${({ $type }) => $type === 'range' &&
-    `
+    `, ({
+  $type
+}) => $type === 'range' && `
         border: 0;
         background: none;
-    `}
-
-    ${({ $type }) => $type === 'hidden' &&
-    `
+    `, ({
+  $type
+}) => $type === 'hidden' && `
         display: none;
-    `} 
-
-    ${({ $disabled, $readonly }) => ($disabled || $readonly) &&
-    `
+    `, ({
+  $disabled,
+  $readonly
+}) => ($disabled || $readonly) && `
         background-color: ${theme.default.color.background.sand.E01};
-    `}
-
-    &:focus-within {
-        border: 2px solid ${theme.default.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
-        border-radius: ${theme.default.radius.s};
-    }
-`;
-const IconWrapper = styledComponents.styled.div `
-    margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-    display: flex;
-    flex-wrap: nowrap;
-    border-radius: ${theme.default.radius.s};
-    align-items: center;
-
-    & span.dnasg-icon {
-        margin-left: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 2)};
-
-        &:first-of-type {
-            margin-left: 0;
-        }
-    }
-`;
-const StyledInput = styledComponents.styled.input `
-    position: relative;
-    display: inline-block;
-    appearance: none;
-    vertical-align: middle;
-    font-family: ${theme.default.fontFamily.default};
-    font-size: ${theme.default.fontSize.default};
-    border-radius: ${theme.default.radius.s};
-    width: 100%;
-    border: 0 none;
-    outline: 0;
-    padding: 0;
-    background: transparent;
-
-    ${({ readOnly }) => readOnly &&
-    `
+    `, theme.default.color.focus.light, theme.default.color.focus.dark, theme.default.radius.s);
+const IconWrapper = styledComponents.styled.div.withConfig({
+  displayName: "Input__IconWrapper",
+  componentId: "sc-1fin9kc-2"
+})(["margin-left:", ";display:flex;flex-wrap:nowrap;border-radius:", ";align-items:center;& span.dnasg-icon{margin-left:", ";&:first-of-type{margin-left:0;}}"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), theme.default.radius.s, styledUtils.getDividedSize(theme.default.base.baseWidth, 2));
+const StyledInput = styledComponents.styled.input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-1fin9kc-3"
+})(["position:relative;display:inline-block;appearance:none;vertical-align:middle;font-family:", ";font-size:", ";border-radius:", ";width:100%;border:0 none;outline:0;padding:0;background:transparent;", " &[type='range']{appearance:auto;}&::-ms-clear,&::-ms-reveal{display:none;}&:invalid{box-shadow:none;}&::placeholder{color:", "", ";}"], theme.default.fontFamily.default, theme.default.fontSize.default, theme.default.radius.s, ({
+  readOnly
+}) => readOnly && `
         color: ${theme.default.color.default.black};
         cursor: default;
-    `}
-
-    &[type='range'] {
-        appearance: auto;
+    `, theme.default.color.text.black, theme.default.color.transparency.T40);
+const StyledButtonIcon = styledComponents.styled(ButtonIcon.default).withConfig({
+  displayName: "Input__StyledButtonIcon",
+  componentId: "sc-1fin9kc-4"
+})([".dnasg-icon svg{fill:", ";}"], theme.default.color.text.black);
+const Message = styledComponents.styled.div.withConfig({
+  displayName: "Input__Message",
+  componentId: "sc-1fin9kc-5"
+})(["font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-top:", ";"], theme.default.fontSize.s, theme.default.fontWeight.book, theme.default.lineHeight.s, theme.default.color.text.gray, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5));
+const ErrorMessage = styledComponents.styled(Message).withConfig({
+  displayName: "Input__ErrorMessage",
+  componentId: "sc-1fin9kc-6"
+})(["font-weight:", ";color:", ";"], theme.default.fontWeight.medium, theme.default.color.notification.error);
+const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var _b, _c, _d;
+  var {
+      type = 'text',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["type", 'data-testid']);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const togglePasswordVisibility = () => {
+    if (props.showPasswordToggle && !props.disabled) {
+      setShowPassword(!showPassword);
     }
-
-    &::-ms-clear,
-    &::-ms-reveal {
-        display: none;
+  };
+  const handleOnBlur = e => {
+    if (props.onBlur) {
+      props.onBlur(e.target.value, e);
     }
-
-    &:invalid {
-        box-shadow: none;
+  };
+  const handleChange = e => {
+    if (props.onChange) {
+      props.onChange(e.target.value, e);
     }
-
-    &::placeholder {
-        color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
+  };
+  const onClick = e => {
+    e.preventDefault();
+    e.currentTarget.focus();
+  };
+  const getDescribedBy = () => {
+    if (props.status === 'error' && props.errorMessage) {
+      return `${props.id}-error`;
+    }
+    if (props.status === 'comment' && props.commentMessage) {
+      return `${props.id}-comment`;
     }
-`;
-const StyledButtonIcon = styledComponents.styled(ButtonIcon.default) `
-    .dnasg-icon svg {
-        fill: ${theme.default.color.text.black};
+    return undefined;
+  };
+  const getInputType = () => {
+    if (props.showPasswordToggle) {
+      return showPassword ? 'text' : 'password';
     }
-`;
-const Message = styledComponents.styled.div `
-    font-size: ${theme.default.fontSize.s};
-    font-weight: ${theme.default.fontWeight.book};
-    line-height: ${theme.default.lineHeight.s};
-    color: ${theme.default.color.text.gray};
-    margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
-`;
-const ErrorMessage = styledComponents.styled(Message) `
-    font-weight: ${theme.default.fontWeight.medium};
-    color: ${theme.default.color.notification.error};
-`;
-const Input = React.forwardRef((_a, ref) => {
-    var _b, _c, _d;
-    var { type = 'text', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const [showPassword, setShowPassword] = React.useState(false);
-    const togglePasswordVisibility = () => {
-        if (props.showPasswordToggle && !props.disabled) {
-            setShowPassword(!showPassword);
-        }
-    };
-    const handleOnBlur = (e) => {
-        if (props.onBlur) {
-            props.onBlur(e.target.value, e);
-        }
-    };
-    const handleChange = (e) => {
-        if (props.onChange) {
-            props.onChange(e.target.value, e);
-        }
-    };
-    const onClick = (e) => {
-        e.preventDefault();
-        e.currentTarget.focus();
-    };
-    const getDescribedBy = () => {
-        if (props.status === 'error' && props.errorMessage) {
-            return `${props.id}-error`;
-        }
-        if (props.status === 'comment' && props.commentMessage) {
-            return `${props.id}-comment`;
-        }
-        return undefined;
-    };
-    const getInputType = () => {
-        if (props.showPasswordToggle) {
-            return showPassword ? 'text' : 'password';
-        }
-        return type;
-    };
-    const inputType = getInputType();
-    return (React__default.default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId && `${dataTestId}-container` },
-        props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly && !props.readonlyUnstyled },
-            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || props.readonlyUnstyled || undefined, "aria-label": !props.label ? ((_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id) : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly || props.readonlyUnstyled }),
-            ((props.status && props.status !== 'comment') ||
-                props.showPasswordToggle ||
-                props.disabled ||
-                props.readonly ||
-                props.readonlyUnstyled ||
-                props.onClearableButtonClick) && (React__default.default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.default.createElement(StyledButtonIcon, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility, ariaLabel: showPassword
-                        ? ((_c = props.hidePasswordLabel) !== null && _c !== void 0 ? _c : props.passwordToggleLabel)
-                        : ((_d = props.showPasswordLabel) !== null && _d !== void 0 ? _d : props.passwordToggleLabel) })),
-                (props.status === 'success' || props.status === 'error') && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.default.color.notification[props.status] })),
-                (props.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: icons.Lock, className: props.className && `${props.className}-lock-icon` })),
-                props.onClearableButtonClick &&
-                    Boolean(props.value) &&
-                    !props.disabled &&
-                    (!props.readonly || props.readonlyUnstyled) && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
-        props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
-        props.status === 'comment' && props.commentMessage && (React__default.default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+    return type;
+  };
+  const inputType = getInputType();
+  return /*#__PURE__*/React__default.default.createElement(FieldContainer, {
+    className: props.className,
+    "data-testid": dataTestId && `${dataTestId}-container`
+  }, props.label && (/*#__PURE__*/React__default.default.createElement(LabelText.default, {
+    htmlFor: props.id,
+    "data-testid": dataTestId && `${dataTestId}-label`,
+    status: props.status === 'error' ? props.status : undefined,
+    isMandatory: props.required
+  }, props.label)), /*#__PURE__*/React__default.default.createElement(FieldWrapper, {
+    "$status": props.status,
+    "$type": inputType,
+    "$disabled": props.disabled,
+    "$readonly": props.readonly && !props.readonlyUnstyled
+  }, /*#__PURE__*/React__default.default.createElement(StyledInput, {
+    id: props.id,
+    name: props.name,
+    type: inputType,
+    value: props.value,
+    placeholder: props.placeholder,
+    onChange: handleChange,
+    onBlur: handleOnBlur,
+    onFocus: props.onFocus,
+    onClick: onClick,
+    onKeyDown: props.onKeyDown,
+    onKeyPress: props.onKeyPress,
+    required: props.required,
+    disabled: props.disabled,
+    autoComplete: props.autocomplete,
+    "aria-disabled": props.disabled,
+    "aria-readonly": props.readonly || props.readonlyUnstyled || undefined,
+    "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined,
+    ref: ref,
+    tabIndex: props.tabIndex,
+    "aria-describedby": getDescribedBy(),
+    "data-testid": dataTestId,
+    readOnly: props.readonly || props.readonlyUnstyled
+  }), (props.status && props.status !== 'comment' || props.showPasswordToggle || props.disabled || props.readonly || props.readonlyUnstyled || props.onClearableButtonClick) && (/*#__PURE__*/React__default.default.createElement(IconWrapper, null, props.showPasswordToggle && (/*#__PURE__*/React__default.default.createElement(StyledButtonIcon, {
+    icon: showPassword ? icons.EyeOpen : icons.EyeClosed,
+    onClick: togglePasswordVisibility,
+    ariaLabel: showPassword ? (_c = props.hidePasswordLabel) !== null && _c !== void 0 ? _c : props.passwordToggleLabel : (_d = props.showPasswordLabel) !== null && _d !== void 0 ? _d : props.passwordToggleLabel
+  })), (props.status === 'success' || props.status === 'error') && (/*#__PURE__*/React__default.default.createElement(Icon.default, {
+    "aria-hidden": true,
+    icon: iconsMap[props.status],
+    color: theme.default.color.notification[props.status]
+  })), (props.disabled || props.readonly && !props.readonlyUnstyled) && (/*#__PURE__*/React__default.default.createElement(Icon.default, {
+    "aria-hidden": true,
+    icon: icons.Lock,
+    className: props.className && `${props.className}-lock-icon`
+  })), props.onClearableButtonClick && Boolean(props.value) && !props.disabled && (!props.readonly || props.readonlyUnstyled) && (/*#__PURE__*/React__default.default.createElement(ButtonIcon.default, {
+    icon: icons.Close,
+    onClick: props.onClearableButtonClick,
+    ariaLabel: props.clearButtonLabel
+  }))))), props.status === 'error' && props.errorMessage && (/*#__PURE__*/React__default.default.createElement(ErrorMessage, {
+    id: `${props.id}-error`,
+    "data-testid": dataTestId && `${dataTestId}-error`
+  }, props.errorMessage)), props.status === 'comment' && props.commentMessage && (/*#__PURE__*/React__default.default.createElement(Message, {
+    id: `${props.id}-comment`,
+    "data-testid": dataTestId && `${dataTestId}-comment`
+  }, props.commentMessage)));
 });
 
 exports.default = Input;

package/build/cjs/components/Label/Label.js

@@ -13,29 +13,29 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const colorsMap = {
-    campaign: theme.default.color.background.pink.E01,
-    new: theme.default.color.background.lemon.default,
-    presale: theme.default.color.background.orange.default,
-    other: theme.default.color.background.sky.default,
+  campaign: theme.default.color.background.pink.E01,
+  new: theme.default.color.background.lemon.default,
+  presale: theme.default.color.background.orange.default,
+  other: theme.default.color.background.sky.default
 };
-const StyledLabel = styledComponents.styled.span `
-    display: inline-block;
-    color: ${theme.default.color.text.black};
-    background-color: ${({ type }) => colorsMap[type]};
-    font-size: ${theme.default.fontSize.s};
-    font-weight: ${theme.default.fontWeight.bold};
-    line-height: ${theme.default.lineHeight.s};
-    padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)}
-        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
-    text-align: center;
-    text-transform: uppercase;
-    border-radius: ${theme.default.radius.pill};
-    margin: 0;
-`;
-const Label = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const HeadingTag = props.headingLevel || 'span';
-    return (React__default.default.createElement(StyledLabel, { as: HeadingTag, type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
+const StyledLabel = styledComponents.styled.span.withConfig({
+  displayName: "Label__StyledLabel",
+  componentId: "sc-1sntznq-0"
+})(["display:inline-block;color:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";padding:", " ", ";text-align:center;text-transform:uppercase;border-radius:", ";margin:0;"], theme.default.color.text.black, ({
+  type
+}) => colorsMap[type], theme.default.fontSize.s, theme.default.fontWeight.bold, theme.default.lineHeight.s, styledUtils.getDividedSize(theme.default.base.baseWidth, 5), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2), theme.default.radius.pill);
+const Label = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ['data-testid']);
+  const HeadingTag = props.headingLevel || 'span';
+  return /*#__PURE__*/React__default.default.createElement(StyledLabel, {
+    as: HeadingTag,
+    type: props.type,
+    className: props.className,
+    "data-testid": dataTestId
+  }, props.children);
 };
 
 exports.default = Label;

package/build/cjs/components/LabelText/LabelText.js

@@ -12,24 +12,31 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Label = styledComponents.styled.label `
-    display: block;
-    color: ${({ $status }) => $status === 'error' ? theme.default.color.notification.error : theme.default.color.text.gray};
-    font-weight: ${theme.default.fontWeight.medium};
-    font-size: ${theme.default.fontSize.default};
-    line-height: ${theme.default.lineHeight.default};
-    margin-bottom: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 2)};
-    ${({ htmlFor }) => htmlFor && `cursor: pointer`};
-`;
-const Mandatory = styledComponents.styled.span `
-    color: ${theme.default.color.text.pink};
-`;
+const Label = styledComponents.styled.label.withConfig({
+  displayName: "LabelText__Label",
+  componentId: "sc-1jltcfz-0"
+})(["display:block;color:", ";font-weight:", ";font-size:", ";line-height:", ";margin-bottom:", ";", ";"], ({
+  $status
+}) => $status === 'error' ? theme.default.color.notification.error : theme.default.color.text.gray, theme.default.fontWeight.medium, theme.default.fontSize.default, theme.default.lineHeight.default, styledUtils.getDividedSize(theme.default.base.baseWidth, 2), ({
+  htmlFor
+}) => htmlFor && `cursor: pointer`);
+const Mandatory = styledComponents.styled.span.withConfig({
+  displayName: "LabelText__Mandatory",
+  componentId: "sc-1jltcfz-1"
+})(["color:", ";"], theme.default.color.text.pink);
 /** @visibleName Label Text */
-const LabelText = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, "$status": props.status },
-        props.children,
-        props.isMandatory && React__default.default.createElement(Mandatory, null, "*")));
+const LabelText = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ['data-testid']);
+  return /*#__PURE__*/React__default.default.createElement(Label, {
+    id: props.id,
+    htmlFor: props.htmlFor,
+    className: props.className,
+    "data-testid": dataTestId,
+    "$status": props.status
+  }, props.children, props.isMandatory && /*#__PURE__*/React__default.default.createElement(Mandatory, null, "*"));
 };
 
 exports.default = LabelText;