@wix/patterns 1.451.0 → 1.453.0

package/dist/docs/usePickerContent.md

@@ -19,26 +19,40 @@ import { usePickerContent } from '@wix/patterns';
 ### Example
 
 ```tsx
-import { usePickerContent, PickerContent } from '@wix/patterns';
-
-const MyPickerContent = ({ modalState }) => {
-  const contentState = usePickerContent({
-    modalState,
-    filters: { status: stringFilter() },
-    fetchData: (query) => fetchItems(query),
+import React from 'react';
+import {
+  PickerContent,
+  PickerContentComponentProps,
+  usePickerContent,
+} from '@wix/patterns';
+
+interface Item {
+  id: string;
+  name: string;
+  status: string;
+}
+
+// A PickerModal renders this component as its `pickerContentComponent` and
+// supplies `modalState` through props — the content hook never builds it, and
+// it does not take `fetchData`: the modal owns fetching.
+function ItemsPickerContent(props: PickerContentComponentProps<Item>) {
+  const state = usePickerContent({
+    modalState: props.modalState,
+    fetchErrorMessage: ({ err }) => String(err),
     itemKey: (item) => item.id,
     itemName: (item) => item.name,
   });
 
   return (
     <PickerContent
-      state={contentState}
-      columns={[
-        { title: 'Name', render: (item) => item.name },
-      ]}
+      state={state}
+      renderItem={(item) => ({ subtitle: item.status })}
+      {...props}
     />
   );
-};
+}
+
+export default ItemsPickerContent;
 ```
 
 ### Returns

package/dist/docs/usePickerModal.md

@@ -25,22 +25,104 @@ import { usePickerModal } from '@wix/patterns/essentials';
 ### Example
 
 ```tsx
-import { usePickerModal, PickerModal } from '@wix/patterns/bm';
-
-const pickerState = usePickerModal({
-  queryName: 'my-picker',
-  fetchData: (query) => fetchItems(query),
-  limit: 50,
-  onSelect: (items) => handleSelect(items),
-  pickerContentComponent: () => import('./MyPickerContent'),
-});
-
-return (
-  <>
-    <button onClick={pickerState.open}>Open Picker</button>
-    <PickerModal state={pickerState} />
-  </>
-);
+import { Avatar, EmptyState, Page } from '@wix/design-system';
+import React from 'react';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerContent,
+  PickerContentComponentProps,
+  PickerModal,
+  PickerModalOpenButton,
+  usePickerContent,
+} from '@wix/patterns';
+import {
+  WixPatternsEssentialsProvider,
+  usePickerModal,
+} from '@wix/patterns/essentials';
+import { useHttpClient } from '@wix/fe-essentials/react';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+
+function PickerModalSingleSelectExample() {
+  const httpClient = useHttpClient();
+
+  // Usually we will extract this component to a separate file and use dynamic import when passing it as `pickerContentComponent`
+  const pickerContentComponent = async () => ({
+    default: function ContactsPicker(
+      props: PickerContentComponentProps<Contact>,
+    ) {
+      const state = usePickerContent({
+        modalState: props.modalState,
+        fetchErrorMessage: ({ err }) => String(err),
+        itemName: (contact) => contact.id as string,
+      });
+
+      return (
+        // wrap with a provider that suits your environment
+        <WixPatternsEssentialsProvider>
+          <PickerContent
+            state={state}
+            renderItem={(contact) => ({
+              subtitle: contact.level,
+              image: (
+                <Avatar size="size60" shape="square" name={contact.name} />
+              ),
+            })}
+            renderEmptyState={() => (
+              <EmptyState title="You don’t have any contacts that support this action." />
+            )}
+            {...props}
+          />
+        </WixPatternsEssentialsProvider>
+      );
+    },
+  });
+
+  const state = usePickerModal<Contact>({
+    queryName: 'PickerModalSingleSelectExample',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts, pagingMetadata } }) => ({
+          items: contacts as Contact[],
+          total: pagingMetadata?.total,
+        }));
+    },
+    limit: 25,
+    // Usually we will use dynamic import, i.e pickerContentComponent: () => import('./ContactsPicker')
+    pickerContentComponent,
+    onSelect: (_contacts) => {
+      // Do something with contacts
+    },
+  });
+
+  return (
+    <Page>
+      <Page.Header
+        title="Picker Modal Example"
+        actionsBar={
+          <>
+            <PickerModalOpenButton state={state}>
+              Select a Contact
+            </PickerModalOpenButton>
+
+            <PickerModal
+              title="Select a Contact"
+              state={state}
+              renderError={(err) => <EmptyState title={String(err)} />}
+            />
+          </>
+        }
+      />
+    </Page>
+  );
+}
 ```
 
 ### Returns

