@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/favorites/components/List/List.d.ts

@@ -26,8 +26,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
         useGetFavoriteIdsPipeline: boolean;
     };
 }, {
-    id: string;
     name: string;
+    id: string;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     removeItem: (...args: any[]) => any;

package/favorites/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAwEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBArED,YAAY"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../favorites/components/List/List.jsx"],"names":[],"mappings":";;;;;;;;;;;QAuEY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBApED,YAAY"}

package/favorites/components/List/List.js

@@ -15,7 +15,6 @@ const useStyles = makeStyles()(theme => ({
     margin: '8px 8px 10px'
   },
   rootNoFavoritesLists: {
-    background: theme.palette.background.surface,
     flexGrow: 1,
     paddingBottom: theme.spacing(1),
     paddingLeft: '16px',

package/favorites/components/List/ListContent.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ProductListTypeProvider, ProductProvider } from '@shopgate/engage/product/providers';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { getUseGetFavoriteIdsPipeline } from '@shopgate/engage/favorites';
 import ListItemWrapper from "./ListItemWrapper";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -19,8 +19,7 @@ const useStyles = makeStyles()({
   },
   loadMoreButton: {
     width: 'calc(100% - 32px)',
-    margin: '16px 16px 0 16px',
-    borderRadius: 5
+    margin: '16px 16px 0 16px'
   }
 });
 
@@ -86,8 +85,8 @@ const ListContent = ({
         removeItem: removeItem,
         index: index
       }, product.id))]
-    }), showLoadMoreButton && /*#__PURE__*/_jsx(RippleButton, {
-      type: "primary",
+    }), showLoadMoreButton && /*#__PURE__*/_jsx(Button, {
+      color: "secondary",
       className: classes.loadMoreButton,
       onClick: onLoadMore,
       children: i18n.text('favorites.load_more_button')

package/favorites/components/Lists/Lists.js

@@ -1,7 +1,8 @@
 import React, { useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { RippleButton, SurroundPortals } from '@shopgate/engage/components';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { hasNewServices, i18n } from '@shopgate/engage/core/helpers';
 import { getFavoritesLists, isInitialLoading, getHasMultipleFavoritesListsSupport } from '@shopgate/pwa-common-commerce/favorites/selectors';
 import addFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/addFavoritesList';
@@ -64,7 +65,6 @@ const useStyles = makeStyles()({
   addButton: {
     width: 'calc(100% - 32px)',
     margin: 16,
-    borderRadius: 5,
     [responsiveMediaQuery('>=md', {
       webOnly: true
     })]: {
@@ -283,11 +283,10 @@ const FavoriteLists = ({
       onClose: handleMethodClose
     }), /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: FAVORITES_LIST_ADD_BUTTON,
-      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(RippleButton, {
-        type: "primary",
+      children: hasMultipleFavoritesListsSupport ? /*#__PURE__*/_jsx(Button, {
+        color: "secondary",
         className: classes.addButton,
         onClick: openAddModal,
-        disabled: false,
         children: i18n.text('favorites.add_list')
       }) : null
     })]

package/filter/components/FilterItem/index.js

@@ -5,8 +5,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   item: {
     background: theme.palette.background.surface,
-    marginTop: 4,
-    borderTop: `1px solid ${theme.components.separatorLine.borderColor}`
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: theme.spacing(2),
+      right: theme.spacing(2),
+      borderTop: `1px solid ${theme.components.separatorLine.borderColor}`
+    },
+    '&:first-child::before': {
+      display: 'none'
+    }
   }
 }));
 

package/filter/components/FilterPageContent/components/ApplyButton/index.d.ts

@@ -0,0 +1,21 @@
+export interface FilterApplyButtonProps {
+    /**
+     * Click handler for the button.
+     */
+    onClick: () => void;
+    /**
+     * Widget settings injected by `withWidgetSettings`, forwarded to the portal.
+     */
+    widgetSettings?: Record<string, unknown>;
+    /**
+     * Class name for the button.
+     */
+    className?: string;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+}
+declare const _default: JSX;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/ApplyButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/ApplyButton/index.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;AAgCD,wBAAiG"}

package/filter/components/FilterPageContent/components/ApplyButton/index.js

@@ -1,66 +1,37 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
+import { memo } from 'react';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { PORTAL_FILTER_APPLY_BUTTON } from '@shopgate/engage/filter/constants';
 import { withWidgetSettings } from '@shopgate/engage/core';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  wrapper: {
-    display: 'flex'
-  },
-  button: {
-    padding: '0 !important'
-  }
-});
-
 /**
- * The filter apply button component.
- * @param {Object} props The component props
- * @param {boolean} props.disabled Whether the button is disabled
- * @param {Function} props.onClick Click handler for the button
- * @returns {JSX.Element}
+ * The filter apply button, rendered as "View Results" in the filter button bar.
+ * @returns The rendered component.
  */
 const FilterApplyButton = ({
-  disabled,
+  disabled = false,
   onClick,
+  className,
   widgetSettings
-}) => {
-  const {
-    classes
-  } = useStyles();
-  const {
-    buttonTextColor,
-    buttonTextColorDisabled
-  } = widgetSettings;
-  const buttonColor = !disabled ? buttonTextColor : buttonTextColorDisabled;
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: PORTAL_FILTER_APPLY_BUTTON,
-    portalProps: {
-      disabled,
-      onClick,
-      widgetSettings
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes.wrapper,
-      children: /*#__PURE__*/_jsx(Button, {
-        className: classes.button,
-        flat: true,
-        type: "primary",
-        onClick: onClick,
-        disabled: disabled,
-        testId: "applyFilterButton",
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "filter.apply",
-          style: {
-            color: buttonColor
-          }
-        })
-      })
+}) => /*#__PURE__*/_jsx(SurroundPortals, {
+  portalName: PORTAL_FILTER_APPLY_BUTTON,
+  portalProps: {
+    disabled,
+    onClick,
+    widgetSettings
+  },
+  children: /*#__PURE__*/_jsx(Button, {
+    className: className,
+    variant: "contained",
+    color: "primary",
+    onClick: onClick,
+    disabled: disabled,
+    fullWidth: true,
+    size: "small",
+    testId: "applyFilterButton",
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "filter.view_results"
     })
-  });
-};
-FilterApplyButton.defaultProps = {
-  disabled: false
-};
+  })
+});
 export default withWidgetSettings(/*#__PURE__*/memo(FilterApplyButton), '@shopgate/engage/components/AppBar');

