@auth0/quantum-product 1.5.1

package/esm/promo-banner/promo-banner.js

@@ -0,0 +1,165 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { Button } from '../button';
+import { Image } from '../image';
+import { Paper } from '../paper';
+import { RowLayout } from '../row-layout';
+import { StackLayout, StackLayoutItem } from '../stack-layout';
+import clsx from '../utils/clsx';
+import { styled } from '../styled';
+import { Text } from '../text';
+import { getPromoBannerUtilityClass, promoBannerClasses, promoBannerComponentName, } from './promo-banner-classes';
+import { useMergedClasses } from '../styles/classes';
+var backgroundImages = {
+    light: "url(\"data:image/svg+xml,%3Csvg height='194' width='1240' viewBox='0 0 1240 194' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.269769 -488.938C226.877 -470.693 421.374 -364.623 647.172 -443.649C663.956 -449.533 680.794 -454.661 697.686 -459.249C874.481 -506.751 1059.43 -486.455 1239.89 -487.913M0.323789 -452.826C230.871 -434.851 443.609 -312.749 673.346 -386.863C857.698 -446.348 1051.33 -425.188 1240 -451.8M0.323789 -416.714C234.163 -402.085 461.472 -270.105 693.746 -339.901C872.808 -393.718 1058.78 -371.587 1240 -415.688M0.269769 -380.547C236.861 -371.371 475.072 -234.911 708.965 -301.144C884.411 -350.805 1064.45 -323.599 1239.95 -379.522M0.269769 -344.435C158.933 -342.924 308.745 -309.78 463.846 -271.023C556.022 -247.974 628.176 -244.357 719.488 -269.026C892.83 -315.934 1068.06 -279.66 1239.95 -343.355M0.269769 -308.323C161.523 -311.993 314.196 -286.461 471.995 -247.272C563.524 -224.547 634.76 -218.231 725.802 -242.09C898.497 -287.325 1069.63 -238.527 1239.95 -307.297M0.269769 -272.157C162.657 -281.441 317.164 -264.545 476.583 -225.842C567.409 -203.819 637.728 -195.452 728.339 -218.609C902.113 -263.034 1068.92 -198.744 1239.95 -271.077M0.269769 -236.044C162.603 -250.943 318.297 -243.493 478.31 -205.87C568.273 -184.71 637.62 -174.616 727.583 -197.233C904.055 -241.604 1065.96 -159.609 1239.89 -235.019M0.269769 -199.932C161.577 -220.12 318.027 -222.603 477.986 -186.221C566.923 -165.979 634.922 -154.211 724.129 -176.235C904.865 -220.876 1060.94 -120.15 1239.89 -198.96M0.215749 -163.766C155.317 -188.218 308.367 -200.904 463.415 -168.624C547.981 -150.973 615.926 -130.029 701.571 -149.515C769.678 -165.007 828.448 -186.977 898.011 -168.3C1030.55 -132.728 1102.98 -101.042 1239.89 -162.794M0.215749 -127.653C153.482 -155.939 307.396 -178.016 461.58 -146.492C544.311 -129.597 609.881 -106.494 694.016 -124.793C761.528 -139.475 819.003 -161.984 887.487 -140.285C1025.91 -96.3453 1094.4 -59.6393 1239.84 -126.682M0.215749 -91.5411C151.323 -123.227 304.536 -150.703 457.478 -121.446C538.537 -105.954 602.272 -82.0407 684.787 -99.2602C752.462 -113.403 809.451 -134.185 877.827 -111.028C915.928 -98.1266 950.359 -71.2988 988.622 -58.4517C1080.31 -27.7373 1151.98 -51.8122 1239.95 -90.5155M0.215749 -55.4288C149.327 -90.8394 301.028 -122.255 452.999 -96.6152C533.41 -83.0124 596.389 -59.8552 677.987 -76.6968C746.795 -90.9474 804.81 -110.758 874.104 -85.8193C912.366 -72.0546 946.527 -44.0391 984.736 -29.8425C1077.07 4.48843 1149.82 -18.021 1239.89 -54.4032M0.215749 -19.2626C147.546 -58.6676 297.79 -94.1321 449.059 -72.3784C529.578 -60.7728 592.504 -39.019 673.994 -56.1845C744.313 -71.0289 804.648 -91.4871 875.183 -63.7956C913.122 -48.8973 946.204 -19.1006 983.765 -3.12265C1075.62 36.0125 1148.53 15.3383 1239.95 -18.2369M0.161894 16.8497C145.765 -26.7118 294.66 -66.2248 445.228 -48.5735C526.502 -39.0191 589.859 -19.2626 671.781 -37.2378C743.881 -53.0538 807.616 -75.5093 879.662 -44.3091C916.9 -28.1693 948.254 3.94857 984.736 22.0857C1075.18 66.9966 1147.61 48.3737 1239.84 17.8753M0.161894 52.962C143.984 5.19018 291.422 -38.3713 441.45 -24.7685C523.804 -17.3193 588.078 0.00811946 670.81 -19.1006C744.691 -36.1581 813.013 -61.8524 886.57 -26.4418C922.998 -8.8985 952.086 25.8643 987.218 46.2686C1075.51 97.657 1147.01 81.1394 1239.78 53.9877M0.161894 89.0743C142.149 37.0381 288.022 -10.4099 437.349 -0.747544C521.051 4.70439 586.405 19.1709 670.216 -1.28737C745.77 -19.7484 819.813 -49.599 894.665 -9.49228C930.229 9.56248 956.835 47.0782 990.457 69.9655C1076.16 128.263 1146.53 113.905 1239.84 90.1539M0.161894 125.187C140.044 69.0479 284.136 17.8214 432.599 23.921C517.651 27.3757 584.193 38.9274 669.083 16.9577C746.148 -2.96071 826.721 -37.5616 902.652 7.34938C937.515 27.9695 961.476 68.2383 993.587 93.5546C1076.48 158.924 1145.83 146.67 1239.84 126.212M0.161894 161.299C137.67 101.274 279.711 46.5924 426.933 49.4533C513.172 51.1267 580.793 59.6015 666.708 36.1744C745.015 14.7985 832.603 -24.6605 909.452 24.8927C943.775 47.0243 965.254 89.884 996.015 117.576C1076.21 189.854 1144.75 179.652 1239.84 162.379M0.161894 197.411C134.216 134.039 274.908 74.6078 420.133 76.2271C507.398 77.1988 575.72 81.787 662.283 56.9564C741.777 34.1771 836.057 -9.81617 913.769 43.8394C947.93 67.4285 967.305 112.501 996.933 142.46C1075.02 221.216 1143.13 212.849 1239.78 198.491M0.107875 233.577C130.762 167.075 268.702 104.728 411.768 104.566C499.573 104.458 567.949 106.132 654.944 80.0057C735.678 55.7689 835.571 8.159 914.417 65.0534C948.848 89.9379 966.657 136.792 995.691 168.64C1072.59 253.064 1140.92 246.425 1239.78 234.549M0.107875 269.69C126.661 202.809 260.769 138.465 400.111 135.443C487.916 133.553 557.533 132.474 644.42 106.24C726.72 81.3551 829.797 32.2878 910.208 89.7759C945.718 115.146 963.959 163.188 993.533 196.278C1070.92 282.915 1138.7 279.676 1239.73 270.715M0.107875 305.802C120.346 243.348 247.493 177.061 379.172 166.805C465.843 160.003 542.099 158.222 628.284 135.497C713.66 112.987 817.708 67.6444 900.817 121.678C938.378 146.131 960.829 193.956 992.777 226.668C1072.43 308.285 1138.33 312.01 1239.84 306.828M0.107875 341.968C115.004 282.159 236.915 209.934 362.388 194.658C453.269 183.592 540.588 180.462 631.522 161.191C728.878 140.571 825.425 113.311 914.039 181.001C954.353 211.824 983.549 261.809 1024.13 292.955C1094.77 347.096 1159.16 344.289 1239.78 342.94M0.107875 378.08C105.29 322.32 216.516 245.021 330.71 222.836C420.727 205.346 515.385 209.233 606.535 196.655C707.885 182.621 807.994 162.27 901.465 223.969C944.854 252.632 979.825 299.001 1022.89 328.851C1094.4 378.512 1159.8 378.782 1239.84 379.106M0.053855 414.193C95.7374 362.319 194.605 279.946 297.142 251.661C386.674 226.938 488.833 240.703 580.415 235.035C685.489 228.503 790.563 215.98 888.891 270.985C1018.14 343.318 1089.27 412.681 1239.73 415.218M0.053855 450.359C87.7503 402.155 172.425 316.004 264.168 282.591C353.214 250.149 464.008 275.735 555.914 276.653C664.496 277.733 775.128 273.09 878.367 321.132C1008.43 381.697 1094.77 447.822 1239.73 451.385M0.053855 486.471C82.2456 441.83 151.215 354.222 233.947 316.706C322.291 276.653 443.609 314.871 535.407 321.564C646.579 329.715 764.551 329.877 871.513 373.384C1000.28 425.69 1100.71 483.61 1239.73 487.497M0.053855 522.583C79.8171 481.883 132.597 395.894 208.798 355.517C296.71 308.879 429.847 358.81 521.429 370.145C636.703 384.396 757.481 390.712 870.11 426.824C997.472 467.686 1105.84 519.669 1239.73 523.663M0.053855 558.75C80.1949 523.555 118.458 442.046 190.881 400.266C279.819 348.985 424.073 407.823 516.41 422.452C635.515 441.29 758.129 451.439 875.939 480.372C999.847 510.816 1111.99 555.727 1239.68 559.775M0.053855 594.862C82.7853 568.358 110.956 493.165 182.624 452.248C275.502 399.24 427.527 462.019 522.994 478.698C645.283 500.074 768.868 511.086 890.833 533.056C1008.59 554.269 1119.98 591.461 1239.68 595.888M0 630.974C86.4012 617.372 112.143 549.681 186.132 512.759C287.104 462.396 441.18 521.612 543.556 539.155C668.112 560.477 791.696 569.546 916.468 583.958C1024.94 596.482 1130.45 626.494 1239.68 632' stroke='white' stroke-opacity='0.24' stroke-miterlimit='10' %3E%3C/path%3E%3C/svg%3E\")",
+    dark: "url(\"data:image/svg+xml,%3Csvg height='194' width='1240' viewBox='0 0 1240 194' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.269769 -488.938C226.877 -470.693 421.374 -364.623 647.172 -443.649C663.956 -449.533 680.794 -454.661 697.686 -459.249C874.481 -506.751 1059.43 -486.455 1239.89 -487.913M0.323789 -452.826C230.871 -434.851 443.609 -312.749 673.346 -386.863C857.698 -446.348 1051.33 -425.188 1240 -451.8M0.323789 -416.714C234.163 -402.085 461.472 -270.105 693.746 -339.901C872.808 -393.718 1058.78 -371.587 1240 -415.688M0.269769 -380.547C236.861 -371.371 475.072 -234.911 708.965 -301.144C884.411 -350.805 1064.45 -323.599 1239.95 -379.522M0.269769 -344.435C158.933 -342.924 308.745 -309.78 463.846 -271.023C556.022 -247.974 628.176 -244.357 719.488 -269.026C892.83 -315.934 1068.06 -279.66 1239.95 -343.355M0.269769 -308.323C161.523 -311.993 314.196 -286.461 471.995 -247.272C563.524 -224.547 634.76 -218.231 725.802 -242.09C898.497 -287.325 1069.63 -238.527 1239.95 -307.297M0.269769 -272.157C162.657 -281.441 317.164 -264.545 476.583 -225.842C567.409 -203.819 637.728 -195.452 728.339 -218.609C902.113 -263.034 1068.92 -198.744 1239.95 -271.077M0.269769 -236.044C162.603 -250.943 318.297 -243.493 478.31 -205.87C568.273 -184.71 637.62 -174.616 727.583 -197.233C904.055 -241.604 1065.96 -159.609 1239.89 -235.019M0.269769 -199.932C161.577 -220.12 318.027 -222.603 477.986 -186.221C566.923 -165.979 634.922 -154.211 724.129 -176.235C904.865 -220.876 1060.94 -120.15 1239.89 -198.96M0.215749 -163.766C155.317 -188.218 308.367 -200.904 463.415 -168.624C547.981 -150.973 615.926 -130.029 701.571 -149.515C769.678 -165.007 828.448 -186.977 898.011 -168.3C1030.55 -132.728 1102.98 -101.042 1239.89 -162.794M0.215749 -127.653C153.482 -155.939 307.396 -178.016 461.58 -146.492C544.311 -129.597 609.881 -106.494 694.016 -124.793C761.528 -139.475 819.003 -161.984 887.487 -140.285C1025.91 -96.3453 1094.4 -59.6393 1239.84 -126.682M0.215749 -91.5411C151.323 -123.227 304.536 -150.703 457.478 -121.446C538.537 -105.954 602.272 -82.0407 684.787 -99.2602C752.462 -113.403 809.451 -134.185 877.827 -111.028C915.928 -98.1266 950.359 -71.2988 988.622 -58.4517C1080.31 -27.7373 1151.98 -51.8122 1239.95 -90.5155M0.215749 -55.4288C149.327 -90.8394 301.028 -122.255 452.999 -96.6152C533.41 -83.0124 596.389 -59.8552 677.987 -76.6968C746.795 -90.9474 804.81 -110.758 874.104 -85.8193C912.366 -72.0546 946.527 -44.0391 984.736 -29.8425C1077.07 4.48843 1149.82 -18.021 1239.89 -54.4032M0.215749 -19.2626C147.546 -58.6676 297.79 -94.1321 449.059 -72.3784C529.578 -60.7728 592.504 -39.019 673.994 -56.1845C744.313 -71.0289 804.648 -91.4871 875.183 -63.7956C913.122 -48.8973 946.204 -19.1006 983.765 -3.12265C1075.62 36.0125 1148.53 15.3383 1239.95 -18.2369M0.161894 16.8497C145.765 -26.7118 294.66 -66.2248 445.228 -48.5735C526.502 -39.0191 589.859 -19.2626 671.781 -37.2378C743.881 -53.0538 807.616 -75.5093 879.662 -44.3091C916.9 -28.1693 948.254 3.94857 984.736 22.0857C1075.18 66.9966 1147.61 48.3737 1239.84 17.8753M0.161894 52.962C143.984 5.19018 291.422 -38.3713 441.45 -24.7685C523.804 -17.3193 588.078 0.00811946 670.81 -19.1006C744.691 -36.1581 813.013 -61.8524 886.57 -26.4418C922.998 -8.8985 952.086 25.8643 987.218 46.2686C1075.51 97.657 1147.01 81.1394 1239.78 53.9877M0.161894 89.0743C142.149 37.0381 288.022 -10.4099 437.349 -0.747544C521.051 4.70439 586.405 19.1709 670.216 -1.28737C745.77 -19.7484 819.813 -49.599 894.665 -9.49228C930.229 9.56248 956.835 47.0782 990.457 69.9655C1076.16 128.263 1146.53 113.905 1239.84 90.1539M0.161894 125.187C140.044 69.0479 284.136 17.8214 432.599 23.921C517.651 27.3757 584.193 38.9274 669.083 16.9577C746.148 -2.96071 826.721 -37.5616 902.652 7.34938C937.515 27.9695 961.476 68.2383 993.587 93.5546C1076.48 158.924 1145.83 146.67 1239.84 126.212M0.161894 161.299C137.67 101.274 279.711 46.5924 426.933 49.4533C513.172 51.1267 580.793 59.6015 666.708 36.1744C745.015 14.7985 832.603 -24.6605 909.452 24.8927C943.775 47.0243 965.254 89.884 996.015 117.576C1076.21 189.854 1144.75 179.652 1239.84 162.379M0.161894 197.411C134.216 134.039 274.908 74.6078 420.133 76.2271C507.398 77.1988 575.72 81.787 662.283 56.9564C741.777 34.1771 836.057 -9.81617 913.769 43.8394C947.93 67.4285 967.305 112.501 996.933 142.46C1075.02 221.216 1143.13 212.849 1239.78 198.491M0.107875 233.577C130.762 167.075 268.702 104.728 411.768 104.566C499.573 104.458 567.949 106.132 654.944 80.0057C735.678 55.7689 835.571 8.159 914.417 65.0534C948.848 89.9379 966.657 136.792 995.691 168.64C1072.59 253.064 1140.92 246.425 1239.78 234.549M0.107875 269.69C126.661 202.809 260.769 138.465 400.111 135.443C487.916 133.553 557.533 132.474 644.42 106.24C726.72 81.3551 829.797 32.2878 910.208 89.7759C945.718 115.146 963.959 163.188 993.533 196.278C1070.92 282.915 1138.7 279.676 1239.73 270.715M0.107875 305.802C120.346 243.348 247.493 177.061 379.172 166.805C465.843 160.003 542.099 158.222 628.284 135.497C713.66 112.987 817.708 67.6444 900.817 121.678C938.378 146.131 960.829 193.956 992.777 226.668C1072.43 308.285 1138.33 312.01 1239.84 306.828M0.107875 341.968C115.004 282.159 236.915 209.934 362.388 194.658C453.269 183.592 540.588 180.462 631.522 161.191C728.878 140.571 825.425 113.311 914.039 181.001C954.353 211.824 983.549 261.809 1024.13 292.955C1094.77 347.096 1159.16 344.289 1239.78 342.94M0.107875 378.08C105.29 322.32 216.516 245.021 330.71 222.836C420.727 205.346 515.385 209.233 606.535 196.655C707.885 182.621 807.994 162.27 901.465 223.969C944.854 252.632 979.825 299.001 1022.89 328.851C1094.4 378.512 1159.8 378.782 1239.84 379.106M0.053855 414.193C95.7374 362.319 194.605 279.946 297.142 251.661C386.674 226.938 488.833 240.703 580.415 235.035C685.489 228.503 790.563 215.98 888.891 270.985C1018.14 343.318 1089.27 412.681 1239.73 415.218M0.053855 450.359C87.7503 402.155 172.425 316.004 264.168 282.591C353.214 250.149 464.008 275.735 555.914 276.653C664.496 277.733 775.128 273.09 878.367 321.132C1008.43 381.697 1094.77 447.822 1239.73 451.385M0.053855 486.471C82.2456 441.83 151.215 354.222 233.947 316.706C322.291 276.653 443.609 314.871 535.407 321.564C646.579 329.715 764.551 329.877 871.513 373.384C1000.28 425.69 1100.71 483.61 1239.73 487.497M0.053855 522.583C79.8171 481.883 132.597 395.894 208.798 355.517C296.71 308.879 429.847 358.81 521.429 370.145C636.703 384.396 757.481 390.712 870.11 426.824C997.472 467.686 1105.84 519.669 1239.73 523.663M0.053855 558.75C80.1949 523.555 118.458 442.046 190.881 400.266C279.819 348.985 424.073 407.823 516.41 422.452C635.515 441.29 758.129 451.439 875.939 480.372C999.847 510.816 1111.99 555.727 1239.68 559.775M0.053855 594.862C82.7853 568.358 110.956 493.165 182.624 452.248C275.502 399.24 427.527 462.019 522.994 478.698C645.283 500.074 768.868 511.086 890.833 533.056C1008.59 554.269 1119.98 591.461 1239.68 595.888M0 630.974C86.4012 617.372 112.143 549.681 186.132 512.759C287.104 462.396 441.18 521.612 543.556 539.155C668.112 560.477 791.696 569.546 916.468 583.958C1024.94 596.482 1130.45 626.494 1239.68 632' stroke='black' stroke-opacity='0.06' stroke-miterlimit='10' %3E%3C/path%3E%3C/svg%3E\")",
+};
+var getBannerBackground = function (primaryColor, secondaryColor, image) {
+    if (image === void 0) { image = 'light'; }
+    return "\n    ".concat(backgroundImages[image], " center/cover,\n    linear-gradient(268.9deg, ").concat(secondaryColor, " 0%, ").concat(primaryColor, " 99.86%)\n  ");
+};
+var getColorMap = function (theme) {
+    var fullTokens = theme.tokens;
+    return {
+        dark: fullTokens.color_fg_on_button_primary,
+        default: fullTokens.color_fg_on_button_primary,
+        blue: fullTokens.color_fg_on_button_inverse_static,
+        purple: fullTokens.color_fg_on_button_inverse_static,
+        magenta: fullTokens.color_fg_on_button_inverse_static,
+        red: fullTokens.color_fg_on_button_inverse_static,
+    };
+};
+var Root = styled(Paper, { name: promoBannerComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var fullTokens = theme.tokens;
+    var textColor = ownerState.color === 'default' ? fullTokens.color_fg_bold : fullTokens.color_fg_inverse_static;
+    var colorDark = {
+        background: getBannerBackground(fullTokens.color_global_functional_static_neutral_black, fullTokens.color_global_functional_static_neutral_black),
+        color: textColor,
+    };
+    var colorBlue = {
+        background: getBannerBackground(fullTokens.color_global_functional_static_blue_100, fullTokens.color_global_functional_static_green_100),
+        color: textColor,
+    };
+    var colorPurple = {
+        background: getBannerBackground(fullTokens.color_global_functional_static_purple_100, fullTokens.color_global_functional_static_blue_100),
+        color: textColor,
+    };
+    var colorMagenta = {
+        background: getBannerBackground(fullTokens.color_global_functional_static_magenta_100, fullTokens.color_global_functional_static_purple_100),
+        color: textColor,
+    };
+    var colorRed = {
+        background: getBannerBackground(fullTokens.color_global_functional_static_red_100, fullTokens.color_global_functional_static_yellow_100),
+        color: textColor,
+    };
+    var colorClasses = {
+        blue: colorBlue,
+        dark: colorDark,
+        purple: colorPurple,
+        magenta: colorMagenta,
+        red: colorRed,
+        default: {},
+    };
+    var colorClass = ownerState.color && colorClasses[ownerState.color];
+    return __assign({ display: 'flex', borderRadius: 6, background: getBannerBackground(theme.tokens.color_bg_layer_alternate, theme.tokens.color_bg_layer_alternate, theme.mixins.getColorModeValue({
+            light: 'dark',
+            dark: 'light',
+        })), color: fullTokens.color_fg_bold }, colorClass);
+});
+var PrimaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'PrimaryAction' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var colorMap = getColorMap(theme);
+    var fullTokens = theme.tokens;
+    var buttonColor = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) && colorMap[ownerState.color];
+    var whiteButtonBackground = {
+        background: fullTokens.color_bg_button_inverse_static,
+    };
+    var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
+    return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: fullTokens.color_fg_inverse_static })) });
+});
+var SecondaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var fullTokens = theme.tokens;
+    return {
+        color: ownerState.color !== 'default' ? fullTokens.color_fg_on_button_primary : fullTokens.color_fg_link_primary,
+        '&:hover': {
+            backgroundColor: fullTokens.color_bg_link_inverse_static_hover,
+        },
+    };
+});
+var ImageContainer = styled('div', { name: promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var imageContainerPositionTop = {
+        alignSelf: 'flex-start',
+        paddingTop: 0,
+        paddingBottom: theme.spacing(2),
+    };
+    var imageContainerPositionCenter = {
+        alignSelf: 'center',
+        paddingTop: 0,
+        paddingBottom: 0,
+    };
+    var imagePositionClass = ownerState.imagePosition === 'top'
+        ? imageContainerPositionTop
+        : ownerState.imagePosition === 'center'
+            ? imageContainerPositionCenter
+            : {};
+    return __assign((_b = { flex: 2, paddingRight: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: 0, alignSelf: 'flex-end', display: 'none' }, _b[theme.breakpoints.up('md')] = {
+        display: 'flex',
+    }, _b), imagePositionClass);
+});
+var Img = styled(Image, { name: promoBannerComponentName, slot: 'Image' })(function (_a) {
+    var ownerState = _a.ownerState;
+    var imageFullWidthClass = {
+        minWidth: '100%',
+    };
+    var fullWidthClass = ownerState.fullWidth && imageFullWidthClass;
+    return __assign({ display: 'block', height: 'auto', width: 'auto', margin: '0 auto', objectFit: 'contain' }, fullWidthClass);
+});
+var Content = styled(RowLayout, { name: promoBannerComponentName, slot: 'Content' })(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return _b = {
+            flex: 3,
+            padding: theme.spacing(5)
+        },
+        _b[theme.breakpoints.up('md')] = {
+            maxWidth: '55%',
+        },
+        _b;
+});
+export var PromoBanner = React.forwardRef(function (props, ref) {
+    var title = props.title, description = props.description, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.imageFullWidth, imageFullWidth = _b === void 0 ? true : _b, className = props.className, image = props.image, imagePosition = props.imagePosition, action = props.action, actionSecondary = props.actionSecondary, sx = props.sx, propClasses = props.classes, rootProps = __rest(props, ["title", "description", "color", "imageFullWidth", "className", "image", "imagePosition", "action", "actionSecondary", "sx", "classes"]);
+    var classes = useMergedClasses(promoBannerClasses, getPromoBannerUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, elevation: color === 'default' ? 0 : 5, ownerState: { color: color }, forwardedAs: "section", className: clsx(classes.root, className) }, rootProps),
+        React.createElement(Content, { className: classes.content },
+            React.createElement(Text, { className: classes.title, color: "inherit", component: "h2", variant: "h5" }, title),
+            React.createElement(Text, { className: classes.description, color: "inherit", variant: "body1" }, description),
+            React.createElement(StackLayout, { gutter: 1, className: classes.actions },
+                React.createElement(StackLayoutItem, null, action && (React.createElement(PrimaryActionButton, __assign({ variant: "contained", size: "medium", color: "primary", className: clsx(classes.action, classes.primaryAction), ownerState: { color: color } }, action)))),
+                React.createElement(StackLayoutItem, null, actionSecondary && (React.createElement(SecondaryActionButton, __assign({ className: clsx(classes.action, classes.secondaryAction), color: color === 'default' ? 'primary' : undefined, ownerState: { color: color }, variant: "link", size: "medium" }, actionSecondary)))))),
+        React.createElement(ImageContainer, { className: classes.imageContainer, ownerState: { imagePosition: imagePosition } }, !!image && React.createElement(Img, __assign({ className: classes.image, ownerState: { fullWidth: imageFullWidth } }, image)))));
+});

