@spscommerce/ds-react 6.12.0 → 6.13.1

package/lib/index.es.js

@@ -21853,183 +21853,361 @@ Object.assign(SpsDt, {
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
 const SpsDescriptionListExamples = {
+  general: {
+    label: "General Usage",
+    description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists should be used to group a series of related terms (and their accompanying descriptions) together in a tabular-like format."), /* @__PURE__ */ React__default.createElement("p", null, "Note: Description Lists are not the required pattern for listing terms and descriptions, but should be used when it benefits the legibility of the content over other typographic formats such as unordered lists or tables."), /* @__PURE__ */ React__default.createElement("h4", null, "Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "To display two or more terms that have accompanying descriptions or values.")), /* @__PURE__ */ React__default.createElement("h4", null, "Do Not Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "To display a single term"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "If the listed terms do not have descriptions")))
+  },
   basic: {
-    label: "Basic Description List",
+    label: "Basic Description Lists",
+    description: () => /* @__PURE__ */ React__default.createElement("p", null, "Description Lists are available in two sizes. Additionally, the left column can be set to one of three different width options to best accomodate the content in each specific use case."),
     examples: {
-      basic: {
-        jsx: code`
+      standard: {
+        description: "Standard Size Description Lists",
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsCardV2>
+                <SpsTabsV2>
+                  <Item key="1-to-3" title="1-to-3">
                     <SpsDl>
-                        <SpsDt>Term 1</SpsDt>
-                        <SpsDd>Definition</SpsDd>
-                        <SpsDt>Term</SpsDt>
-                        <SpsDd>Definition</SpsDd>
-                        <SpsDt>
-                            Term that wraps to the next line cause it's got so dang much text in it.
-                        </SpsDt>
-                        <SpsDd>Definition</SpsDd>
-                        <SpsDt>Term</SpsDt>
-                        <SpsDd>
-                            Definition that has a LOOOOOOOOOOT of text in it.
-                            Definition that has a LOOOOOOOOOOT of text in it.
-                        </SpsDd>
+                      <SpsDt>Term 1</SpsDt>
+                      <SpsDd>Description 1</SpsDd>
+                      <SpsDt>Term 2</SpsDt>
+                      <SpsDd>Description 2</SpsDd>
+                      <SpsDt help="This is the third term">Term 3</SpsDt>
+                      <SpsDd>Description 3</SpsDd>
                     </SpsDl>
-                `
+                  </Item>
+                  <Item key="1-to-2" title="1-to-2">
+                    <SpsDl wideTerms>
+                      <SpsDt>Term 1</SpsDt>
+                      <SpsDd>Description 1</SpsDd>
+                      <SpsDt>Term 2</SpsDt>
+                      <SpsDd>Description 2</SpsDd>
+                      <SpsDt help="This is the third term">Term 3</SpsDt>
+                      <SpsDd>Description 3</SpsDd>
+                    </SpsDl>
+                  </Item>
+                  <Item key="1-to-1" title="1-to-1">
+                    <SpsDl widerTerms>
+                      <SpsDt>Term 1</SpsDt>
+                      <SpsDd>Description 1</SpsDd>
+                      <SpsDt>Term 2</SpsDt>
+                      <SpsDd>Description 2</SpsDd>
+                      <SpsDt help="This is the third term">Term 3</SpsDt>
+                      <SpsDd>Description 3</SpsDd>
+                    </SpsDl>
+                  </Item>
+                </SpsTabsV2>
+              </SpsCardV2>
+            )
+          }
+        `
       },
-      dynamic: {
-        react: code`
-                    function DemoComponent() {
-                        const list = [
-                            { term: "Term 1", definition: "Definition 1" },
-                            { term: "Term 2", definition: "Definition 2" },
-                            { term: "Term 3", definition: "Definition 3" },
-                        ];
-
-                        return (
-                            <SpsDl>
-                                {list.map((item, i) => (
-                                    <React.Fragment>
-                                        <SpsDt>{item.term}</SpsDt>
-                                        <SpsDd>{item.definition}</SpsDd>
-                                    </React.Fragment>
-                                ))}
-                            </SpsDl>
-                        );
-                    }
-                `
-      }
-    }
-  },
-  b_advanced: {
-    label: "Advanced Description List",
-    examples: {
-      advanced: {
-        react: code`
-                function DemoComponent() {
-                    const { formValue, formMeta, updateForm } = useSpsForm({
-                        firstName: "",
-                        lastName: "",
-                        title: "",
-                        accomplishments: ""
-                      }, {
-                        "lastName": [SpsValidators.required]
-                      })
-
-                    React.useEffect(() => {
-                      // Make the error state visible for this demo
-                      formMeta.fields.lastName.markAsDirty()
-                    }, [])
-
-                    return (
-                      <SpsCard>
-                        <SpsForm formMeta={formMeta}>
-                          <SpsDl>
-                            <SpsDt id="firstNameLabel" labelFor={formMeta.fields.firstName}>
-                              First Name
-                            </SpsDt>
-                            <SpsDd>
-                              <SpsTextInput
-                                aria-labelledby="firstNameLabel"
-                                value={formValue.firstName}
-                                formMeta={formMeta.fields.firstName}
-                              />
-                            </SpsDd>
-                            <SpsDt
-                              id="lastNameLabel"
-                              labelFor={formMeta.fields.lastName}
-                              errors={() =>
-                                formMeta.fields.lastName.hasError("required") &&
-                                "Please enter a last name."
-                              }
-                            >
-                              Last Name
-                            </SpsDt>
-                            <SpsDd>
-                              <SpsTextInput
-                                aria-labelledby="lastNameLabel"
-                                value={formValue.lastName}
-                                formMeta={formMeta.fields.lastName}
-                              />
-                            </SpsDd>
-                            <SpsDt id="titleLabel" labelFor={formMeta.fields.title}>
-                              Title
-                            </SpsDt>
-                            <SpsDd>
-                              <SpsTextInput
-                                aria-labelledby="titleLabel"
-                                value={formValue.title}
-                                formMeta={formMeta.fields.title}
-                              />
-                            </SpsDd>
-                            <SpsDt
-                              id="accomplishmentsLabel"
-                              labelFor={formMeta.fields.accomplishments}
-                              help="If they haven't achieved anything, make stuff up."
-                            >
-                              Top 5 Greatest Accomplishments
-                            </SpsDt>
-                            <SpsDd>
-                              <SpsTextarea
-                                rows={3}
-                                value={formValue.accomplishments}
-                                formMeta={formMeta.fields.accomplishments}
-                                aria-labelledby="accomplishmentsLabel"
-                              />
-                            </SpsDd>
-                          </SpsDl>
-                        </SpsForm>
-                      </SpsCard>
-                    )
-                  }
-                `
-      }
-    }
-  },
-  c_compact: {
-    label: "Compact Description List",
-    examples: {
       compact: {
-        jsx: code`
+        description: "Compact Description Lists",
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsCardV2>
+                <SpsTabsV2>
+                  <Item key="1-to-3" title="1-to-3">
                     <SpsDl compact>
                       <SpsDt>Term 1</SpsDt>
-                      <SpsDd>Definition</SpsDd>
-                      <SpsDt>Term</SpsDt>
-                      <SpsDd>Definition</SpsDd>
-                      <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
-                      <SpsDd>Definition</SpsDd>
-                      <SpsDt>Term</SpsDt>
-                      <SpsDd>Definition that has a LOOOOOOOOOOT of text in it. Definition that has a LOOOOOOOOOOT of text in it.
-                      </SpsDd>
+                      <SpsDd>Description 1</SpsDd>
+                      <SpsDt>Term 2</SpsDt>
+                      <SpsDd>Description 2</SpsDd>
+                      <SpsDt help="This is the third term">Term 3</SpsDt>
+                      <SpsDd>Description 3</SpsDd>
                     </SpsDl>
-                `
+                  </Item>
+                  <Item key="1-to-2" title="1-to-2">
+                    <SpsDl compact wideTerms>
+                      <SpsDt>Term 1</SpsDt>
+                      <SpsDd>Description 1</SpsDd>
+                      <SpsDt>Term 2</SpsDt>
+                      <SpsDd>Description 2</SpsDd>
+                      <SpsDt help="This is the third term">Term 3</SpsDt>
+                      <SpsDd>Description 3</SpsDd>
+                    </SpsDl>
+                  </Item>
+                  <Item key="1-to-1" title="1-to-1">
+                    <SpsDl compact widerTerms>
+                      <SpsDt>Term 1</SpsDt>
+                      <SpsDd>Description 1</SpsDd>
+                      <SpsDt>Term 2</SpsDt>
+                      <SpsDd>Description 2</SpsDd>
+                      <SpsDt help="This is the third term">Term 3</SpsDt>
+                      <SpsDd>Description 3</SpsDd>
+                    </SpsDl>
+                  </Item>
+                </SpsTabsV2>
+              </SpsCardV2>
+            )
+          }
+        `
       }
     }
   },
