@wix/patterns 1.360.0 → 1.364.0

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -1,11 +1,10 @@
 import {
   Box,
-  CounterBadge,
   Dropdown,
-  Heading,
   Text,
   TableListItem,
   listItemSelectBuilder,
+  SectionHelper,
 } from '@wix/design-system';
 import { ArrowRight } from '@wix/wix-ui-icons-common';
 import { ImportState } from '@wix/bex-core';
@@ -21,11 +20,12 @@ const COLUMN_WIDTHS = {
   arrow: '1fr',
   field: 'minmax(0, 250px)',
 };
+const SCROLLBAR_GUTTER: React.CSSProperties = { scrollbarGutter: 'stable' };
 
 function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
-  const dropdownOptions = fields
+  const baseDropdownOptions = fields
     .filter((field) => field.id != null)
     .map((field) =>
       listItemSelectBuilder({
@@ -35,28 +35,25 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
       }),
     );
 
+  const { selectedFieldIds } = state;
+
+  const hasNoRows = state.csvRows.length === 0;
+
   return (
-    <Box direction="vertical" dataHook="import-mapping-step">
-      <Box
-        direction="horizontal"
-        gap="SP2"
-        verticalAlign="middle"
-        paddingLeft="SP4"
-        paddingRight="SP4"
-        paddingTop="SP1"
-        paddingBottom="SP2"
-      >
-        <Heading size="small">{t('cairo.import.columnsFound')}</Heading>
-        <CounterBadge
-          size="medium"
-          skin="neutralLight"
-          dataHook="import-columns-found-counter"
-        >
-          {csvHeaders.length}
-        </CounterBadge>
-      </Box>
+    <Box direction="vertical" dataHook="import-mapping-step" gap="SP3">
+      {hasNoRows && (
+        <Box padding="0 SP4">
+          <SectionHelper
+            dataHook="import-no-rows-warning"
+            skin="warning"
+            title={t('cairo.import.noRowsWarningTitle')}
+          >
+            {t('cairo.import.noRowsWarningDescription')}
+          </SectionHelper>
+        </Box>
+      )}
 
-      <div style={{ overflowY: 'auto', maxHeight: '340px' }}>
+      <Box direction="vertical" flex={1} minHeight={0}>
         <Box
           display="grid"
           direction="horizontal"
@@ -65,7 +62,8 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
           backgroundColor="var(--wds-color-fill-surface-neutral,var(--wsr-color-D75, #F7F8F8))"
           boxShadow="inset 0 1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB)), inset 0 -1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))"
           gridTemplateColumns={`${COLUMN_WIDTHS.title} ${COLUMN_WIDTHS.arrow} ${COLUMN_WIDTHS.field}`}
-          style={{ position: 'sticky', top: 0, zIndex: 1 }}
+          flexShrink={0}
+          style={SCROLLBAR_GUTTER}
         >
           <Box minWidth={0} direction="vertical">
             <Text size="small" weight="thin" ellipsis>
@@ -82,56 +80,68 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
           </Box>
         </Box>
 
-        {csvHeaders.map((header) => (
-          <TableListItem
-            key={header}
-            showDivider
-            options={[
-              {
-                value: (
-                  <Text ellipsis size="small">
-                    {header}
-                  </Text>
-                ),
-                width: COLUMN_WIDTHS.title,
-              },
-              {
-                value: (
-                  <Box align="center">
-                    <ArrowRight />
-                  </Box>
-                ),
-                width: COLUMN_WIDTHS.arrow,
-              },
-              {
-                value: (
-                  <Dropdown
-                    dataHook={`import-mapping-${header}`}
-                    clearButton
-                    onClear={() => {
-                      state.setMapping(header, null);
-                    }}
-                    placeholder={t('cairo.import.skipColumn')}
-                    selectedId={state.mappingByHeader[header] ?? undefined}
-                    onSelect={({ id }) => {
-                      state.setMapping(header, id as string);
-                    }}
-                    popoverProps={{
-                      appendTo: 'window',
-                      zIndex: 5001,
-                      flip: true,
-                      fixed: false,
-                    }}
-                    options={dropdownOptions}
-                    size="small"
-                  />
-                ),
-                width: COLUMN_WIDTHS.field,
-              },
-            ]}
-          />
-        ))}
-      </div>
+        <Box
+          direction="vertical"
+          overflowY="auto"
+          maxHeight={hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)'}
+          style={SCROLLBAR_GUTTER}
+        >
+          {csvHeaders.map((header, index) => (
+            <TableListItem
+              key={header}
+              showDivider={index < csvHeaders.length - 1}
+              options={[
+                {
+                  value: (
+                    <Text ellipsis size="small">
+                      {header}
+                    </Text>
+                  ),
+                  width: COLUMN_WIDTHS.title,
+                },
+                {
+                  value: (
+                    <Box align="center">
+                      <ArrowRight />
+                    </Box>
+                  ),
+                  width: COLUMN_WIDTHS.arrow,
+                },
+                {
+                  value: (
+                    <Dropdown
+                      dataHook={`import-mapping-${header}`}
+                      clearButton
+                      onClear={() => {
+                        state.setMapping(header, null);
+                      }}
+                      placeholder={t('cairo.import.skipColumn')}
+                      selectedId={state.mappingByHeader[header] ?? undefined}
+                      onSelect={({ id }) => {
+                        state.setMapping(header, id as string);
+                      }}
+                      popoverProps={{
+                        appendTo: 'window',
+                        zIndex: 5001,
+                        flip: true,
+                        fixed: false,
+                      }}
+                      options={baseDropdownOptions.map((option) => ({
+                        ...option,
+                        disabled:
+                          selectedFieldIds.has(String(option.id)) &&
+                          state.mappingByHeader[header] !== String(option.id),
+                      }))}
+                      size="small"
+                    />
+                  ),
+                  width: COLUMN_WIDTHS.field,
+                },
+              ]}
+            />
+          ))}
+        </Box>
+      </Box>
     </Box>
   );
 }

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload3823422815";
+var _namespace_ = "ImportStepUpload2190126313";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload3823422815__root","fileUpload":"ImportStepUpload3823422815__fileUpload"};
+export var classes = {"root":"ImportStepUpload2190126313__root","fileUpload":"ImportStepUpload2190126313__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepper.tsx

@@ -38,9 +38,19 @@ function _ImportStepper({ state, removeContentPadding }: ImportStepperProps) {
 
   const contentPadding = removeContentPadding ? undefined : 'SP4';
 
+  const handleStepClick = (stepIndex: number) => {
+    if (stepIndex < activeStep) {
+      state.discardAndGoBack();
+    }
+  };
+
   return (
     <Box paddingLeft={contentPadding} paddingRight={contentPadding}>
-      <Stepper activeStep={activeStep} steps={steps} />
+      <Stepper
+        activeStep={activeStep}
+        steps={steps}
+        onClick={handleStepClick}
+      />
     </Box>
   );
 }

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -1,6 +1,8 @@
 import {
   Box,
+  CounterBadge,
   CustomModalLayoutProps,
+  Heading,
   Text,
   TextButton,
 } from '@wix/design-system';
@@ -12,10 +14,12 @@ import { ImportStepProgress } from './ImportStepProgress';
 
 export interface GetImportModalStepProps {
   state: ImportState;
+  isMobile?: boolean;
 }
 
 export function getImportModalStepProps({
   state,
+  isMobile,
 }: GetImportModalStepProps): Partial<
   CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
 > {
@@ -43,25 +47,61 @@ export function getImportModalStepProps({
   }
 
   if (currentStep === 'configuration') {
+    const handleClose = () => state.discardAndClose();
+
     return {
       removeContentPadding: true,
-      title: t('cairo.import.configureMappingsTitle'),
+      title: isMobile ? (
+        <Box gap="SP1" verticalAlign="middle" direction="horizontal">
+          {t('cairo.import.configureMappingsTitle')}
+          <CounterBadge
+            size="medium"
+            skin="neutralLight"
+            dataHook="import-columns-found-counter"
+          >
+            {state.csvHeaders.length}
+          </CounterBadge>
+        </Box>
+      ) : (
+        <Box gap="SP1" verticalAlign="middle" direction="horizontal">
+          <Heading size="medium">
+            {t('cairo.import.configureMappingsTitle')}
+          </Heading>
+          <CounterBadge
+            size="medium"
+            skin="neutralLight"
+            dataHook="import-columns-found-counter"
+          >
+            {state.csvHeaders.length}
+          </CounterBadge>
+        </Box>
+      ),
       subtitle: t('cairo.import.subtitle'),
       children: <ImportStepConfiguration state={state} />,
       showFooterDivider: true,
       primaryButtonText: t('cairo.import.startImport'),
-      primaryButtonOnClick: state.startImport,
-      primaryButtonProps: { disabled: !state.hasMappings },
-      secondaryButtonText: t('cairo.import.back'),
-      secondaryButtonOnClick: state.goToUpload,
-      closeButtonProps: { onClick: state.close, autoFocus: true },
-      onRequestClose: state.close,
+      primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,
+      ...(isMobile
+        ? { primaryButtonProps: { disabled: !state.hasMappings } }
+        : {
+            primaryButtonTooltipProps: !state.hasMappings
+              ? { content: t('cairo.import.noMappingsTooltip') }
+              : undefined,
+          }),
+      secondaryButtonText: t('cairo.import.cancel'),
+      secondaryButtonOnClick: handleClose,
+      closeButtonProps: {
+        onClick: handleClose,
+        autoFocus: true,
+      },
+      onRequestClose: handleClose,
     };
   }
 
   return {
     title: t('cairo.import.progressTitle'),
     children: <ImportStepProgress state={state} />,
+    showFooterDivider: false,
     primaryButtonText: t('cairo.import.importing'),
     primaryButtonProps: { disabled: true },
     secondaryButtonText: state.isRestoring

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow2702296081";
+var _namespace_ = "InputOverflow202707770";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow2702296081__root"};
+export var classes = {"root":"InputOverflow202707770__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Kanban/Kanban.tsx

@@ -99,7 +99,7 @@ function _Kanban<C, S, F extends FiltersMap>(props: KanbanProps<C, S, F>) {
 
   return (
     <CollectionCard errorState={false} state={toolbar} dataHook={dataHook}>
-      <ToolbarCollection search={true} sticky state={toolbar}>
+      <ToolbarCollection search={true} sticky state={toolbar} filters={props.filters}>
         {/* hack for showing manage tags action in more actions menu */}
         <Box
           dataHook="kanban-tags-container"

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1261929484";
+var _namespace_ = "LoadingRow3461175397";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow1261929484__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1261929484__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3461175397__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3461175397__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText4035389596";
+var _namespace_ = "MaxHeightText216893253";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText4035389596__root"};
+export var classes = {"root":"MaxHeightText216893253__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines2995177162";
+var _namespace_ = "MaxLines1284639450";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines2995177162__root"};
+export var classes = {"root":"MaxLines1284639450__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2064943119";
+var _namespace_ = "MultiBulkActionToolbar791660869";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar2064943119__root","leftGroupWrapper":"MultiBulkActionToolbar2064943119__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2064943119__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2064943119__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar791660869__root","leftGroupWrapper":"MultiBulkActionToolbar791660869__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar791660869__selectedCountItem","selectedCountText":"MultiBulkActionToolbar791660869__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow312175470";
+var _namespace_ = "NestedTablePlaceholderStatesRow2310651378";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow312175470__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2310651378__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow3006676076";
+var _namespace_ = "NestedTableRow2704827787";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow3006676076__root","firstLevel":"NestedTableRow3006676076__firstLevel","placeholder":"NestedTableRow3006676076__placeholder","parentHovered":"NestedTableRow3006676076__parentHovered"};
+export var classes = {"root":"NestedTableRow2704827787__root","firstLevel":"NestedTableRow2704827787__firstLevel","placeholder":"NestedTableRow2704827787__placeholder","parentHovered":"NestedTableRow2704827787__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/useFlatModeColumns.tsx

@@ -26,7 +26,7 @@ export function useFlatModeColumns<C extends string>(
 
   const { selectedOrderedColumnsOrAll } = toolbar;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: toolbar.showFieldTypeIcons });
 
   const actionCellColumn = useNestedTableActionCell({
     state: state.flat,

package/src/components/NestedTable/useNestedModeColumns.tsx

@@ -34,7 +34,7 @@ export function useNestedModeColumns<C extends string>(
 
   const { selectedOrderedColumnsOrAll } = toolbar;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: toolbar.showFieldTypeIcons });
 
   const actionCellColumn = useNestedTableActionCell({
     state: state.nested,

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect2550722252";
+var _namespace_ = "MultipleDragOverlayEffect1637060963";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect2550722252__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1637060963__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow139061198";
+var _namespace_ = "NestedTableDragAndDropRow11113410";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow139061198__root"};
+export var classes = {"root":"NestedTableDragAndDropRow11113410__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1028485228";
+var _namespace_ = "PickerContent1005862874";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent1028485228__root"};
+export var classes = {"root":"PickerContent1005862874__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1033988613";
+var _namespace_ = "PickerContentAdditionalStep1256051322";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep1033988613__root","titles":"PickerContentAdditionalStep1033988613__titles","suffix":"PickerContentAdditionalStep1033988613__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1256051322__root","titles":"PickerContentAdditionalStep1256051322__titles","suffix":"PickerContentAdditionalStep1256051322__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem1059866670";
+var _namespace_ = "PickerTableListItem1960942270";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem1059866670__root"};
+export var classes = {"root":"PickerTableListItem1960942270__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2688783039";
+var _namespace_ = "ScrollableContent4102213427";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent2688783039__root"};
+export var classes = {"root":"ScrollableContent4102213427__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3914436236";
+var _namespace_ = "SkeletonCard543860056";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard3914436236__root","headerLoading":"SkeletonCard3914436236__headerLoading"};
+export var classes = {"root":"SkeletonCard543860056__root","headerLoading":"SkeletonCard543860056__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal2539920394";
+var _namespace_ = "SlidingModal3880889394";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal2539920394__root"};
+export var classes = {"root":"SlidingModal3880889394__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};