@preply/ds-web-lib 0.89.0 → 0.90.0

package/dist/components/Chips/Chips.d.ts

@@ -0,0 +1,80 @@
+import { Dataset } from '@preply/ds-core';
+import { ReactSVGComponentType } from '@preply/ds-web-core';
+import { FC, ReactNode } from 'react';
+interface ChipsProps {
+    /**
+     * The Chip list variant;
+     * - For simple checkbox-like behaviour, use `choice`.
+     * - For more complex filtering controls, use `filter`.
+     *
+     * @default choice
+     */
+    variant?: 'choice' | 'filter';
+    /**
+     * Allows assistive technologies to correctly identify and announce
+     * the Chip list.
+     *
+     * @example
+     * <Chips aria-label="tutor filter">
+     *   // When the Chip below is in focus, screen readers may announce it as:
+     *   // "tutor filter list, option 1, Availability, press to toggle"
+     *   <Chips.Item label="Availability" />
+     * </Chips>
+     */
+    'aria-label': string;
+    /**
+     * These should be {@link Chips.Item}s.
+     */
+    children: ReactNode;
+    dataset?: Dataset;
+}
+interface ChipsSubcomponents {
+    /**
+     * A single {@link Chips} list item.
+     */
+    Item: FC<ChipsItemProps>;
+}
+/**
+ * A Chips container; add {@link Chips.Item} children to render a list of Chips.
+ */
+export declare const Chips: FC<ChipsProps> & ChipsSubcomponents;
+interface ChipsItemProps {
+    label: ReactNode;
+    leadingSvgIcon?: ReactSVGComponentType;
+    /**
+     * The current state of the Chip; this needs to be controlled manually,
+     * to cater for cases in which a Chip also controls a seperate filter menu.
+     */
+    pressed: boolean;
+    /**
+     * Called when the Chip is pressed, and returns the resulting state udpate.
+     *
+     * @see {@link ChipItemProps.pressed} for controlling the Chip state.
+     * @see {@link ChipItemProps.onRemove} for when the user removes the Chip.
+     */
+    onToggle?: (newState: boolean) => void;
+    /**
+     * Called when the Chip's remove (`X`) button is clicked.
+     * This is only available for `filter` Chips.
+     */
+    onRemove?: () => void;
+    /**
+     * If the Chip toggles the presence or content of another element, set this
+     * prop to the ID of that element.
+     *
+     * @example
+     * <Chips variant="filter">
+     *   <Chips.Item
+     *     label="Availability"
+     *     pressed={filterByAvailability}
+     *     aria-controls="tutor-search-list"
+     *   />
+     * </Chips>
+     * ...
+     * <TutorSearchList id="tutor-search-list" />
+     */
+    'aria-controls'?: string;
+    dataset?: Dataset;
+}
+export {};
+//# sourceMappingURL=Chips.d.ts.map

package/dist/components/Chips/Chips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/components/Chips/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAmB,MAAM,qBAAqB,CAAC;AAC7E,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7C,UAAU,UAAU;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,kBAAkB;IACxB;;OAEG;IACH,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,kBAYpC,CAAC;AAEF,UAAU,cAAc;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/Chips/Chips.js

