@macive/ui 0.0.25 → 0.0.27

package/dist/.eslintrc.js

@@ -1,7 +1,17 @@
 module.exports = {
     // parser: '@typescript-eslint/parser',
     // extends: ['eslint-config-ts-lambdas', 'eslint-config-ts-lambdas/react', 'prettier'],
-    plugins: ['@typescript-eslint'],
+    plugins: ['@typescript-eslint', 'jest'],
+    overrides: [
+        {
+            files: ['**/*.test.ts', '**/*.test.tsx'],
+            env: { jest: true },
+            rules: {
+                'jest/require-to-throw-message': 'off',
+                'jest/no-disabled-tests': 'warn',
+            },
+        },
+    ],
     settings: {
         react: {
             pragma: 'React',

package/dist/main.min.css

@@ -1 +1 @@
-.light{--primary:#ffffff;--primary-2:#f1f3f5;--secondary:#000000;--secondary-2:#111;--selection:var(--cyan);--text-base:#000000;--text-primary:#000000;--text-secondary:white;--active:#ff6e26;--success:#00a84f;--theme-base-primary:#ff6e26;--theme-base-secondary:#ff2f00;--theme-background:rgba(243, 243, 243, 255);--hover:rgba(0, 0, 0, 0.075);--hover-1:rgba(0, 0, 0, 0.15);--hover-2:rgba(0, 0, 0, 0.25);--cyan:#22b8cf;--green:#37b679;--red:#da3c3c;--pink:#e64980;--purple:#f81ce5;--blue:#0070f3;--violet-light:#7048e8;--violet:#5f3dc4;--accents-0:#f8f9fa;--accents-1:#f1f3f5;--accents-2:#e9ecef;--accents-3:#dee2e6;--accents-4:#ced4da;--accents-5:#adb5bd;--accents-6:#868e96;--accents-7:#495057;--accents-8:#343a40;--accents-9:#0d243c;--foreground-primary:hsl(218, 23%, 23%);--foreground-secondary:hsl(216, 15%, 52%);--foreground-tertiary:hsl(214, 20%, 69%);--accent:hsl(229, 76%, 66%);--icon:#343a40;--color-accent:37,150,190;--color-accent-hover:1,147,118;--color-accent-300:153,217,204;--color-accent-400:77,188,165;--color-accent-500:0,159,127;--color-accent-600:0,143,114;--color-accent-700:0,119,95;--color-light:255,255,255;--color-dark:0,0,0;--color-muted-black:17,17,17;--text-base:107,114,128;--text-base-dark:75,85,99;--text-muted:156,163,175;--text-muted-light:209,213,219;--text-sub-heading:55,65,81;--text-heading:31,41,55;--text-bolder:31,41,55;--color-border-50:249,250,251;--color-border-100:243,244,246;--color-border-200:229,231,235;--color-border-base:209,213,219;--color-border-400:156,163,175;--color-gray-50:249,250,251;--color-gray-100:243,244,246;--color-gray-200:229,231,235;--color-gray-300:209,213,219;--color-gray-400:156,163,175;--color-gray-500:107,114,128;--color-gray-600:75,85,99;--color-gray-700:55,65,81;--color-gray-800:31,41,55;--color-gray-900:31,41,55}.dark{--primary:hsl(218, 23%, 23%);--primary-2:#111;--secondary:hsl(0, 0%, 97%);--secondary-2:#f1f3f5;--hover:rgba(255, 255, 255, 0.075);--hover-1:rgba(255, 255, 255, 0.15);--hover-2:rgba(255, 255, 255, 0.25);--selection:var(--purple);--text-base:white;--text-primary:white;--text-secondary:black;--active:#ff6e26;--success:#00a84f;--theme-base-primary:#ff6e26;--theme-base-secondary:rgb(230, 44, 12);--theme-background:#212529;--accents-0:#212529;--accents-1:#343a40;--accents-2:#495057;--accents-3:#868e96;--accents-4:#adb5bd;--accents-5:#ced4da;--accents-6:#dee2e6;--accents-7:#e9ecef;--accents-8:#f1f3f5;--accents-9:#f8f9fa;--foreground-primary:hsl(210, 38%, 95%);--foreground-secondary:hsl(211, 25%, 84%);--foreground-tertiary:hsl(214, 20%, 69%);--accent:hsl(229, 76%, 66%);--icon:#ced4da;--color-accent:37,150,190;--color-accent-hover:1,147,118;--color-accent-300:153,217,204;--color-accent-400:77,188,165;--color-accent-500:0,159,127;--color-accent-600:0,143,114;--color-accent-700:0,119,95;--color-light:255,255,255;--color-dark:0,0,0;--color-muted-black:17,17,17;--text-base:107,114,128;--text-base-dark:75,85,99;--text-muted:156,163,175;--text-muted-light:209,213,219;--text-sub-heading:55,65,81;--text-heading:31,41,55;--text-bolder:31,41,55;--color-border-50:249,250,251;--color-border-100:243,244,246;--color-border-200:229,231,235;--color-border-base:209,213,219;--color-border-400:156,163,175;--color-gray-50:249,250,251;--color-gray-100:243,244,246;--color-gray-200:229,231,235;--color-gray-300:209,213,219;--color-gray-400:156,163,175;--color-gray-500:107,114,128;--color-gray-600:75,85,99;--color-gray-700:55,65,81;--color-gray-800:31,41,55;--color-gray-900:31,41,55}.mow{margin-right:100px}body{margin-right:100px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;-webkit-font-smoothing:antialiased}#globalLoader{position:fixed;z-index:9999;top:50%;left:50%;background-color:#fff;transform:translate(-50%,-50%);width:100%;height:100%;justify-content:center;align-items:center;display:flex}.loading-circle{width:50px;height:50px;border:4px solid #ff4500;border-radius:50%;border-left-color:transparent;animation:loading-circle .5s linear infinite}@keyframes loading-circle{from{transform:rotate(0)}to{transform:rotate(360deg)}}.LegacyCard:has(.DataTable-DataTable),.LegacyCard:has(.IndexFilters-IndexFiltersWrapper),.LegacyCard:has(.IndexTable-IndexTable){padding:0!important}.LegacyCard:not(:has(.LegacyCard_Section)),.LegacyCard_Section{padding:var(--p-space-4)}@media (min-width:30.625em){.LegacyCard .LegacyCard_Section:last-child{border-bottom-left-radius:var(--p-border-radius-2);border-bottom-right-radius:var(--p-border-radius-2)}}.LegacyCard_Section+.LegacyCard_Section{border-top:var(--p-border-width-1) solid var(--p-color-border-subdued)}.LegacyCard:not(:has(.LegacyCard_Section)) .LegacyCard_Header{padding-bottom:var(--p-space-4)}.LegacyCard:has(.LegacyCard_Section) .LegacyCard_Header{padding:var(--p-space-4) var(--p-space-4) 0}.LegacyCard:not(:has(.LegacyCard_Section)) .LegacyCard:has(.LegacyCard_Header) .LegacyCard{padding-top:0}.Popover-Popover{background-color:#fff}.Layout-Annotation{padding-left:8px;padding-right:8px}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.css-1nmdiq5-menu{z-index:1700;background-color:#ff4500}.element-selector-revert{all:revert}:root{--macive-primary-color:#0000ff;--macive-secondary-color:#f5f5f5;--tertiary-color:#ccc;--small-space:0.2rem;--medium-space:0.5rem;--large-space:1rem;--table-border-collapse:collapse;--table-width:100%;--table-margin-bottom:1rem;--th-background-color:#ddd;--th-padding:0.5rem;--th-text-align:left;--th-border:1px solid #ccc;--td-padding:0.5rem;--td-text-align:left;--td-border:1px solid #ccc;--macive-primary:var(--primary, #ffffff);--macive-primary-2:var(--primary-2, #f1f3f5);--macive-secondary:var(--secondary, #000000);--macive-secondary-2:#111;--selection:var(--cyan);--macive-text-base:var(--text-base, #000000);--macive-text-primary:var(--text-primary, #000000);--macive-text-secondary:var(--text-secondary, #000000);--macive-link-color:#0275d8;--link-hover-color:#ff6e26;--link-visited-color:purple;--link-text-decoration:underline}#editor-js{z-index:20}.editor{font-family:-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size:1rem;line-height:1.8}.editor h1,.editor h2,.editor h3,.editor h4,.editor h5,.editor h6{font-weight:bolder;margin-bottom:1rem;color:var(--macive-text-primary)}.editor h1{font-size:2em;line-height:1.2}.editor h2{font-size:1.5em;line-height:1.2}.editor h3{font-size:1.17em;line-height:1.2}.editor h4{font-size:1em;line-height:1.2}.editor h5{font-size:.83em;line-height:1.2}.editor h6{font-size:.67em;line-height:1.2}.editor p{margin-bottom:1rem;color:var(--macive-text-base)}.editor hr{border:1px inset;margin:1rem 0;background-color:var(--macive-primary-2)}.editor dd,.editor dir,.editor menu,.editor ol,.editor ul{margin-left:40px!important}.editor ol{list-style-type:decimal}.editor ol,.editor ul{margin-top:0;margin-bottom:0}.editor ins,.editor u{text-decoration:underline}.editor br:before{content:'\\A';white-space:pre-line}.editor a{color:var(--macive-link-color);text-decoration:var(--link-text-decoration)}.editor a:hover{color:var(--link-hover-color)}.editor a:visited{color:var(--link-visited-color)}.editor b{font-weight:700;color:var(--macive-text-primary)}.editor b a{text-decoration:none;font-weight:bolder;border-bottom:1px solid #dbd9d9}.editor i{font-style:italic;color:var(--macive-text-primary)}.editor u{text-decoration:underline;color:var(--macive-text-primary)}.editor code{background-color:var(--macive-primary-2);padding:.2rem .5rem;border-radius:.2rem;color:var(--macive-secondary)}.editor pre{background-color:var(--macive-primary-2);padding:1rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--macive-text-base)}.editor blockquote{border-left:5px solid var(--macive-primary);padding-left:1rem;margin-left:0;margin-right:0}.editor menu{display:flex;flex-direction:column;margin-bottom:1rem;padding:0}.editor strong{font-weight:700;color:var(--macive-text-primary)}.editor big{font-size:1.5em;color:var(--macive-text-primary)}.editor sup{font-size:smaller;vertical-align:super;color:var(--macive-text-primary)}.editor sub{font-size:smaller;vertical-align:sub;color:var(--macive-text-primary)}.editor fieldset{border:1px solid var(--macive-primary-2);padding:1rem;margin-bottom:1rem}.editor form{display:flex;flex-direction:column;margin-bottom:1rem}.editor dl{margin-bottom:1rem;display:flex;flex-wrap:wrap;margin-left:0}.editor dir{display:block;margin-bottom:1rem}.editor br{clear:both}.editor hr{border:1px inset;background-color:var(--macive-primary-2)}.editor caption{text-align:left;padding-bottom:.5rem;caption-side:bottom;color:var(--macive-text-base)}.editor del,.editor s,.editor strike{text-decoration:line-through;color:var(--macive-text-primary)}.editor table{border-collapse:var(--table-border-collapse);width:var(--table-width);margin-bottom:var(--table-margin-bottom)}.editor th{background-color:var(--th-background-color);padding:var(--th-padding);text-align:var(--th-text-align);border:var(--th-border)}.editor td{padding:var(--td-padding);text-align:var(--td-text-align);border:var(--td-border)}.codex-editor__redactor{padding-bottom:0!important;padding-top:14px!important;z-index:inherit}.codex-editor{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:inherit}.editorjs-fixme{width:100%;height:450px;display:block;min-height:450px;overflow-y:auto;overflow-x:hidden;padding-left:1rem;padding-right:1rem}.ce-settings--opened{display:block;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-name:panelShowing;animation-name:panelShowing;margin-left:-51px!important}.cdx-list{margin:0;padding-left:0!important;outline:0}@tailwind base;@tailwind components;@tailwind utilities;
+.light{--primary:#ffffff;--primary-2:#f1f3f5;--secondary:#000000;--secondary-2:#111;--selection:var(--cyan);--text-base:#000000;--text-primary:#000000;--text-secondary:white;--active:#ff6e26;--success:#00a84f;--theme-base-primary:#ff6e26;--theme-base-secondary:#ff2f00;--theme-background:rgba(243, 243, 243, 255);--hover:rgba(0, 0, 0, 0.075);--hover-1:rgba(0, 0, 0, 0.15);--hover-2:rgba(0, 0, 0, 0.25);--cyan:#22b8cf;--green:#37b679;--red:#da3c3c;--pink:#e64980;--purple:#f81ce5;--blue:#0070f3;--violet-light:#7048e8;--violet:#5f3dc4;--accents-0:#f8f9fa;--accents-1:#f1f3f5;--accents-2:#e9ecef;--accents-3:#dee2e6;--accents-4:#ced4da;--accents-5:#adb5bd;--accents-6:#868e96;--accents-7:#495057;--accents-8:#343a40;--accents-9:#0d243c;--foreground-primary:hsl(218, 23%, 23%);--foreground-secondary:hsl(216, 15%, 52%);--foreground-tertiary:hsl(214, 20%, 69%);--accent:hsl(229, 76%, 66%);--icon:#343a40;--color-accent:37,150,190;--color-accent-hover:1,147,118;--color-accent-300:153,217,204;--color-accent-400:77,188,165;--color-accent-500:0,159,127;--color-accent-600:0,143,114;--color-accent-700:0,119,95;--color-light:255,255,255;--color-dark:0,0,0;--color-muted-black:17,17,17;--text-base:107,114,128;--text-base-dark:75,85,99;--text-muted:156,163,175;--text-muted-light:209,213,219;--text-sub-heading:55,65,81;--text-heading:31,41,55;--text-bolder:31,41,55;--color-border-50:249,250,251;--color-border-100:243,244,246;--color-border-200:229,231,235;--color-border-base:209,213,219;--color-border-400:156,163,175;--color-gray-50:249,250,251;--color-gray-100:243,244,246;--color-gray-200:229,231,235;--color-gray-300:209,213,219;--color-gray-400:156,163,175;--color-gray-500:107,114,128;--color-gray-600:75,85,99;--color-gray-700:55,65,81;--color-gray-800:31,41,55;--color-gray-900:31,41,55}.dark{--primary:hsl(218, 23%, 23%);--primary-2:#111;--secondary:hsl(0, 0%, 97%);--secondary-2:#f1f3f5;--hover:rgba(255, 255, 255, 0.075);--hover-1:rgba(255, 255, 255, 0.15);--hover-2:rgba(255, 255, 255, 0.25);--selection:var(--purple);--text-base:white;--text-primary:white;--text-secondary:black;--active:#ff6e26;--success:#00a84f;--theme-base-primary:#ff6e26;--theme-base-secondary:rgb(230, 44, 12);--theme-background:#212529;--accents-0:#212529;--accents-1:#343a40;--accents-2:#495057;--accents-3:#868e96;--accents-4:#adb5bd;--accents-5:#ced4da;--accents-6:#dee2e6;--accents-7:#e9ecef;--accents-8:#f1f3f5;--accents-9:#f8f9fa;--foreground-primary:hsl(210, 38%, 95%);--foreground-secondary:hsl(211, 25%, 84%);--foreground-tertiary:hsl(214, 20%, 69%);--accent:hsl(229, 76%, 66%);--icon:#ced4da;--color-accent:37,150,190;--color-accent-hover:1,147,118;--color-accent-300:153,217,204;--color-accent-400:77,188,165;--color-accent-500:0,159,127;--color-accent-600:0,143,114;--color-accent-700:0,119,95;--color-light:255,255,255;--color-dark:0,0,0;--color-muted-black:17,17,17;--text-base:107,114,128;--text-base-dark:75,85,99;--text-muted:156,163,175;--text-muted-light:209,213,219;--text-sub-heading:55,65,81;--text-heading:31,41,55;--text-bolder:31,41,55;--color-border-50:249,250,251;--color-border-100:243,244,246;--color-border-200:229,231,235;--color-border-base:209,213,219;--color-border-400:156,163,175;--color-gray-50:249,250,251;--color-gray-100:243,244,246;--color-gray-200:229,231,235;--color-gray-300:209,213,219;--color-gray-400:156,163,175;--color-gray-500:107,114,128;--color-gray-600:75,85,99;--color-gray-700:55,65,81;--color-gray-800:31,41,55;--color-gray-900:31,41,55}.mow{margin-right:100px}body{margin-right:100px;font-family:Outfit,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;-webkit-font-smoothing:antialiased}#globalLoader{position:fixed;z-index:9999;top:50%;left:50%;background-color:#fff;transform:translate(-50%,-50%);width:100%;height:100%;justify-content:center;align-items:center;display:flex}.loading-circle{width:50px;height:50px;border:4px solid #ff4500;border-radius:50%;border-left-color:transparent;animation:loading-circle .5s linear infinite}@keyframes loading-circle{from{transform:rotate(0)}to{transform:rotate(360deg)}}.LegacyCard:has(.DataTable-DataTable),.LegacyCard:has(.IndexFilters-IndexFiltersWrapper),.LegacyCard:has(.IndexTable-IndexTable){padding:0!important}.LegacyCard:not(:has(.LegacyCard_Section)),.LegacyCard_Section{padding:var(--p-space-4)}@media (min-width:30.625em){.LegacyCard .LegacyCard_Section:last-child{border-bottom-left-radius:var(--p-border-radius-2);border-bottom-right-radius:var(--p-border-radius-2)}}.LegacyCard_Section+.LegacyCard_Section{border-top:var(--p-border-width-1) solid var(--p-color-border-subdued)}.LegacyCard:not(:has(.LegacyCard_Section)) .LegacyCard_Header{padding-bottom:var(--p-space-4)}.LegacyCard:has(.LegacyCard_Section) .LegacyCard_Header{padding:var(--p-space-4) var(--p-space-4) 0}.LegacyCard:not(:has(.LegacyCard_Section)) .LegacyCard:has(.LegacyCard_Header) .LegacyCard{padding-top:0}.Popover-Popover{background-color:#fff}.Layout-Annotation{padding-left:8px;padding-right:8px}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.css-1nmdiq5-menu{z-index:1700;background-color:#ff4500}.element-selector-revert{all:revert}:root{--macive-primary-color:#0000ff;--macive-secondary-color:#f5f5f5;--tertiary-color:#ccc;--small-space:0.2rem;--medium-space:0.5rem;--large-space:1rem;--table-border-collapse:collapse;--table-width:100%;--table-margin-bottom:1rem;--th-background-color:#ddd;--th-padding:0.5rem;--th-text-align:left;--th-border:1px solid #ccc;--td-padding:0.5rem;--td-text-align:left;--td-border:1px solid #ccc;--macive-primary:var(--primary, #ffffff);--macive-primary-2:var(--primary-2, #f1f3f5);--macive-secondary:var(--secondary, #000000);--macive-secondary-2:#111;--selection:var(--cyan);--macive-text-base:var(--text-base, #000000);--macive-text-primary:var(--text-primary, #000000);--macive-text-secondary:var(--text-secondary, #000000);--macive-link-color:#0275d8;--link-hover-color:#ff6e26;--link-visited-color:purple;--link-text-decoration:underline}#editor-js{z-index:20}.editor{font-family:-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size:1rem;line-height:1.8}.editor h1,.editor h2,.editor h3,.editor h4,.editor h5,.editor h6{font-weight:bolder;margin-bottom:1rem;color:var(--macive-text-primary)}.editor h1{font-size:2em;line-height:1.2}.editor h2{font-size:1.5em;line-height:1.2}.editor h3{font-size:1.17em;line-height:1.2}.editor h4{font-size:1em;line-height:1.2}.editor h5{font-size:.83em;line-height:1.2}.editor h6{font-size:.67em;line-height:1.2}.editor p{margin-bottom:1rem;color:var(--macive-text-base)}.editor hr{border:1px inset;margin:1rem 0;background-color:var(--macive-primary-2)}.editor dd,.editor dir,.editor menu,.editor ol,.editor ul{margin-left:40px!important}.editor ol{list-style-type:decimal}.editor ol,.editor ul{margin-top:0;margin-bottom:0}.editor ins,.editor u{text-decoration:underline}.editor br:before{content:'\\A';white-space:pre-line}.editor a{color:var(--macive-link-color);text-decoration:var(--link-text-decoration)}.editor a:hover{color:var(--link-hover-color)}.editor a:visited{color:var(--link-visited-color)}.editor b{font-weight:700;color:var(--macive-text-primary)}.editor b a{text-decoration:none;font-weight:bolder;border-bottom:1px solid #dbd9d9}.editor i{font-style:italic;color:var(--macive-text-primary)}.editor u{text-decoration:underline;color:var(--macive-text-primary)}.editor code{background-color:var(--macive-primary-2);padding:.2rem .5rem;border-radius:.2rem;color:var(--macive-secondary)}.editor pre{background-color:var(--macive-primary-2);padding:1rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--macive-text-base)}.editor blockquote{border-left:5px solid var(--macive-primary);padding-left:1rem;margin-left:0;margin-right:0}.editor menu{display:flex;flex-direction:column;margin-bottom:1rem;padding:0}.editor strong{font-weight:700;color:var(--macive-text-primary)}.editor big{font-size:1.5em;color:var(--macive-text-primary)}.editor sup{font-size:smaller;vertical-align:super;color:var(--macive-text-primary)}.editor sub{font-size:smaller;vertical-align:sub;color:var(--macive-text-primary)}.editor fieldset{border:1px solid var(--macive-primary-2);padding:1rem;margin-bottom:1rem}.editor form{display:flex;flex-direction:column;margin-bottom:1rem}.editor dl{margin-bottom:1rem;display:flex;flex-wrap:wrap;margin-left:0}.editor dir{display:block;margin-bottom:1rem}.editor br{clear:both}.editor hr{border:1px inset;background-color:var(--macive-primary-2)}.editor caption{text-align:left;padding-bottom:.5rem;caption-side:bottom;color:var(--macive-text-base)}.editor del,.editor s,.editor strike{text-decoration:line-through;color:var(--macive-text-primary)}.editor table{border-collapse:var(--table-border-collapse);width:var(--table-width);margin-bottom:var(--table-margin-bottom)}.editor th{background-color:var(--th-background-color);padding:var(--th-padding);text-align:var(--th-text-align);border:var(--th-border)}.editor td{padding:var(--td-padding);text-align:var(--td-text-align);border:var(--td-border)}.codex-editor__redactor{padding-bottom:0!important;padding-top:14px!important;z-index:inherit}.codex-editor{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:inherit}.editorjs-fixme{width:100%;height:450px;display:block;min-height:450px;overflow-y:auto;overflow-x:hidden;padding-left:1rem;padding-right:1rem}.ce-settings--opened{display:block;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-name:panelShowing;animation-name:panelShowing;margin-left:-51px!important}.cdx-list{margin:0;padding-left:0!important;outline:0}@tailwind base;@tailwind components;@tailwind utilities;

package/dist/src/components/Badge/Badge.js

@@ -15,22 +15,23 @@ const Badge_classnames_1 = __importDefault(require("./Badge.classnames"));
 const components_1 = require("./components");
 const utils_1 = require("./utils");
 const DEFAULT_SIZE = 'medium';
-function Badge({ children, status, progress, icon, size = DEFAULT_SIZE, statusAndProgressLabelOverride, }) {
+function Badge({ children, status, tone, progress, icon, size = DEFAULT_SIZE, statusAndProgressLabelOverride, }) {
+    const resolvedStatus = tone !== null && tone !== void 0 ? tone : status;
     const i18n = (0, i18n_1.useI18n)();
     const withinFilter = (0, react_1.useContext)(within_filter_context_1.WithinFilterContext);
     const className = (0, css_1.classNames)(Badge_classnames_1.default.Badge, 
     // status && styles[variationName('status', status)],
-    Badge_classnames_1.default[status !== null && status !== void 0 ? status : 'info'] || Badge_classnames_1.default['info'], icon && Badge_classnames_1.default.icon, 
+    Badge_classnames_1.default[resolvedStatus !== null && resolvedStatus !== void 0 ? resolvedStatus : 'info'] || Badge_classnames_1.default['info'], icon && Badge_classnames_1.default.icon, 
     // TODO: remove support for the size prop in the next major release
     // size && size !== DEFAULT_SIZE && styles[variationName('size', size)],
     //@ts-expect-error
     size && size !== DEFAULT_SIZE && Badge_classnames_1.default[size], withinFilter && Badge_classnames_1.default.withinFilter);
     const accessibilityLabel = statusAndProgressLabelOverride
         ? statusAndProgressLabelOverride
-        : (0, utils_1.getDefaultAccessibilityLabel)(i18n, progress, status);
+        : (0, utils_1.getDefaultAccessibilityLabel)(i18n, progress, resolvedStatus);
     let accessibilityMarkup = Boolean(accessibilityLabel) && ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: accessibilityLabel }));
     if (progress && !icon) {
-        accessibilityMarkup = ((0, jsx_runtime_1.jsx)("span", { className: Badge_classnames_1.default.PipContainer, children: (0, jsx_runtime_1.jsx)(components_1.Pip, { progress: progress, status: status, accessibilityLabelOverride: accessibilityLabel }) }));
+        accessibilityMarkup = ((0, jsx_runtime_1.jsx)("span", { className: Badge_classnames_1.default.PipContainer, children: (0, jsx_runtime_1.jsx)(components_1.Pip, { progress: progress, status: resolvedStatus, accessibilityLabelOverride: accessibilityLabel }) }));
     }
     return ((0, jsx_runtime_1.jsxs)("span", { className: className, children: [accessibilityMarkup, icon && ((0, jsx_runtime_1.jsx)("span", { className: Badge_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: icon }) })), children && ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', 
                 // style={{ color: 'white' }}

package/dist/src/components/Box/Box.js

@@ -30,7 +30,7 @@ exports.Box = void 0;
 const react_1 = __importStar(require("react"));
 const css_1 = require("../../utilities/css");
 const Box_classnames_1 = __importDefault(require("./Box.classnames"));
-exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, borderStyle, borderWidth, borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, borderInlineEndWidth, borderRadius, borderRadiusEndStart, borderRadiusEndEnd, borderRadiusStartStart, borderRadiusStartEnd, children, color, id, minHeight, minWidth, maxWidth, overflowX, overflowY, outlineColor, outlineStyle, outlineWidth, padding, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, role, shadow, tabIndex, width, printHidden, visuallyHidden, position, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd, zIndex, opacity, hoverInteraction, onClick, ...restProps }, ref) => {
+exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, borderStyle, borderWidth, borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, borderInlineEndWidth, borderRadius, borderRadiusEndStart, borderRadiusEndEnd, borderRadiusStartStart, borderRadiusStartEnd, children, color, id, minHeight, minWidth, maxWidth, overflowX, overflowY, outlineColor, outlineStyle, outlineWidth, padding, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, role, shadow, tabIndex, width, printHidden, visuallyHidden, position, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd, zIndex, opacity, hoverInteraction, onClick, display, gap, alignItems, justifyContent, flexWrap, overflow, href, src, alt, target, rel, style: styleProp, ...restProps }, ref) => {
     // eslint-disable-next-line no-nested-ternary
     const borderStyleValue = borderStyle
         ? borderStyle
@@ -115,11 +115,27 @@ exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, bo
         className,
         id,
         ref,
-        style: (0, css_1.sanitizeCustomProperties)(style),
+        style: {
+            ...(0, css_1.sanitizeCustomProperties)({
+                ...style,
+                ...(display && { display }),
+                ...(gap && { gap }),
+                ...(alignItems && { alignItems }),
+                ...(justifyContent && { justifyContent }),
+                ...(flexWrap && { flexWrap }),
+                ...(overflow && { overflow }),
+            }),
+            ...styleProp,
+        },
         role,
         tabIndex,
         onClick,
-        ...restProps,
+        href,
+        src,
+        alt,
+        target,
+        rel,
+        ...restProps
     }, children);
 });
 exports.Box.displayName = 'Box';

