@spscommerce/ds-react 6.6.2 → 6.9.0

package/lib/index.es.js

@@ -23437,532 +23437,7 @@ function useCustomValidator(validator, validatorConfig = {}, dependencies = [])
   }
   return React.useCallback(validator, dependencies);
 }
-const SpsFormExamples = {
-  a_basic: {
-    label: "Basic Usage",
-    description: "",
-    examples: {
-      basic: {
-        react: code`
-                    function DemoComponent() {
-                        const COLOR_OPTIONS = ["red", "blue", "green"];
-                        const initValue = {
-                            name: "Foo",
-                            color: COLOR_OPTIONS[0],
-                        };
-                        const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
-                            "name": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []
-                        });
-
-                        function handleSubmit() {
-                            console.log("submit", formValue);
-                        }
-                        function reset() {
-                            updateForm(initValue);
-                        }
-
-                        return <>
-                            <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
-                                <div className="sfg-row">
-                                    <div className="sfg-col-8">
-                                        <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>
-                                        <SpsTextInput
-                                            value={formValue.name}
-                                            formMeta={formMeta.fields.name}
-                                        />
-                                    </div>
-                                    <div className="sfg-col-4">
-                                        <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
-                                        {COLOR_OPTIONS.map(color =>
-                                            <SpsRadioButton key={color} name={color} value={color} label={color}
-                                                checked={color === formValue.color}
-                                                formMeta={formMeta.fields.color}
-                                            />
-                                        )}
-                                    </div>
-                                </div>
-                                <div className="sfg-row">
-                                    <div className="sfg-col-12">
-                                        <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
-                                        <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
-                                    </div>
-                                </div>
-                            </SpsForm>
-                            <br/>
-                            {JSON.stringify(formValue)}
-                        </>;
-                    }
-                `
-      }
-    }
-  },
-  b_array: {
-    label: "Form Array",
-    description: "",
-    examples: {
-      array: {
-        react: code`
-                function DemoComponent() {
-                    const initValue = {
-                      itemList: ["foo"],
-                    }
-                    const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
-                      "itemList.*": [SpsValidators.required],
-                    })
-
-                    function handleSubmit() {
-                      console.log("submit", formValue)
-                    }
-                    function reset() {
-                      updateForm(initValue)
-                    }
-
-                    function addItem() {
-                      updateForm({
-                        ...formValue,
-                        itemList: [...formValue.itemList, ""],
-                      })
-                    }
-                    function removeItem(index) {
-                      updateForm({
-                        ...formValue,
-                        itemList: formValue.itemList.filter((_, i) => index !== i),
-                      })
-                    }
-
-                    return (
-                      <>
-                        <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
-                          {formValue.itemList.map((item, index) => (
-                            <div className="sfg-row" key={index}>
-                              <div className="sfg-col-4">
-                                <SpsLabel for={formMeta.fields.itemList.fields[index]}>
-                                  Item
-                                </SpsLabel>
-                                <SpsTextInput
-                                  value={item}
-                                  formMeta={formMeta.fields.itemList.fields[index]}
-                                />
-                              </div>
-                              <div className="sfg-col-1">
-                                <SpsButton
-                                  kind={ButtonKind.ICON}
-                                  icon={SpsIcon.TRASH}
-                                  className="sps-label-spacing"
-                                  onClick={() => removeItem(index)}
-                                />
-                              </div>
-                            </div>
-                          ))}
-                          <div className="sfg-row">
-                            <div className="sfg-col-12">
-                              <SpsButton
-                                className="mr-1"
-                                kind={ButtonKind.KEY}
-                                icon={SpsIcon.PLUS_SIGN}
-                                onClick={addItem}
-                              >
-                                Add Item
-                              </SpsButton>
-                              <SpsButton className="mr-1" onClick={reset}>
-                                Reset
-                              </SpsButton>
-                              <SpsButton
-                                type={ButtonType.SUBMIT}
-                                kind={ButtonKind.CONFIRM}
-                              >
-                                Submit
-                              </SpsButton>
-                            </div>
-                          </div>
-                        </SpsForm>
-                        <br />
-                        {JSON.stringify(formValue)}
-                      </>
-                    )
-                  }
-                `
-      }
-    }
-  },
-  c_dynamic_group: {
-    label: "Dynamic Group",
-    description: "",
-    examples: {
-      basic: {
-        react: code`
-                function DemoComponent() {
-                    const initValue = {
-                      name: "Foo",
-                    }
-                    const { formValue, formMeta, updateForm } = useSpsForm(initValue)
-
-                    function handleFieldsetToggle(enabled) {
-                      if (enabled) {
-                        updateForm({
-                          ...formValue,
-                          other_stuff: {
-                            tagline: "",
-                            description: "",
-                          },
-                        })
-                      } else {
-                        updateForm(omit(formValue, "other_stuff"))
-                      }
-                    }
-
-                    function handleSubmit() {
-                      console.log("submit", formValue)
-                    }
-                    function reset() {
-                      updateForm(initValue)
-                    }
-
-                    return (
-                      <>
-                        <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
-                          <div className="sfg-row">
-                            <div className="sfg-col-8">
-                              <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>
-                              <SpsTextInput
-                                value={formValue.name}
-                                formMeta={formMeta.fields.name}
-                              />
-                            </div>
-                            <div className="sfg-col-4"></div>
-                          </div>
-                          <div className="sfg-row">
-                            <div className="sfg-col-12">
-                              <SpsFieldset
-                                optional
-                                enabled={formMeta.fields.other_stuff}
-                                formMeta={formMeta.fields.other_stuff}
-                                onToggled={handleFieldsetToggle}
-                                legend="Other Stuff"
-                              >
-                                {formMeta.fields.other_stuff && (
-                                  <>
-                                    <div className="sfg-row">
-                                      <div className="sfg-col-12">
-                                        <SpsLabel
-                                          for={formMeta.fields.other_stuff.fields.tagline}
-                                        >
-                                          Tagline
-                                        </SpsLabel>
-                                        <SpsTextInput
-                                          value={formValue.other_stuff.tagline}
-                                          formMeta={formMeta.fields.other_stuff.fields.tagline}
-                                        />
-                                      </div>
-                                    </div>
-                                    <div className="sfg-row">
-                                      <div className="sfg-col-12">
-                                        <SpsLabel
-                                          for={formMeta.fields.other_stuff.fields.description}
-                                        >
-                                          Description
-                                        </SpsLabel>
-                                        <SpsTextInput
-                                          value={formValue.other_stuff.description}
-                                          formMeta={
-                                            formMeta.fields.other_stuff.fields.description
-                                          }
-                                        />
-                                      </div>
-                                    </div>
-                                  </>
-                                )}
-                              </SpsFieldset>
-                            </div>
-                          </div>
-                          <div className="sfg-row">
-                            <div className="sfg-col-12">
-                              <SpsButton className="mr-1" onClick={reset}>
-                                Reset
-                              </SpsButton>
-                              <SpsButton
-                                type={ButtonType.SUBMIT}
-                                kind={ButtonKind.CONFIRM}
-                              >
-                                Submit
-                              </SpsButton>
-                            </div>
-                          </div>
-                        </SpsForm>
-                        <br />
-                        {JSON.stringify(formValue)}
-                      </>
-                    )
-                  }
-                `
-      }
-    }
-  },
-  preventative_validators: {
-    label: "Preventative validators",
-    examples: {
-      basic: {
-        react: code`
-          function DemoComponent() {
-            const initValue = {
-                maxLength: "",
-                alpha: "",
-                numeric: "",
-                nonNumeric: ""
-            };
-
-            const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
-                "maxLength": [SpsValidators.maxLength(5)],
-                "alpha": [SpsValidators.alpha],
-                "numeric": [SpsValidators.numeric],
-                "nonNumeric": [SpsValidators.nonNumeric]
-            });
-          
-            function handleSubmit() {
-                console.log("submit", formValue);
-            }
-
-            function reset() {
-                updateForm(initValue);
-                formMeta.markAsPristine();
-            }
-          
-            return <>
-                <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>                
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                            for={formMeta.fields.maxLength}
-                            >
-                              MaxLength
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.maxLength}
-                                formMeta={formMeta.fields.maxLength}
-                            />
-                        </div>
-                    </div>
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                            for={formMeta.fields.alpha}                        
-                            >
-                              Alpha
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.alpha}
-                                formMeta={formMeta.fields.alpha}
-                            />
-                        </div>
-                    </div>
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                            for={formMeta.fields.numeric}
-                            >
-                              Numeric
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.numeric}
-                                formMeta={formMeta.fields.numeric}
-                            />
-                        </div>
-                    </div>
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                            for={formMeta.fields.nonNumeric}
-                            >
-                              nonNumeric
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.nonNumeric}
-                                formMeta={formMeta.fields.nonNumeric}
-                            />
-                        </div>
-                    </div>
-          
-                    <div className="sfg-row">
-                        <div className="sfg-col-12">
-                            <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
-                            <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
-                        </div>
-                    </div>
-                </SpsForm>
-            </>;
-          }
-      `
-      },
-      custom_text: {
-        description: () => /* @__PURE__ */ React.createElement("p", null, "Using custom text in the tooltip"),
-        react: code`
-          function DemoComponent() {
-            const initValue = {
-                maxLength: ""
-            };
-
-            const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
-                "maxLength": [SpsValidators.maxLength(5)]
-            });
-          
-            return <>
-                <SpsForm formMeta={formMeta} >                
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                            for={formMeta.fields.maxLength}
-                            errors={() => formMeta.fields.maxLength.hasPreventativeError("maxLength")
-                              && "This field accepts a maximum of 5 characters."}
-                            >
-                              MaxLength
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.maxLength}
-                                formMeta={formMeta.fields.maxLength}
-                            />
-                        </div>
-                    </div>
-                </SpsForm>
-            </>;
-          }
-      `
-      }
-    }
-  },
-  custom_errors: {
-    label: "Custom errors",
-    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When using custom validators you can specify when to show the errors - on Change, on Blur or on Submit.", /* @__PURE__ */ React.createElement("br", null), "On Blur is the default behavior. If you want to change that behavior you can use", " ", /* @__PURE__ */ React.createElement("b", null, "useCustomValidator hook"), ". It takes validation function as first argument, validator configuration (object containing errorKey as key and ValidationMode as value) as second argument and dependencies as third argument. useCustomValidator returns a React callback of the validation function with the given dependencies."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "!Note:"), " useCustomValidator hook will make changes to the global scope and once you set a custom error key you can't change it.")),
-    examples: {
-      basic: {
-        react: code`
-          function DemoComponent() {
-
-            const customValidator = useCustomValidator(
-              (value) => value < 3 ? null : { customErrorKey: true },
-              { customErrorKey: ValidationMode.ON_CHANGE }
-              // or { customErrorKey: ValidationMode.ON_SUBMIT }
-            );         
-
-            const initValue = {
-                customErrorField: "",
-            };
-
-            const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
-                "customErrorField": [customValidator],
-            });
-          
-            function handleSubmit() {
-                console.log("submit", formValue);
-            }
-
-            function reset() {
-                updateForm(initValue);
-                formMeta.markAsPristine();
-            }
-          
-            return <>
-                <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>                
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                            for={formMeta.fields.customErrorField}
-                            errors={() => formMeta.fields.customErrorField.hasError("customErrorKey")
-                                && "Custom error description"}
-                            >
-                              Custom Error
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.customErrorField}
-                                formMeta={formMeta.fields.customErrorField}
-                            />
-                        </div>
-                    </div>
-          
-                    <div className="sfg-row">
-                        <div className="sfg-col-12">
-                            <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
-                            <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
-                        </div>
-                    </div>
-                </SpsForm>
-            </>;
-          }
-      `
-      }
-    }
-  },
-  updating_validators: {
-    label: "Updating validators",
-    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "The updateForm function supports a seconds argument (options) that allows modifying multiple field validators at once.")),
-    examples: {
-      basic: {
-        react: code`
-          function DemoComponent() {
-            const initValue = {
-                fieldA: "",
-                fieldB: "",
-            };
-
-            const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
-                "fieldA": [SpsValidators.required],
-            });
-          
-            function handleSubmit() {
-                console.log("submit", formValue);
-            }
-
-            function reset() {
-                updateForm(initValue, { validators: { fieldA: [SpsValidators.required], fieldB: [] }});
-                formMeta.markAsPristine();
-            }
-
-            // This will make field A non required and field B required in a single operation
-            function updateValidators() {
-              updateForm(undefined, { validators: { fieldA: [], fieldB: [SpsValidators.required] }});
-            }
-          
-            return <>
-                <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>                
-                    <div className="sfg-row">
-                        <div className="sfg-col-8">
-                            <SpsLabel
-                              for={formMeta.fields.fieldA}
-                            >
-                              Field A
-                            </SpsLabel>
-                            <SpsTextInput
-                                value={formValue.fieldA}
-                                formMeta={formMeta.fields.fieldA}
-                            />
-                        </div>
-                        <div className="sfg-col-8">
-                          <SpsLabel
-                            for={formMeta.fields.fieldB}
-                          >
-                            Field B
-                          </SpsLabel>
-                          <SpsTextInput
-                              value={formValue.fieldB}
-                              formMeta={formMeta.fields.fieldB}
-                          />
-                        </div>
-                    </div>
-          
-                    <div className="sfg-row">
-                        <div className="sfg-col-12">
-                            <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
-                            <SpsButton className="mr-1" onClick={updateValidators}>Update Validators</SpsButton>
-                            <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
-                        </div>
-                    </div>
-                </SpsForm>
-            </>;
-          }
-      `
-      }
-    }
-  }
-};
+const SpsFormExamples = {};
 const SpsAddRemoveFormRowExamples = {
   ideal: {
     label: "Ideal",
@@ -33315,202 +32790,286 @@ const SpsScrollableContainerExamples = {
   }
 };
 const SpsSelectExamples = {
+  general: {
+    label: "General Usage",
+    description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use a Select:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "When a list of predetermined values can be provided.")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use a Select:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "When there are only two possible options. Consider", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+      to: "checkbox"
+    }, "Checkboxes"), " or", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+      to: "radio-buttons"
+    }, "Radio Buttons"), " insead."), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "When it is ideal to display all available options without requiring a click. Consider", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+      to: "checkbox"
+    }, "Checkboxes"), " or", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+      to: "radio-buttons"
+    }, "Radio Buttons"), " insead.")), /* @__PURE__ */ React__default.createElement("h5", null, "Using Selects in a Form"), /* @__PURE__ */ React__default.createElement("p", null, "Reference the ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+      to: "form"
+    }, "Forms"), " page for guidelines for placing inputs in Form layouts"))
+  },
   basic: {
-    label: "Basic",
-    description: "info about basic selects",
+    label: "Basic Select",
+    description: () => /* @__PURE__ */ React__default.createElement("p", null, "Basic Selects include a label and dropdown menu containing a list of options. The user is allowed to make a single selection."),
     examples: {
-      a_simple: {
-        description: "Simple value options",
+      basic: {
         react: code`
-                    function DemoComponent() {
-                        const colors = ["red", "blue", "green"];
+          function DemoComponent() {
+            const colors = ["red", "blue", "green"];
 
-                        return (
-                            <SpsSelect id="basic" options={colors}/>
-                        )
-                    }
-                `
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Color</SpsLabel>
+                  <SpsSelect options={colors} />
+                </div>
+              </div>
+            )
+          }
+        `
       },
-      b_formHooks: {
-        description: "Form hooks",
+      placeholderText: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Customizable Placeholder Text"), /* @__PURE__ */ React__default.createElement("p", null, "Placeholder text can be customized to specifically reference the content in the dropdown menu.")),
         react: code`
-                    function DemoComponent() {
-                        const colors = ["red", "blue", "green"];
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            color: colors[0]
-                        });
+          function DemoComponent() {
+            const colors = ["red", "blue", "green"];
 
-                        return <>
-                            <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
-                            <SpsSelect options={colors} formMeta={formMeta.fields.color}
-                                value={formValue.color}
-                            />
-                        </>
-                    }
-                `
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Color</SpsLabel>
+                  <SpsSelect options={colors} placeholder="Select a color..." />
+                </div>
+              </div>
+            )
+          }
+        `
       },