@@ -0,0 +1,36 @@
+import CloseIcon from '@preply/ds-media-icons/dist/24/Close.svg';
+import { getDatasetProps } from '@preply/ds-web-core';
+import React__default from 'react';
+import { Icon } from '../Icon/Icon.js';
+import styles from './style/index.module.less.js';
+
+/**
+ * A Chips container; add {@link Chips.Item} children to render a list of Chips.
+ */
+const Chips = ({ variant = 'choice', children, 'aria-label': ariaLabel, dataset, }) => {
+    const dataAttributes = { ...dataset, variant };
+    return (React__default.createElement("ul", { "aria-label": ariaLabel, className: styles.chips, ...getDatasetProps(dataAttributes) }, children));
+};
+Chips.Item = function ChipsItem({ label, leadingSvgIcon, pressed, onToggle, onRemove, 'aria-controls': ariaControls, dataset, }) {
+    const toggle = () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(!pressed);
+    const remove = onRemove !== null && onRemove !== void 0 ? onRemove : toggle;
+    return (React__default.createElement("li", { role: "group", className: styles.chip, ...getDatasetProps(dataset, { preplyDsComponent: 'Chip' }) },
+        React__default.createElement("button", { type: "button", className: styles['chip-toggle'], "aria-pressed": pressed, "aria-controls": ariaControls, onClick: toggle, onKeyUp: e => {
+                switch (e.key) {
+                    case 'Backspace':
+                    case 'Delete':
+                        if (!pressed) {
+                            return;
+                        }
+                        toggle();
+                        break;
+                }
+            } },
+            leadingSvgIcon && React__default.createElement(Icon, { size: "24", svg: leadingSvgIcon }),
+            label),
+        React__default.createElement("button", { type: "button", className: styles['chip-remove'], onClick: remove, "aria-label": "Remove", "aria-controls": ariaControls },
+            React__default.createElement(Icon, { size: "24", svg: CloseIcon }))));
+};
+
+export { Chips };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXBzL0NoaXBzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEYXRhc2V0IH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCBDbG9zZUljb24gZnJvbSAnQHByZXBseS9kcy1tZWRpYS1pY29ucy9kaXN0LzI0L0Nsb3NlLnN2Zyc7XG5pbXBvcnQgeyBSZWFjdFNWR0NvbXBvbmVudFR5cGUsIGdldERhdGFzZXRQcm9wcyB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEljb24gfSBmcm9tICcuLi9JY29uL0ljb24nO1xuXG5pbXBvcnQgc3R5bGVzIGZyb20gJy4vc3R5bGUvaW5kZXgubW9kdWxlLmxlc3MnO1xuXG5pbnRlcmZhY2UgQ2hpcHNQcm9wcyB7XG4gICAgLyoqXG4gICAgICogVGhlIENoaXAgbGlzdCB2YXJpYW50O1xuICAgICAqIC0gRm9yIHNpbXBsZSBjaGVja2JveC1saWtlIGJlaGF2aW91ciwgdXNlIGBjaG9pY2VgLlxuICAgICAqIC0gRm9yIG1vcmUgY29tcGxleCBmaWx0ZXJpbmcgY29udHJvbHMsIHVzZSBgZmlsdGVyYC5cbiAgICAgKlxuICAgICAqIEBkZWZhdWx0IGNob2ljZVxuICAgICAqL1xuICAgIHZhcmlhbnQ/OiAnY2hvaWNlJyB8ICdmaWx0ZXInO1xuICAgIC8qKlxuICAgICAqIEFsbG93cyBhc3Npc3RpdmUgdGVjaG5vbG9naWVzIHRvIGNvcnJlY3RseSBpZGVudGlmeSBhbmQgYW5ub3VuY2VcbiAgICAgKiB0aGUgQ2hpcCBsaXN0LlxuICAgICAqXG4gICAgICogQGV4YW1wbGVcbiAgICAgKiA8Q2hpcHMgYXJpYS1sYWJlbD1cInR1dG9yIGZpbHRlclwiPlxuICAgICAqICAgLy8gV2hlbiB0aGUgQ2hpcCBiZWxvdyBpcyBpbiBmb2N1cywgc2NyZWVuIHJlYWRlcnMgbWF5IGFubm91bmNlIGl0IGFzOlxuICAgICAqICAgLy8gXCJ0dXRvciBmaWx0ZXIgbGlzdCwgb3B0aW9uIDEsIEF2YWlsYWJpbGl0eSwgcHJlc3MgdG8gdG9nZ2xlXCJcbiAgICAgKiAgIDxDaGlwcy5JdGVtIGxhYmVsPVwiQXZhaWxhYmlsaXR5XCIgLz5cbiAgICAgKiA8L0NoaXBzPlxuICAgICAqL1xuICAgICdhcmlhLWxhYmVsJzogc3RyaW5nO1xuICAgIC8qKlxuICAgICAqIFRoZXNlIHNob3VsZCBiZSB7QGxpbmsgQ2hpcHMuSXRlbX1zLlxuICAgICAqL1xuICAgIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gICAgZGF0YXNldD86IERhdGFzZXQ7XG59XG5cbmludGVyZmFjZSBDaGlwc1N1YmNvbXBvbmVudHMge1xuICAgIC8qKlxuICAgICAqIEEgc2luZ2xlIHtAbGluayBDaGlwc30gbGlzdCBpdGVtLlxuICAgICAqL1xuICAgIEl0ZW06IEZDPENoaXBzSXRlbVByb3BzPjtcbn1cblxuLyoqXG4gKiBBIENoaXBzIGNvbnRhaW5lcjsgYWRkIHtAbGluayBDaGlwcy5JdGVtfSBjaGlsZHJlbiB0byByZW5kZXIgYSBsaXN0IG9mIENoaXBzLlxuICovXG5leHBvcnQgY29uc3QgQ2hpcHM6IEZDPENoaXBzUHJvcHM+ICYgQ2hpcHNTdWJjb21wb25lbnRzID0gKHtcbiAgICB2YXJpYW50ID0gJ2Nob2ljZScsXG4gICAgY2hpbGRyZW4sXG4gICAgJ2FyaWEtbGFiZWwnOiBhcmlhTGFiZWwsXG4gICAgZGF0YXNldCxcbn0pID0+IHtcbiAgICBjb25zdCBkYXRhQXR0cmlidXRlcyA9IHsgLi4uZGF0YXNldCwgdmFyaWFudCB9O1xuICAgIHJldHVybiAoXG4gICAgICAgIDx1bCBhcmlhLWxhYmVsPXthcmlhTGFiZWx9IGNsYXNzTmFtZT17c3R5bGVzLmNoaXBzfSB7Li4uZ2V0RGF0YXNldFByb3BzKGRhdGFBdHRyaWJ1dGVzKX0+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvdWw+XG4gICAgKTtcbn07XG5cbmludGVyZmFjZSBDaGlwc0l0ZW1Qcm9wcyB7XG4gICAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgICBsZWFkaW5nU3ZnSWNvbj86IFJlYWN0U1ZHQ29tcG9uZW50VHlwZTtcbiAgICAvKipcbiAgICAgKiBUaGUgY3VycmVudCBzdGF0ZSBvZiB0aGUgQ2hpcDsgdGhpcyBuZWVkcyB0byBiZSBjb250cm9sbGVkIG1hbnVhbGx5LFxuICAgICAqIHRvIGNhdGVyIGZvciBjYXNlcyBpbiB3aGljaCBhIENoaXAgYWxzbyBjb250cm9scyBhIHNlcGVyYXRlIGZpbHRlciBtZW51LlxuICAgICAqL1xuICAgIHByZXNzZWQ6IGJvb2xlYW47XG4gICAgLyoqXG4gICAgICogQ2FsbGVkIHdoZW4gdGhlIENoaXAgaXMgcHJlc3NlZCwgYW5kIHJldHVybnMgdGhlIHJlc3VsdGluZyBzdGF0ZSB1ZHBhdGUuXG4gICAgICpcbiAgICAgKiBAc2VlIHtAbGluayBDaGlwSXRlbVByb3BzLnByZXNzZWR9IGZvciBjb250cm9sbGluZyB0aGUgQ2hpcCBzdGF0ZS5cbiAgICAgKiBAc2VlIHtAbGluayBDaGlwSXRlbVByb3BzLm9uUmVtb3ZlfSBmb3Igd2hlbiB0aGUgdXNlciByZW1vdmVzIHRoZSBDaGlwLlxuICAgICAqL1xuICAgIG9uVG9nZ2xlPzogKG5ld1N0YXRlOiBib29sZWFuKSA9PiB2b2lkO1xuICAgIC8qKlxuICAgICAqIENhbGxlZCB3aGVuIHRoZSBDaGlwJ3MgcmVtb3ZlIChgWGApIGJ1dHRvbiBpcyBjbGlja2VkLlxuICAgICAqIFRoaXMgaXMgb25seSBhdmFpbGFibGUgZm9yIGBmaWx0ZXJgIENoaXBzLlxuICAgICAqL1xuICAgIG9uUmVtb3ZlPzogKCkgPT4gdm9pZDtcbiAgICAvKipcbiAgICAgKiBJZiB0aGUgQ2hpcCB0b2dnbGVzIHRoZSBwcmVzZW5jZSBvciBjb250ZW50IG9mIGFub3RoZXIgZWxlbWVudCwgc2V0IHRoaXNcbiAgICAgKiBwcm9wIHRvIHRoZSBJRCBvZiB0aGF0IGVsZW1lbnQuXG4gICAgICpcbiAgICAgKiBAZXhhbXBsZVxuICAgICAqIDxDaGlwcyB2YXJpYW50PVwiZmlsdGVyXCI+XG4gICAgICogICA8Q2hpcHMuSXRlbVxuICAgICAqICAgICBsYWJlbD1cIkF2YWlsYWJpbGl0eVwiXG4gICAgICogICAgIHByZXNzZWQ9e2ZpbHRlckJ5QXZhaWxhYmlsaXR5fVxuICAgICAqICAgICBhcmlhLWNvbnRyb2xzPVwidHV0b3Itc2VhcmNoLWxpc3RcIlxuICAgICAqICAgLz5cbiAgICAgKiA8L0NoaXBzPlxuICAgICAqIC4uLlxuICAgICAqIDxUdXRvclNlYXJjaExpc3QgaWQ9XCJ0dXRvci1zZWFyY2gtbGlzdFwiIC8+XG4gICAgICovXG4gICAgJ2FyaWEtY29udHJvbHMnPzogc3RyaW5nO1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xufVxuXG5DaGlwcy5JdGVtID0gZnVuY3Rpb24gQ2hpcHNJdGVtKHtcbiAgICBsYWJlbCxcbiAgICBsZWFkaW5nU3ZnSWNvbixcbiAgICBwcmVzc2VkLFxuICAgIG9uVG9nZ2xlLFxuICAgIG9uUmVtb3ZlLFxuICAgICdhcmlhLWNvbnRyb2xzJzogYXJpYUNvbnRyb2xzLFxuICAgIGRhdGFzZXQsXG59KSB7XG4gICAgY29uc3QgdG9nZ2xlID0gKCkgPT4gb25Ub2dnbGU/LighcHJlc3NlZCk7XG4gICAgY29uc3QgcmVtb3ZlID0gb25SZW1vdmUgPz8gdG9nZ2xlO1xuICAgIHJldHVybiAoXG4gICAgICAgIDxsaVxuICAgICAgICAgICAgcm9sZT1cImdyb3VwXCJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17c3R5bGVzLmNoaXB9XG4gICAgICAgICAgICB7Li4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQsIHsgcHJlcGx5RHNDb21wb25lbnQ6ICdDaGlwJyB9KX1cbiAgICAgICAgPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17c3R5bGVzWydjaGlwLXRvZ2dsZSddfVxuICAgICAgICAgICAgICAgIGFyaWEtcHJlc3NlZD17cHJlc3NlZH1cbiAgICAgICAgICAgICAgICBhcmlhLWNvbnRyb2xzPXthcmlhQ29udHJvbHN9XG4gICAgICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlfVxuICAgICAgICAgICAgICAgIG9uS2V5VXA9e2UgPT4ge1xuICAgICAgICAgICAgICAgICAgICBzd2l0Y2ggKGUua2V5KSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBjYXNlICdCYWNrc3BhY2UnOlxuICAgICAgICAgICAgICAgICAgICAgICAgY2FzZSAnRGVsZXRlJzpcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZiAoIXByZXNzZWQpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0b2dnbGUoKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgICAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtsZWFkaW5nU3ZnSWNvbiAmJiA8SWNvbiBzaXplPVwiMjRcIiBzdmc9e2xlYWRpbmdTdmdJY29ufSAvPn1cbiAgICAgICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e3N0eWxlc1snY2hpcC1yZW1vdmUnXX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtyZW1vdmV9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cIlJlbW92ZVwiXG4gICAgICAgICAgICAgICAgYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xzfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxJY29uIHNpemU9XCIyNFwiIHN2Zz17Q2xvc2VJY29ufSAvPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvbGk+XG4gICAgKTtcbn07XG4iXSwibmFtZXMiOlsiUmVhY3QiXSwibWFwcGluZ3MiOiI7Ozs7OztBQTRDQTs7O01BR2EsS0FBSyxHQUF3QyxDQUFDLEVBQ3ZELE9BQU8sR0FBRyxRQUFRLEVBQ2xCLFFBQVEsRUFDUixZQUFZLEVBQUUsU0FBUyxFQUN2QixPQUFPLEdBQ1Y7SUFDRyxNQUFNLGNBQWMsR0FBRyxFQUFFLEdBQUcsT0FBTyxFQUFFLE9BQU8sRUFBRSxDQUFDO0lBQy9DLFFBQ0lBLG1EQUFnQixTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEtBQU0sZUFBZSxDQUFDLGNBQWMsQ0FBQyxJQUNsRixRQUFRLENBQ1IsRUFDUDtBQUNOLEVBQUU7QUF5Q0YsS0FBSyxDQUFDLElBQUksR0FBRyxTQUFTLFNBQVMsQ0FBQyxFQUM1QixLQUFLLEVBQ0wsY0FBYyxFQUNkLE9BQU8sRUFDUCxRQUFRLEVBQ1IsUUFBUSxFQUNSLGVBQWUsRUFBRSxZQUFZLEVBQzdCLE9BQU8sR0FDVjtJQUNHLE1BQU0sTUFBTSxHQUFHLE1BQU0sUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFHLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDMUMsTUFBTSxNQUFNLEdBQUcsUUFBUSxhQUFSLFFBQVEsY0FBUixRQUFRLEdBQUksTUFBTSxDQUFDO0lBQ2xDLFFBQ0lBLHFDQUNJLElBQUksRUFBQyxPQUFPLEVBQ1osU0FBUyxFQUFFLE1BQU0sQ0FBQyxJQUFJLEtBQ2xCLGVBQWUsQ0FBQyxPQUFPLEVBQUUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLEVBQUUsQ0FBQztRQUUzREEseUNBQ0ksSUFBSSxFQUFDLFFBQVEsRUFDYixTQUFTLEVBQUUsTUFBTSxDQUFDLGFBQWEsQ0FBQyxrQkFDbEIsT0FBTyxtQkFDTixZQUFZLEVBQzNCLE9BQU8sRUFBRSxNQUFNLEVBQ2YsT0FBTyxFQUFFLENBQUM7Z0JBQ04sUUFBUSxDQUFDLENBQUMsR0FBRztvQkFDVCxLQUFLLFdBQVcsQ0FBQztvQkFDakIsS0FBSyxRQUFRO3dCQUNULElBQUksQ0FBQyxPQUFPLEVBQUU7NEJBQ1YsT0FBTzt5QkFDVjt3QkFDRCxNQUFNLEVBQUUsQ0FBQzt3QkFDVCxNQUFNO2lCQUViO2FBQ0o7WUFFQSxjQUFjLElBQUlBLDZCQUFDLElBQUksSUFBQyxJQUFJLEVBQUMsSUFBSSxFQUFDLEdBQUcsRUFBRSxjQUFjLEdBQUk7WUFDekQsS0FBSyxDQUNEO1FBQ1RBLHlDQUNJLElBQUksRUFBQyxRQUFRLEVBQ2IsU0FBUyxFQUFFLE1BQU0sQ0FBQyxhQUFhLENBQUMsRUFDaEMsT0FBTyxFQUFFLE1BQU0sZ0JBQ0osUUFBUSxtQkFDSixZQUFZO1lBRTNCQSw2QkFBQyxJQUFJLElBQUMsSUFBSSxFQUFDLElBQUksRUFBQyxHQUFHLEVBQUUsU0FBUyxHQUFJLENBQzdCLENBQ1IsRUFDUDtBQUNOLENBQUM7Ozs7In0=