package/esm/pulsing-dot/index.js

@@ -0,0 +1 @@
+export { PulsingDot } from './pulsing-dot';

package/esm/pulsing-dot/pulsing-dot.js

@@ -0,0 +1,78 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { styled } from '../styled';
+import { fade } from '../styles/color-manipulator';
+var pulsingDotComponentName = 'QuantumPulsingDot';
+var BoxShadowCustomProperty = "--".concat(pulsingDotComponentName.toLowerCase(), "-box-shadow-color");
+var BoxShadowCustomPropertyFaded = "--".concat(pulsingDotComponentName.toLowerCase(), "-box-shadow-color-faded");
+var Root = styled('div', { name: pulsingDotComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var getCustomPropertiesForColor = function (colorValue) {
+        var _a;
+        return _a = {},
+            _a[BoxShadowCustomProperty] = colorValue,
+            _a[BoxShadowCustomPropertyFaded] = fade(colorValue, 0),
+            _a;
+    };
+    var defaultPulse = __assign({ backgroundColor: theme.tokens.color_bg_state_neutral }, getCustomPropertiesForColor(theme.tokens.color_bg_state_neutral_subtle));
+    var primaryPulse = __assign({ backgroundColor: theme.tokens.color_bg_brand_primary }, getCustomPropertiesForColor(theme.tokens.color_bg_brand_primary_subtle));
+    var dangerPulse = __assign({ backgroundColor: theme.tokens.color_bg_state_danger }, getCustomPropertiesForColor(theme.tokens.color_bg_state_danger_subtle));
+    var infoPulse = __assign({ backgroundColor: theme.tokens.color_bg_state_info }, getCustomPropertiesForColor(theme.tokens.color_bg_state_info_subtle));
+    var warningPulse = __assign({ backgroundColor: theme.tokens.color_bg_state_caution }, getCustomPropertiesForColor(theme.tokens.color_bg_state_caution_subtle));
+    var successPulse = __assign({ backgroundColor: theme.tokens.color_bg_state_success }, getCustomPropertiesForColor(theme.tokens.color_bg_state_success_subtle));
+    var getPulseColor = function (pulseColor) {
+        switch (pulseColor) {
+            case 'primary':
+                return primaryPulse;
+            case 'danger':
+                return dangerPulse;
+            case 'warning':
+                return warningPulse;
+            case 'success':
+                return successPulse;
+            case 'info':
+                return infoPulse;
+            default:
+                return defaultPulse;
+        }
+    };
+    return __assign({ '@keyframes pulse': {
+            '0%': {
+                transform: 'scale(0.75)',
+                boxShadow: "0 0 0 0 var(".concat(BoxShadowCustomProperty, ")"),
+            },
+            '70%': {
+                transform: 'scale(1)',
+                boxShadow: "0 0 0 8px var(".concat(BoxShadowCustomPropertyFaded, ")"),
+            },
+            '100%': {
+                transform: 'scale(0.75)',
+                boxShadow: "0 0 0 0 var(".concat(BoxShadowCustomPropertyFaded, ")"),
+            },
+        }, height: theme.typography.pxToRem(8), width: theme.typography.pxToRem(8), borderRadius: '50%', display: 'inline-block', animation: 'pulse 2s infinite' }, getPulseColor(ownerState.color));
+});
+export var PulsingDot = React.forwardRef(function (props, ref) {
+    var _a = props.color, color = _a === void 0 ? 'default' : _a, rootProps = __rest(props, ["color"]);
+    return React.createElement(Root, __assign({ ref: ref, ownerState: { color: color } }, rootProps));
+});