package/dist/src/components/Button/Button.js

@@ -19,7 +19,7 @@ const use_disable_interaction_1 = require("../../utilities/use-disable-interacti
 const ActionList_1 = require("../ActionList");
 const Popover_1 = require("../Popover");
 const Button_classnames_1 = __importDefault(require("./Button.classnames"));
-function Button({ id, children, url, disabled, external, download, target, submit, loading, pressed, accessibilityLabel, role, ariaControls, ariaExpanded, ariaDescribedBy, ariaChecked, onClick, onFocus, onBlur, onKeyDown, onKeyPress, onKeyUp, onMouseEnter, onTouchStart, onPointerDown, icon, disclosure, removeUnderline, size = 'medium', textAlign = 'center', fullWidth, dataPrimaryLink, tone, variant = 'secondary', connectedDisclosure, primary, destructive, plain, monochrome, outline, }) {
+function Button({ id, children, url, disabled, external, download, target, submit, loading, pressed, accessibilityLabel, role, ariaControls, ariaExpanded, ariaDescribedBy, ariaChecked, onClick, onFocus, onBlur, onKeyDown, onKeyPress, onKeyUp, onMouseEnter, onTouchStart, onPointerDown, icon, disclosure, removeUnderline, size = 'medium', textAlign = 'center', fullWidth, dataPrimaryLink, tone, variant = 'secondary', type, connectedDisclosure, primary, destructive, plain, monochrome, outline, className: classNameProp, }) {
     const i18n = (0, i18n_1.useI18n)();
     const isDisabled = disabled || loading;
     const { mdUp } = (0, breakpoints_1.useBreakpoints)();
@@ -33,7 +33,7 @@ function Button({ id, children, url, disabled, external, download, target, submi
     //@ts-expect-error
     tone && Button_classnames_1.default[(0, css_1.variationName)('tone', tone)], 
     //window
-    primary && Button_classnames_1.default.primary, outline && Button_classnames_1.default.outline, destructive && Button_classnames_1.default.destructive, primary && plain && Button_classnames_1.default.primaryPlain, isDisabled && Button_classnames_1.default.disabled, loading && Button_classnames_1.default.loading, plain && !primary && Button_classnames_1.default.plain, pressed && !disabled && !url && Button_classnames_1.default.pressed, monochrome && Button_classnames_1.default.monochrome);
+    primary && Button_classnames_1.default.primary, outline && Button_classnames_1.default.outline, destructive && Button_classnames_1.default.destructive, primary && plain && Button_classnames_1.default.primaryPlain, isDisabled && Button_classnames_1.default.disabled, loading && Button_classnames_1.default.loading, plain && !primary && Button_classnames_1.default.plain, pressed && !disabled && !url && Button_classnames_1.default.pressed, monochrome && Button_classnames_1.default.monochrome, classNameProp);
     const disclosureMarkup = disclosure ? ((0, jsx_runtime_1.jsx)("span", { className: loading ? Button_classnames_1.default.hidden : Button_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: loading ? 'placeholder' : getDisclosureIconSource(disclosure, Icons_1.MaChevronUp, Icons_1.MaChevronDown) }) })) : null;
     const [disclosureActive, setDisclosureActive] = (0, react_1.useState)(false);
     const toggleDisclosureActive = (0, react_1.useCallback)(() => {
@@ -86,7 +86,7 @@ function Button({ id, children, url, disabled, external, download, target, submi
         target,
     };
     const actionProps = {
-        submit,
+        submit: submit !== null && submit !== void 0 ? submit : type === 'submit',
         disabled: isDisabled,
         loading,
         ariaControls,

package/dist/src/components/CheckboxTree/CheckboxList.js

@@ -34,7 +34,7 @@ const Tree_1 = require("./Tree");
 /**
  * A recursive checkbox list component that supports nested items.
  */
-const CheckboxList = ({ items, getStateForId, idsToRender = [], indentLevel = 0, onClick = () => { }, }) => {
+const CheckboxList = ({ items, getStateForId, idsToRender = [], indentLevel = 0, onClick = () => { }, disabledItemIds = [], }) => {
     // State to track which items are expanded
     const [openIds, setOpenIds] = (0, react_1.useState)([]);
     // Memoize the root items to avoid recalculating on every render
@@ -51,7 +51,7 @@ const CheckboxList = ({ items, getStateForId, idsToRender = [], indentLevel = 0,
         const nodeItems = items.filter((i) => i.parentId === parentId);
         if (!nodeItems.length)
             return null;
-        return ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: indentLevel * 20 }, children: (0, jsx_runtime_1.jsx)(CheckboxList, { items: items, idsToRender: nodeItems.map((i) => i.id), indentLevel: indentLevel + 1, onClick: onClick, getStateForId: getStateForId }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: indentLevel * 20 }, children: (0, jsx_runtime_1.jsx)(CheckboxList, { items: items, idsToRender: nodeItems.map((i) => i.id), indentLevel: indentLevel + 1, onClick: onClick, getStateForId: getStateForId, disabledItemIds: disabledItemIds }) }));
     };
     /**
      * Toggles the expanded/collapsed state of an item.
@@ -62,10 +62,15 @@ const CheckboxList = ({ items, getStateForId, idsToRender = [], indentLevel = 0,
     return ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: indentLevel * (indentLevel > 2 ? 4 : 20) }, children: rootItems.map((id, index) => {
             const item = items.find((i) => i.id === id);
             const checkboxState = getStateForId(id);
+            const isDisabled = disabledItemIds.includes(id);
             const hasChildren = items.some((i) => i.parentId === id);
             const isNodeOpen = openIds.includes(id);
             return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { borderStyle: indentLevel === 0 ? 'solid' : 'dashed', ...(index === 0 &&
-                        !(indentLevel === 0 && index === 0) && { borderBlockStartWidth: '1' }), ...(!!rootItems.length && { borderBlockEndWidth: '1' }), borderColor: indentLevel === 0 && isNodeOpen ? 'transparent' : 'border-strong', children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', children: [hasChildren ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: isNodeOpen ? Icons_1.MaDown : Icons_1.MaRight, role: 'button', onClick: () => handleToggle(item.id), plain: true })) : ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: '20px' } })), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: item.name, name: item.id, onChange: () => onClick(item.id), checked: checkboxState === Tree_1.CheckboxTreeState.CHECKED ||
+                        !(indentLevel === 0 && index === 0) && { borderBlockStartWidth: '1' }), ...(!!rootItems.length && { borderBlockEndWidth: '1' }), borderColor: indentLevel === 0 && isNodeOpen ? 'transparent' : 'border-strong', children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', children: [hasChildren ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: isNodeOpen ? Icons_1.MaDown : Icons_1.MaRight, role: 'button', onClick: () => handleToggle(item.id), plain: true })) : ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: '20px' } })), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: item.name, name: item.id, disabled: isDisabled, onChange: () => {
+                                        if (!isDisabled) {
+                                            onClick(item.id);
+                                        }
+                                    }, checked: checkboxState === Tree_1.CheckboxTreeState.CHECKED ||
                                         (checkboxState === Tree_1.CheckboxTreeState.INDETERMINATE && 'indeterminate') })] }), isNodeOpen && getChildNodes(item.id)] }) }, item.id));
         }) }));
 };

package/dist/src/components/CheckboxTree/Tree.js

@@ -53,7 +53,7 @@ var CheckboxTreeState;
 /**
  * A memoized checkbox tree component that supports nested items and state management.
  */
-exports.CheckboxTree = react_1.default.memo(({ defaultItemStates, onDataChange, items, values }) => {
+exports.CheckboxTree = react_1.default.memo(({ defaultItemStates, onDataChange, items, values, disabledItemIds = [] }) => {
     const [itemStates, setItemStates] = (0, react_1.useState)(defaultItemStates);
     /**
      * Retrieves the state of a checkbox by its ID.
@@ -76,10 +76,13 @@ exports.CheckboxTree = react_1.default.memo(({ defaultItemStates, onDataChange,
      * @param {number} id - The ID of the clicked checkbox.
      */
     const clickHandler = (0, react_1.useCallback)((id) => {
+        if (disabledItemIds.includes(id)) {
+            return;
+        }
         const newItems = (0, updateItemStates_1.updateItemStates)(itemStates, items, id);
         setItemStates(newItems);
         onDataChange(newItems);
-    }, [itemStates, items, onDataChange]);
-    return ((0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { gap: '1', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderColor: 'border-subdued', children: (0, jsx_runtime_1.jsx)(CheckboxList_1.default, { items: items, onClick: clickHandler, getStateForId: getStateForId }) }) }));
+    }, [disabledItemIds, itemStates, items, onDataChange]);
+    return ((0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { gap: '1', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderColor: 'border-subdued', children: (0, jsx_runtime_1.jsx)(CheckboxList_1.default, { items: items, onClick: clickHandler, getStateForId: getStateForId, disabledItemIds: disabledItemIds }) }) }));
 });
 exports.CheckboxTree.displayName = 'CheckboxTree';