package/dist/components/Chips/Chips.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryFn } from '@storybook/react';
+import { Chips } from './Chips';
+declare type ChipsStory = StoryFn<typeof Chips>;
+export declare const Choice: ChipsStory;
+export declare const ChoiceWithIcons: StoryFn<typeof Chips>;
+export declare const Filter: StoryFn<typeof Chips>;
+export declare const FilterWithIcons: StoryFn<typeof Chips>;
+export declare const ComplexFilter: StoryFn<typeof Chips>;
+export {};
+//# sourceMappingURL=Chips.stories.d.ts.map

package/dist/components/Chips/Chips.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chips/Chips.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,aAAK,UAAU,GAAG,OAAO,CAAC,OAAO,KAAK,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,UAqBpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,OAAO,KAAK,CAsBjD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,OAAO,KAAK,CAqBxC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,OAAO,KAAK,CAsBjD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,OAAO,KAAK,CAkD/C,CAAC"}

package/dist/components/Chips/Chips.stories.js

@@ -0,0 +1,76 @@
+import FavIcon from '@preply/ds-media-icons/dist/24/TokyoUIFav.svg';
+import React__default, { useState } from 'react';
+import { Chips } from './Chips.js';
+
+const Choice = () => {
+    const [choices, setChoices] = useState({
+        Ambition: false,
+        Boldness: false,
+        Collaboration: false,
+    });
+    return (React__default.createElement(Chips, { variant: "choice", "aria-label": "Principle choices" }, Object.entries(choices).map(([name, pressed]) => (React__default.createElement(Chips.Item, { key: name, label: name, pressed: pressed, onToggle: newState => {
+            setChoices(prev => ({ ...prev, [name]: newState }));
+        } })))));
+};
+const ChoiceWithIcons = () => {
+    const [choices, setChoices] = useState({
+        Ambition: false,
+        Boldness: false,
+        Collaboration: false,
+    });
+    return (React__default.createElement(Chips, { variant: "choice", "aria-label": "Principle choices" }, Object.entries(choices).map(([name, pressed]) => (React__default.createElement(Chips.Item, { key: name, label: name, leadingSvgIcon: FavIcon, pressed: pressed, onToggle: newState => {
+            setChoices(prev => ({ ...prev, [name]: newState }));
+        } })))));
+};
+const Filter = () => {
+    const [filters, setFilters] = useState({
+        Ambition: false,
+        Boldness: false,
+        Collaboration: false,
+    });
+    return (React__default.createElement(Chips, { variant: "filter", "aria-label": "Principle filters" }, Object.entries(filters).map(([name, pressed]) => (React__default.createElement(Chips.Item, { key: name, label: name, pressed: pressed, onToggle: newState => {
+            setFilters(prev => ({ ...prev, [name]: newState }));
+        } })))));
+};
+const FilterWithIcons = () => {
+    const [filters, setFilters] = useState({
+        Ambition: false,
+        Boldness: false,
+        Collaboration: false,
+    });
+    return (React__default.createElement(Chips, { variant: "filter", "aria-label": "Principle filters" }, Object.entries(filters).map(([name, pressed]) => (React__default.createElement(Chips.Item, { key: name, label: name, leadingSvgIcon: FavIcon, pressed: pressed, onToggle: newState => {
+            setFilters(prev => ({ ...prev, [name]: newState }));
+        } })))));
+};
+const ComplexFilter = () => {
+    const [filterPrinciple, setFilterPrinciple] = useState(false);
+    const [principle, setPrinciple] = useState(undefined);
+    return (React__default.createElement("div", null,
+        React__default.createElement(Chips, { variant: "filter", "aria-label": "Principle filters" },
+            React__default.createElement(Chips.Item, { label: "Principles", pressed: filterPrinciple, onToggle: newState => {
+                    if (principle !== undefined) {
+                        setPrinciple(undefined);
+                        return;
+                    }
+                    setFilterPrinciple(newState);
+                }, onRemove: () => {
+                    setPrinciple(undefined);
+                    setFilterPrinciple(false);
+                }, "aria-controls": "principle-menu" })),
+        React__default.createElement("div", { id: "principle-menu" }, filterPrinciple &&
+            (principle ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("p", null, "Your favorite principle is:"),
+                React__default.createElement("p", null, principle))) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("p", null, "What's your favorite principle?"),
+                React__default.createElement("form", { onSubmit: e => {
+                        e.preventDefault();
+                        // @ts-expect-error - submitter exists https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
+                        setPrinciple(e.nativeEvent.submitter.value);
+                    } },
+                    React__default.createElement("input", { type: "submit", value: "Ambition" }),
+                    React__default.createElement("input", { type: "submit", value: "Boldness" }),
+                    React__default.createElement("input", { type: "submit", value: "Collaboration" }))))))));
+};
+
+export { Choice, ChoiceWithIcons, ComplexFilter, Filter, FilterWithIcons };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMuc3Rvcmllcy5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ2hpcHMvQ2hpcHMuc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IEZhdkljb24gZnJvbSAnQHByZXBseS9kcy1tZWRpYS1pY29ucy9kaXN0LzI0L1Rva3lvVUlGYXYuc3ZnJztcbmltcG9ydCB7IFN0b3J5Rm4gfSBmcm9tICdAc3Rvcnlib29rL3JlYWN0JztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQ2hpcHMgfSBmcm9tICcuL0NoaXBzJztcblxudHlwZSBDaGlwc1N0b3J5ID0gU3RvcnlGbjx0eXBlb2YgQ2hpcHM+O1xuXG5leHBvcnQgY29uc3QgQ2hvaWNlOiBDaGlwc1N0b3J5ID0gKCkgPT4ge1xuICAgIGNvbnN0IFtjaG9pY2VzLCBzZXRDaG9pY2VzXSA9IHVzZVN0YXRlKHtcbiAgICAgICAgQW1iaXRpb246IGZhbHNlLFxuICAgICAgICBCb2xkbmVzczogZmFsc2UsXG4gICAgICAgIENvbGxhYm9yYXRpb246IGZhbHNlLFxuICAgIH0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPENoaXBzIHZhcmlhbnQ9XCJjaG9pY2VcIiBhcmlhLWxhYmVsPVwiUHJpbmNpcGxlIGNob2ljZXNcIj5cbiAgICAgICAgICAgIHtPYmplY3QuZW50cmllcyhjaG9pY2VzKS5tYXAoKFtuYW1lLCBwcmVzc2VkXSkgPT4gKFxuICAgICAgICAgICAgICAgIDxDaGlwcy5JdGVtXG4gICAgICAgICAgICAgICAgICAgIGtleT17bmFtZX1cbiAgICAgICAgICAgICAgICAgICAgbGFiZWw9e25hbWV9XG4gICAgICAgICAgICAgICAgICAgIHByZXNzZWQ9e3ByZXNzZWR9XG4gICAgICAgICAgICAgICAgICAgIG9uVG9nZ2xlPXtuZXdTdGF0ZSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBzZXRDaG9pY2VzKHByZXYgPT4gKHsgLi4ucHJldiwgW25hbWVdOiBuZXdTdGF0ZSB9KSk7XG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICkpfVxuICAgICAgICA8L0NoaXBzPlxuICAgICk7XG59O1xuXG5leHBvcnQgY29uc3QgQ2hvaWNlV2l0aEljb25zOiBTdG9yeUZuPHR5cGVvZiBDaGlwcz4gPSAoKSA9PiB7XG4gICAgY29uc3QgW2Nob2ljZXMsIHNldENob2ljZXNdID0gdXNlU3RhdGUoe1xuICAgICAgICBBbWJpdGlvbjogZmFsc2UsXG4gICAgICAgIEJvbGRuZXNzOiBmYWxzZSxcbiAgICAgICAgQ29sbGFib3JhdGlvbjogZmFsc2UsXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8Q2hpcHMgdmFyaWFudD1cImNob2ljZVwiIGFyaWEtbGFiZWw9XCJQcmluY2lwbGUgY2hvaWNlc1wiPlxuICAgICAgICAgICAge09iamVjdC5lbnRyaWVzKGNob2ljZXMpLm1hcCgoW25hbWUsIHByZXNzZWRdKSA9PiAoXG4gICAgICAgICAgICAgICAgPENoaXBzLkl0ZW1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtuYW1lfVxuICAgICAgICAgICAgICAgICAgICBsYWJlbD17bmFtZX1cbiAgICAgICAgICAgICAgICAgICAgbGVhZGluZ1N2Z0ljb249e0Zhdkljb259XG4gICAgICAgICAgICAgICAgICAgIHByZXNzZWQ9e3ByZXNzZWR9XG4gICAgICAgICAgICAgICAgICAgIG9uVG9nZ2xlPXtuZXdTdGF0ZSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBzZXRDaG9pY2VzKHByZXYgPT4gKHsgLi4ucHJldiwgW25hbWVdOiBuZXdTdGF0ZSB9KSk7XG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICkpfVxuICAgICAgICA8L0NoaXBzPlxuICAgICk7XG59O1xuXG5leHBvcnQgY29uc3QgRmlsdGVyOiBTdG9yeUZuPHR5cGVvZiBDaGlwcz4gPSAoKSA9PiB7XG4gICAgY29uc3QgW2ZpbHRlcnMsIHNldEZpbHRlcnNdID0gdXNlU3RhdGUoe1xuICAgICAgICBBbWJpdGlvbjogZmFsc2UsXG4gICAgICAgIEJvbGRuZXNzOiBmYWxzZSxcbiAgICAgICAgQ29sbGFib3JhdGlvbjogZmFsc2UsXG4gICAgfSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8Q2hpcHMgdmFyaWFudD1cImZpbHRlclwiIGFyaWEtbGFiZWw9XCJQcmluY2lwbGUgZmlsdGVyc1wiPlxuICAgICAgICAgICAge09iamVjdC5lbnRyaWVzKGZpbHRlcnMpLm1hcCgoW25hbWUsIHByZXNzZWRdKSA9PiAoXG4gICAgICAgICAgICAgICAgPENoaXBzLkl0ZW1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtuYW1lfVxuICAgICAgICAgICAgICAgICAgICBsYWJlbD17bmFtZX1cbiAgICAgICAgICAgICAgICAgICAgcHJlc3NlZD17cHJlc3NlZH1cbiAgICAgICAgICAgICAgICAgICAgb25Ub2dnbGU9e25ld1N0YXRlID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldEZpbHRlcnMocHJldiA9PiAoeyAuLi5wcmV2LCBbbmFtZV06IG5ld1N0YXRlIH0pKTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgIDwvQ2hpcHM+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBGaWx0ZXJXaXRoSWNvbnM6IFN0b3J5Rm48dHlwZW9mIENoaXBzPiA9ICgpID0+IHtcbiAgICBjb25zdCBbZmlsdGVycywgc2V0RmlsdGVyc10gPSB1c2VTdGF0ZSh7XG4gICAgICAgIEFtYml0aW9uOiBmYWxzZSxcbiAgICAgICAgQm9sZG5lc3M6IGZhbHNlLFxuICAgICAgICBDb2xsYWJvcmF0aW9uOiBmYWxzZSxcbiAgICB9KTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxDaGlwcyB2YXJpYW50PVwiZmlsdGVyXCIgYXJpYS1sYWJlbD1cIlByaW5jaXBsZSBmaWx0ZXJzXCI+XG4gICAgICAgICAgICB7T2JqZWN0LmVudHJpZXMoZmlsdGVycykubWFwKChbbmFtZSwgcHJlc3NlZF0pID0+IChcbiAgICAgICAgICAgICAgICA8Q2hpcHMuSXRlbVxuICAgICAgICAgICAgICAgICAgICBrZXk9e25hbWV9XG4gICAgICAgICAgICAgICAgICAgIGxhYmVsPXtuYW1lfVxuICAgICAgICAgICAgICAgICAgICBsZWFkaW5nU3ZnSWNvbj17RmF2SWNvbn1cbiAgICAgICAgICAgICAgICAgICAgcHJlc3NlZD17cHJlc3NlZH1cbiAgICAgICAgICAgICAgICAgICAgb25Ub2dnbGU9e25ld1N0YXRlID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldEZpbHRlcnMocHJldiA9PiAoeyAuLi5wcmV2LCBbbmFtZV06IG5ld1N0YXRlIH0pKTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgIDwvQ2hpcHM+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBDb21wbGV4RmlsdGVyOiBTdG9yeUZuPHR5cGVvZiBDaGlwcz4gPSAoKSA9PiB7XG4gICAgY29uc3QgW2ZpbHRlclByaW5jaXBsZSwgc2V0RmlsdGVyUHJpbmNpcGxlXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICBjb25zdCBbcHJpbmNpcGxlLCBzZXRQcmluY2lwbGVdID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxDaGlwcyB2YXJpYW50PVwiZmlsdGVyXCIgYXJpYS1sYWJlbD1cIlByaW5jaXBsZSBmaWx0ZXJzXCI+XG4gICAgICAgICAgICAgICAgPENoaXBzLkl0ZW1cbiAgICAgICAgICAgICAgICAgICAgbGFiZWw9XCJQcmluY2lwbGVzXCJcbiAgICAgICAgICAgICAgICAgICAgcHJlc3NlZD17ZmlsdGVyUHJpbmNpcGxlfVxuICAgICAgICAgICAgICAgICAgICBvblRvZ2dsZT17bmV3U3RhdGUgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgaWYgKHByaW5jaXBsZSAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc2V0UHJpbmNpcGxlKHVuZGVmaW5lZCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAgICAgc2V0RmlsdGVyUHJpbmNpcGxlKG5ld1N0YXRlKTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgb25SZW1vdmU9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldFByaW5jaXBsZSh1bmRlZmluZWQpO1xuICAgICAgICAgICAgICAgICAgICAgICAgc2V0RmlsdGVyUHJpbmNpcGxlKGZhbHNlKTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgYXJpYS1jb250cm9scz1cInByaW5jaXBsZS1tZW51XCJcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9DaGlwcz5cbiAgICAgICAgICAgIDxkaXYgaWQ9XCJwcmluY2lwbGUtbWVudVwiPlxuICAgICAgICAgICAgICAgIHtmaWx0ZXJQcmluY2lwbGUgJiZcbiAgICAgICAgICAgICAgICAgICAgKHByaW5jaXBsZSA/IChcbiAgICAgICAgICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPHA+WW91ciBmYXZvcml0ZSBwcmluY2lwbGUgaXM6PC9wPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwPntwcmluY2lwbGV9PC9wPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwPldoYXQmYXBvcztzIHlvdXIgZmF2b3JpdGUgcHJpbmNpcGxlPzwvcD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Zm9ybVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvblN1Ym1pdD17ZSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yIC0gc3VibWl0dGVyIGV4aXN0cyBodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy9lbi1VUy9kb2NzL1dlYi9BUEkvU3VibWl0RXZlbnQvc3VibWl0dGVyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzZXRQcmluY2lwbGUoZS5uYXRpdmVFdmVudC5zdWJtaXR0ZXIudmFsdWUpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJzdWJtaXRcIiB2YWx1ZT1cIkFtYml0aW9uXCIgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJzdWJtaXRcIiB2YWx1ZT1cIkJvbGRuZXNzXCIgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJzdWJtaXRcIiB2YWx1ZT1cIkNvbGxhYm9yYXRpb25cIiAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZm9ybT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7OztNQVFhLE1BQU0sR0FBZTtJQUM5QixNQUFNLENBQUMsT0FBTyxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQztRQUNuQyxRQUFRLEVBQUUsS0FBSztRQUNmLFFBQVEsRUFBRSxLQUFLO1FBQ2YsYUFBYSxFQUFFLEtBQUs7S0FDdkIsQ0FBQyxDQUFDO0lBRUgsUUFDSUEsNkJBQUMsS0FBSyxJQUFDLE9BQU8sRUFBQyxRQUFRLGdCQUFZLG1CQUFtQixJQUNqRCxNQUFNLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxNQUN6Q0EsNkJBQUMsS0FBSyxDQUFDLElBQUksSUFDUCxHQUFHLEVBQUUsSUFBSSxFQUNULEtBQUssRUFBRSxJQUFJLEVBQ1gsT0FBTyxFQUFFLE9BQU8sRUFDaEIsUUFBUSxFQUFFLFFBQVE7WUFDZCxVQUFVLENBQUMsSUFBSSxLQUFLLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQyxJQUFJLEdBQUcsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDO1NBQ3ZELEdBQ0gsQ0FDTCxDQUFDLENBQ0UsRUFDVjtBQUNOLEVBQUU7TUFFVyxlQUFlLEdBQTBCO0lBQ2xELE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFDO1FBQ25DLFFBQVEsRUFBRSxLQUFLO1FBQ2YsUUFBUSxFQUFFLEtBQUs7UUFDZixhQUFhLEVBQUUsS0FBSztLQUN2QixDQUFDLENBQUM7SUFFSCxRQUNJQSw2QkFBQyxLQUFLLElBQUMsT0FBTyxFQUFDLFFBQVEsZ0JBQVksbUJBQW1CLElBQ2pELE1BQU0sQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLE1BQ3pDQSw2QkFBQyxLQUFLLENBQUMsSUFB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