-      c_placeholder: {
-        description: "Custom placeholder text",
+      defaultSelection: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Default Selection / No Clear Button"), /* @__PURE__ */ React__default.createElement("p", null, "Selects can default to a selection in certain cases. Use Default Selections only when a selection is required and a default selection can be confidently made. Selects with a default selection do not have a clear option.")),
+        react: code`
+          function DemoComponent() {
+            const colors = ["Small", "Medium", "Large"];
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Size</SpsLabel>
+                  <SpsSelect options={colors} value="Small" notClearable />
+                </div>
+              </div>
+            )
+          }
+        `
+      },
+      zeroState: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Zero State / No Available Options"), /* @__PURE__ */ React__default.createElement("p", null, "If no options are available in the dropdown menu, a zero state message appears. This option is most commonly used with the Select with Filter option.")),
+        react: code`
+        function DemoComponent() {
+
+          return (
+            <div className="sfg-row">
+              <div className="sfg-col-4">
+                <SpsLabel>Company</SpsLabel>
+                <SpsSelect options={[]} zeroState="We're sorry, there are no options to choose from at this time." />
+              </div>
+            </div>
+          )
+        }
+        `
+      },
+      formHooks: {
+        description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Form Hooks"), /* @__PURE__ */ React__default.createElement("p", null, "The ", /* @__PURE__ */ React__default.createElement("code", null, "formMeta"), " and ", /* @__PURE__ */ React__default.createElement("code", null, "formValue"), " props are used with the", " ", /* @__PURE__ */ React__default.createElement("code", null, "useSpsForm"), " hook. By using the ", /* @__PURE__ */ React__default.createElement("code", null, "useSpsForm"), " hook you can add validators, get the form value, update the form value, and more. The form is documented on the ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+          to: "form"
+        }, "Forms"), " page.")),
+        react: code`
+          function DemoComponent() {
+            const colors = ["red", "blue", "green"];
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              color: colors[0]
+            });
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
+                  <SpsSelect options={colors} formMeta={formMeta.fields.color} formValue={formValue.color}/>
+                </div>
+              </div>
+            )
+          }
+        `
+      }
+    }
+  },
+  filter: {
+    label: "Select with Filter",
+    description: () => /* @__PURE__ */ React__default.createElement("p", null, "It can be helpful to add a filter field to dropdown menus that contain a large amount of options to aid the user in finding the option they need."),
+    examples: {
+      basic: {
         react: code`
-                    function DemoComponent() {
-                        const colors = ["red", "blue", "green"];
+          function DemoComponent() {
+            function colorSearch(search) {
+              return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => (new RegExp(search, "i")).test(s));
+            }
 
-                        return (
-                            <SpsSelect id="placeholder" options={colors} placeholder="Choose a color…"/>
-                        )
-                    }
-                `
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Color</SpsLabel>
+                  <SpsSelect options={colorSearch} zeroState="While I'm sure that's a lovely color, it's not an option we support.ssssssssss" />
+                </div>
+              </div>
+            )
+          }
+        `
       },
-      d_notClearable: {
-        description: "Not clearable",
+      promise: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Return a Promise"), /* @__PURE__ */ React__default.createElement("p", null, "A promise should be used when the options are being returned asynchronously. A common use case for this is when the options are being returned as a result of an API call.")),
         react: code`
-                    function DemoComponent() {
-                        const colors = ["red", "blue", "green"];
+          function DemoComponent() {
+            function colorSearch(search) {
+              return new Promise((resolve, reject) => {
+                const result = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => new RegExp(search, "i").test(s));
+                resolve(result);
+              });
+            }
 
-                        return (
-                            <SpsSelect options={colors} value="red" notClearable />
-                        )
-                    }
-                `
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Color</SpsLabel>
+                  <SpsSelect options={colorSearch} />
+                </div>
+              </div>
+            )
+          }
+        `
       },