package/dist/docs/usePickerStandalone.md

@@ -21,25 +21,55 @@ import { usePickerStandalone } from '@wix/patterns';
 ### Example
 
 ```tsx
-import { usePickerStandalone, PickerStandalone } from '@wix/patterns';
-
-const state = usePickerStandalone({
-  queryName: 'site-picker',
-  fetchData: (query) => fetchSites(query),
-  itemKey: (site) => site.id,
-  itemName: (site) => site.name,
-  limit: 20,
-  defaultDestinationUrl: (site) => `/site/${site.id}/dashboard`,
-});
-
-return (
-  <PickerStandalone
-    state={state}
-    columns={[
-      { title: 'Site Name', render: (site) => site.name },
-    ]}
-  />
-);
+import React from 'react';
+import { EmptyState } from '@wix/design-system';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  OffsetQuery,
+  PickerStandalone,
+  usePickerStandalone,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/fe-essentials/react';
+
+function Basic() {
+  const httpClient = useHttpClient();
+
+  const fetchData = (query: OffsetQuery) => {
+    const { limit, offset, search } = query;
+    return httpClient
+      .request(
+        queryContacts({
+          query: { paging: { limit, offset } },
+          search,
+        }),
+      )
+      .then(({ data: { contacts, pagingMetadata } }) => ({
+        items: contacts || [],
+        total: pagingMetadata?.total,
+      }));
+  };
+
+  const state = usePickerStandalone({
+    queryName: 'picker-standalone-basic',
+    fetchData,
+    limit: 25,
+    defaultDestinationUrl: 'https://www.wix.com',
+    fetchErrorMessage: () => 'Error fetching contacts',
+    itemName: (contact) => contact.name as string,
+  });
+
+  return (
+    <PickerStandalone
+      height="666px"
+      defaultTitle="Select a Contact"
+      state={state}
+      renderError={() => <EmptyState title="Error has occured" />}
+      renderEmptyState={() => (
+        <EmptyState title="You don't have any contacts that support this action." />
+      )}
+    />
+  );
+}
 ```
 
 ### Returns

package/dist/docs/useSettingsPage.md

@@ -9,33 +9,54 @@
 A React hook that creates the state for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Configure settings fetching, save/cancel flow, form integration, and toasts. The returned [`SettingsPageState`](./?path=/story/base-components-pages-settings-page-state--settingspagestate) is passed to `<SettingsPage state={state}>`.
 
 ```tsx
-import { useSettingsPage } from '@wix/patterns/page';
+import { useSettingsPage } from '@wix/patterns';
 ```
 
 ### Example
 
 ```tsx
-import { useSettingsPage, SettingsPage } from '@wix/patterns/page';
-import { useForm } from 'react-hook-form';
-
-const form = useForm({ defaultValues: { notifications: true } });
-
-const state = useSettingsPage({
-  fetch: () => api.getSettings().then((settings) => ({ settings })),
-  onSave: () => api.saveSettings(form.getValues()),
-  onCancel: () => form.reset(),
-  form,
-  container,
-});
-
-return (
-  <SettingsPage state={state}>
-    <SettingsPage.Header title={{ text: 'Settings' }} />
-    <SettingsPage.Content>
-      <SettingsPage.MainContent>...</SettingsPage.MainContent>
-    </SettingsPage.Content>
-  </SettingsPage>
-);
+import React from 'react';
+import { SettingsPage, useSettingsPage } from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+
+interface Settings {
+  notifications?: boolean;
+}
+
+interface SettingsFormFields {
+  notifications?: boolean;
+}
+
+const api = {
+  getSettings: (): Promise<Settings> =>
+    Promise.resolve({ notifications: true }),
+  saveSettings: (values: SettingsFormFields): Promise<void> =>
+    Promise.resolve(),
+};
+
+function AppSettings() {
+  const form = useForm<SettingsFormFields>({
+    defaultValues: { notifications: true },
+  });
+
+  const state = useSettingsPage<Settings, SettingsFormFields>({
+    form,
+    fetch: () => api.getSettings().then((settings) => ({ settings })),
+    onSave: () => api.saveSettings(form.getValues()),
+    onCancel: async () => form.reset(),
+  });
+
+  return (
+    <SettingsPage state={state}>
+      <SettingsPage.Header title={{ text: 'Settings' }} />
+      <SettingsPage.Content>
+        <SettingsPage.MainContent>...</SettingsPage.MainContent>
+      </SettingsPage.Content>
+    </SettingsPage>
+  );
+}
+
+export default AppSettings;
 ```
 
 ### Returns