package/filter/components/FilterPageContent/components/FilterButtonBar/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The filter button bar renders the "View Results" and "Clear all" buttons in a sticky bar at the
+ * bottom of the screen. It's rendered into the app footer via a portal.
+ * @returns The rendered component, or `null` when the app footer is not available.
+ */
+declare const FilterButtonBar: () => import("react").ReactPortal | null;
+export default FilterButtonBar;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/FilterButtonBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/FilterButtonBar/index.tsx"],"names":[],"mappings":"AA0BA;;;;GAIG;AACH,QAAA,MAAM,eAAe,0CAkCpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/filter/components/FilterPageContent/components/FilterButtonBar/index.js

@@ -0,0 +1,63 @@
+import { createPortal } from 'react-dom';
+import { ResponsiveContainer } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useFilterPage } from '@shopgate/engage/filter/hooks';
+import ApplyButton from "../ApplyButton";
+import ResetButton from "../ResetButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  bar: {
+    display: 'flex',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(1.5, 2),
+    background: theme.palette.background.surface,
+    boxShadow: '0 -4px 5px -2px rgba(0, 0, 0, 0.1)',
+    position: 'relative',
+    zIndex: 2,
+    paddingBottom: `calc(${theme.spacing(1.5)}px + ${theme.layout.safeArea.bottom})`
+  },
+  apply: {
+    flex: 2
+  },
+  reset: {
+    flex: 1
+  }
+}));
+
+/**
+ * The filter button bar renders the "View Results" and "Clear all" buttons in a sticky bar at the
+ * bottom of the screen. It's rendered into the app footer via a portal.
+ * @returns The rendered component, or `null` when the app footer is not available.
+ */
+const FilterButtonBar = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    hasChanged,
+    resetPossible,
+    applyFilters,
+    resetAllFilters
+  } = useFilterPage();
+  const domElement = typeof document !== 'undefined' ? document.getElementById('AppFooter') : null;
+  if (!domElement) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(ResponsiveContainer, {
+    appAlways: true,
+    breakpoint: "<sm",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.bar,
+      children: [/*#__PURE__*/_jsx(ApplyButton, {
+        className: classes.apply,
+        disabled: !hasChanged,
+        onClick: applyFilters
+      }), /*#__PURE__*/_jsx(ResetButton, {
+        className: classes.reset,
+        disabled: !resetPossible,
+        onClick: resetAllFilters
+      })]
+    })
+  }), domElement);
+};
+export default FilterButtonBar;