package/dist/src/components/CheckboxTree/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxTree = void 0;
+exports.CheckboxTreeState = exports.CheckboxTree = void 0;
 var Tree_1 = require("./Tree");
 Object.defineProperty(exports, "CheckboxTree", { enumerable: true, get: function () { return Tree_1.CheckboxTree; } });
+Object.defineProperty(exports, "CheckboxTreeState", { enumerable: true, get: function () { return Tree_1.CheckboxTreeState; } });

package/dist/src/components/Grid/Grid.js

@@ -7,18 +7,19 @@ exports.formatAreas = exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const components_1 = require("./components");
 const Grid_classnames_1 = __importDefault(require("./Grid.classnames"));
-const Grid = function Grid({ gap, areas, children, columns }) {
+const Grid = function Grid({ gap, areas, children, columns, items }) {
+    const resolvedColumns = columns !== null && columns !== void 0 ? columns : (items != null ? { xs: items } : undefined);
     const style = {
         '--pc-grid-gap-xs': gap === null || gap === void 0 ? void 0 : gap.xs,
         '--pc-grid-gap-sm': gap === null || gap === void 0 ? void 0 : gap.sm,
         '--pc-grid-gap-md': gap === null || gap === void 0 ? void 0 : gap.md,
         '--pc-grid-gap-lg': gap === null || gap === void 0 ? void 0 : gap.lg,
         '--pc-grid-gap-xl': gap === null || gap === void 0 ? void 0 : gap.xl,
-        '--pc-grid-columns-xs': columns === null || columns === void 0 ? void 0 : columns.xs,
-        '--pc-grid-columns-sm': columns === null || columns === void 0 ? void 0 : columns.sm,
-        '--pc-grid-columns-md': columns === null || columns === void 0 ? void 0 : columns.md,
-        '--pc-grid-columns-lg': columns === null || columns === void 0 ? void 0 : columns.lg,
-        '--pc-grid-columns-xl': columns === null || columns === void 0 ? void 0 : columns.xl,
+        '--pc-grid-columns-xs': resolvedColumns === null || resolvedColumns === void 0 ? void 0 : resolvedColumns.xs,
+        '--pc-grid-columns-sm': resolvedColumns === null || resolvedColumns === void 0 ? void 0 : resolvedColumns.sm,
+        '--pc-grid-columns-md': resolvedColumns === null || resolvedColumns === void 0 ? void 0 : resolvedColumns.md,
+        '--pc-grid-columns-lg': resolvedColumns === null || resolvedColumns === void 0 ? void 0 : resolvedColumns.lg,
+        '--pc-grid-columns-xl': resolvedColumns === null || resolvedColumns === void 0 ? void 0 : resolvedColumns.xl,
         '--pc-grid-areas-xs': formatAreas(areas === null || areas === void 0 ? void 0 : areas.xs),
         '--pc-grid-areas-sm': formatAreas(areas === null || areas === void 0 ? void 0 : areas.sm),
         '--pc-grid-areas-md': formatAreas(areas === null || areas === void 0 ? void 0 : areas.md),

package/dist/src/components/Image/Image.js

@@ -23,17 +23,16 @@ const errorkSVG = `
 </svg>
 `;
 const fallbackImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(fallbackSVG)}`;
-function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to false
+function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to true
 style, ...rest }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? '' : source); // Start with empty src if lazy
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? null : source); // Use null instead of '' for lazy loading
     const [isInView, setIsInView] = (0, react_1.useState)(!lazy); // Assume visible if not lazy
     const imgRef = (0, react_1.useRef)(null);
     // Intersection Observer for lazy loading
     (0, react_1.useEffect)(() => {
         if (!lazy)
             return;
-        // Store the current ref value in a variable
         const currentImgRef = imgRef.current;
         if (!currentImgRef)
             return;
@@ -96,7 +95,7 @@ style, ...rest }) {
     };
     return (
     // eslint-disable-next-line @next/next/no-img-element
-    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc, style: combinedStyle, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: className, loading: lazy ? 'lazy' : 'eager', onError: (e) => {
+    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc !== null && imgSrc !== void 0 ? imgSrc : undefined, style: combinedStyle, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: className, loading: lazy ? 'lazy' : 'eager', onError: (e) => {
             e.currentTarget.src = fallbackImageURL; // Set fallback SVG on error
             setIsLoading(false);
             onError === null || onError === void 0 ? void 0 : onError();

package/dist/src/components/Input/Input.js

@@ -15,15 +15,20 @@ exports.Input = react_1.default.forwardRef((props, ref) => {
     var _a;
     const { prefix, suffix, verticalContent, placeholder, 
     // value = '',
-    helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, autoComplete, max, maxLength, min, showCharacterCount, requiredIndicator, monospaced, suggestion, onClearButtonClick, borderless, align, step, ...rest } = props;
+    helpText, variant: _variant, info, className: classNameProp, preffix, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, autoComplete, max, maxLength, min, showCharacterCount, requiredIndicator, monospaced, suggestion, onClearButtonClick, borderless, align, step, onValueChange, onChange, ...rest } = props;
     const id = (0, unique_id_1.useUniqueId)('TextField', idProp);
-    const className = (0, css_1.classNames)(Input_classnames_1.default.TextField, 
+    const handleChange = (event) => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    const resolvedPrefix = prefix !== null && prefix !== void 0 ? prefix : preffix;
+    const className = (0, css_1.classNames)(Input_classnames_1.default.TextField, classNameProp, 
     // Boolean(normalizedValue) && styles.hasValue,
     disabled && Input_classnames_1.default.disabled, readOnly && Input_classnames_1.default.readOnly, error && Input_classnames_1.default.error, borderless && Input_classnames_1.default.borderless);
     const inputClassName = (0, css_1.classNames)(Input_classnames_1.default.Input, suffix && Input_classnames_1.default['Input'], clearButton && Input_classnames_1.default['Input-hasClearButton'], monospaced && Input_classnames_1.default.monospaced, suggestion && Input_classnames_1.default.suggestion, 
     //@ts-expect-error
     align && Input_classnames_1.default[variationName('Input-align', align)]);
-    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [prefix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Prefix, id: `${id}-Prefix`, children: prefix })) : null, (0, jsx_runtime_1.jsx)("input", { ...{
+    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText !== null && helpText !== void 0 ? helpText : info, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [resolvedPrefix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Prefix, id: `${id}-Prefix`, children: resolvedPrefix })) : null, (0, jsx_runtime_1.jsx)("input", { ...{
                             name,
                             id,
                             disabled,
@@ -37,6 +42,7 @@ exports.Input = react_1.default.forwardRef((props, ref) => {
                             max,
                             type,
                             step,
+                            onChange: handleChange,
                             ...rest,
                         }, ref: (_a = rest.ref) !== null && _a !== void 0 ? _a : ref }), suffix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Suffix, id: `${id}-Suffix`, children: suffix })) : null, showCharacterCount ? ((0, jsx_runtime_1.jsx)("div", { id: `${id}-CharacterCounter`, className: Input_classnames_1.default.CharacterCount, "aria-atomic": 'true', children: rest.value })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(Input_classnames_1.default.Backdrop, connectedLeft && Input_classnames_1.default['Backdrop-connectedLeft'], connectedRight && Input_classnames_1.default['Backdrop-connectedRight']) })] }) }) }));
 });

package/dist/src/components/MediaQueryProvider/MediaQueryProvider.js

@@ -8,8 +8,11 @@ const media_query_1 = require("../../utilities/media-query");
 const breakpoints_1 = require("../../utilities/breakpoints");
 // eslint-disable-next-line import/no-deprecated
 const EventListener_1 = require("../EventListener");
+// Use a fixed initial value to avoid hydration mismatch: server has no window
+// and always gets false; client would get matchMedia().matches which can differ.
+const getInitialNavigationCollapsed = () => false;
 const MediaQueryProvider = function MediaQueryProvider({ children, }) {
-    const [isNavigationCollapsed, setIsNavigationCollapsed] = (0, react_1.useState)((0, breakpoints_1.navigationBarCollapsed)().matches);
+    const [isNavigationCollapsed, setIsNavigationCollapsed] = (0, react_1.useState)(getInitialNavigationCollapsed);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleResize = (0, react_1.useCallback)((0, debounce_1.debounce)(() => {
         if (isNavigationCollapsed !== (0, breakpoints_1.navigationBarCollapsed)().matches) {

package/dist/src/components/Switch/Switch.js

@@ -38,17 +38,19 @@ const Switch_classnames_1 = __importDefault(require("./Switch.classnames"));
  */
 // export const Switch: React.FC<SwitchProps> = ({ label, checked, className, onChange, error }) => {
 exports.Switch = react_1.default.forwardRef((props, ref) => {
-    const { label, checked: initialChecked, /**className = '' */ onChange, error, ...rest } = props;
-    const [checked, setChecked] = (0, react_1.useState)(initialChecked || false);
+    const { label, checked: checkedProp, /**className = '' */ onChange, error, ...rest } = props;
+    const isControlled = checkedProp !== undefined;
+    const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(checkedProp !== null && checkedProp !== void 0 ? checkedProp : false);
+    const checked = isControlled ? !!checkedProp : uncontrolledChecked;
     const handleToggle = (event) => {
-        setChecked(event.target.checked);
-        if (onChange) {
-            onChange(event);
+        if (!isControlled) {
+            setUncontrolledChecked(event.target.checked);
         }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
     };
     const Component = error
         ? ({ children }) => ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-max flex-col space-y-1', children: children }))
         : ({ children }) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children });
-    return ((0, jsx_runtime_1.jsxs)(Component, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: rest.name, className: 'mr-4 ', children: label }), (0, jsx_runtime_1.jsx)("input", { ref: ref, onChange: handleToggle, className: Switch_classnames_1.default['switch-checkbox'], id: rest.name, type: 'checkbox', ...rest }), (0, jsx_runtime_1.jsx)("label", { style: { background: checked ? '#2196f3' : '#ccc' }, className: Switch_classnames_1.default['switch-label'], htmlFor: rest.name, children: (0, jsx_runtime_1.jsx)("span", { className: Switch_classnames_1.default['switch-button'] }) })] }), error && (0, jsx_runtime_1.jsx)("div", { className: 'error-message', children: error })] }));
+    return ((0, jsx_runtime_1.jsxs)(Component, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: rest.name, className: 'mr-4 ', children: label }), (0, jsx_runtime_1.jsx)("input", { ref: ref, className: Switch_classnames_1.default['switch-checkbox'], id: rest.name, type: 'checkbox', ...rest, onChange: handleToggle, checked: checked }), (0, jsx_runtime_1.jsx)("label", { style: { background: checked ? '#2196f3' : '#ccc' }, className: Switch_classnames_1.default['switch-label'], htmlFor: rest.name, children: (0, jsx_runtime_1.jsx)("span", { className: Switch_classnames_1.default['switch-button'] }) })] }), error && (0, jsx_runtime_1.jsx)("div", { className: 'error-message', children: error })] }));
 });
 exports.Switch.displayName = 'SwitchBox';

package/dist/src/components/Text/Text.classnames.js

@@ -17,6 +17,7 @@ const TextClassnames = {
     "warning": "Text-warning",
     "accent": "Text-accent",
     "muted": "Text-muted",
+    "primary": "Text-primary",
     "subdued": "Text-subdued",
     "text-inverse": "Text-text-inverse",
     "heading": "Text-heading",

package/dist/src/components/Text/Text.js

@@ -10,7 +10,7 @@ const Text_classnames_1 = __importDefault(require("./Text.classnames"));
 const deprecatedVariants = {
     heading3xl: 'heading2xl',
 };
-const Text = ({ alignment, as, breakWord, children, tone, fontWeight, id, numeric = false, truncate = false, variant, visuallyHidden = false, textDecorationLine, color, lines, }) => {
+const Text = ({ alignment, as, breakWord, children, tone, fontWeight, id, numeric = false, truncate = false, variant, visuallyHidden = false, textDecorationLine, color, lines, className: classNameProp, style: styleProp, lowercase, fontFamily, paddingBlockEnd, }) => {
     if (process.env.NODE_ENV === 'development' &&
         variant &&
         Object.prototype.hasOwnProperty.call(deprecatedVariants, variant)) {
@@ -18,7 +18,12 @@ const Text = ({ alignment, as, breakWord, children, tone, fontWeight, id, numeri
         console.warn(`Deprecation: <Text variant="${variant}" />. The value "${variant}" will be removed in a future major version of Macive. Use "${deprecatedVariants[variant]}" instead.`);
     }
     const Component = as || (visuallyHidden ? 'span' : 'p');
-    const className = (0, css_1.classNames)(Text_classnames_1.default.root, variant && Text_classnames_1.default[variant], fontWeight && Text_classnames_1.default[fontWeight], (alignment || truncate) && Text_classnames_1.default.block, alignment && Text_classnames_1.default[alignment], breakWord && Text_classnames_1.default.break, tone && Text_classnames_1.default[tone], numeric && Text_classnames_1.default.numeric, truncate && Text_classnames_1.default.truncate, visuallyHidden && Text_classnames_1.default.visuallyHidden, textDecorationLine && Text_classnames_1.default[textDecorationLine], color && Text_classnames_1.default[color], lines && Text_classnames_1.default['clamp-text']);
-    return ((0, jsx_runtime_1.jsx)(Component, { className: className, ...(id && { id }), style: { ...(lines && { '--lines': lines }) }, children: children }));
+    const className = (0, css_1.classNames)(Text_classnames_1.default.root, variant && Text_classnames_1.default[variant], fontWeight && Text_classnames_1.default[fontWeight], (alignment || truncate) && Text_classnames_1.default.block, alignment && Text_classnames_1.default[alignment], breakWord && Text_classnames_1.default.break, tone && tone in Text_classnames_1.default && Text_classnames_1.default[tone], numeric && Text_classnames_1.default.numeric, truncate && Text_classnames_1.default.truncate, visuallyHidden && Text_classnames_1.default.visuallyHidden, textDecorationLine && Text_classnames_1.default[textDecorationLine], color && color in Text_classnames_1.default && Text_classnames_1.default[color], lines && Text_classnames_1.default['clamp-text'], lowercase && 'lowercase', classNameProp);
+    return ((0, jsx_runtime_1.jsx)(Component, { className: className, ...(id && { id }), style: {
+            ...(lines && { '--lines': lines }),
+            ...(fontFamily && { fontFamily }),
+            ...(paddingBlockEnd && { paddingBlockEnd: `var(--p-space-${paddingBlockEnd})` }),
+            ...styleProp,
+        }, children: children }));
 };
 exports.Text = Text;

package/dist/src/components/TextField/TextField.js

@@ -19,8 +19,9 @@ const Labelled_1 = require("../Labelled");
 const Text_1 = require("../Text");
 const components_1 = require("./components");
 const TextField_classnames_1 = __importDefault(require("./TextField.classnames"));
-function TextField({ prefix, suffix, verticalContent, placeholder, value = '', helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, multiline, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, step, largeStep, autoComplete, max, maxLength, maxHeight, min, minLength, pattern, inputMode, spellCheck, ariaOwns, ariaControls, ariaExpanded, ariaActiveDescendant, ariaAutocomplete, showCharacterCount, align, requiredIndicator, monospaced, selectTextOnFocus, suggestion, onClearButtonClick, onChange, onSpinnerChange, onFocus, onBlur, borderless, }) {
+function TextField({ prefix, suffix, verticalContent, placeholder, value = '', helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, multiline, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, step, largeStep, autoComplete = 'off', variant: _variant, info, className: classNameProp, preffix, max, maxLength, maxHeight, min, minLength, pattern, inputMode, spellCheck, ariaOwns, ariaControls, ariaExpanded, ariaActiveDescendant, ariaAutocomplete, showCharacterCount, align, requiredIndicator, monospaced, selectTextOnFocus, suggestion, onClearButtonClick, onChange, onSpinnerChange, onFocus, onBlur, borderless, }) {
     const i18n = (0, i18n_1.useI18n)();
+    const resolvedHelpText = helpText !== null && helpText !== void 0 ? helpText : info;
     const [height, setHeight] = (0, react_1.useState)(null);
     const [focus, setFocus] = (0, react_1.useState)(Boolean(focused));
     const isAfterInitial = (0, use_is_after_initial_mount_1.useIsAfterInitialMount)();
@@ -54,10 +55,11 @@ function TextField({ prefix, suffix, verticalContent, placeholder, value = '', h
     const normalizedStep = step != null ? step : 1;
     const normalizedMax = max != null ? max : Infinity;
     const normalizedMin = min != null ? min : -Infinity;
-    const className = (0, css_1.classNames)(TextField_classnames_1.default.TextField, Boolean(normalizedValue) && TextField_classnames_1.default.hasValue, disabled && TextField_classnames_1.default.disabled, readOnly && TextField_classnames_1.default.readOnly, error && TextField_classnames_1.default.error, multiline && TextField_classnames_1.default.multiline, focus && TextField_classnames_1.default.focus, borderless && TextField_classnames_1.default.borderless);
+    const resolvedPrefix = prefix !== null && prefix !== void 0 ? prefix : preffix;
+    const className = (0, css_1.classNames)(TextField_classnames_1.default.TextField, classNameProp, Boolean(normalizedValue) && TextField_classnames_1.default.hasValue, disabled && TextField_classnames_1.default.disabled, readOnly && TextField_classnames_1.default.readOnly, error && TextField_classnames_1.default.error, multiline && TextField_classnames_1.default.multiline, focus && TextField_classnames_1.default.focus, borderless && TextField_classnames_1.default.borderless);
     const inputType = type === 'currency' ? 'text' : type;
     const isNumericType = type === 'number' || type === 'integer';
-    const prefixMarkup = prefix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.Prefix, id: `${id}-Prefix`, ref: prefixRef, children: prefix })) : null;
+    const prefixMarkup = resolvedPrefix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.Prefix, id: `${id}-Prefix`, ref: prefixRef, children: resolvedPrefix })) : null;
     const suffixMarkup = suffix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.Suffix, id: `${id}-Suffix`, ref: suffixRef, children: suffix })) : null;
     let characterCountMarkup = null;
     if (showCharacterCount) {
@@ -125,7 +127,7 @@ function TextField({ prefix, suffix, verticalContent, placeholder, value = '', h
     if (error) {
         describedBy.push(`${id}Error`);
     }
-    if (helpText) {
+    if (resolvedHelpText) {
         describedBy.push((0, Labelled_1.helpTextID)(id));
     }
     if (showCharacterCount) {
@@ -205,7 +207,7 @@ function TextField({ prefix, suffix, verticalContent, placeholder, value = '', h
     const inputWithVerticalContentMarkup = verticalContent ? ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.VerticalContent, id: `${id}-VerticalContent`, ref: verticalContentRef, onClick: handleClickChild, children: [verticalContent, input] })) : null;
     const inputMarkup = verticalContent ? inputWithVerticalContentMarkup : input;
     const backdropMarkup = ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(TextField_classnames_1.default.Backdrop, connectedLeft && TextField_classnames_1.default['Backdrop-connectedLeft'], connectedRight && TextField_classnames_1.default['Backdrop-connectedRight']) }));
-    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: handleClick, children: [prefixMarkup, inputMarkup, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: resolvedHelpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: handleClick, children: [prefixMarkup, inputMarkup, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer] }) }) }));
     function handleChange(event) {
         onChange && onChange(event.currentTarget.value, id);
     }

package/dist/src/components/UnstyledButton/UnstyledButton.js

@@ -30,7 +30,9 @@ function UnstyledButton({ id, children, className, url, external, target, downlo
         (0, jsx_runtime_1.jsx)("a", { ...commonProps, children: children })) : ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { ...interactiveProps, url: url, external: external, target: target, download: download, ...rest, children: children }));
     }
     else {
-        buttonMarkup = ((0, jsx_runtime_1.jsx)("button", { ...interactiveProps, "aria-disabled": disabled, type: submit ? 'submit' : 'button', "aria-busy": loading ? true : undefined, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-checked": ariaChecked, "aria-pressed": pressed, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onClick: handleClick, tabIndex: disabled ? -1 : undefined, ...rest, children: children }));
+        // aria-checked is only valid with role="switch" or role="checkbox"
+        const buttonRole = role !== null && role !== void 0 ? role : (ariaChecked !== undefined ? 'switch' : undefined);
+        buttonMarkup = ((0, jsx_runtime_1.jsx)("button", { ...interactiveProps, role: buttonRole, "aria-checked": ariaChecked, "aria-disabled": disabled, type: submit ? 'submit' : 'button', "aria-busy": loading ? true : undefined, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-pressed": pressed, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onClick: handleClick, tabIndex: disabled ? -1 : undefined, ...rest, children: children }));
     }
     return buttonMarkup;
 }

package/dist/src/components/Upload/components/Modal/UploadModalContainer.js

@@ -33,6 +33,7 @@ const UploadModalContainer = ({ open, close, audience = 'MERCHANT', title, arran
     const [showSelectedPanel, setShowSelectedPanel] = (0, react_1.useState)(false);
     const { data, loading, refetch, error, fetchMore, variables, networkStatus } = uploadConfig.getUploads({
         variables: {
+            first: 24,
             sortBy: 'NEWEST',
             audience: audience,
             page: 1,

package/dist/src/components/VerticalStack/VerticalStack.js

@@ -7,7 +7,7 @@ exports.VerticalStack = void 0;
 const react_1 = __importDefault(require("react"));
 const css_1 = require("../../utilities/css");
 const VerticalStack_classnames_1 = __importDefault(require("./VerticalStack.classnames"));
-const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, height, width, reverseOrder = false, spacer, ...restProps }) => {
+const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, height, width, reverseOrder = false, spacer, className: classNameProp, ...restProps }) => {
     const heightClasses = {
         auto: 'h-auto',
         full: 'h-full',
@@ -20,7 +20,7 @@ const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, heig
         max: 'w-max',
         none: '',
     }[width !== null && width !== void 0 ? width : 'none'];
-    const className = (0, css_1.classNames)(VerticalStack_classnames_1.default.VerticalStack, (as === 'ul' || as === 'ol') && VerticalStack_classnames_1.default.listReset, as === 'fieldset' && VerticalStack_classnames_1.default.fieldsetReset, heightClasses, widthClasses, spacer && '');
+    const className = (0, css_1.classNames)(VerticalStack_classnames_1.default.VerticalStack, (as === 'ul' || as === 'ol') && VerticalStack_classnames_1.default.listReset, as === 'fieldset' && VerticalStack_classnames_1.default.fieldsetReset, heightClasses, widthClasses, spacer && '', classNameProp);
     const style = {
         '--pc-vertical-stack-align': align ? `${align}` : '',
         '--pc-vertical-stack-inline-align': inlineAlign ? `${inlineAlign}` : '',

package/dist/src/index.js

@@ -15,8 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hsbToHex = exports.hexToRgb = exports.capitalize = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.isNavigationItemActive = exports.Navigation = exports.Loading = exports.Layout = exports.Input = exports.InlineError = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DatePicker = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.buttonsFrom = exports.buttonFrom = exports.CopyButton = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.Tabs = exports.AlphaTabs = exports.ActionList = void 0;
-exports.ComboSelect = exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
+exports.hexToRgb = exports.capitalize = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.isNavigationItemActive = exports.Navigation = exports.Loading = exports.Layout = exports.Input = exports.InlineError = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DatePicker = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTreeState = exports.CheckboxTree = exports.ButtonGroup = exports.buttonsFrom = exports.buttonFrom = exports.CopyButton = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.Tabs = exports.AlphaTabs = exports.ActionList = void 0;
+exports.ComboSelect = exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = exports.hsbToHex = void 0;
 __exportStar(require("./components"), exports);
 var ActionList_1 = require("./components/ActionList");
 Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
@@ -38,6 +38,7 @@ var ButtonGroup_1 = require("./components/ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
 var CheckboxTree_1 = require("./components/CheckboxTree");
 Object.defineProperty(exports, "CheckboxTree", { enumerable: true, get: function () { return CheckboxTree_1.CheckboxTree; } });
+Object.defineProperty(exports, "CheckboxTreeState", { enumerable: true, get: function () { return CheckboxTree_1.CheckboxTreeState; } });
 var ChoiceCard_1 = require("./components/Choice/ChoiceCard");
 Object.defineProperty(exports, "ChoiceCard", { enumerable: true, get: function () { return ChoiceCard_1.ChoiceCard; } });
 var ContextualSaveBar_1 = require("./components/ContextualSaveBar");

package/dist/tailwind.config.js

@@ -179,8 +179,8 @@ module.exports = {
                 lg: ['19px', '28px'],
             },
             fontFamily: {
-                body: ['Open Sans', 'system-ui', 'sans-serif'],
-                heading: ['Open Sans', 'system-ui', 'sans-serif'],
+                body: ['Outfit', 'system-ui', 'sans-serif'],
+                heading: ['Outfit', 'system-ui', 'sans-serif'],
             },
         },
     },