@sps-woodland/list-bar 8.51.2 → 8.52.0

package/README.md

@@ -1,42 +1,3 @@
 ## [@sps-woodland/list-bar](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/list-bar#readme)
 
-SPS Woodland Design System list bar components.
-
-> **Heads up — this is a wrapper package.** The component source now lives in
-> [`@sps-woodland/core`](../react). This package re-exports from the
-> mono-package so existing imports keep working, but new code should prefer the
-> mono-package paths.
-
-### Preferred imports (mono-package)
-
-```ts
-import {
-  ListBar,
-  ListBarSearch,
-  ListBarSearchInfo,
-  ListBarSortBy,
-  InputGroupWrapper,
-  SearchResultsBar,
-  AdvancedSearch,
-} from "@sps-woodland/core/list-bar";
-
-// Or per-component (everything except ListBar has a flat subpath):
-import { ListBarSearch } from "@sps-woodland/core/list-bar-search";
-import { ListBarSearchInfo } from "@sps-woodland/core/list-bar-search-info";
-import { ListBarSortBy } from "@sps-woodland/core/list-bar-sort-by";
-import { InputGroupWrapper } from "@sps-woodland/core/input-group-wrapper";
-import { SearchResultsBar } from "@sps-woodland/core/search-results-bar";
-import { AdvancedSearch } from "@sps-woodland/core/advanced-search";
-
-import "@sps-woodland/core/list-bar/style.css";
-```
-
-`ListBar` is barrel-only (the family name and the parent component share a
-name). Everything else has both a barrel entry and a flat subpath.
-
-### Legacy imports (still supported)
-
-```ts
-import { ListBar, AdvancedSearch, SearchResultsBar } from "@sps-woodland/list-bar";
-import "@sps-woodland/list-bar/style.css";
-```
+SPS Woodland Design System list bar components

package/lib/advanced-search/AdvancedSearch.css.d.ts

@@ -0,0 +1,10 @@
+import { BooleanRecipeVariant, VariantDefinitions } from "@sps-woodland/core";
+interface AdvancedSearchVariantDefinitions extends VariantDefinitions {
+    open: BooleanRecipeVariant;
+    compact: BooleanRecipeVariant;
+}
+export declare const advancedSearch: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<AdvancedSearchVariantDefinitions, "compact" | "open">>;
+export declare const advancedSearchForm: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<AdvancedSearchVariantDefinitions, "open">>;
+export declare const advancedSearchFooter: string;
+export declare const advancedSearchFooterControls: string;
+export {};

package/lib/advanced-search/AdvancedSearch.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+import type { SpsFormArray, SpsFormGroup, SpsFormSetMeta } from "@spscommerce/ds-react";
+export declare function AdvancedSearch({ formArray, formGroup, formMeta, onSubmit, controlsDisabled, footerLinks, isOpen, onClear, submitButtonText, compact, className, children, ...rest }: ComponentProps<{
+    formArray?: SpsFormArray<any>;
+    formGroup?: SpsFormGroup;
+    formMeta?: SpsFormSetMeta<any>;
+    onSubmit?: React.FormEventHandler;
+    controlsDisabled?: boolean;
+    footerLinks?: React.ReactNode | (() => React.ReactNode);
+    isOpen?: boolean;
+    onClear?: () => void;
+    submitButtonText?: string;
+    compact?: boolean;
+}, HTMLDivElement>): React.ReactElement;

package/lib/index.d.ts

@@ -1,2 +1,8 @@
-export * from "@sps-woodland/core/list-bar";
+export * from "./list-bar/ListBar";
+export * from "./list-bar/ListBarSearch";
+export * from "./list-bar/ListBarSearchInfo";
+export * from "./list-bar/ListBarSortBy";
+export * from "./list-bar/InputGroupWrapper";
+export * from "./search-results-bar/SearchResultsBar";
+export * from "./advanced-search/AdvancedSearch";
 export * from "./manifest";

package/lib/index.js

@@ -1,24 +1,324 @@
-import { ListBar as i, ListBarSearch as d, ListBarSearchInfo as u, ListBarSortBy as m } from "@sps-woodland/core/list-bar";
-export * from "@sps-woodland/core/list-bar";
 import * as e from "react";