package/dist/components/Chips/style/index.module.less

@@ -0,0 +1,94 @@
+@import '@preply/ds-web-core/dist/generated/tokens.less';
+@import '@preply/ds-web-core/dist/generated/hover.less';
+
+.chips {
+  &:is(ul) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  display: flex;
+  gap: @spacing-12;
+  flex-wrap: wrap;
+
+  & .chip {
+    & button {
+      all: unset;
+    }
+
+    box-sizing: border-box;
+    cursor: pointer;
+    height: @sizing-40;
+    width: fit-content;
+    font-size: @text-default-semibold-body-fontSize;
+    font-weight: @text-default-semibold-body-fontWeight;
+    line-height: @text-default-semibold-body-lineHeight;
+    color: @color-text-primary;
+    background-color: @color-background-primary;
+    border: solid @sizing-2;
+    border-radius: @radius-8;
+    border-color: @color-border-primary;
+    display: flex;
+    align-items: center;
+
+    .onHover({
+      background-color: @color-background-secondary;
+    });
+
+    &:has(.chip-toggle:focus-visible) {
+      outline: solid @sizing-2 @color-border-focus;
+      outline-offset: @spacing-2;
+    }
+
+    &:has(.chip-toggle:active) {
+      border-color: @color-border-secondary;
+      background-color: @color-background-tertiary;
+    }
+
+    &:has(.chip-toggle[aria-pressed="true"]) {
+      border-color: @color-border-secondary;
+      background-color: @color-background-tertiary;
+    }
+
+    & .chip-toggle {
+      padding: @spacing-8 @spacing-12;
+      display: flex;
+      gap: @spacing-8;
+    }
+
+    & .chip-remove {
+      height: fit-content;
+      width: fit-content;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: @spacing-8 @spacing-12 @spacing-8 0;
+      border-radius: inherit;
+
+      &:focus-visible {
+        outline: solid @sizing-2 @color-border-focus;
+        outline-offset: @spacing-1 @spacing-2;
+      }
+    }
+  }
+
+  &[data-variant="choice"] .chip {
+    &:has(.chip-toggle[aria-pressed="true"]) {
+      color: @color-text-inverted;
+      background-color: @color-background-primaryInverted;
+    }
+
+    & .chip-remove {
+      display: none;
+    }
+  }
+
+  &[data-variant="filter"] .chip {
+    &:has(.chip-toggle[aria-pressed="false"]) {
+      & .chip-remove {
+        display: none;
+      }
+    }
+  }
+}