-  d_columnWidths: {
-    label: "Alternate Column Widths",
+  inputFields: {
+    label: "Description Lists with Input Fields",
+    description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists can be used to support form fields. In these instances, the left hand column is used for the label and the right hand column used for the corresponding input field."), /* @__PURE__ */ React__default.createElement("p", null, "Description Lists with Input Fields can appear in Standard or Compact sizes in either 1-to-3, 1-to-2 or 1-to-1 layouts."), /* @__PURE__ */ React__default.createElement("p", null, "Input Fields inside of Description Lists should follow standard Form rules. Visit the", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page for more information regarding Form rules."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("i", null, "Note: Description Lists with Input Fields should only be utilized when it benefits the usability of a form, and should not be used adjacent to forms that are not in Description Lists."))),
     examples: {
-      wideTerms: {
-        jsx: code`
-                    <SpsDl wideTerms>
-                     <SpsDt>Term 1</SpsDt>
-                     <SpsDd>Definition</SpsDd>
-                     <SpsDt>Term</SpsDt>
-                     <SpsDd>Definition</SpsDd>
-                     <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
-                     <SpsDd>Definition</SpsDd>
-                    </SpsDl>
-                `
+      standard: {
+        description: "Standard Size Description Lists with Input Fields",
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              term1: "",
+              term2: "",
+              term3: "",
+            }, {
+              "term1": [SpsValidators.required],
+              "term2": [SpsValidators.minLength(1)],
+            })
+
+            React.useEffect(() => {
+              // Make the error state visible for this demo
+              formMeta.fields.term2.markAsDirty();
+            }, []);
+
+            return (
+              <SpsCardV2>
+                <SpsTabsV2>
+                  <Item key="1-to-3" title="1-to-3">
+                    <SpsForm formMeta={formMeta}> 
+                      <SpsDl>
+                        <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term1}
+                            formMeta={formMeta.fields.term1}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term2}
+                            formMeta={formMeta.fields.term2}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt
+                          id="accomplishmentsLabel"
+                          labelFor={formMeta.fields.term3}
+                          help="Enter a description"
+                        >
+                            Term3
+                        </SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term3}
+                            formMeta={formMeta.fields.term3}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                      </SpsDl>
+                    </SpsForm>
+                  </Item>
+                  <Item key="1-to-2" title="1-to-2">
+                    <SpsForm formMeta={formMeta}> 
+                      <SpsDl wideTerms>
+                        <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term1}
+                            formMeta={formMeta.fields.term1}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term2}
+                            formMeta={formMeta.fields.term2}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
+                        >Term 3</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term3}
+                            formMeta={formMeta.fields.term3}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                      </SpsDl>
+                    </SpsForm>
+                  </Item>
+                  <Item key="1-to-1" title="1-to-1">
+                    <SpsForm formMeta={formMeta}> 
+                      <SpsDl widerTerms>
+                        <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term1}
+                            formMeta={formMeta.fields.term1}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term2}
+                            formMeta={formMeta.fields.term2}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term3}
+                            formMeta={formMeta.fields.term3}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                      </SpsDl>
+                    </SpsForm>
+                  </Item>
+                </SpsTabsV2>
+              </SpsCardV2>
+            )
+          }
+        `
       },
-      widerTerms: {
-        jsx: code`
-                    <SpsDl widerTerms>
-                     <SpsDt>Term 1</SpsDt>
-                     <SpsDd>Definition</SpsDd>
-                     <SpsDt>Term</SpsDt>
-                     <SpsDd>Definition</SpsDd>
-                     <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
-                     <SpsDd>Definition</SpsDd>
-                    </SpsDl>
-                `
+      compact: {
+        description: "Compact Description Lists with Input Fields",
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              term1: "",
+              term2: "",
+              term3: "",
+            }, {
+              "term1": [SpsValidators.required],
+              "term2": [SpsValidators.minLength(1)],
+            })
+
+            React.useEffect(() => {
+              // Make the error state visible for this demo
+              formMeta.fields.term2.markAsDirty();
+            }, []);
+
+            return (
+              <SpsCardV2>
+                <SpsTabsV2>
+                  <Item key="1-to-3" title="1-to-3">
+                    <SpsForm formMeta={formMeta}> 
+                      <SpsDl compact>
+                        <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term1}
+                            formMeta={formMeta.fields.term1}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term2}
+                            formMeta={formMeta.fields.term2}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt
+                          id="accomplishmentsLabel"
+                          labelFor={formMeta.fields.term3}
+                          help="Enter a description"
+                        >
+                            Term3
+                        </SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term3}
+                            formMeta={formMeta.fields.term3}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                      </SpsDl>
+                    </SpsForm>
+                  </Item>
+                  <Item key="1-to-2" title="1-to-2">
+                    <SpsForm formMeta={formMeta}> 
+                      <SpsDl wideTerms compact>
+                        <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term1}
+                            formMeta={formMeta.fields.term1}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term2}
+                            formMeta={formMeta.fields.term2}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
+                        >Term 3</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term3}
+                            formMeta={formMeta.fields.term3}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                      </SpsDl>
+                    </SpsForm>
+                  </Item>
+                  <Item key="1-to-1" title="1-to-1">
+                    <SpsForm formMeta={formMeta}> 
+                      <SpsDl widerTerms compact>
+                        <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term1}
+                            formMeta={formMeta.fields.term1}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term2}
+                            formMeta={formMeta.fields.term2}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                        <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
+                        <SpsDd>
+                          <SpsTextInput
+                            value={formValue.term3}
+                            formMeta={formMeta.fields.term3}
+                            placeholder="Description"
+                          />
+                        </SpsDd>
+                      </SpsDl>
+                    </SpsForm>
+                  </Item>
+                </SpsTabsV2>
+              </SpsCardV2>
+            )
+          }
+        `
       }
     }
   }