-      e_zeroState: {
-        description: "Zero state",
+      debounce: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Debounce"), /* @__PURE__ */ React__default.createElement("p", null, "When the options are a result of a search or are not available right away a debounce may be helpful. A debounce adds a delay to the option search so the search function is not getting called repeatedly.")),
         react: code`
-                    function DemoComponent() {
-                        return (
-                            <SpsSelect options={[]} zeroState="We're sorry, there are no options to choose from at this time, because reasons." />
-                        )
-                    }
-                `
+          function DemoComponent() {
+            function colorSearch(search) {
+              return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => new RegExp(search, "i").test(s));
+            }
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Color</SpsLabel>
+                  <SpsSelect options={colorSearch} searchDebounce={2000} />
+                </div>
+              </div>
+            )
+          }
+        `
       }
     }
   },
-  b_objectOpts: {
+  objectOptions: {
     label: "Object Options",
-    description: "info about object options",
+    description: () => /* @__PURE__ */ React__default.createElement("p", null, "The values in the select menu can be modified to provide more detail to the user or the system, when necessary."),
     examples: {
-      a_basic: {
-        description: "Basic use of object options",
+      basic: {
         react: code`
-                    function DemoComponent() {
-                        const sizes = [
-                            { size: "S", price: "10.99" },
-                            { size: "M", price: "12.99" },
-                            { size: "L", price: "14.99" }
-                        ];
-
-                        return (
-                            <SpsSelect options={sizes} textKey="size" />
-                        )
-                    }
-                `
+          function DemoComponent() {
+            const sizes = [
+              { size: "S", price: "10.99" },
+              { size: "M", price: "12.99" },
+              { size: "S", price: "10.99" },
+            ]
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Size</SpsLabel>
+                  <SpsSelect options={sizes} textKey="size" />
+                </div>
+              </div>
+            )
+          }
+        `
       },