package/dist/components/Chips/style/index.module.less.js

@@ -0,0 +1,9 @@
+import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".YZ85AY{grid-gap:var(--813599);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--813599)}.YZ85AY:is(ul){list-style:none;margin:0;padding:0}.YZ85AY ._34L6G2{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--3546c3);border:solid var(--26b8e3);border-color:var(--c03289);border-radius:var(--fa4b1a);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--628fb7);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:var(--475c79);font-weight:var(--a3f251);height:var(--ece0fe);line-height:var(--e33d9e);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.YZ85AY ._34L6G2 button{all:unset}@media (hover:hover) and (pointer:fine){.YZ85AY ._34L6G2:hover{background-color:var(--302ecf)}}.YZ85AY ._34L6G2[\\:has\\(\\.chip-toggle\\.focus-visible\\)]{outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--05dd73)}.YZ85AY ._34L6G2:has(._1cn67N._3uUAAw){outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--05dd73)}.YZ85AY ._34L6G2[\\:has\\(\\.chip-toggle\\:focus-visible\\)]{outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--05dd73)}.YZ85AY ._34L6G2:has(._1cn67N:focus-visible){outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--05dd73)}.YZ85AY ._34L6G2[\\:has\\(\\.chip-toggle\\:active\\)]{background-color:var(--a5c761);border-color:var(--11d206)}.YZ85AY ._34L6G2:has(._1cn67N:active){background-color:var(--a5c761);border-color:var(--11d206)}.YZ85AY ._34L6G2[\\:has\\(\\.chip-toggle\\[aria-pressed\\%3D\\%22true\\%22\\]\\)]{background-color:var(--a5c761);border-color:var(--11d206)}.YZ85AY ._34L6G2:has(._1cn67N[aria-pressed=true]){background-color:var(--a5c761);border-color:var(--11d206)}.YZ85AY ._34L6G2 ._1cn67N{grid-gap:var(--66b80b);gap:var(--66b80b);padding:var(--66b80b) var(--813599)}.YZ85AY ._34L6G2 ._1cn67N,.YZ85AY ._34L6G2 ._3JN2XO{display:-webkit-box;display:-ms-flexbox;display:flex}.YZ85AY ._34L6G2 ._3JN2XO{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:inherit;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:center;padding:var(--66b80b) var(--813599) var(--66b80b) 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.YZ85AY ._34L6G2 ._3JN2XO._3uUAAw{outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--109103) var(--05dd73)}.YZ85AY ._34L6G2 ._3JN2XO:focus-visible{outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--109103) var(--05dd73)}.YZ85AY[data-variant=choice] ._34L6G2[\\:has\\(\\.chip-toggle\\[aria-pressed\\%3D\\%22true\\%22\\]\\)]{background-color:var(--4983fe);color:var(--c2b191)}.YZ85AY[data-variant=choice] ._34L6G2:has(._1cn67N[aria-pressed=true]){background-color:var(--4983fe);color:var(--c2b191)}.YZ85AY[data-variant=choice] ._34L6G2 ._3JN2XO,.YZ85AY[data-variant=filter] ._34L6G2[\\:has\\(\\.chip-toggle\\[aria-pressed\\%3D\\%22false\\%22\\]\\)] ._3JN2XO{display:none}.YZ85AY[data-variant=filter] ._34L6G2:has(._1cn67N[aria-pressed=false]) ._3JN2XO{display:none}";
+var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Chips/style/index.module.less",__css:css_248z,"chips":"YZ85AY","chip":"_34L6G2","chip-toggle":"_1cn67N","focus-visible":"_3uUAAw","chip-remove":"_3JN2XO"};
+var stylesheet=css_248z;
+styleInject(css_248z);
+
+export { styles as default, stylesheet };
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-web-lib",
-    "version": "0.89.0",
+    "version": "0.90.0",
     "publishConfig": {
         "access": "public"
     },
