@sps-woodland/list-bar 8.2.2 → 8.3.0

package/lib/index.es.js

@@ -16,32 +16,7 @@ function R({
   ...h
 }) {
   const { t: l } = e.useContext(w), p = a ? Object.keys(a).reduce((i, u) => (a[u].length > 0 && (i[u] = a[u]), i), {}) : {};
-  return /* @__PURE__ */ e.createElement("div", {
-    className: me,
-    ...h
-  }, t != null && /* @__PURE__ */ e.createElement("div", {
-    className: pe
-  }, /* @__PURE__ */ e.createElement("span", null, l("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, {
-    className: Be,
-    kind: "info"
-  }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", {
-    className: ve
-  }, Object.keys(p).length > 0 ? Object.keys(p).map((i, u) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
-    key: u,
-    className: Se
-  }, i, ":"), p[i].map((B, g) => /* @__PURE__ */ e.createElement(C, {
-    className: fe,
-    key: g,
-    kind: "key"
-  }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", {
-    className: "font-italic"
-  }, r || l("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", {
-    className: he
-  }, /* @__PURE__ */ e.createElement(T, {
-    className: ue,
-    kind: "link",
-    onClick: n
-  }, l("design-system:searchResultsBar.clearResults"))));
+  return /* @__PURE__ */ e.createElement("div", { className: me, ...h }, t != null && /* @__PURE__ */ e.createElement("div", { className: pe }, /* @__PURE__ */ e.createElement("span", null, l("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, { className: Be, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: ve }, Object.keys(p).length > 0 ? Object.keys(p).map((i, u) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: u, className: Se }, i, ":"), p[i].map((B, g) => /* @__PURE__ */ e.createElement(C, { className: fe, key: g, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || l("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", { className: he }, /* @__PURE__ */ e.createElement(T, { className: ue, kind: "link", onClick: n }, l("design-system:searchResultsBar.clearResults"))));
 }
 b.set(R, {
   name: "Search Results Bar",
@@ -123,13 +98,7 @@ function F({
   function r(n) {
     n.preventDefault(), t && t(n);
   }
-  return /* @__PURE__ */ e.createElement("form", {
-    onSubmit: r,
-    className: Me,
-    noValidate: !0
-  }, /* @__PURE__ */ e.createElement(ae, {
-    className: Fe
-  }, /* @__PURE__ */ e.createElement(Oe, null, a)));
+  return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Me, noValidate: !0 }, /* @__PURE__ */ e.createElement(ae, { className: Fe }, /* @__PURE__ */ e.createElement(Oe, null, a)));
 }
 b.set(F, {
   name: "ListBarSearch",
@@ -204,48 +173,24 @@ function j({
       custom: (d) => b.isWoodlandComponent(d) && b.get(d).name === "Tabs"
     }
   ]);
-  return /* @__PURE__ */ e.createElement("div", {
-    className: x(B),
-    ref: f,
-    ...g
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: Le({ pinned: S }),
-    ref: E
-  }, V ? X(V, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-    className: we
-  }, !!c && /* @__PURE__ */ e.createElement("div", {
-    className: Ie
-  }, /* @__PURE__ */ e.createElement(re, {
-    checked: m,
-    indeterminate: h,
-    onChange: () => {
-      l == null || l(!m);
+  return /* @__PURE__ */ e.createElement("div", { className: x(B), ref: f, ...g }, /* @__PURE__ */ e.createElement("div", { className: Le({ pinned: S }), ref: E }, V ? X(V, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: we }, !!c && /* @__PURE__ */ e.createElement("div", { className: Ie }, /* @__PURE__ */ e.createElement(
+    re,
+    {
+      checked: m,
+      indeterminate: h,
+      onChange: () => {
+        l == null || l(!m);
+      }
     }
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: Re
-  }, !r && N, !r && z, N.length > 0 && t && /* @__PURE__ */ e.createElement("div", {
-    className: Ae,
-    "data-testid": `${k}__advanced-search`
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: Ce
-  }, /* @__PURE__ */ e.createElement(T, {
-    kind: "link",
-    onClick: W
-  }, H("design-system:listToolbar.advancedSearchToggle"))), (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, {
-    className: ye,
-    kind: "info",
-    "data-testid": `${k}__entered-fields`
-  }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))), r && /* @__PURE__ */ e.createElement("div", {
-    className: xe
-  }, r)), S ? /* @__PURE__ */ e.createElement("div", {
-    className: G
-  }, /* @__PURE__ */ e.createElement($.Provider, {
-    value: { fixed: !0 }
-  }, _)) : /* @__PURE__ */ e.createElement("div", {
-    className: G
-  }, _)), /* @__PURE__ */ e.createElement("div", {
-    className: be
-  }, (!S || S && p) && Z))));
+  )), /* @__PURE__ */ e.createElement("div", { className: Re }, !r && N, !r && z, N.length > 0 && t && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: Ae,
+      "data-testid": `${k}__advanced-search`
+    },
+    /* @__PURE__ */ e.createElement("div", { className: Ce }, /* @__PURE__ */ e.createElement(T, { kind: "link", onClick: W }, H("design-system:listToolbar.advancedSearchToggle"))),
+    (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, { className: ye, kind: "info", "data-testid": `${k}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
+  ), r && /* @__PURE__ */ e.createElement("div", { className: xe }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement($.Provider, { value: { fixed: !0 } }, _)) : /* @__PURE__ */ e.createElement("div", { className: G }, _)), /* @__PURE__ */ e.createElement("div", { className: be }, (!S || S && p) && Z))));
 }
 b.set(j, {
   name: "ListBar",
@@ -278,12 +223,15 @@ function K({
       r && r(l);
     }
   ]);
-  return /* @__PURE__ */ e.createElement(ne, {
-    className: x(c, ke),
-    icon: (a == null ? void 0 : a.icon) || (n == null ? void 0 : n.icon),
-    label: (a == null ? void 0 : a.label) || (n == null ? void 0 : n.label),
-    options: h
-  });
+  return /* @__PURE__ */ e.createElement(
+    ne,
+    {
+      className: x(c, ke),
+      icon: (a == null ? void 0 : a.icon) || (n == null ? void 0 : n.icon),
+      label: (a == null ? void 0 : a.label) || (n == null ? void 0 : n.label),
+      options: h
+    }
+  );
 }
 b.set(K, {
   name: "ListBarSortBy",
@@ -312,33 +260,17 @@ function q({
   function g() {
     l && l();
   }
-  return /* @__PURE__ */ e.createElement("div", {
-    className: x(Ne({ open: h })),
-    ...u
-  }, /* @__PURE__ */ e.createElement(se, {
-    onSubmit: n,
-    formArray: t,
-    formGroup: a,
-    formMeta: r
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: De
-  }, i), /* @__PURE__ */ e.createElement("div", {
-    className: Ve
-  }, m && /* @__PURE__ */ e.createElement("div", {
-    id: "footer_links"
-  }, ee(m)), /* @__PURE__ */ e.createElement("div", {
-    className: _e
-  }, /* @__PURE__ */ e.createElement(T, {
-    kind: "default",
-    type: "button",
-    className: de({ mr: "sm" }),
-    onClick: g,
-    disabled: c
-  }, B("design-system:advancedSearch.clear")), /* @__PURE__ */ e.createElement(T, {
-    kind: "key",
-    type: "submit",
-    disabled: c
-  }, B("design-system:advancedSearch.search"))))));
+  return /* @__PURE__ */ e.createElement("div", { className: x(Ne({ open: h })), ...u }, /* @__PURE__ */ e.createElement(se, { onSubmit: n, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: De }, i), /* @__PURE__ */ e.createElement("div", { className: Ve }, m && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, ee(m)), /* @__PURE__ */ e.createElement("div", { className: _e }, /* @__PURE__ */ e.createElement(
+    T,
+    {
+      kind: "default",
+      type: "button",
+      className: de({ mr: "sm" }),
+      onClick: g,
+      disabled: c
+    },
+    B("design-system:advancedSearch.clear")
+  ), /* @__PURE__ */ e.createElement(T, { kind: "key", type: "submit", disabled: c }, B("design-system:advancedSearch.search"))))));
 }
 b.set(q, {
   name: "Advanced Search",
@@ -358,21 +290,11 @@ const Pe = {
   examples: {
     general: {
       label: "General Usage",
-      description: ({ NavigateTo: t, Link: a }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, 'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'), /* @__PURE__ */ e.createElement("p", null, "Advanced Search works in conjunction with the", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "list-toolbar"
-      }, "List Bar"), " and", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "search-results-bar"
-      }, "Search Results"), " components. Refer to those pages for additional details."), /* @__PURE__ */ e.createElement("p", null, "Use the following guidelines when including Advanced Search on your page:", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, "The Advanced Search Panel can contain any number of input fields."), /* @__PURE__ */ e.createElement("li", null, "The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the", " ", /* @__PURE__ */ e.createElement(a, {
-        to: "/style-and-layout/grid/"
-      }, "SPS Grid"), " and guidelines for", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "form"
-      }, "Form Layouts"), "."))))
+      description: ({ NavigateTo: t, Link: a }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, 'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'), /* @__PURE__ */ e.createElement("p", null, "Advanced Search works in conjunction with the", " ", /* @__PURE__ */ e.createElement(t, { to: "list-toolbar" }, "List Bar"), " and", " ", /* @__PURE__ */ e.createElement(t, { to: "search-results-bar" }, "Search Results"), " components. Refer to those pages for additional details."), /* @__PURE__ */ e.createElement("p", null, "Use the following guidelines when including Advanced Search on your page:", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, "The Advanced Search Panel can contain any number of input fields."), /* @__PURE__ */ e.createElement("li", null, "The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the", " ", /* @__PURE__ */ e.createElement(a, { to: "/style-and-layout/grid/" }, "SPS Grid"), " and guidelines for", " ", /* @__PURE__ */ e.createElement(t, { to: "form" }, "Form Layouts"), "."))))
     },
     basic: {
       label: "Basic Usage",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ", /* @__PURE__ */ e.createElement(t, {
-        to: "list-toolbar"
-      }, "List Bar"), " page.")),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ", /* @__PURE__ */ e.createElement(t, { to: "list-toolbar" }, "List Bar"), " page.")),
       examples: {
         basic: {
           react: o`
@@ -634,39 +556,14 @@ function Ge() {
   function n() {
     a(!0);
   }
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."), /* @__PURE__ */ e.createElement(T, {
-    kind: "link",
-    onClick: n
-  }, "View Content Order Example"), /* @__PURE__ */ e.createElement(oe, {
-    isOpen: t,
-    onClose: r
-  }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement("img", {
-    src: "assets/images/list-toolbar-example.svg",
-    alt: "A List Toolbar with labels on each section",
-    className: "w-100 mb-3"
-  }), /* @__PURE__ */ e.createElement(le, null, /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(A, {
-    style: { width: "80px" }
-  }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, null, "Notes")), /* @__PURE__ */ e.createElement(ie, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "1")), /* @__PURE__ */ e.createElement(s, null, "Checkbox"), /* @__PURE__ */ e.createElement(s, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "2")), /* @__PURE__ */ e.createElement(s, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "3")), /* @__PURE__ */ e.createElement(s, null, "Saved Search"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "4")), /* @__PURE__ */ e.createElement(s, null, "Advanced Search"), /* @__PURE__ */ e.createElement(s, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "5")), /* @__PURE__ */ e.createElement(s, null, "Column Editor"), /* @__PURE__ */ e.createElement(s, {
-    wrap: 500
-  }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "6")), /* @__PURE__ */ e.createElement(s, null, "List View Selector"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "7")), /* @__PURE__ */ e.createElement(s, null, "Sorting"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
-    className: "sps-tag sps-tag--info"
-  }, "8")), /* @__PURE__ */ e.createElement(s, null, "Buttons"), /* @__PURE__ */ e.createElement(s, {
-    wrap: 500
-  }, "Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))));
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."), /* @__PURE__ */ e.createElement(T, { kind: "link", onClick: n }, "View Content Order Example"), /* @__PURE__ */ e.createElement(oe, { isOpen: t, onClose: r }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: "assets/images/list-toolbar-example.svg",
+      alt: "A List Toolbar with labels on each section",
+      className: "w-100 mb-3"
+    }
+  ), /* @__PURE__ */ e.createElement(le, null, /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(A, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, null, "Notes")), /* @__PURE__ */ e.createElement(ie, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(s, null, "Checkbox"), /* @__PURE__ */ e.createElement(s, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(s, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(s, null, "Saved Search"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(s, null, "Advanced Search"), /* @__PURE__ */ e.createElement(s, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(s, null, "Column Editor"), /* @__PURE__ */ e.createElement(s, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(s, null, "List View Selector"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(s, null, "Sorting"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(s, null, "Buttons"), /* @__PURE__ */ e.createElement(s, { wrap: 500 }, "Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))));
 }
 const Ue = {
   description: () => /* @__PURE__ */ e.createElement("p", null, "The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),
@@ -682,11 +579,7 @@ const Ue = {
     },
     checkbox: {
       label: "Checkbox",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use a Checkbox in the List Bar when items in a", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "content-row"
-      }, "Content Row"), " or", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "content-tile"
-      }, "Content Tile"), " are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use a Checkbox in the List Bar when items in a", " ", /* @__PURE__ */ e.createElement(t, { to: "content-row" }, "Content Row"), " or", " ", /* @__PURE__ */ e.createElement(t, { to: "content-tile" }, "Content Tile"), " are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),
       examples: {
         basic: {
           react: o`
@@ -950,9 +843,7 @@ const Ue = {
     },
     advancedSearch: {
       label: "Advanced Search",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Include the Advanced Search feature when more complex options are required to narrow down search results. For more information, visit the", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "advanced-search"
-      }, "Advanced Search"), " page."),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Include the Advanced Search feature when more complex options are required to narrow down search results. For more information, visit the", " ", /* @__PURE__ */ e.createElement(t, { to: "advanced-search" }, "Advanced Search"), " page."),
       examples: {
         advancedSearch: {
           react: o`
@@ -998,9 +889,7 @@ const Ue = {
           `
         },
         withResultsBar: {
-          description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "You can include ", /* @__PURE__ */ e.createElement(t, {
-            to: "search-results-bar"
-          }, "Search Results Bar"), "."),
+          description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "You can include ", /* @__PURE__ */ e.createElement(t, { to: "search-results-bar" }, "Search Results Bar"), "."),
           react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
@@ -1188,11 +1077,7 @@ const Ue = {
     },
     columnEditor: {
       label: "Column Editor",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use a Column Editor when tables require the ability to show or hide specific columns based on the user's preferences. The Column Editor should only be used for", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "tables"
-      }, "Tables"), ", and not any other type of list view. For more information, visit the ", /* @__PURE__ */ e.createElement(t, {
-        to: "column-chooser"
-      }, "Column Editor"), " page."),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use a Column Editor when tables require the ability to show or hide specific columns based on the user's preferences. The Column Editor should only be used for", " ", /* @__PURE__ */ e.createElement(t, { to: "tables" }, "Tables"), ", and not any other type of list view. For more information, visit the ", /* @__PURE__ */ e.createElement(t, { to: "column-chooser" }, "Column Editor"), " page."),
       examples: {
         columnEditor: {
           react: o`
@@ -1240,9 +1125,7 @@ const Ue = {
     },
     buttons: {
       label: "Buttons",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use Buttons only for actions that do not affect existing list items, such as exporting the list or creating a new list item. For actions that are taken on list items, such as changing a status of a list item, refer to the", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "list-action-bar"
-      }, "List Action Bar"), "."),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use Buttons only for actions that do not affect existing list items, such as exporting the list or creating a new list item. For actions that are taken on list items, such as changing a status of a list item, refer to the", " ", /* @__PURE__ */ e.createElement(t, { to: "list-action-bar" }, "List Action Bar"), "."),
       examples: {
         buttons: {
           react: o`
@@ -1282,9 +1165,7 @@ const Ue = {
     },
     tabs: {
       label: "Tabs",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "When tabs are included, they appear above the List Toolbar. Tab rules are outlined on the ", /* @__PURE__ */ e.createElement(t, {
-        to: "cards"
-      }, "Cards"), " page."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "<Item>"), " comes from the ", /* @__PURE__ */ e.createElement("code", null, "@react-stately/collections"), "package, which is a peer dependency of our React components.")),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "When tabs are included, they appear above the List Toolbar. Tab rules are outlined on the ", /* @__PURE__ */ e.createElement(t, { to: "cards" }, "Cards"), " page."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "<Item>"), " comes from the ", /* @__PURE__ */ e.createElement("code", null, "@react-stately/collections"), "package, which is a peer dependency of our React components.")),
       examples: {
         tabs: {
           react: o`
@@ -1338,9 +1219,7 @@ const Ue = {
     },
     title: {
       label: "Title",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use Titles when there is no Search or Filter input required for the list items, such as when the only search options are in an Advanced Search panel. For more information, visit the ", /* @__PURE__ */ e.createElement(t, {
-        to: "advanced-search"
-      }, "Advanced Search"), " page."),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use Titles when there is no Search or Filter input required for the list items, such as when the only search options are in an Advanced Search panel. For more information, visit the ", /* @__PURE__ */ e.createElement(t, { to: "advanced-search" }, "Advanced Search"), " page."),
       examples: {
         title: {
           react: o`
@@ -1429,9 +1308,7 @@ const Ue = {
   examples: {
     basic: {
       label: "Basic",
-      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The SearchResultsBar should be used with List Bar and Advanced Search."), /* @__PURE__ */ e.createElement("p", null, "For more examples go to the Advanced Search section on the", " ", /* @__PURE__ */ e.createElement(t, {
-        to: "list-bar"
-      }, "List Bar"), " page.")),
+      description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The SearchResultsBar should be used with List Bar and Advanced Search."), /* @__PURE__ */ e.createElement("p", null, "For more examples go to the Advanced Search section on the", " ", /* @__PURE__ */ e.createElement(t, { to: "list-bar" }, "List Bar"), " page.")),
       examples: {
         basic: {
           react: o`

package/lib/list-bar/ListBar.examples.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { ComponentManifestEntry } from "@sps-woodland/core";
-export declare function ContentOrderExample(): JSX.Element;
+export declare function ContentOrderExample(): React.JSX.Element;
 export declare const ListBarExamples: ComponentManifestEntry;

package/lib/style.css

@@ -1 +1 @@
-._9h4p701{background:#ffffff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}._9h4p702{width:75rem;border-radius:0;margin-left:-37.5rem;position:fixed;top:3.75rem;left:50%;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}._9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}._1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}._1gxdcgc7:hover{background:#d2d4d4}._1gxdcgc8{padding:.5rem;width:5.25rem}.q4fj410{background:#ffffff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.q4fj411{display:block}.q4fj413{padding:1rem}.q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.q4fj415{text-align:right}.q4fj414>*{flex:1}
+._9h4p701{background:oklch(100% 0 0);border-color:oklch(86.84% .002 197.12);border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}._9h4p702{width:75rem;border-radius:0;margin-left:-37.5rem;position:fixed;top:3.75rem;left:50%;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._9h4p705{display:flex;align-items:center;border-right-color:oklch(86.84% .002 197.12);border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._9h4p70e{background-color:oklch(93.43% .001 286.37);border-color:oklch(56.48% .008 219.62);border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}._9h4p70e:hover{background-color:oklch(86.84% .002 197.12);border-width:.0625rem;border-style:solid;border-color:oklch(56.48% .008 219.62);border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:oklch(43.62% .011 222.24)}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}._1gxdcgc1{background-color:oklch(93.43% .001 286.37);border-width:.0625rem;border-color:oklch(86.84% .002 197.12);border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:oklch(86.84% .002 197.12);border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:oklch(86.84% .002 197.12);display:flex;align-items:center}._1gxdcgc7:hover{background:oklch(86.84% .002 197.12)}._1gxdcgc8{padding:.5rem;width:5.25rem}.q4fj410{background:oklch(100% 0 0);border-color:oklch(86.84% .002 197.12);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.q4fj411{display:block}.q4fj413{padding:1rem}.q4fj414{background:oklch(96.64% .001 197.14);border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.q4fj415{text-align:right}.q4fj414>*{flex:1}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/list-bar",
   "description": "SPS Woodland Design System list bar components",
-  "version": "8.2.2",
+  "version": "8.3.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
@@ -29,12 +29,12 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.2.2",
-    "@sps-woodland/tokens": "8.2.2",
-    "@sps-woodland/tabs": "8.2.2",
-    "@sps-woodland/buttons": "8.2.2",
-    "@sps-woodland/tags": "8.2.2",
-    "@spscommerce/ds-react": "8.2.2"
+    "@sps-woodland/core": "8.3.0",
+    "@sps-woodland/tokens": "8.3.0",
+    "@sps-woodland/tabs": "8.3.0",
+    "@sps-woodland/buttons": "8.3.0",
+    "@sps-woodland/tags": "8.3.0",
+    "@spscommerce/ds-react": "8.3.0"
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
@@ -43,13 +43,13 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.2.2",
-    "@sps-woodland/tokens": "8.2.2",
-    "@sps-woodland/tabs": "8.2.2",
-    "@sps-woodland/buttons": "8.2.2",
-    "@sps-woodland/tags": "8.2.2",
-    "@spscommerce/ds-react": "8.2.2",
-    "@spscommerce/ds-shared": "8.2.2"
+    "@sps-woodland/core": "8.3.0",
+    "@sps-woodland/tokens": "8.3.0",
+    "@sps-woodland/tabs": "8.3.0",
+    "@sps-woodland/buttons": "8.3.0",
+    "@sps-woodland/tags": "8.3.0",
+    "@spscommerce/ds-react": "8.3.0",
+    "@spscommerce/ds-shared": "8.3.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",