@spscommerce/ds-react 5.20.6 → 5.21.0

package/lib/index.cjs.js

@@ -5395,7 +5395,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             )}
                         </>;
                     }
-                `}}},sizing:{label:"Sizing",description:()=>s.createElement("p",null,"There are 3 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")},default:{label:"Default",description:()=>s.createElement("p",null,"Use Default Modals to inform the user of something with a neutral meaning. Use these as the default option for Modals."),examples:{small:{description:"Small",react:x.code`
+                `}}},sizing:{label:"Sizing",description:()=>s.createElement("p",null,"There are 4 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns), XLarge (12 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")},default:{label:"Default",description:()=>s.createElement("p",null,"Use Default Modals to inform the user of something with a neutral meaning. Use these as the default option for Modals."),examples:{small:{description:"Small",react:x.code`
                     function Component() {
                         const [showModal, setShowModal] = React.useState(false);
 
@@ -5452,6 +5452,25 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             )}
                         </>;
                     }
+                `},xlarge:{description:"XLarge",react:x.code`
+                    function Component() {
+                        const [showModal, setShowModal] = React.useState(false);
+
+                        return <>
+                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>
+                                Show XLarge Default Modal
+                            </SpsButton>
+                            {showModal && (
+                                <SpsModalV2
+                                    size={ModalSize.X_LARGE}
+                                    onClose={() => setShowModal(false)}
+                                >
+                                    <div className="sps-text-semibold mb-1">Optional Headline</div>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                </SpsModalV2>
+                            )}
+                        </>;
+                    }
                 `}}},delete:{label:"Delete",description:()=>s.createElement("p",null,"Use Delete Modals to have the user confirm they want to continue with a destructive action. Be clear on what will happen if they continue."),examples:{small:{description:"Small",react:x.code`
                     function Component() {
                         const [showModal, setShowModal] = React.useState(false);

package/lib/index.es.js

@@ -29560,7 +29560,7 @@ const SpsModalExamples = {
   },
   sizing: {
     label: "Sizing",
-    description: () => /* @__PURE__ */ React.createElement("p", null, "There are 3 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")
+    description: () => /* @__PURE__ */ React.createElement("p", null, "There are 4 sizes of Modal: Small (4 columns), Medium (6 columns), and Large (8 columns), XLarge (12 columns). Use the size that best fits the content that needs to be in the Modal, erring towards the smallest size whenever possible.")
   },
   default: {
     label: "Default",
@@ -29634,6 +29634,29 @@ const SpsModalExamples = {
                         </>;
                     }
                 `
+      },
+      xlarge: {
+        description: "XLarge",
+        react: code`
+                    function Component() {
+                        const [showModal, setShowModal] = React.useState(false);
+
+                        return <>
+                            <SpsButton kind={ButtonKind.LINK} onClick={() => setShowModal(true)}>
+                                Show XLarge Default Modal
+                            </SpsButton>
+                            {showModal && (
+                                <SpsModalV2
+                                    size={ModalSize.X_LARGE}
+                                    onClose={() => setShowModal(false)}
+                                >
+                                    <div className="sps-text-semibold mb-1">Optional Headline</div>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                </SpsModalV2>
+                            )}
+                        </>;
+                    }
+                `
       }
     }
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.20.6",
+  "version": "5.21.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.20.6",
-    "@spscommerce/ds-illustrations": "5.20.6",
-    "@spscommerce/ds-shared": "5.20.6",
-    "@spscommerce/positioning": "5.20.6",
-    "@spscommerce/utils": "5.20.6",
+    "@spscommerce/ds-colors": "5.21.0",
+    "@spscommerce/ds-illustrations": "5.21.0",
+    "@spscommerce/ds-shared": "5.21.0",
+    "@spscommerce/positioning": "5.21.0",
+    "@spscommerce/utils": "5.21.0",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.20.6",
-    "@spscommerce/ds-illustrations": "5.20.6",
-    "@spscommerce/ds-shared": "5.20.6",
-    "@spscommerce/positioning": "5.20.6",
-    "@spscommerce/utils": "5.20.6",
+    "@spscommerce/ds-colors": "5.21.0",
+    "@spscommerce/ds-illustrations": "5.21.0",
+    "@spscommerce/ds-shared": "5.21.0",
+    "@spscommerce/positioning": "5.21.0",
+    "@spscommerce/utils": "5.21.0",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",