@@ -19,26 +19,26 @@
         "dev": "run build:rollup -w"
     },
     "dependencies": {
-        "@preply/ds-core": "0.89.0",
-        "@preply/ds-media-icons": "0.89.0",
-        "@preply/ds-web-core": "0.89.0",
-        "@preply/ds-web-root": "0.89.0"
+        "@preply/ds-core": "0.90.0",
+        "@preply/ds-media-icons": "0.90.0",
+        "@preply/ds-web-core": "0.90.0",
+        "@preply/ds-web-root": "0.90.0"
     },
     "peerDependencies": {
-        "@preply/ds-core": "0.89.0",
-        "@preply/ds-media-icons": "0.89.0",
-        "@preply/ds-web-core": "0.89.0",
-        "@preply/ds-web-root": "0.89.0",
+        "@preply/ds-core": "0.90.0",
+        "@preply/ds-media-icons": "0.90.0",
+        "@preply/ds-web-core": "0.90.0",
+        "@preply/ds-web-root": "0.90.0",
         "react": "^16.8.3",
         "react-dom": "^16.8.3"
     },
     "devDependencies": {
-        "@preply/ds-docs-toolkit": "0.89.0",
-        "@preply/ds-theme-base-ui": "0.89.0",
+        "@preply/ds-docs-toolkit": "0.90.0",
+        "@preply/ds-theme-base-ui": "0.90.0",
         "@storybook/addon-docs": "6.4.18",
         "@storybook/react": "6.4.18",
         "@testing-library/react": "11.2.7",
         "jsdom-testing-mocks": "^1.7.0"
     },
-    "gitHead": "293697a55628843bf7200892b6538fa20679a270"
+    "gitHead": "8e1681043308f1b95c899e56ae48d76c094406df"
 }