package/filter/components/FilterPageContent/components/ResetButton/index.d.ts

@@ -0,0 +1,17 @@
+export interface FilterResetButtonProps {
+    /**
+     * Click handler for the button.
+     */
+    onClick: () => void;
+    /**
+     * Class name for the button.
+     */
+    className?: string;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+}
+declare const _default: import("react").MemoExoticComponent<({ disabled, onClick, className }: FilterResetButtonProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/ResetButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../filter/components/FilterPageContent/components/ResetButton/index.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;+FAMoE,sBAAsB;AAsB3F,wBAAuC"}

package/filter/components/FilterPageContent/components/ResetButton/index.js

@@ -1,53 +1,33 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
-import { makeStyles } from '@shopgate/engage/styles';
+import { memo } from 'react';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { PORTAL_FILTER_RESET_BUTTON } from '@shopgate/engage/filter/constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  buttonContainer: {
-    marginTop: 4,
-    marginBottom: 40,
-    textAlign: 'right'
-  }
-});
-
 /**
- * The filter reset button component.
- * @param {Object} props The component props.
- * @param {boolean} props.disabled Whether the button is disabled
- * @param {Function} props.onClick Click handler for the button
- * @returns {JSX.Element}
+ * The filter reset button, rendered as "Clear all" in the filter button bar.
+ * @returns The rendered component.
  */
 const FilterResetButton = ({
-  disabled,
-  onClick
-}) => {
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: PORTAL_FILTER_RESET_BUTTON,
-    portalProps: {
-      disabled,
-      onClick
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes.buttonContainer,
-      children: /*#__PURE__*/_jsx(Button, {
-        flat: true,
-        type: "primary",
-        onClick: onClick,
-        disabled: disabled,
-        testId: "clearAllButton",
-        children: /*#__PURE__*/_jsx(I18n.Text, {
-          string: "filter.reset"
-        })
-      })
+  disabled = false,
+  onClick,
+  className
+}) => /*#__PURE__*/_jsx(SurroundPortals, {
+  portalName: PORTAL_FILTER_RESET_BUTTON,
+  portalProps: {
+    disabled,
+    onClick
+  },
+  children: /*#__PURE__*/_jsx(Button, {
+    className: className,
+    variant: "outlined",
+    onClick: onClick,
+    disabled: disabled,
+    fullWidth: true,
+    size: "small",
+    testId: "clearAllButton",
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "filter.clear_all"
     })
-  });
-};
-FilterResetButton.defaultProps = {
-  disabled: false
-};
+  })
+});
 export default /*#__PURE__*/memo(FilterResetButton);

package/filter/components/FilterPageContent/components/Selector/components/Selected/index.d.ts

@@ -0,0 +1,19 @@
+export interface SelectedValue {
+    /**
+     * Id of the filter value.
+     */
+    id: string;
+    /**
+     * Display label of the filter value.
+     */
+    label: string;
+}
+export interface SelectedProps {
+    /**
+     * The selected filter values, already ordered for display.
+     */
+    values: SelectedValue[];
+}
+declare const _default: import("react").MemoExoticComponent<({ values }: SelectedProps) => import("react").JSX.Element | null>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/Selector/components/Selected/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../filter/components/FilterPageContent/components/Selector/components/Selected/index.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;yEAM6B,aAAa;AAgB3C,wBAA8B"}

package/filter/components/FilterPageContent/components/Selector/components/Selected/index.js