@@ -24803,7 +24981,8 @@ function SpsLabel(_y) {
     const [, setShowPriorityTooltip] = getPriorityTooltip();
     setShowPriorityTooltip(TooltipVisibility.VISIBLE);
   }
-  function handleHelpClick() {
+  function handleHelpClick(e2) {
+    e2.preventDefault();
     hideTooltips();
     setShowHelpTip(toggleTooltipState(showHelpTip));
   }
@@ -24862,17 +25041,12 @@ function SpsLabel(_y) {
     "data-testid": `${testId}__suggested-icon`,
     className: clsx("sps-icon", "sps-icon-exclamation-triangle", "orange200", "sps-form-group__label-suggested-icon", !stronglySuggested && "d-none"),
     onClick: handleSuggestedIconClick,
-    onMouseEnter: () => {
-      hideTooltips();
-      setShowSuggestedTip(TooltipVisibility.VISIBLE);
-    },
     onMouseLeave: delayedHideTooltips
   }), /* @__PURE__ */ React.createElement("i", {
     ref: errorIcon,
     "data-testid": `${testId}__error-icon`,
     className: clsx("sps-icon", "sps-icon-exclamation-circle", "sps-form-group__label--error-icon"),
     onClick: handleLabelClick,
-    onMouseEnter: doShowPriorityTooltip,
     onMouseLeave: delayedHideTooltips
   }), /* @__PURE__ */ React.createElement("span", {
     ref: labelRef,
@@ -24882,10 +25056,6 @@ function SpsLabel(_y) {
     "data-testid": `${testId}__help-icon`,
     className: clsx("sps-icon", `sps-icon-${helpIcon}`, helpIconColor, !help && "d-none"),
     onClick: handleHelpClick,
-    onMouseEnter: () => {
-      hideTooltips();
-      setShowHelpTip(TooltipVisibility.VISIBLE);
-    },
     onMouseLeave: delayedHideTooltips
   })), /* @__PURE__ */ React.createElement(SpsTooltip, {
     kind: TooltipKind.DEFAULT,
@@ -25591,8 +25761,11 @@ const useColumnResizer = ({
         tableHeaderRef.current.style.width = width;
         tableHeaderRef.current.style.maxWidth = width;
         tableHeaderRef.current.style.minWidth = width;
-        tableHeaderRef.current.style.overflow = width ? "hidden" : null;
-        tableHeaderRef.current.style.textOverflow = width ? "ellipsis" : null;
+        const tableHeaderBody = tableHeaderRef.current.querySelector(".sps-table__header-cell-body");
+        if (tableHeaderBody) {
+          tableHeaderBody.style.overflow = width ? "hidden" : null;
+          tableHeaderBody.style.textOverflow = width ? "ellipsis" : null;
+        }
         if (start) {
           const resizer = tableHeaderRef.current.querySelector(".sps-table__column-resizer");
           if (resizer) {
@@ -25603,13 +25776,20 @@ const useColumnResizer = ({
           tableHeaderRef.current.style.position = "relative";
         }
         if (table) {
+          const tableHeaders = table.querySelectorAll("thead > tr > th");
+          for (let i2 = 0; i2 < tableHeaders.length; i2 += 1) {
+            const tableHeaderBody2 = tableHeaders[i2].querySelector(".sps-table__header-cell-body");
+            if (tableHeaderBody2 && !tableHeaderBody2.title) {
+              tableHeaderBody2.title = tableHeaderBody2.textContent;
+            }
+          }
           const cells = table.querySelectorAll(`tbody > tr > td:nth-of-type(${tableHeaderRef.current.cellIndex + 1})`);
           for (let i2 = 0; i2 < cells.length; i2 += 1) {
             cells[i2].style.width = width;
             cells[i2].style.maxWidth = width;
             cells[i2].style.minWidth = width;
-            cells[i2].style.overflow = width ? "hidden" : null;
-            cells[i2].style.textOverflow = width ? "ellipsis" : null;
+            cells[i2].style.overflowWrap = width ? "break-word" : null;
+            cells[i2].style.whiteSpace = width ? "normal" : null;
             if (!cells[i2].title) {
               cells[i2].title = cells[i2].textContent;
             }
@@ -32995,7 +33175,7 @@ const SpsSelectExamples = {
             const sizes = [
               { size: "S", price: "10.99" },
               { size: "M", price: "12.99" },
-              { size: "S", price: "10.99" },
+              { size: "L", price: "14.99" },
             ]
 
             return (
@@ -33014,9 +33194,9 @@ const SpsSelectExamples = {
         react: code`
           function DemoComponent() {
             const sizes = [
-              { size: "S", price: "$10.99" },
-              { size: "M", price: "$12.99" },
-              { size: "S", price: "$10.99" },
+              { size: "S", price: "10.99" },
+              { size: "M", price: "12.99" },
+              { size: "L", price: "14.99" },
             ]
             return (
               <div className="sfg-row">
@@ -33041,12 +33221,10 @@ const SpsSelectExamples = {
             const colors = ["red", "blue", "green"];
             const [action, updateAction] = useSpsAction(
               {
-                  label: "Go to Overview",
-                  icon: "dashboard",
-                  href: "#/overview",
-                  newTab: true
+                  label: "Add Option",
+                  icon: "plus-sign",
               },
-              () => console.log("Action")
+              () => alert("Add an option!")
             );
 
             function handleChange(event) {
@@ -37772,6 +37950,7 @@ const MANIFEST = {
     examples: SpsDatetimeExamples
   },
   "Description Lists": {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Description Lists display a series of terms with accompanying descriptions such as a glossary of terms."),
     components: [SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListTerm],
     examples: SpsDescriptionListExamples
   },