-import { code as r } from "@spscommerce/utils";
-import { AdvancedSearch as h } from "@sps-woodland/core/advanced-search";
-import { Button as p } from "@sps-woodland/core/button";
-import { SpsFocusedTask as S, SpsTable as f, SpsTableHead as v, SpsTableHeader as o, SpsTableBody as B, SpsTableRow as n, SpsTableCell as a } from "@spscommerce/ds-react";
-import { SearchResultsBar as b } from "@sps-woodland/core/search-results-bar";
-const T = {
-  components: [h],
+import { Metadata as b, modChildren as te, cl as A, selectChildren as ae, addProps as re, PortalContext as se, contentOf as ne } from "@sps-woodland/core";
+import { Button as _ } from "@sps-woodland/buttons";
+import { Tag as k } from "@sps-woodland/tags";
+import { lockToAnimationFrames as oe, code as o } from "@spscommerce/utils";
+import { SpsInputGroup as le, SpsCheckbox as ce, SpsDropdown as ie, SpsForm as de, SpsFocusedTask as ue, SpsTable as me, SpsTableHead as pe, SpsTableHeader as C, SpsTableBody as he, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
+import { useWoodlandLanguage as R } from "@spscommerce/i18n";
+import { sprinkles as Se } from "@sps-woodland/tokens";
+var fe = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc0", ve = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc1", be = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc2", _e = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc3", Be = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc4", ge = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc5", Te = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc6", Ee = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc7", Le = "pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc8";
+function F({
+  results: t,
+  selections: a,
+  zeroStateText: r,
+  onClear: s,
+  className: l,
+  children: d,
+  ...u
+}) {
+  const { t: c } = R(), h = a ? Object.keys(a).reduce((m, p) => (a[p].length > 0 && (m[p] = a[p]), m), {}) : {};
+  return /* @__PURE__ */ e.createElement("div", { className: ve, ...u }, t != null && /* @__PURE__ */ e.createElement("div", { className: be }, /* @__PURE__ */ e.createElement("span", null, c("searchResultsBar.results", { defaultValue: "Results:" })), /* @__PURE__ */ e.createElement(k, { className: _e, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: Be }, Object.keys(h).length > 0 ? Object.keys(h).map((m, p) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: p, className: ge }, m, ":"), h[m].map((B, g) => /* @__PURE__ */ e.createElement(k, { className: Te, key: g, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || c("searchResultsBar.noAdvancedSearchSelections", { defaultValue: "No Advanced Search Selections" }))), /* @__PURE__ */ e.createElement("div", { className: Ee }, /* @__PURE__ */ e.createElement(_, { className: Le, kind: "link", onClick: s }, c("searchResultsBar.clearResults", { defaultValue: "Clear Results" }))));
+}
+b.set(F, {
+  name: "Search Results Bar",
+  props: {
+    results: { type: "number | string | null" },
+    selections: { type: "{ [key: string]: string[] }" },
+    zeroStateText: { type: "string" },
+    onClear: { type: "() => void" }
+  }
+});
+function we(t, a, r) {
+  return a in t ? Object.defineProperty(t, a, {
+    value: r,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : t[a] = r, t;
+}
+function j(t, a) {
+  var r = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var s = Object.getOwnPropertySymbols(t);
+    a && (s = s.filter(function(l) {
+      return Object.getOwnPropertyDescriptor(t, l).enumerable;
+    })), r.push.apply(r, s);
+  }
+  return r;
+}
+function U(t) {
+  for (var a = 1; a < arguments.length; a++) {
+    var r = arguments[a] != null ? arguments[a] : {};
+    a % 2 ? j(Object(r), !0).forEach(function(s) {
+      we(t, s, r[s]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : j(Object(r)).forEach(function(s) {
+      Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(r, s));
+    });
+  }
+  return t;
+}
+var ye = (t, a, r) => {
+  for (var s of Object.keys(t)) {
+    var l;
+    if (t[s] !== ((l = a[s]) !== null && l !== void 0 ? l : r[s]))
+      return !1;
+  }
+  return !0;
+}, O = (t) => (a) => {
+  var r = t.defaultClassName, s = U(U({}, t.defaultVariants), a);
+  for (var l in s) {
+    var d, u = (d = s[l]) !== null && d !== void 0 ? d : t.defaultVariants[l];
+    if (u != null) {
+      var c = u;
+      typeof c == "boolean" && (c = c === !0 ? "true" : "false");
+      var h = (
+        // @ts-expect-error
+        t.variantClassNames[l][c]
+      );
+      h && (r += " " + h);
+    }
+  }
+  for (var [m, p] of t.compoundVariants)
+    ye(m, s, t.defaultVariants) && (r += " " + p);
+  return r;
+}, xe = O({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Ae = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p704", Ce = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p705", ke = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p706", Re = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p707", Fe = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p708", Oe = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p709", Me = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70a", K = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70b", Ie = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70c", Ve = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d", Ne = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70e", De = "pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70f";
+function Pe({
+  children: t
+}) {
+  const a = te(
+    t,
+    (r) => r.type === _ ? [
+      {
+        className: A(r.props.className, Ne)
+      }
+    ] : []
+  );
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, a);
+}
+function M({
+  onSubmit: t,
+  children: a
+}) {
+  function r(s) {
+    s.preventDefault(), t && t(s);
+  }
+  return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Ie, noValidate: !0 }, /* @__PURE__ */ e.createElement(le, { className: Ve }, /* @__PURE__ */ e.createElement(Pe, null, a)));
+}
+b.set(M, {
+  name: "ListBarSearch",
+  props: {
+    onSubmit: { type: "FormEventHandler" }
+  }
+});
+function I({
+  children: t
+}) {
+  return /* @__PURE__ */ e.createElement("div", null, t);
+}
+b.set(I, {
+  name: "ListBarSearchInfo"
+});
+function q({
+  advancedSearch: t,
+  onToggleAdvancedSearch: a,
+  title: r,
+  onToolbarPinned: s,
+  selectable: l,
+  isSelected: d,
+  isIndeterminate: u,
+  disableSelection: c = !1,
+  onSelectionChange: h,
+  pinResultsBar: m,
+  pinToolbar: p = !0,
+  advancedSearchToggleText: B,
+  children: g,
+  className: L,
+  ...w
+}) {
+  const { t: Y } = R();
+  let y = null;
+  const [S, V] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": N } = w, x = oe(() => {
+    if (T.current && p) {
+      const i = T.current.getBoundingClientRect();
+      if (!i)
+        return;
+      const X = Math.round(i.height), $ = Math.round(i.top), ee = Math.round(window.scrollY);
+      X > 0 && $ <= 60 && (typeof y == "number" ? ee <= y && (y = null, V(!1)) : (y = Math.round(window.scrollY), V(!0), a && a(!1)));
+    }
+  });
+  e.useEffect(() => (window.addEventListener("scroll", x), window.addEventListener("resize", x), () => {
+    window.removeEventListener("scroll", x), window.removeEventListener("resize", x);
+  }), []);
+  const E = e.useRef();
+  e.useLayoutEffect(() => {
+    if (f.current && T.current && p) {
+      if (S && E.current)
+        f.current.style.height = E.current.height, f.current.style.width = E.current.width, f.current.style.marginBottom = E.current.marginBottom;
+      else if (!S) {
+        f.current.style.height = "", f.current.style.width = "", f.current.style.marginBottom = "";
+        const i = window.getComputedStyle(T.current);
+        E.current = {
+          height: i.height,
+          width: i.width,
+          marginBottom: i.marginBottom
+        };
+      }
+    }
+  }, [S]);
+  function z() {
+    a && a(!t?.isOpen);
+  }
+  function Z(i) {
+    s && s(i);
+  }
+  e.useEffect(() => {
+    Z(S);
+  }, [S]);
+  const [
+    D,
+    J,
+    Q,
+    [P],
+    G
+  ] = ae(g, [
+    { type: M },
+    { type: I },
+    { type: F },
+    {
+      custom: (i) => b.isWoodlandComponent(i) && b.get(i).name === "Tabs"
+    }
+  ]);
+  return /* @__PURE__ */ e.createElement("div", { className: A(L), ref: f, ...w }, /* @__PURE__ */ e.createElement("div", { className: xe({ pinned: S }), ref: T }, P ? re(P, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Ae }, !!l && /* @__PURE__ */ e.createElement("div", { className: Ce }, /* @__PURE__ */ e.createElement(
+    ce,
+    {
+      checked: d,
+      disabled: c,
+      indeterminate: u,
+      onChange: () => {
+        h?.(!d);
+      }
+    }
+  )), /* @__PURE__ */ e.createElement("div", { className: ke }, !r && D, !r && J, D.length > 0 && t && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: Re,
+      "data-testid": `${N}__advanced-search`
+    },
+    /* @__PURE__ */ e.createElement("div", { className: Fe }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: z }, B ?? Y("listToolbar.advancedSearchToggle", { defaultValue: "Advanced Search" }))),
+    (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(k, { className: Oe, kind: "info", "data-testid": `${N}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
+  ), r && /* @__PURE__ */ e.createElement("div", { className: Me }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: K }, /* @__PURE__ */ e.createElement(se.Provider, { value: { fixed: !0 } }, G)) : /* @__PURE__ */ e.createElement("div", { className: K }, G)), /* @__PURE__ */ e.createElement("div", { className: fe }, (!S || m) && Q))));
+}
+b.set(q, {
+  name: "ListBar",
+  props: {
+    activeTab: { type: "Tab" },
+    advancedSearch: { type: "{ isOpen: boolean, enteredFields: number }" },
+    onToggleAdvancedSearch: { type: "(boolean) => void" },
+    title: { type: "string" },
+    onToolbarPinned: { type: "(boolean) => void" },
+    selectable: { type: "boolean" },
+    disableSelection: { type: "boolean", default: "false" },
+    isSelected: { type: "boolean" },
+    isIndeterminate: { type: "boolean" },
+    onSelectionChange: { type: "(boolean) => void" },
+    pinResultsBar: { type: "boolean" },
+    pinToolbar: { type: "boolean", default: "true" },
+    advancedSearchToggleText: { type: "string" }
+  }
+});
+function H({
+  options: t,
+  activeOption: a,
+  onSortChange: r,
+  defaultOption: s,
+  className: l,
+  ...d
+}) {
+  const u = (t || []).map((c) => [
+    { label: c.label, icon: c.icon },
+    () => {
+      r && r(c);
+    }
+  ]);
+  return /* @__PURE__ */ e.createElement(
+    ie,
+    {
+      className: A(l, De),
+      icon: a?.icon || s?.icon,
+      label: a?.label || s?.label,
+      options: u
+    }
+  );
+}
+b.set(H, {
+  name: "ListBarSortBy",
+  props: {
+    options: { type: "SortOption[]" },
+    activeOption: { type: "SortOption" },
+    onSortChange: { type: "(option: SortOption) => void" },
+    defaultOption: { type: "SortOption" }
+  }
+});
+var Ge = O({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj412" }, compact: { true: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj413", false: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj414" } }, defaultVariants: { open: !1, compact: !1 }, compoundVariants: [] }), je = O({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj415", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj416", false: "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj417" } }, defaultVariants: { open: !0 }, compoundVariants: [] }), Ue = "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj418", Ke = "pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj419";
+function W({
+  formArray: t,
+  formGroup: a,
+  formMeta: r,
+  onSubmit: s,
+  controlsDisabled: l,
+  footerLinks: d,
+  isOpen: u,
+  onClear: c,
+  submitButtonText: h,
+  compact: m,
+  className: p,
+  children: B,
+  ...g
+}) {
+  const { t: L } = R();
+  function w() {
+    c && c();
+  }
+  return /* @__PURE__ */ e.createElement("div", { className: A(Ge({ open: u, compact: m })), ...g }, /* @__PURE__ */ e.createElement(de, { onSubmit: s, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: je({ open: u }) }, B), /* @__PURE__ */ e.createElement("div", { className: Ue }, d && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, ne(d)), /* @__PURE__ */ e.createElement("div", { className: Ke }, /* @__PURE__ */ e.createElement(
+    _,
+    {
+      kind: "default",
+      type: "button",
+      className: Se({ mr: "sm" }),
+      onClick: w,
+      disabled: l
+    },
+    L("advancedSearch.clear", { defaultValue: "Clear Fields" })
+  ), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, h ?? L("advancedSearch.search", { defaultValue: "Search" }))))));
+}
+b.set(W, {
+  name: "Advanced Search",
+  props: {
+    formArray: { type: "SpsFormArray<any>" },
+    formGroup: { type: "SpsFormGroup" },
+    formMeta: { type: "SpsFormSetMeta<any>" },
+    onSubmit: { type: "React.FormEventHandler" },
+    controlsDisabled: { type: "boolean" },
+    footerLinks: { type: "React.ReactNode | (() => React.ReactNode)" },
+    isOpen: { type: "boolean" },
+    onClear: { type: "() => void" },
+    submitButtonText: { type: "string" },
+    compact: { type: "boolean" }
+  }
+});
+const qe = {
+  components: [W],
   examples: {
     general: {
       label: "General Usage",
-      description: ({ NavigateTo: t, Link: s }) => /* @__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(s, { 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.")),
       examples: {
         basic: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { grid } from "@sps-woodland/tokens";
@@ -127,7 +427,7 @@ const T = {
       description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "A Footer Link can be included in the Advanced Search footer (visible only when the menu is exposed). The Footer Link is used to link to preferences that control the Advanced Search panel display (such as customized fields and defaults).")),
       examples: {
         footerLink: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -188,7 +488,7 @@ const T = {
       description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The Search and Clear Fields buttons in the footer can be disabled when no input fields in the Advanced Search Panel contain values.")),
       examples: {
         disabledButtons: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -243,7 +543,7 @@ const T = {
       description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Certain scenarios may require an Advanced Search Panel to display by default (eschewing a basic search). In these scenarios a title will replace the search input in the List Bar."), /* @__PURE__ */ e.createElement("p", null, "To achieve an Advanced Search Only effect, remove the basic search input from the List Bar.")),
       examples: {
         withTitle: {
-          react: r`
+          react: o`
             import { ListBar, AdvancedSearch } from "@sps-woodland/list-bar";
 
             function Component() {
@@ -269,26 +569,26 @@ const T = {
     }
   }
 };
-function L() {
-  const [t, s] = e.useState(!1);
-  function l() {
-    s(!1);
+function He() {
+  const [t, a] = e.useState(!1);
+  function r() {
+    a(!1);
   }
-  function c() {
-    s(!0);
+  function s() {
+    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(p, { kind: "link", onClick: c }, "View Content Order Example"), /* @__PURE__ */ e.createElement(S, { isOpen: t, onClose: l }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement(
+  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(_, { kind: "link", onClick: s }, "View Content Order Example"), /* @__PURE__ */ e.createElement(ue, { 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(f, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(o, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(o, null, "Section"), /* @__PURE__ */ e.createElement(o, null, "Notes")), /* @__PURE__ */ e.createElement(B, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(a, null, "Checkbox"), /* @__PURE__ */ e.createElement(a, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(a, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(a, null, "Saved Search"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(a, null, "Advanced Search"), /* @__PURE__ */ e.createElement(a, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(a, null, "Column Editor"), /* @__PURE__ */ e.createElement(a, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(a, null, "List View Selector"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(a, null, "Sorting"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(a, null, "Buttons"), /* @__PURE__ */ e.createElement(a, { 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."))))));
+  ), /* @__PURE__ */ e.createElement(me, null, /* @__PURE__ */ e.createElement(pe, null, /* @__PURE__ */ e.createElement(C, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(C, null, "Section"), /* @__PURE__ */ e.createElement(C, null, "Notes")), /* @__PURE__ */ e.createElement(he, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(n, null, "Checkbox"), /* @__PURE__ */ e.createElement(n, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(n, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(n, null, "Saved Search"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(n, null, "Advanced Search"), /* @__PURE__ */ e.createElement(n, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(n, null, "Column Editor"), /* @__PURE__ */ e.createElement(n, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(n, null, "List View Selector"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(n, null, "Sorting"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(n, null, "Buttons"), /* @__PURE__ */ e.createElement(n, { 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 g = {
+const We = {
   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."),
-  components: [i, d, u, m],
+  components: [q, M, I, H],
   examples: {
     general: {
       label: "General Usage",
@@ -296,14 +596,14 @@ const g = {
     },
     contentOrder: {
       label: "Content Order",
-      description: /* @__PURE__ */ e.createElement(L, null)
+      description: /* @__PURE__ */ e.createElement(He, null)
     },
     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."),
       examples: {
         basic: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
 
             function Component() {
@@ -373,7 +673,7 @@ const g = {
       examples: {
         search: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Search"), /* @__PURE__ */ e.createElement("p", null, "Use Search to find list item(s) starting from an empty list.")),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
 
@@ -403,7 +703,7 @@ const g = {
         },
         searchAndSelect: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Search + Select"), /* @__PURE__ */ e.createElement("p", null, "Use Select to search for list item(s) in a particular category.")),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -443,7 +743,7 @@ const g = {
         },
         multiValue: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Search + Select"), /* @__PURE__ */ e.createElement("p", null, "Search + Select with a Multi-Value Text Input")),
-          react: r`
+          react: o`
           import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
           import { Button } from "@sps-woodland/buttons";
           import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -484,7 +784,7 @@ const g = {
         },
         filter: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Filter"), /* @__PURE__ */ e.createElement("p", null, "Use Filter to find list item(s) starting from a populated list.")),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -515,7 +815,7 @@ const g = {
         },
         filterAndSelect: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Filter + Select"), /* @__PURE__ */ e.createElement("p", null, "Use Select to filter list item(s) in a particular category.")),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -555,7 +855,7 @@ const g = {
         },
         searchInfo: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Search Info"), /* @__PURE__ */ e.createElement("p", null, "Use SpsListToolbarSearchInfo component to add additional information about your search.")),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, ListBarSearchInfo } from "@sps-woodland/list-bar";
             import { Icon } from "@sps-woodland/core";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -661,7 +961,7 @@ const g = {
       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: r`
+          react: o`
             import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -705,7 +1005,7 @@ const g = {
         },
         withResultsBar: {
           description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "You can include ", /* @__PURE__ */ e.createElement(t, { to: "search-results-bar" }, "Search Results Bar"), "."),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput, SpsLabel, SpsMultiselect } from "@spscommerce/ds-react";
@@ -821,7 +1121,7 @@ const g = {
         },
         pinnedResultsBar: {
           description: () => /* @__PURE__ */ e.createElement("p", null, "You can pin the Results Bar by passing pinResultsBar prop to SpsListToolbar."),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -896,7 +1196,7 @@ const g = {
       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: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             
@@ -1050,7 +1350,7 @@ const g = {
       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: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1090,7 +1390,7 @@ const g = {
       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: r`
+          react: o`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -1146,7 +1446,7 @@ const g = {
       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: r`
+          react: o`
             import { ListBar } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
 
@@ -1166,7 +1466,7 @@ const g = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Use Sort By component to sort list of rows. It looks like SpsDropdown but with sorting interface."),
       examples: {
         basic: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSortBy } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { VerticalRule } from "@sps-woodland/core";
@@ -1227,15 +1527,15 @@ const g = {
       }
     }
   }
-}, x = {
-  components: [b],
+}, Ye = {
+  components: [F],
   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.")),
       examples: {
         basic: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1307,7 +1607,7 @@ const g = {
         },
         situational: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Unknown Results Count"), /* @__PURE__ */ e.createElement("p", null, "In cases where the exact count of results is not able to be determined, Results section won't be displayed.")),
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1379,7 +1679,7 @@ const g = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "You can pass in custom text to be displayed when there are no selections."),
       examples: {
         customText: {
-          react: r`
+          react: o`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1453,11 +1753,18 @@ const g = {
       }
     }
   }
-}, F = {
-  "Advanced Search": T,
-  "List Bar": g,
-  "Search Results Bar": x
+}, tt = {
+  "Advanced Search": qe,
+  "List Bar": We,
+  "Search Results Bar": Ye
 };
 export {
-  F as MANIFEST
+  W as AdvancedSearch,
+  Pe as InputGroupWrapper,
+  q as ListBar,
+  M as ListBarSearch,
+  I as ListBarSearchInfo,
+  H as ListBarSortBy,
+  tt as MANIFEST,
+  F as SearchResultsBar
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core/list-bar"),require("react"),require("@spscommerce/utils"),require("@sps-woodland/core/advanced-search"),require("@sps-woodland/core/button"),require("@spscommerce/ds-react"),require("@sps-woodland/core/search-results-bar")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/list-bar","react","@spscommerce/utils","@sps-woodland/core/advanced-search","@sps-woodland/core/button","@spscommerce/ds-react","@sps-woodland/core/search-results-bar"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n.ListBar={},n.listBar,n.React,n.utils,n.advancedSearch,n.button,n.dsReact,n.searchResultsBar))})(this,(function(n,o,i,r,d,u,t,m){"use strict";function h(a){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(s,l,c.get?c:{enumerable:!0,get:()=>a[l]})}}return s.default=a,Object.freeze(s)}const e=h(i),p={components:[d.AdvancedSearch],examples:{general:{label:"General Usage",description:({NavigateTo:a,Link:s})=>e.createElement(e.Fragment,null,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).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(a,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(a,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),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"," ",e.createElement(s,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(a,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:a})=>e.createElement(e.Fragment,null,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 ",e.createElement(a,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:r.code`
+(function(l,B){typeof exports=="object"&&typeof module<"u"?B(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@spscommerce/i18n"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@sps-woodland/tags","@spscommerce/utils","@spscommerce/ds-react","@spscommerce/i18n","@sps-woodland/tokens"],B):(l=typeof globalThis<"u"?globalThis:l||self,B(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.i18n,l.tokens))})(this,(function(l,B,c,_,M,o,a,O,Y){"use strict";function z(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const e=z(B);var Z="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc0",J="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc1",Q="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc2",X="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc3",$="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc4",ee="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc5",te="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc6",ae="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc7",re="pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc8";function w({results:t,selections:r,zeroStateText:n,onClear:s,className:i,children:p,...m}){const{t:d}=O.useWoodlandLanguage(),f=r?Object.keys(r).reduce((h,S)=>(r[S].length>0&&(h[S]=r[S]),h),{}):{};return e.createElement("div",{className:J,...m},t!=null&&e.createElement("div",{className:Q},e.createElement("span",null,d("searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(M.Tag,{className:X,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:$},Object.keys(f).length>0?Object.keys(f).map((h,S)=>e.createElement(e.Fragment,null,e.createElement("span",{key:S,className:ee},h,":"),f[h].map((g,T)=>e.createElement(M.Tag,{className:te,key:T,kind:"key"},e.createElement("span",null,g))))):e.createElement("span",{className:"font-italic"},n||d("searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ae},e.createElement(_.Button,{className:re,kind:"link",onClick:s},d("searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(w,{name:"Search Results Bar",props:{results:{type:"number | string | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function ne(t,r,n){return r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n,t}function D(t,r){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);r&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function P(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?D(Object(n),!0).forEach(function(s){ne(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var se=(t,r,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=r[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},I=t=>r=>{var n=t.defaultClassName,s=P(P({},t.defaultVariants),r);for(var i in s){var p,m=(p=s[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(m!=null){var d=m;typeof d=="boolean"&&(d=d===!0?"true":"false");var f=t.variantClassNames[i][d];f&&(n+=" "+f)}}for(var[h,S]of t.compoundVariants)se(h,s,t.defaultVariants)&&(n+=" "+S);return n},oe=I({defaultClassName:"pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),le="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p704",ce="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p705",ie="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p706",de="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p707",ue="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p708",pe="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70a",j="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70b",he="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70c",Se="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d",fe="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70e",ve="pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70f";function G({children:t}){const r=c.modChildren(t,n=>n.type===_.Button?[{className:c.cl(n.props.className,fe)}]:[]);return e.createElement(e.Fragment,null,r)}function y({onSubmit:t,children:r}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:he,noValidate:!0},e.createElement(a.SpsInputGroup,{className:Se},e.createElement(G,null,r)))}c.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function V({advancedSearch:t,onToggleAdvancedSearch:r,title:n,onToolbarPinned:s,selectable:i,isSelected:p,isIndeterminate:m,disableSelection:d=!1,onSelectionChange:f,pinResultsBar:h,pinToolbar:S=!0,advancedSearchToggleText:g,children:T,className:A,...x}){const{t:Ce}=O.useWoodlandLanguage();let k=null;const[v,q]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":U}=x,F=o.lockToAnimationFrames(()=>{if(E.current&&S){const u=E.current.getBoundingClientRect();if(!u)return;const Me=Math.round(u.height),Oe=Math.round(u.top),Ie=Math.round(window.scrollY);Me>0&&Oe<=60&&(typeof k=="number"?Ie<=k&&(k=null,q(!1)):(k=Math.round(window.scrollY),q(!0),r&&r(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",F),window.addEventListener("resize",F),()=>{window.removeEventListener("scroll",F),window.removeEventListener("resize",F)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&S){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const u=window.getComputedStyle(E.current);L.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[v]);function Ae(){r&&r(!t?.isOpen)}function xe(u){s&&s(u)}e.useEffect(()=>{xe(v)},[v]);const[K,ke,Fe,[H],W]=c.selectChildren(T,[{type:y},{type:C},{type:w},{custom:u=>c.Metadata.isWoodlandComponent(u)&&c.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:c.cl(A),ref:b,...x},e.createElement("div",{className:oe({pinned:v}),ref:E},H?c.addProps(H,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:le},!!i&&e.createElement("div",{className:ce},e.createElement(a.SpsCheckbox,{checked:p,disabled:d,indeterminate:m,onChange:()=>{f?.(!p)}})),e.createElement("div",{className:ie},!n&&K,!n&&ke,K.length>0&&t&&e.createElement("div",{className:de,"data-testid":`${U}__advanced-search`},e.createElement("div",{className:ue},e.createElement(_.Button,{kind:"link",onClick:Ae},g??Ce("listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(M.Tag,{className:pe,kind:"info","data-testid":`${U}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:me},n)),v?e.createElement("div",{className:j},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},W)):e.createElement("div",{className:j},W)),e.createElement("div",{className:Z},(!v||h)&&Fe))))}c.Metadata.set(V,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"},advancedSearchToggleText:{type:"string"}}});function N({options:t,activeOption:r,onSortChange:n,defaultOption:s,className:i,...p}){const m=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(a.SpsDropdown,{className:c.cl(i,ve),icon:r?.icon||s?.icon,label:r?.label||s?.label,options:m})}c.Metadata.set(N,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var be=I({defaultClassName:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj412"},compact:{true:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj413",false:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj414"}},defaultVariants:{open:!1,compact:!1},compoundVariants:[]}),_e=I({defaultClassName:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj415",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj416",false:"pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj417"}},defaultVariants:{open:!0},compoundVariants:[]}),Be="pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj418",ge="pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj419";function R({formArray:t,formGroup:r,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:p,isOpen:m,onClear:d,submitButtonText:f,compact:h,className:S,children:g,...T}){const{t:A}=O.useWoodlandLanguage();function x(){d&&d()}return e.createElement("div",{className:c.cl(be({open:m,compact:h})),...T},e.createElement(a.SpsForm,{onSubmit:s,formArray:t,formGroup:r,formMeta:n},e.createElement("div",{className:_e({open:m})},g),e.createElement("div",{className:Be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:ge},e.createElement(_.Button,{kind:"default",type:"button",className:Y.sprinkles({mr:"sm"}),onClick:x,disabled:i},A("advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(_.Button,{kind:"key",type:"submit",disabled:i},f??A("advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(R,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"},submitButtonText:{type:"string"},compact:{type:"boolean"}}});const Te={components:[R],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:r})=>e.createElement(e.Fragment,null,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).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),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"," ",e.createElement(r,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,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 ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { grid } from "@sps-woodland/tokens";
@@ -98,7 +98,7 @@
                 </>
               )
             }
-          `}}},footerLink:{label:"Footer Link",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Footer Link can be included in the Advanced Search footer (visible only when the menu is exposed). The Footer Link is used to link to preferences that control the Advanced Search panel display (such as customized fields and defaults).")),examples:{footerLink:{react:r.code`
+          `}}},footerLink:{label:"Footer Link",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Footer Link can be included in the Advanced Search footer (visible only when the menu is exposed). The Footer Link is used to link to preferences that control the Advanced Search panel display (such as customized fields and defaults).")),examples:{footerLink:{react:o.code`
             import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -150,7 +150,7 @@
                 </>
               )
             }
-          `}}},disabledButtons:{label:"Disabling the Clear/Search Buttons",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Search and Clear Fields buttons in the footer can be disabled when no input fields in the Advanced Search Panel contain values.")),examples:{disabledButtons:{react:r.code`
+          `}}},disabledButtons:{label:"Disabling the Clear/Search Buttons",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Search and Clear Fields buttons in the footer can be disabled when no input fields in the Advanced Search Panel contain values.")),examples:{disabledButtons:{react:o.code`
             import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -196,7 +196,7 @@
                 </>
               )
             }
-          `}}},advancedSearchOnly:{label:'"Advanced Search Only" List Bar',description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Certain scenarios may require an Advanced Search Panel to display by default (eschewing a basic search). In these scenarios a title will replace the search input in the List Bar."),e.createElement("p",null,"To achieve an Advanced Search Only effect, remove the basic search input from the List Bar.")),examples:{withTitle:{react:r.code`
+          `}}},advancedSearchOnly:{label:'"Advanced Search Only" List Bar',description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Certain scenarios may require an Advanced Search Panel to display by default (eschewing a basic search). In these scenarios a title will replace the search input in the List Bar."),e.createElement("p",null,"To achieve an Advanced Search Only effect, remove the basic search input from the List Bar.")),examples:{withTitle:{react:o.code`
             import { ListBar, AdvancedSearch } from "@sps-woodland/list-bar";
 
             function Component() {
@@ -216,7 +216,7 @@
                 </>
               )
             }
-          `}}}}};function S(){const[a,s]=e.useState(!1);function l(){s(!1)}function c(){s(!0)}return e.createElement(e.Fragment,null,e.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),e.createElement(u.Button,{kind:"link",onClick:c},"View Content Order Example"),e.createElement(t.SpsFocusedTask,{isOpen:a,onClose:l},e.createElement("h1",null,"Content Order"),e.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),e.createElement(t.SpsTable,null,e.createElement(t.SpsTableHead,null,e.createElement(t.SpsTableHeader,{style:{width:"80px"}},"Order"),e.createElement(t.SpsTableHeader,null,"Section"),e.createElement(t.SpsTableHeader,null,"Notes")),e.createElement(t.SpsTableBody,null,e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(t.SpsTableCell,null,"Checkbox"),e.createElement(t.SpsTableCell,null,"For Content Rows and Content Tiles only.")),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(t.SpsTableCell,null,"Search/Filter Box"),e.createElement(t.SpsTableCell,null)),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(t.SpsTableCell,null,"Saved Search"),e.createElement(t.SpsTableCell,null)),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(t.SpsTableCell,null,"Advanced Search"),e.createElement(t.SpsTableCell,null,"For more information, visit the Advanced Search page.")),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(t.SpsTableCell,null,"Column Editor"),e.createElement(t.SpsTableCell,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"6")),e.createElement(t.SpsTableCell,null,"List View Selector"),e.createElement(t.SpsTableCell,null)),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"7")),e.createElement(t.SpsTableCell,null,"Sorting"),e.createElement(t.SpsTableCell,null)),e.createElement(t.SpsTableRow,null,e.createElement(t.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"8")),e.createElement(t.SpsTableCell,null,"Buttons"),e.createElement(t.SpsTableCell,{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 f={description:()=>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."),components:[o.ListBar,o.ListBarSearch,o.ListBarSearchInfo,o.ListBarSortBy],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),e.createElement("h5",null,"Avoid a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When no list is present."),e.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:e.createElement(S,null)},checkbox:{label:"Checkbox",description:({NavigateTo:a})=>e.createElement("p",null,"Use a Checkbox in the List Bar when items in a"," ",e.createElement(a,{to:"content-row"},"Content Row")," or"," ",e.createElement(a,{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:r.code`
+          `}}}}};function Ee(){const[t,r]=e.useState(!1);function n(){r(!1)}function s(){r(!0)}return e.createElement(e.Fragment,null,e.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),e.createElement(_.Button,{kind:"link",onClick:s},"View Content Order Example"),e.createElement(a.SpsFocusedTask,{isOpen:t,onClose:n},e.createElement("h1",null,"Content Order"),e.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),e.createElement(a.SpsTable,null,e.createElement(a.SpsTableHead,null,e.createElement(a.SpsTableHeader,{style:{width:"80px"}},"Order"),e.createElement(a.SpsTableHeader,null,"Section"),e.createElement(a.SpsTableHeader,null,"Notes")),e.createElement(a.SpsTableBody,null,e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(a.SpsTableCell,null,"Checkbox"),e.createElement(a.SpsTableCell,null,"For Content Rows and Content Tiles only.")),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(a.SpsTableCell,null,"Search/Filter Box"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(a.SpsTableCell,null,"Saved Search"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(a.SpsTableCell,null,"Advanced Search"),e.createElement(a.SpsTableCell,null,"For more information, visit the Advanced Search page.")),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(a.SpsTableCell,null,"Column Editor"),e.createElement(a.SpsTableCell,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"6")),e.createElement(a.SpsTableCell,null,"List View Selector"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"7")),e.createElement(a.SpsTableCell,null,"Sorting"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"8")),e.createElement(a.SpsTableCell,null,"Buttons"),e.createElement(a.SpsTableCell,{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 Le={description:()=>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."),components:[V,y,C,N],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),e.createElement("h5",null,"Avoid a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When no list is present."),e.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:e.createElement(Ee,null)},checkbox:{label:"Checkbox",description:({NavigateTo:t})=>e.createElement("p",null,"Use a Checkbox in the List Bar when items in a"," ",e.createElement(t,{to:"content-row"},"Content Row")," or"," ",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.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
 
             function Component() {
@@ -276,7 +276,7 @@
                 </>
               )
             }
-          `}}},searchAndFilter:{label:"Search + Filter Inputs",description:()=>e.createElement("p",null,"Use Search and Filter inputs to make it easier to quickly find list items."),examples:{search:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search"),e.createElement("p",null,"Use Search to find list item(s) starting from an empty list.")),react:r.code`
+          `}}},searchAndFilter:{label:"Search + Filter Inputs",description:()=>e.createElement("p",null,"Use Search and Filter inputs to make it easier to quickly find list items."),examples:{search:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search"),e.createElement("p",null,"Use Search to find list item(s) starting from an empty list.")),react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
 
@@ -302,7 +302,7 @@
                 </ListBar>
               )
             }
-          `},searchAndSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search + Select"),e.createElement("p",null,"Use Select to search for list item(s) in a particular category.")),react:r.code`
+          `},searchAndSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search + Select"),e.createElement("p",null,"Use Select to search for list item(s) in a particular category.")),react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -338,7 +338,7 @@
                 </ListBar>
               )
             }
-        `},multiValue:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search + Select"),e.createElement("p",null,"Search + Select with a Multi-Value Text Input")),react:r.code`
+        `},multiValue:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search + Select"),e.createElement("p",null,"Search + Select with a Multi-Value Text Input")),react:o.code`
           import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
           import { Button } from "@sps-woodland/buttons";
           import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -375,7 +375,7 @@
               </ListBar>
             )
           }
-        `},filter:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter"),e.createElement("p",null,"Use Filter to find list item(s) starting from a populated list.")),react:r.code`
+        `},filter:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter"),e.createElement("p",null,"Use Filter to find list item(s) starting from a populated list.")),react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -402,7 +402,7 @@
                 </ListBar>
               )
             }
-          `},filterAndSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter + Select"),e.createElement("p",null,"Use Select to filter list item(s) in a particular category.")),react:r.code`
+          `},filterAndSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter + Select"),e.createElement("p",null,"Use Select to filter list item(s) in a particular category.")),react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -438,7 +438,7 @@
                   </ListBar>
               )
             }
-          `},searchInfo:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search Info"),e.createElement("p",null,"Use SpsListToolbarSearchInfo component to add additional information about your search.")),react:r.code`
+          `},searchInfo:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search Info"),e.createElement("p",null,"Use SpsListToolbarSearchInfo component to add additional information about your search.")),react:o.code`
             import { ListBar, ListBarSearch, ListBarSearchInfo } from "@sps-woodland/list-bar";
             import { Icon } from "@sps-woodland/core";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -482,7 +482,7 @@
                 </ListBar>
               )
             }
-          `}}},advancedSearch:{label:"Advanced Search",description:({NavigateTo:a})=>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"," ",e.createElement(a,{to:"advanced-search"},"Advanced Search")," page."),examples:{advancedSearch:{react:r.code`
+          `}}},advancedSearch:{label:"Advanced Search",description:({NavigateTo:t})=>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"," ",e.createElement(t,{to:"advanced-search"},"Advanced Search")," page."),examples:{advancedSearch:{react:o.code`
             import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -522,7 +522,7 @@
                 </>
               )
             }
-          `},withResultsBar:{description:({NavigateTo:a})=>e.createElement("p",null,"You can include ",e.createElement(a,{to:"search-results-bar"},"Search Results Bar"),"."),react:r.code`
+          `},withResultsBar:{description:({NavigateTo:t})=>e.createElement("p",null,"You can include ",e.createElement(t,{to:"search-results-bar"},"Search Results Bar"),"."),react:o.code`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput, SpsLabel, SpsMultiselect } from "@spscommerce/ds-react";
@@ -634,7 +634,7 @@
                 </>
               )
             }
-          `},pinnedResultsBar:{description:()=>e.createElement("p",null,"You can pin the Results Bar by passing pinResultsBar prop to SpsListToolbar."),react:r.code`
+          `},pinnedResultsBar:{description:()=>e.createElement("p",null,"You can pin the Results Bar by passing pinResultsBar prop to SpsListToolbar."),react:o.code`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -699,7 +699,7 @@
                 </>
               )
             }
-          `}}},columnEditor:{label:"Column Editor",description:({NavigateTo:a})=>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"," ",e.createElement(a,{to:"tables"},"Tables"),", and not any other type of list view. For more information, visit the ",e.createElement(a,{to:"column-chooser"},"Column Editor")," page."),examples:{columnEditor:{react:r.code`
+          `}}},columnEditor:{label:"Column Editor",description:({NavigateTo:t})=>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"," ",e.createElement(t,{to:"tables"},"Tables"),", and not any other type of list view. For more information, visit the ",e.createElement(t,{to:"column-chooser"},"Column Editor")," page."),examples:{columnEditor:{react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             
@@ -738,7 +738,7 @@
                 </ListBar>
               )
             }
-          `}}},buttons:{label:"Buttons",description:({NavigateTo:a})=>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"," ",e.createElement(a,{to:"list-action-bar"},"List Action Bar"),"."),examples:{buttons:{react:r.code`
+          `}}},buttons:{label:"Buttons",description:({NavigateTo:t})=>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"," ",e.createElement(t,{to:"list-action-bar"},"List Action Bar"),"."),examples:{buttons:{react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -769,7 +769,7 @@
                 </ListBar>
               )
             }
-          `}}},tabs:{label:"Tabs",description:({NavigateTo:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"When tabs are included, they appear above the List Toolbar. Tab rules are outlined on the ",e.createElement(a,{to:"cards"},"Cards")," page."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabs:{react:r.code`
+          `}}},tabs:{label:"Tabs",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"When tabs are included, they appear above the List Toolbar. Tab rules are outlined on the ",e.createElement(t,{to:"cards"},"Cards")," page."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabs:{react:o.code`
             import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
@@ -816,7 +816,7 @@
                 </ListBar>
               )
             }
-          `}}},title:{label:"Title",description:({NavigateTo:a})=>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 ",e.createElement(a,{to:"advanced-search"},"Advanced Search")," page."),examples:{title:{react:r.code`
+          `}}},title:{label:"Title",description:({NavigateTo:t})=>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 ",e.createElement(t,{to:"advanced-search"},"Advanced Search")," page."),examples:{title:{react:o.code`
             import { ListBar } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
 
@@ -827,7 +827,7 @@
                 </ListBar>
               )
             }
-          `}}},sortBy:{label:"Sort By",description:()=>e.createElement("p",null,"Use Sort By component to sort list of rows. It looks like SpsDropdown but with sorting interface."),examples:{basic:{react:r.code`
+          `}}},sortBy:{label:"Sort By",description:()=>e.createElement("p",null,"Use Sort By component to sort list of rows. It looks like SpsDropdown but with sorting interface."),examples:{basic:{react:o.code`
             import { ListBar, ListBarSortBy } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { VerticalRule } from "@sps-woodland/core";
@@ -883,7 +883,7 @@
                 </ListBar>
               )
             }
-          `}}}}},b={components:[m.SearchResultsBar],examples:{basic:{label:"Basic",description:({NavigateTo:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The SearchResultsBar should be used with List Bar and Advanced Search."),e.createElement("p",null,"For more examples go to the Advanced Search section on the"," ",e.createElement(a,{to:"list-bar"},"List Bar")," page.")),examples:{basic:{react:r.code`
+          `}}}}},we={components:[w],examples:{basic:{label:"Basic",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The SearchResultsBar should be used with List Bar and Advanced Search."),e.createElement("p",null,"For more examples go to the Advanced Search section on the"," ",e.createElement(t,{to:"list-bar"},"List Bar")," page.")),examples:{basic:{react:o.code`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -951,7 +951,7 @@
                 </>
               )
             }