@@ -1,63 +1,42 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.reduce.js";
-import React, { Fragment, memo, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { memo } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  elipsed: {
-    maxWidth: '95%',
-    overflow: 'hidden',
-    textAlign: 'right',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  chips: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(0.5)
   },
-  comma: {
-    ' + span': {
-      marginLeft: '0.65ch'
-    }
+  chip: {
+    ...theme.typography.body2,
+    padding: theme.spacing(0.25, 1.25),
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.secondary.main}`,
+    overflowWrap: 'anywhere'
   }
 }));
-
 /**
- * The filter selected component.
- * @param {Object} props Props.
- * @returns {JSX.Element|null}
+ * Renders the selected filter values as chips in the accordion header.
+ * @returns The rendered component.
  */
 const Selected = ({
-  selected,
   values
 }) => {
   const {
     classes
   } = useStyles();
-  const items = useMemo(() => {
-    if (!selected || selected.length === 0) {
-      return [];
-    }
-    return values.reduce((prevValues, value) => {
-      if (selected.includes(value.id)) {
-        prevValues.push(value.label);
-      }
-      return prevValues;
-    }, []);
-  }, [selected, values]);
-  if (!selected || selected.length === 0) {
+  if (values.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: items.map((item, index) => /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx("span", {
-        className: classes.elipsed,
-        children: item
-      }), index < items.length - 1 ? /*#__PURE__*/_jsx("span", {
-        className: classes.comma,
-        children: ", "
-      }) : '']
-    }, item))
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.chips,
+    children: values.map(({
+      id,
+      label
+    }) => /*#__PURE__*/_jsx("span", {
+      className: classes.chip,
+      children: label
+    }, id))
   });
 };
-Selected.defaultProps = {
-  selected: null
-};
 export default /*#__PURE__*/memo(Selected);

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface ToggleProps {
+    /**
+     * The filter label.
+     */
+    label: ReactNode;
+    /**
+     * The selected values element rendered below the label.
+     */
+    selected?: ReactNode;
+}
+declare const _default: import("react").MemoExoticComponent<({ label, selected }: ToggleProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../filter/components/FilterPageContent/components/Selector/components/Toggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBvC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;kFAM2C,WAAW;AAavD,wBAA4B"}

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.js

@@ -1,71 +1,38 @@
-import React, { memo, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { memo } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   toggle: {
     display: 'flex',
-    flexFlow: 'row no-wrap',
-    alignContent: 'stretch',
-    alignItems: 'flex-start'
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: theme.spacing(1),
+    flex: 1,
+    minWidth: 0
   },
   label: {
-    whiteSpace: 'no-wrap',
-    flexShrink: 0,
-    flexGrow: 1,
-    textAlign: 'left',
-    maxWidth: '50%',
-    minWidth: '35%',
-    paddingRight: '16px'
-  },
-  selected: {
-    display: 'flex',
-    flexFlow: 'row wrap',
-    flexGrow: 1,
-    justifyContent: 'flex-end',
-    minWidth: '50%',
-    maxWidth: '65%'
-  },
-  closed: {
-    fontWeight: theme.typography.fontWeightRegular
-  },
-  open: {
-    fontWeight: theme.typography.fontWeightBold
+    ...theme.typography.body1,
+    textAlign: 'left'
   }
 }));
-
 /**
- * The toggle component.
- * @param {Object} props Props.
- * @returns {JSX.Element}
+ * Renders the filter label and its selected values in the accordion header.
+ * @returns The rendered component.
  */
 const Toggle = ({
   label,
-  open,
-  selected
+  selected = null
 }) => {
   const {
     classes,
     cx
   } = useStyles();
-  const labelClassName = useMemo(() => cx({
-    [classes.label]: true,
-    [classes.open]: open,
-    [classes.closed]: !open
-  }), [classes.closed, classes.label, classes.open, open, cx]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.toggle,
     children: [/*#__PURE__*/_jsx("span", {
-      className: labelClassName,
+      className: cx(classes.label, 'filter-selector-toggle-label'),
       children: label
-    }), selected && /*#__PURE__*/_jsx("span", {
-      className: classes.selected,
-      children: selected
-    })]
+    }), selected]
   });
 };
-Toggle.defaultProps = {
-  open: false,
-  selected: null
-};
 export default /*#__PURE__*/memo(Toggle);

package/filter/components/FilterPageContent/components/Selector/components/ValueCheckbox/index.d.ts

@@ -0,0 +1,25 @@
+export interface ValueCheckboxProps {
+    /**
+     * Id of the filter value. Also used as the form element name and test id.
+     */
+    id: string;
+    /**
+     * Display label of the filter value. Rendered as is — never translated.
+     */
+    label: string;
+    /**
+     * Number of products that are available for the filter value.
+     */
+    hits?: number;
+    /**
+     * Whether the value is currently selected.
+     */
+    isActive?: boolean;
+    /**
+     * Invoked with the value id whenever the checkbox is toggled.
+     */
+    onToggle?: (id: string) => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ id, label, hits, isActive, onToggle, }: ValueCheckboxProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/filter/components/FilterPageContent/components/Selector/components/ValueCheckbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../filter/components/FilterPageContent/components/Selector/components/ValueCheckbox/index.tsx"],"names":[],"mappings":"AA6CA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;uGAYE,kBAAkB;AAkCrB,wBAAmC"}