package/esm/quantum-provider/index.js

@@ -0,0 +1,2 @@
+export { QuantumProvider } from './quantum-provider';
+export { QuantumContext, useQuantumContext } from './quantum-context';

package/esm/quantum-provider/quantum-context.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { defaultQuantumTheme } from '../theme/default-theme';
+export var DEFAULT_COLOR_MODE = 'light';
+export var QuantumContext = React.createContext({
+    theme: defaultQuantumTheme[DEFAULT_COLOR_MODE],
+    colorMode: DEFAULT_COLOR_MODE,
+    setColorMode: function () {
+        // ..
+    },
+});
+export var useQuantumContext = function () { return React.useContext(QuantumContext); };

package/esm/quantum-provider/quantum-provider.js

@@ -0,0 +1,73 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import * as React from 'react';
+import { ThemeProvider } from '../theme';
+import { defaultQuantumTheme } from '../theme/default-theme';
+import { useMediaQuery } from '../use-media-query';
+import { DEFAULT_COLOR_MODE, QuantumContext } from './quantum-context';
+var DEFAULT_COLOR_MODE_STORAGE_KEY = 'quantum:color-mode';
+export var PREFERS_DARK_MODE_QUERY = '(prefers-color-scheme: dark)';
+export var getCurrentColorModeFromStorage = function (defaultColorMode) {
+    try {
+        return window.localStorage.getItem(DEFAULT_COLOR_MODE_STORAGE_KEY);
+    }
+    catch (_err) {
+        return defaultColorMode;
+    }
+};
+var setCurrentColorModeInStorage = function (mode) {
+    try {
+        window.localStorage.setItem(DEFAULT_COLOR_MODE_STORAGE_KEY, mode);
+    }
+    catch (_err) {
+        // ..
+    }
+};
+var computePaletteMode = function (currentColorMode, prefersDarkMode) {
+    return currentColorMode === 'system' ? (prefersDarkMode ? 'dark' : 'light') : currentColorMode;
+};
+export var QuantumProvider = function (_a) {
+    var _b = _a.theme, theme = _b === void 0 ? defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, _c = _a.defaultColorMode, defaultColorMode = _c === void 0 ? DEFAULT_COLOR_MODE : _c;
+    var _d = __read(React.useState(function () {
+        return propColorMode || getCurrentColorModeFromStorage(defaultColorMode);
+    }), 2), colorMode = _d[0], setColorMode = _d[1];
+    var prefersDarkMode = useMediaQuery(PREFERS_DARK_MODE_QUERY);
+    var currentColorMode = propColorMode || colorMode;
+    React.useEffect(function () {
+        var _a;
+        var mode = computePaletteMode(currentColorMode, prefersDarkMode);
+        (_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-theme', mode);
+    }, [currentColorMode, prefersDarkMode]);
+    var activeTheme = React.useMemo(function () {
+        var mode = computePaletteMode(currentColorMode, prefersDarkMode);
+        return theme[mode];
+    }, [prefersDarkMode, currentColorMode, theme]);
+    var handleSetColorMode = React.useCallback(function (mode) {
+        setColorMode(mode);
+        setCurrentColorModeInStorage(mode);
+        if (onColorModeChange) {
+            onColorModeChange(mode);
+        }
+    }, [setColorMode, onColorModeChange]);
+    var ctxValue = React.useMemo(function () { return ({
+        colorMode: currentColorMode,
+        setColorMode: handleSetColorMode,
+        theme: activeTheme,
+    }); }, [currentColorMode, activeTheme, handleSetColorMode]);
+    return (React.createElement(QuantumContext.Provider, { value: ctxValue },
+        React.createElement(ThemeProvider, { theme: activeTheme }, typeof children === 'function' ? children(ctxValue) : children)));
+};

package/esm/radio/index.js

@@ -0,0 +1,4 @@
+export { Radio } from './radio';
+export { radioClasses } from './radio-classes';
+export { RadioCheckedIcon, RadioUncheckedIcon } from './radio-icons';
+export * from './radio-group';

package/esm/radio/radio-classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var radioComponentName = 'QuantumRadio';
+export function getRadioUtilityClass(slot) {
+    return generateUtilityClass(radioComponentName, slot);
+}
+export var radioClasses = generateUtilityClasses(radioComponentName, [
+    'radio',
+    'formControlLabel',
+    'iconUnchecked',
+    'iconChecked',
+]);

package/esm/radio/radio-group/index.js

@@ -0,0 +1 @@
+export { default as RadioGroup, useRadioGroup } from '@mui/material/RadioGroup';

package/esm/radio/radio-icons.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTheme } from '../theme/use-theme';
+export var RadioUncheckedIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 18 : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c;
+    var theme = useTheme();
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("rect", { width: "18", height: "18", rx: "9", fill: color }),
+        React.createElement("rect", { x: "2", y: "2", width: "14", height: "14", rx: "7", fill: theme.tokens.color_bg_input })));
+};
+export var RadioCheckedIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 18 : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c;
+    var theme = useTheme();
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("rect", { width: "18", height: "18", rx: "9", fill: color }),
+        React.createElement("rect", { x: "2", y: "2", width: "14", height: "14", rx: "7", fill: color }),
+        React.createElement("rect", { x: "5", y: "5", width: "8", height: "8", rx: "4", fill: theme.tokens.color_bg_input })));
+};