-          `},situational:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Unknown Results Count"),e.createElement("p",null,"In cases where the exact count of results is not able to be determined, Results section won't be displayed.")),react:r.code`
+          `},situational:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Unknown Results Count"),e.createElement("p",null,"In cases where the exact count of results is not able to be determined, Results section won't be displayed.")),react:o.code`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1014,7 +1014,7 @@
                 </>
               )
             }
-          `}}},customText:{label:"Custom Text",description:()=>e.createElement("p",null,"You can pass in custom text to be displayed when there are no selections."),examples:{customText:{react:r.code`
+          `}}},customText:{label:"Custom Text",description:()=>e.createElement("p",null,"You can pass in custom text to be displayed when there are no selections."),examples:{customText:{react:o.code`
             import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
             import { Button } from "@sps-woodland/buttons";
             import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1083,4 +1083,4 @@
                 </>
               )
             }
-          `}}}}},v={"Advanced Search":p,"List Bar":f,"Search Results Bar":b};n.MANIFEST=v,Object.keys(o).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(n,a)&&Object.defineProperty(n,a,{enumerable:!0,get:()=>o[a]})}),Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}},ye={"Advanced Search":Te,"List Bar":Le,"Search Results Bar":we};l.AdvancedSearch=R,l.InputGroupWrapper=G,l.ListBar=V,l.ListBarSearch=y,l.ListBarSearchInfo=C,l.ListBarSortBy=N,l.MANIFEST=ye,l.SearchResultsBar=w,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/lib/list-bar/InputGroupWrapper.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function InputGroupWrapper({ children, }: ComponentProps<unknown, HTMLElement>): React.ReactElement;

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

@@ -0,0 +1,38 @@
+export declare const listBarWrapper: string;
+export declare const listBar: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    pinned: {
+        true: {
+            width: `calc(${string} - (${string} * 2))`;
+            borderRadius: number;
+            transform: "translateX(-50%)";
+            position: "fixed";
+            top: string;
+            left: "50%";
+            zIndex: number;
+            selectors: {
+                "&:after": {
+                    background: "linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent)";
+                    content: "";
+                    display: "block";
+                    height: string;
+                    position: "absolute";
+                    top: "calc(100% + 1px)";
+                    width: "100%";
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const listBarContent: string;
+export declare const listBarSelectionControls: string;
+export declare const listBarSearchControls: string;
+export declare const listBarAdvSearchToggle: string;
+export declare const listBarAdvSearchToggleWrapper: string;
+export declare const listBarAdvSearchEnteredFields: string;
+export declare const listBarAdvSearchTitle: string;
+export declare const listBarHeaderContent: string;
+export declare const listBarSearchForm: string;
+export declare const listBarSearchField: string;
+export declare const inputGroupIconButton: string;
+export declare const listBarSortBy: string;

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, disableSelection, onSelectionChange, pinResultsBar, pinToolbar, advancedSearchToggleText, children, className, ...rest }: ComponentProps<{
+    advancedSearch?: {
+        isOpen: boolean;
+        enteredFields?: number;
+    };
+    onToggleAdvancedSearch?: (arg: boolean) => void;
+    title?: string;
+    onToolbarPinned?: (arg: boolean) => void;
+    selectable?: boolean;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    disableSelection?: boolean;
+    onSelectionChange?: (arg: boolean) => void;
+    pinResultsBar?: boolean;
+    pinToolbar?: boolean;
+    advancedSearchToggleText?: string;
+}, HTMLDivElement>): React.ReactElement;

package/lib/list-bar/ListBarSearch.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ListBarSearch({ onSubmit, children, }: ComponentProps<{
+    onSubmit?: React.FormEventHandler;
+}, HTMLElement>): React.ReactElement;

package/lib/list-bar/ListBarSearchInfo.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function ListBarSearchInfo({ children, }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/list-bar/ListBarSortBy.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ComponentProps, SortDirection } from "@sps-woodland/core";
+import { SpsIcon } from "@spscommerce/ds-shared";
+export interface SortOption {
+    label: string;
+    key: string;
+    direction: SortDirection;
+    icon: SpsIcon;
+}
+export declare function ListBarSortBy({ options, activeOption, onSortChange, defaultOption, className, ...rest }: ComponentProps<{
+    options?: SortOption[];
+    activeOption?: SortOption;
+    onSortChange?: (option: SortOption) => void;
+    defaultOption?: SortOption;
+}, HTMLElement>): React.ReactElement;

package/lib/search-results-bar/SearchResultsBar.css.d.ts

@@ -0,0 +1,9 @@
+export declare const searchResultsBarWrapper: string;
+export declare const searchResultsBar: string;
+export declare const searchResultsBarResults: string;
+export declare const searchResutlsBarResultsTag: string;
+export declare const searchResultsBarSelections: string;
+export declare const searchResultsBarSelection: string;
+export declare const searchResultsBarSelectionTag: string;
+export declare const searchResultsBarButtons: string;
+export declare const searchResultsBarButton: string;

package/lib/search-results-bar/SearchResultsBar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function SearchResultsBar({ results, selections, zeroStateText, onClear, className, children, ...rest }: ComponentProps<{
+    results?: number | string | null;
+    selections?: {
+        [key: string]: string[];
+    };
+    zeroStateText?: string;
+    onClear?: () => void;
+}, HTMLDivElement>): React.ReactElement;

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv1{background:#fff;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}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv2{width:calc(1280px - 2.5rem);border-radius:0;transform:translate(-50%);position:fixed;top:3.75rem;left:50%;z-index:999}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv2:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:calc(100% + 1px);width:100%}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv4{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv5{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv6{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv7{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv8{display:inline-block;position:relative}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv9{margin-left:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwva{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}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvb{display:inline-block;height:2rem;margin-left:auto;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvc{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwve{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}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwve:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvf>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvf>.sps-button>button{padding:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwve>button{height:1.875rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwva>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group{flex-wrap:nowrap}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.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}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-autocomplete:not(:first-child)>.sps-text-input>.sps-form-control{border-bottom-left-radius:0;border-top-left-radius:0;border-left:0}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-autocomplete:not(:last-child)>.sps-text-input>.sps-form-control{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd>.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}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwvd svg{margin-bottom:0}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_uzzgwv1>.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h0>.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h1{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}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h3{margin-left:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h5:first-child{margin-left:0}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h6:last-child{margin-right:0}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h7:hover{background:#d2d4d4}.pkg_sps-woodland_core__version_8_51_2__hash_1o1g57h8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc0{background:#fff;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}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc1,.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc3{display:block}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc5{padding:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc7{display:none}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc8{background:#f3f4f4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;display:flex;padding:.5rem}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc9{text-align:right}.pkg_sps-woodland_core__version_8_51_2__hash_am9pfc8>*{flex:1}
+.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p701{background:#fff;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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p702{width:calc(1280px - 2.5rem);border-radius:0;transform:translate(-50%);position:fixed;top:3.75rem;left:50%;z-index:999}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:calc(100% + 1px);width:100%}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70b{display:inline-block;height:2rem;margin-left:auto;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group{flex-wrap:nowrap}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_52_0__hash_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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child)>.sps-text-input>.sps-form-control{border-bottom-left-radius:0;border-top-left-radius:0;border-left:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child)>.sps-text-input>.sps-form-control{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}.pkg_sps-woodland_list-bar__version_8_52_0__hash_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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_52_0__hash_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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_52_0__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj410{background:#fff;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}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj411,.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj413{display:block}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj415{padding:1rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj417{display:none}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj418{background:#f3f4f4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;display:flex;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj419{text-align:right}.pkg_sps-woodland_list-bar__version_8_52_0__hash_q4fj418>*{flex:1}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/list-bar",
   "description": "SPS Woodland Design System list bar components",
-  "version": "8.51.2",
+  "version": "8.52.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
@@ -17,7 +17,6 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
-    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -27,24 +26,38 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@react-stately/collections": "^3.0.0",
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@sps-woodland/core": "8.51.2",
-    "@spscommerce/ds-react": "8.51.2"
+    "@sps-woodland/buttons": "8.52.0",
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tabs": "8.52.0",
+    "@sps-woodland/tags": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/ds-react": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "devDependencies": {
+    "@react-stately/collections": "3.12.10",
     "@spscommerce/utils": "9.0.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.51.2",
-    "@spscommerce/ds-react": "8.51.2"
+    "@sps-woodland/buttons": "8.52.0",
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tabs": "8.52.0",
+    "@sps-woodland/tags": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/ds-react": "8.52.0",
+    "@spscommerce/ds-shared": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
+    "build": "pnpm run build:js && pnpm run build:types",
     "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
-    "build:css": "cp ../core/lib/list-bar/style.css lib/style.css 2>/dev/null || echo 'list-bar style.css not found, skipping'",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.mjs"

package/vite.config.mjs

@@ -1,24 +1,31 @@
 import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
-// List-bar is now a wrapper package that re-exports from @sps-woodland/core.
-// No vanilla-extract needed - CSS is provided by the mono-package.
-
-const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
 
 export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "ListBar",
       fileName: "index",
+      cssFileName: "style",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      // External must match subpath imports like @sps-woodland/core/list-bar
-      external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
     },
   },
 });