-      b_captions: {
-        description: "Captions",
+      extendedDetails: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Extended Details"), /* @__PURE__ */ React__default.createElement("p", null, "Extended details can be displayed in the dropdown menu. Only the primary detail is displayed as the selection.")),
         react: code`
-                    function DemoComponent() {
-                        const lorem = [
-                            {
-                                title: "Lorem",
-                                description: "Ut enim ad minim veniam"
-                            },
-                            {
-                                title: "Ipsum",
-                                description: "Excepteur sint occaecat cupidatat non proident"
-                            }
-                        ];
-
-                        return (
-                            <SpsSelect options={lorem} textKey="title" captionKey="description" />
-                        )
-                    }
-                `
+          function DemoComponent() {
+            const sizes = [
+              { size: "S", price: "$10.99" },
+              { size: "M", price: "$12.99" },
+              { size: "S", price: "$10.99" },
+            ]
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Size</SpsLabel>
+                  <SpsSelect options={sizes} textKey="size" captionKey="price" />
+                </div>
+              </div>
+            )
+          }
+        `
       }
     }
   },
-  c_searchable: {
-    label: "Search/Filter",
-    description: "info about search/filter",
+  selectWithAction: {
+    label: "Select with Action Button",
+    description: () => /* @__PURE__ */ React__default.createElement("p", null, "A Text Button can be added to the bottom of the dropdown menu to provide a specific action."),
     examples: {
-      a_simple: {
-        description: "Simple search function",
-        react: code`
-                    function DemoComponent() {
-                        function colorSearch(search) {
-                            return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
-                                .filter(s => (new RegExp(search, "i")).test(s));
-                        }
-
-                        return (
-                            <SpsSelect  id="search-function" options={colorSearch} zeroState="While I'm sure that's a lovely color, it's not an option we support."/>
-                        )
-                    }
-                `
-      },
-      b_promise: {
-        description: "Search function returning a Promise",
-        react: code`
-                    function DemoComponent() {
-                        function colorSearch(search) {
-                            return new Promise((resolve, reject) => {
-                                const result = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
-                                    .filter(s => new RegExp(search, "i").test(s));
-                                resolve(result);
-                            });
-                        }
-
-                        return (
-                            <SpsSelect options={colorSearch}/>
-                        )
-                    }
-                `
-      },
-      c_debounce: {
-        description: "Search with Debounce",
+      basic: {
         react: code`