package/esm/radio/radio-overrides.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { radioClasses } from '@mui/material/Radio';
+export var createMuiRadioOverrides = function (_a) {
+    var _b;
+    var palette = _a.palette, tokens = _a.tokens, transitions = _a.transitions, mixins = _a.mixins, typography = _a.typography;
+    return {
+        defaultProps: {
+            color: 'primary',
+        },
+        styleOverrides: {
+            root: {
+                padding: 0,
+                transition: transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+                    duration: transitions.duration.short,
+                }),
+                color: tokens.color_border_input,
+                '&:focus-within svg': __assign({ borderRadius: '50%' }, mixins.focusRing()),
+                // switch base is overriding this. Resetting it here.
+                '&&': {
+                    padding: 0,
+                    height: typography.pxToRem(18),
+                    width: typography.pxToRem(18),
+                },
+            },
+            colorPrimary: (_b = {
+                    '&:hover,': {
+                        backgroundColor: 'transparent',
+                    }
+                },
+                _b["&.".concat(radioClasses.disabled)] = {
+                    backgroundColor: 'transparent',
+                },
+                _b["&:hover:not(.".concat(radioClasses.checked, ")")] = {
+                    color: tokens.color_border_input_hover,
+                    '& svg :last-child': {
+                        fill: palette.action.hoverBackground,
+                    },
+                },
+                _b["&.".concat(radioClasses.checked)] = {
+                    color: tokens.color_bg_selected,
+                    '&:hover': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+                _b["&.".concat(radioClasses.checked, ".").concat(radioClasses.disabled)] = {
+                    color: tokens.color_bg_input_disabled_bold,
+                },
+                _b["&.".concat(radioClasses.disabled, ":not(.").concat(radioClasses.checked, ")")] = {
+                    color: tokens.color_border_input_disabled,
+                    '& svg :last-child': {
+                        fill: tokens.color_bg_input_disabled,
+                    },
+                },
+                _b),
+        },
+    };
+};