package/dist/docs/useSettingsPageContext.md

@@ -15,11 +15,22 @@ import { useSettingsPageContext } from '@wix/patterns/page';
 ### Example
 
 ```tsx
-function MySettingsCard() {
-  const state = useSettingsPageContext();
-  // Access state.form, state.settings, etc.
+import React from 'react';
+import { useSettingsPageContext } from '@wix/patterns';
+
+interface AppSettings {
+  theme?: string;
+}
+
+// Rendered inside `<SettingsPage>`, which provides the state. Pass the
+// settings type so `state.settings` is typed rather than `unknown`.
+function ThemeSummary() {
+  const state = useSettingsPageContext<AppSettings>();
+
   return <div>Current value: {state.settings?.theme}</div>;
 }
+
+export default ThemeSummary;
 ```
 
 ### Returns

package/dist/esm/components/CardContainer/CardContainer.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CardContainer1711673602";
+var _namespace_ = "CardContainer3859071318";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CardContainer1711673602__root" };
+export var classes = { "root": "CardContainer3859071318__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/CmsFieldForm.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CmsFieldForm1619626514";
+var _namespace_ = "CmsFieldForm2475567086";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CmsFieldForm1619626514__root", "fullBleedDivider": "CmsFieldForm1619626514__fullBleedDivider" };
+export var classes = { "root": "CmsFieldForm2475567086__root", "fullBleedDivider": "CmsFieldForm2475567086__fullBleedDivider" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/CmsFieldModal.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CmsFieldModal105335989";
+var _namespace_ = "CmsFieldModal106183385";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CmsFieldModal105335989__root", "modal": "CmsFieldModal105335989__modal" };
+export var classes = { "root": "CmsFieldModal106183385__root", "modal": "CmsFieldModal106183385__modal" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "ValidationAndDefaultsSection2151930754";
+var _namespace_ = "ValidationAndDefaultsSection1171344576";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ValidationAndDefaultsSection2151930754__root", "accordionWrapper": "ValidationAndDefaultsSection2151930754__accordionWrapper" };
+export var classes = { "root": "ValidationAndDefaultsSection1171344576__root", "accordionWrapper": "ValidationAndDefaultsSection1171344576__accordionWrapper" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "CharactersLimitInput1111158472";
+var _namespace_ = "CharactersLimitInput3463036576";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CharactersLimitInput1111158472__root", "field": "CharactersLimitInput1111158472__field" };
+export var classes = { "root": "CharactersLimitInput3463036576__root", "field": "CharactersLimitInput3463036576__field" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/Collapse/Collapse.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "Collapse2578313290";
+var _namespace_ = "Collapse251554959";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "Collapse2578313290__root", "exit": "Collapse2578313290__exit" };
+export var classes = { "root": "Collapse251554959__root", "exit": "Collapse251554959__exit" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/Collapse/Collapse.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.st.css.js","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,oBAAoB,CAAC;AACvC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,0BAA0B,EAAC,MAAM,EAAC,0BAA0B,EAAC,CAAC;AAC3F,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Collapse.st.css.js","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,mBAAmB,CAAC;AACtC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yBAAyB,EAAC,MAAM,EAAC,yBAAyB,EAAC,CAAC;AACzF,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionPageNew/CollectionPage.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionPage2659306423";
+var _namespace_ = "CollectionPage1540807970";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionPage2659306423__root" };
+export var classes = { "root": "CollectionPage1540807970__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionSectionHeader/CollectionSectionHeader.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionSectionHeader4091900070";
+var _namespace_ = "CollectionSectionHeader2007563928";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionSectionHeader4091900070__root", "summaryIcon": "CollectionSectionHeader4091900070__summaryIcon" };
+export var classes = { "root": "CollectionSectionHeader2007563928__root", "summaryIcon": "CollectionSectionHeader2007563928__summaryIcon" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionTable/CollectionTable.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionTable2559767121";
+var _namespace_ = "CollectionTable782966818";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionTable2559767121__root" };
+export var classes = { "root": "CollectionTable782966818__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionTable/CollectionTable.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionTable.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionTable/CollectionTable.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,2BAA2B,CAAC;AAC9C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,iCAAiC,EAAC,CAAC;AAChE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CollectionTable.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionTable/CollectionTable.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,0BAA0B,CAAC;AAC7C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,gCAAgC,EAAC,CAAC;AAC/D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionTable/CollectionTableWSRTable.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionTableWSRTable1739376777";
+var _namespace_ = "CollectionTableWSRTable1279013635";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionTableWSRTable1739376777__root" };
+export var classes = { "root": "CollectionTableWSRTable1279013635__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/CollectionToolbar.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionToolbar1999452434";
+var _namespace_ = "CollectionToolbar3867150910";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionToolbar1999452434__root", "right": "CollectionToolbar1999452434__right", "left": "CollectionToolbar1999452434__left", "fullWidth": "CollectionToolbar1999452434__fullWidth" };
+export var classes = { "root": "CollectionToolbar3867150910__root", "right": "CollectionToolbar3867150910__right", "left": "CollectionToolbar3867150910__left", "fullWidth": "CollectionToolbar3867150910__fullWidth" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "SearchOrCustomFilter1081706242";
+var _namespace_ = "SearchOrCustomFilter4090117436";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "SearchOrCustomFilter1081706242__root", "search": "SearchOrCustomFilter1081706242__search", "searchMobile": "SearchOrCustomFilter1081706242__searchMobile" };
+export var classes = { "root": "SearchOrCustomFilter4090117436__root", "search": "SearchOrCustomFilter4090117436__search", "searchMobile": "SearchOrCustomFilter4090117436__searchMobile" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "AutoCompleteReadonly2673029047";
+var _namespace_ = "AutoCompleteReadonly162160696";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "AutoCompleteReadonly2673029047__root" };
+export var classes = { "root": "AutoCompleteReadonly162160696__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteReadonly.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,gCAAgC,CAAC;AACnD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,sCAAsC,EAAC,CAAC;AACrE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"AutoCompleteReadonly.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,+BAA+B,CAAC;AAClD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,qCAAqC,EAAC,CAAC;AACpE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionViewsDropdown/ViewsDropdown.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "ViewsDropdown2530193959";
+var _namespace_ = "ViewsDropdown157735629";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "ViewsDropdown2530193959__root" };
+export var classes = { "root": "ViewsDropdown157735629__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionViewsDropdown/ViewsDropdown.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsDropdown.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,+BAA+B,EAAC,CAAC;AAC9D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"ViewsDropdown.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,wBAAwB,CAAC;AAC3C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,8BAA8B,EAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/DragHandle/DragHandle.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "DragHandle4221686578";
+var _namespace_ = "DragHandle149037677";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "DragHandle4221686578__root" };
+export var classes = { "root": "DragHandle149037677__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/DragHandle/DragHandle.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.st.css.js","sourceRoot":"","sources":["../../../../src/components/DragHandle/DragHandle.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,sBAAsB,CAAC;AACzC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,4BAA4B,EAAC,CAAC;AAC3D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"DragHandle.st.css.js","sourceRoot":"","sources":["../../../../src/components/DragHandle/DragHandle.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,qBAAqB,CAAC;AACxC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,2BAA2B,EAAC,CAAC;AAC1D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/EditableTable/EditableCell.st.css

@@ -199,3 +199,10 @@
     0 6px 6px rgba(0, 6, 36, 0.05)
   );
 }
+
+/* The bottom row has no space below it — the message would be clipped
+   at the table's edge, so it flips above the cell. */
+:global(tr:last-child) .errorMessage {
+  top: auto;
+  bottom: calc(100% + 4px);
+}