-                    function DemoComponent() {
-                        function colorSearch(search) {
-                            return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
-                                .filter(s => (new RegExp(search, "i")).test(s));
-                        }
+          function DemoComponent() {
+            const colors = ["red", "blue", "green"];
+            const [action, updateAction] = useSpsAction(
+              {
+                  label: "Go to Overview",
+                  icon: "dashboard",
+                  href: "#/overview",
+                  newTab: true
+              },
+              () => console.log("Action")
+            );
+
+            function handleChange(event) {
+              updateAction({
+                  label: "Test Action"
+              });
+            }
 
-                        return (
-                            <SpsSelect id="debounce-select" options={colorSearch} searchDebounce={2000}/>
-                        )
-                    }
-                `
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsSelect options={colors} action={action} onChange={handleChange} />
+                </div>
+              </div>
+            )
+          }
+        `
       }
     }
   },
-  d_specialAction: {
-    label: "Simple Action",
-    description: "info about simple action selects",
+  disabled: {
+    label: "Disabled State",
+    description: () => /* @__PURE__ */ React__default.createElement("p", null, "In the disabled state, select inputs display the current selection or placeholder text, but cannot be interacted with."),
     examples: {
-      a_action: {
-        description: "Action",
+      basic: {
         react: code`
-                    function DemoComponent() {
-                        const colors = ["red", "orange", "yellow", "blue", "indigo", "violet"];
-                        const [action, updateAction] = useSpsAction(
-                            {
-                                label: "Go to Overview",
-                                icon: "dashboard",
-                                href: "#/overview",
-                                newTab: true
-                            },
-                            () => console.log("Action")
-                        );
-                        function handleChange(event) {
-                            updateAction({
-                                label: "Test Action"
-                            });
-                        }
+          function DemoComponent() {
+            const colors = ["red", "blue", "green"];
 
-                        return (
-                            <SpsSelect  id="special-action" options={colors} action={action} onChange={handleChange}/>
-                        )
-                    }
-                `
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel>Color</SpsLabel>
+                  <SpsSelect options={colors} disabled />
+                </div>
+              </div>
+            )
+          }
+        `
       }
     }
   }
@@ -36469,85 +36028,235 @@ Object.assign(SpsToggle, {
   displayName: "SpsToggle"
 });
 const SpsToggleExamples = {
-  small: {
-    label: "Small",
+  general: {
+    label: "General Usage",
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Use Toggles:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", {
+      className: "mb-2"
+    }, 'When an option represents a specific "on/off" state.'), /* @__PURE__ */ React.createElement("li", {
+      className: "mb-2"
+    }, "When the selection causes an imeediate change in the system.")), /* @__PURE__ */ React.createElement("h5", null, "Do Not Use Toggles:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", {
+      className: "mb-2"
+    }, "When a selection does not cause an immediate change in the system.", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "checkbox"
+    }, "Checkboxes"), " or", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "radio-buttons"
+    }, "Radio Buttons"), " instead."), /* @__PURE__ */ React.createElement("li", {
+      className: "mb-2"
+    }, "Inside a form with a save/submit button as this contradicts the immediate change in the system that a toggle controls.")))
+  },
+  basic: {
+    label: "Basic Toggles",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Basic toggles can appear with or without labels and can include an extended description if necessary."),
     examples: {
-      a_small: {
+      basic: {
+        description: () => /* @__PURE__ */ React.createElement("h4", {
+          className: "mb-3"
+        }, "Toggle"),
         react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            toggle: false
-                        });
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggle: true
+            });
 
-                        return <SpsToggle formMeta={formMeta.fields.toggle}
-                            active={formValue.toggle}
-                            label="Main Label"
-                            description="Extra descriptive text"
-                        />;
-                    }
-                `
+            return (
+              <SpsToggle
+                active={formValue.toggle}
+              />
+            )
+          }
+        `
       },
-      b_changeHandler: {
-        description: "With UseState",
+      label: {
+        description: () => /* @__PURE__ */ React.createElement("h4", {
+          className: "mb-3"
+        }, "Toggle + Label"),
         react: code`
-                    function DemoComponent() {
-                        function changeHandler() {
-                            setActive(!checked);
-                        }
-                        const [active, setActive] = React.useState();
-                        return (
-                            <SpsToggle active={active} onChange={changeHandler}/>
-                        )
-                    }
-                `
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggle: true
+            });
+
+            return (
+              <SpsToggle
+                active={formValue.toggle}
+                label="Label"
+              />
+            )
+          }
+        `
+      },
+      extendedDescription: {
+        description: () => /* @__PURE__ */ React.createElement("h4", {
+          className: "mb-3"
+        }, "Toggle + Label with Extended Description"),
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggle: true
+            });
+
+            return (
+              <SpsToggle
+                active={formValue.toggle}
+                label="Label"
+                description="(optional extended description)"
+              />
+            )
+          }
+        `
       }
     }
   },
-  b_large: {
-    label: "Large",
+  groups: {
+    label: "Toggle Groups",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Toggle Groups can appear as one of the two types listed."),
     examples: {
-      a_large: {
+      group: {
+        description: () => /* @__PURE__ */ React.createElement("h4", {
+          className: "mb-3"
+        }, "Toggle Group"),
         react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            toggle: true
-                        });
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggleLabel: true,
+              toggle1: true,
+              toggle2: true,
+              toggle3: true,
+            });
 
-                        return <SpsToggle large formMeta={formMeta.fields.toggle}
-                            active={formValue.toggle}
-                        />;
-                    }
-                `
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.toggleLabel}>Section Label</SpsLabel>
+                <SpsToggle
+                  active={formValue.toggle1}
+                  label="Label"
+                  description="(optional extended description)"
+                />
+                <SpsToggle
+                  active={formValue.toggle2}
+                  label="Label"
+                />
+                <SpsToggle
+                  active={formValue.toggle3}
+                  label="Label"
+                  description="(optional extended description)"
+                />
+              </>
+            )
+          }
+        `
+      },
+      alternate: {
+        description: () => /* @__PURE__ */ React.createElement("h4", {
+          className: "mb-3"
+        }, "Toggle Group Alternate"),
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggleLabel: true,
+              toggle1: true,
+              toggle2: true,
+              toggle3: true,
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.toggleLabel}>Section Label</SpsLabel>
+                <div className="sfg-row">
+                  <div className="sfg-col-3">
+                    <div className="sfg-row">
+                      <div className="sfg-col-6">
+                        <span>Label</span>
+                      </div>
+                      <div className="sfg-col-6">
+                        <SpsToggle
+                          active={formValue.toggle1}
+                        />
+                      </div>
+                    </div>
+                    <div className="sfg-row">
+                      <div className="sfg-col-6">
+                        <span>Label</span>
+                      </div>
+                      <div className="sfg-col-6">
+                        <SpsToggle
+                          active={formValue.toggle2}
+                        />
+                      </div>
+                    </div>
+                    <div className="sfg-row">
+                      <div className="sfg-col-6">
+                        <span>Label</span>
+                      </div>
+                      <div className="sfg-col-6">
+                        <SpsToggle
+                          active={formValue.toggle3}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </>
+            )
+          }
+        `
       }
     }
   },