package/esm/radio/radio.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import MuiRadio from '@mui/material/Radio';
+import { FormControlLabel as BaseFormControlLabel } from '../form';
+import { styled } from '../styled';
+import clsx from '../utils/clsx';
+import { radioClasses, getRadioUtilityClass, radioComponentName } from './radio-classes';
+import { RadioCheckedIcon, RadioUncheckedIcon } from './radio-icons';
+import { useMergedClasses } from '../styles/classes';
+var RadioHeight = 18;
+var RadioControl = styled(MuiRadio, { name: radioComponentName, slot: 'Radio' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    if (ownerState.hasLabelOrHelperText) {
+        return {
+            '&&': {
+                paddingTop: 2,
+            },
+            height: theme.typography.pxToRem(RadioHeight),
+            width: theme.typography.pxToRem(RadioHeight),
+        };
+    }
+    return {
+        padding: theme.spacing(1),
+        height: theme.typography.pxToRem(34),
+        width: theme.typography.pxToRem(34),
+    };
+});
+var FormControlLabel = styled(BaseFormControlLabel, { name: radioComponentName, slot: 'FormControlLabel' })({});
+export var Radio = React.forwardRef(function (props, ref) {
+    var label = props.children, noWrap = props.noWrap, className = props.className, inputProps = props.inputProps, disabled = props.disabled, readOnly = props.readOnly, helperText = props.helperText, _a = props.HelperTextProps, HelperTextProps = _a === void 0 ? {} : _a, decoration = props.decoration, propClasses = props.classes, radioProps = __rest(props, ["children", "noWrap", "className", "inputProps", "disabled", "readOnly", "helperText", "HelperTextProps", "decoration", "classes"]);
+    var classes = useMergedClasses(radioClasses, getRadioUtilityClass, propClasses);
+    var isDisabled = disabled || readOnly;
+    var hasLabelOrHelperText = !!helperText || !!label;
+    var control = (React.createElement(RadioControl, __assign({ className: clsx(classes.radio, !hasLabelOrHelperText && className), ownerState: { hasLabelOrHelperText: hasLabelOrHelperText }, inputProps: inputProps, disabled: isDisabled, readOnly: readOnly, icon: React.createElement(RadioUncheckedIcon, { className: classes.iconUnchecked }), checkedIcon: React.createElement(RadioCheckedIcon, { className: classes.iconChecked }) }, radioProps, { ref: ref })));
+    if (hasLabelOrHelperText) {
+        return (React.createElement(FormControlLabel, { className: clsx(classes.formControlLabel, className), height: RadioHeight, label: label, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: isDisabled, control: control, ref: ref }));
+    }
+    return control;
+});

package/esm/radio-field/index.js

@@ -0,0 +1 @@
+export { RadioField } from './radio-field';

package/esm/radio-field/radio-field.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { Radio, RadioGroup, } from '../radio';
+import { FormField } from '../form/form-field';
+export var RadioField = React.forwardRef(function (props, ref) {
+    var error = props.error, onBlur = props.onBlur, value = props.value, onChange = props.onChange, options = props.options, required = props.required, row = props.row, label = props.label, helperText = props.helperText, _a = props.RadioGroupProps, RadioGroupProps = _a === void 0 ? {} : _a, rootProps = __rest(props, ["error", "onBlur", "value", "onChange", "options", "required", "row", "label", "helperText", "RadioGroupProps"]);
+    return (React.createElement(FormField, __assign({ ref: ref, label: label, error: error, helperText: helperText, required: required }, rootProps),
+        React.createElement(RadioGroup, __assign({ onBlur: onBlur, value: value || '', onChange: onChange, row: row }, RadioGroupProps), options.map(function (option, i) {
+            return (React.createElement(Radio, __assign({ key: i }, option), option.label));
+        }))));
+});