-  d_disabled: {
-    label: "Disabled",
+  disabled: {
+    label: "Disabled States",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Toggles have a disabled style for each possible state."),
     examples: {
-      disabled: {
+      basic: {
         react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            toggleA: false,
-                            toggleB: true,
-                        });
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggle: true
+            });
 
-                        return <>
-                            <SpsToggle formMeta={formMeta.fields.toggleA}
-                                active={formValue.toggleA}
-                                label="Main Label"
-                                description="Extra descriptive text"
-                                disabled
-                            />
-                            <SpsToggle formMeta={formMeta.fields.toggleB}
-                                active={formValue.toggleB}
-                                label="Main Label"
-                                description="Extra descriptive text"
-                                disabled
-                            />
-                        </>;
-                    }
-                `
+            return (
+              <SpsToggle
+                active={formValue.toggle}
+                disabled
+              />
+            )
+          }
+        `
+      },
+      label: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggle: true
+            });
+
+            return (
+              <SpsToggle
+                active={formValue.toggle}
+                label="Label"
+                disabled
+              />
+            )
+          }
+        `
+      },
+      extendedDescription: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              toggle: true
+            });
+
+            return (
+              <SpsToggle
+                active={formValue.toggle}
+                label="Label"
+                description="(optional extended description)"
+                disabled
+              />
+            )
+          }
+        `
       }
     }
   }
@@ -38163,6 +37872,7 @@ const MANIFEST = {
     examples: SpsSearchResultsBarExamples
   },
   Select: {
+    description: "Selects consist off a Label and a dropdown menu from which a user selects a value from a list of pre-defined options.",
     components: [SpsSelect],
     examples: SpsSelectExamples
   },
@@ -38223,6 +37933,7 @@ const MANIFEST = {
     examples: SpsTextareaExamples
   },
   Toggle: {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Toggles allow a user to immediately turn a setting on or off."),
     components: [SpsToggle],
     examples: SpsToggleExamples
   },