@searchspring/snap-preact-components 0.20.0

package/dist/cjs/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.js

@@ -0,0 +1,175 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var preact_1 = require("preact");
+var mobx_react_1 = require("mobx-react");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var FacetPaletteOptions_1 = require("./FacetPaletteOptions");
+var utilities_1 = require("../../../utilities");
+var snapify_1 = require("../../../utilities/snapify");
+var readme_md_1 = __importDefault(require("../FacetPaletteOptions/readme.md"));
+exports.default = {
+    title: "Molecules/FacetPaletteOptions",
+    component: FacetPaletteOptions_1.FacetPaletteOptions,
+    parameters: {
+        docs: {
+            page: function () { return ((0, preact_1.h)("div", null,
+                (0, preact_1.h)(readme_md_1.default, null),
+                (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
+        },
+    },
+    decorators: [
+        function (Story) { return ((0, preact_1.h)("div", { style: { maxWidth: '300px' } },
+            (0, preact_1.h)(Story, null))); },
+    ],
+    argTypes: __assign({ values: {
+            description: 'Facet.values store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'facet values store array',
+                },
+            },
+            control: { type: 'none' },
+        }, columns: {
+            defaultValue: 4,
+            description: 'Number of columns in palette',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 4 },
+            },
+            control: { type: 'number' },
+        }, gapSize: {
+            defaultValue: '8px',
+            description: 'Gap size between rows and columns',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '8px' },
+            },
+            control: { type: 'text' },
+        }, hideLabel: {
+            description: 'Hide facet option label',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, hideIcon: {
+            description: 'Hide facet option icon',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, previewOnFocus: {
+            description: 'Invoke facet value preview upon focus',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, valueProps: {
+            description: 'Object of facet value props',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+                defaultValue: { summary: '{}' },
+            },
+            control: { type: 'object' },
+        }, onClick: {
+            description: 'Facet option click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        } }, utilities_1.componentArgs),
+};
+var snapInstance = snapify_1.Snapify.search({ id: 'FacetPaletteOptions', globals: { siteId: '8uyt2m' } });
+var ObservableFacetPaletteOptions = (0, mobx_react_1.observer)(function (_a) {
+    var _b;
+    var args = _a.args, controller = _a.controller;
+    var sizeFacet = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.facets.filter(function (facet) { return facet.field == 'color_family'; }).pop();
+    return (0, preact_1.h)(FacetPaletteOptions_1.FacetPaletteOptions, __assign({}, args, { values: sizeFacet.values }));
+});
+var Template = function (args, _a) {
+    var controller = _a.loaded.controller;
+    return (0, preact_1.h)(ObservableFacetPaletteOptions, { args: args, controller: controller });
+};
+exports.Default = Template.bind({});
+exports.Default.loaders = [
+    function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, snapInstance.search()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, {
+                            controller: snapInstance,
+                        }];
+            }
+        });
+    }); },
+];

package/dist/cjs/components/Molecules/FacetPaletteOptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FacetPaletteOptions';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/Molecules/FacetPaletteOptions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/cjs/components/Molecules/FacetPaletteOptions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FacetPaletteOptions"), exports);

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, RangeFacet } from '../../../types';
+export declare const FacetSlider: ((properties: FacetSliderProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FacetSliderProps extends ComponentProps {
+    trackColor?: string;
+    railColor?: string;
+    handleColor?: string;
+    handleDraggingColor?: string;
+    valueTextColor?: string;
+    showTicks?: boolean;
+    tickSize?: number;
+    tickTextColor?: string;
+    stickyHandleLabel?: boolean;
+    facet: RangeFacet;
+    onChange?: (values: number[]) => void;
+    onDrag?: (values: number[]) => void;
+}
+//# sourceMappingURL=FacetSlider.d.ts.map

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA+H5D,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAgJ7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC"}

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.js

@@ -0,0 +1,232 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FacetSlider = void 0;
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var react_ranger_1 = require("react-ranger");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var CSS = {
+    facetSlider: function (_a) {
+        var _b, _c, _d, _e;
+        var railColor = _a.railColor, trackColor = _a.trackColor, handleColor = _a.handleColor, valueTextColor = _a.valueTextColor, handleDraggingColor = _a.handleDraggingColor, showTicks = _a.showTicks, stickyHandleLabel = _a.stickyHandleLabel, tickTextColor = _a.tickTextColor, theme = _a.theme;
+        return (0, react_1.css)({
+            display: 'flex',
+            flexDirection: 'column',
+            marginTop: '5px',
+            marginBottom: showTicks && stickyHandleLabel ? '20px' : showTicks || stickyHandleLabel ? '10px' : '5px',
+            '& .ss__facet-slider__slider': {
+                position: 'relative',
+                display: 'inline-block',
+                height: '8px',
+                width: 'calc(100% - 2rem)',
+                margin: stickyHandleLabel ? '1rem' : '0 1rem',
+                top: '10px',
+            },
+            '& .ss__facet-slider__tick': {
+                '&:before': {
+                    content: "''",
+                    position: 'absolute',
+                    left: '0',
+                    background: 'rgba(0, 0, 0, 0.2)',
+                    height: '5px',
+                    width: '2px',
+                    transform: 'translate(-50%, 0.7rem)',
+                },
+                '& .ss__facet-slider__tick__label': {
+                    position: 'absolute',
+                    fontSize: '0.6rem',
+                    color: tickTextColor,
+                    top: '100%',
+                    transform: 'translate(-50%, 1.2rem)',
+                    whiteSpace: 'nowrap',
+                },
+            },
+            '& .ss__facet-slider__rail': {
+                background: railColor || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#333',
+                height: '100%',
+            },
+            '& .ss__facet-slider__segment': {
+                background: trackColor || ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.secondary) || '#ccc',
+                height: '100%',
+            },
+            '& .ss__facet-slider__handles': {
+                textAlign: 'center',
+                '& button': {
+                    '& .ss__facet-slider__handle': {
+                        background: handleColor || ((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) || '#333',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '1.6rem',
+                        height: '1.6rem',
+                        borderRadius: '100%',
+                        fontSize: '0.7rem',
+                        whiteSpace: 'nowrap',
+                        color: valueTextColor || 'initial',
+                        fontWeight: 'normal',
+                        transform: 'translateY(0) scale(0.9)',
+                        transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                        position: 'relative',
+                        cursor: 'pointer',
+                        '&:after': {
+                            backgroundColor: '#ffffff',
+                            width: '30%',
+                            height: '30%',
+                            top: '0',
+                            bottom: '0',
+                            left: '0',
+                            content: '""',
+                            position: 'absolute',
+                            right: '0',
+                            borderRadius: '12px',
+                            margin: 'auto',
+                            cursor: 'pointer',
+                        },
+                        '&.ss__facet-slider__handle--active': {
+                            background: handleDraggingColor || handleColor || ((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#000',
+                            '& label.ss__facet-slider__handle__label': {
+                                background: '#fff',
+                                padding: '0 5px',
+                            },
+                        },
+                        '& label.ss__facet-slider__handle__label': {
+                            display: 'inline-block',
+                            marginTop: showTicks && !stickyHandleLabel ? '35px' : '20px',
+                            '&.ss__facet-slider__handle__label--pinleft': {
+                                left: '0px',
+                            },
+                            '&.ss__facet-slider__handle__label--pinright': {
+                                right: '0px',
+                            },
+                            '&.ss__facet-slider__handle__label--sticky': {
+                                position: 'absolute',
+                                top: '-20px',
+                                fontFamily: 'Roboto, Helvetica, Arial',
+                                fontSize: '14px',
+                                marginTop: '0px',
+                            },
+                        },
+                    },
+                },
+            },
+            '& .ss__facet-slider__labels': {
+                textAlign: 'center',
+                marginTop: showTicks && !stickyHandleLabel ? '40px' : '20px',
+                color: valueTextColor,
+                '& .ss__facet-slider__label--0': {
+                    '&:after': {
+                        content: '"-"',
+                        padding: '5px',
+                    },
+                },
+            },
+        });
+    },
+};
+exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        tickSize: ((_a = properties.facet) === null || _a === void 0 ? void 0 : _a.step) * 10 || 20 }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.facetSlider), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.facetSlider);
+    var tickTextColor = props.tickTextColor, trackColor = props.trackColor, valueTextColor = props.valueTextColor, railColor = props.railColor, handleColor = props.handleColor, handleDraggingColor = props.handleDraggingColor, showTicks = props.showTicks, tickSize = props.tickSize, facet = props.facet, stickyHandleLabel = props.stickyHandleLabel, onChange = props.onChange, onDrag = props.onDrag, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var _s = (0, hooks_1.useState)([(_e = facet.active) === null || _e === void 0 ? void 0 : _e.low, (_f = facet.active) === null || _f === void 0 ? void 0 : _f.high]), values = _s[0], setValues = _s[1];
+    var _t = (0, hooks_1.useState)([(_g = facet.active) === null || _g === void 0 ? void 0 : _g.low, (_h = facet.active) === null || _h === void 0 ? void 0 : _h.high]), active = _t[0], setActive = _t[1];
+    if (values[0] != ((_j = facet.active) === null || _j === void 0 ? void 0 : _j.low) || values[1] != ((_k = facet.active) === null || _k === void 0 ? void 0 : _k.high)) {
+        setActive([(_l = facet.active) === null || _l === void 0 ? void 0 : _l.low, (_m = facet.active) === null || _m === void 0 ? void 0 : _m.high]);
+        setValues([(_o = facet.active) === null || _o === void 0 ? void 0 : _o.low, (_p = facet.active) === null || _p === void 0 ? void 0 : _p.high]);
+    }
+    var _u = (0, react_ranger_1.useRanger)({
+        values: active,
+        onChange: function (val) {
+            var _a;
+            setActive(val);
+            if ((_a = facet === null || facet === void 0 ? void 0 : facet.services) === null || _a === void 0 ? void 0 : _a.urlManager) {
+                if (val[0] == facet.range.low && val[1] == facet.range.high) {
+                    facet.services.urlManager.remove('page').remove("filter.".concat(facet.field)).go();
+                }
+                else {
+                    facet.services.urlManager.remove('page').set("filter.".concat(facet.field), { low: val[0], high: val[1] }).go();
+                }
+            }
+            onChange && onChange(val);
+        },
+        onDrag: function (val) {
+            setActive(val);
+            onDrag && onDrag(val);
+        },
+        min: (_q = facet.range) === null || _q === void 0 ? void 0 : _q.low,
+        max: (_r = facet.range) === null || _r === void 0 ? void 0 : _r.high,
+        stepSize: facet.step,
+        tickSize: tickSize,
+    }), getTrackProps = _u.getTrackProps, ticks = _u.ticks, segments = _u.segments, handles = _u.handles;
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [
+            CSS.facetSlider({
+                railColor: railColor,
+                trackColor: trackColor,
+                handleColor: handleColor,
+                valueTextColor: valueTextColor,
+                handleDraggingColor: handleDraggingColor,
+                showTicks: showTicks,
+                stickyHandleLabel: stickyHandleLabel,
+                tickTextColor: tickTextColor,
+                theme: theme,
+            }),
+            style,
+        ];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (facet.range &&
+        facet.active &&
+        facet.step && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__facet-slider', className) }, getTrackProps(), styling),
+            (0, react_1.jsx)("div", { className: "ss__facet-slider__slider" },
+                showTicks &&
+                    ticks.map(function (_a) {
+                        var value = _a.value, getTickProps = _a.getTickProps;
+                        return ((0, react_1.jsx)("div", __assign({ className: "ss__facet-slider__tick" }, getTickProps()),
+                            (0, react_1.jsx)("div", { className: "ss__facet-slider__tick__label" }, value)));
+                    }),
+                segments.map(function (_a, index) {
+                    var getSegmentProps = _a.getSegmentProps;
+                    return ((0, react_1.jsx)("div", __assign({ className: "".concat(index === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment') }, getSegmentProps(), { index: index })));
+                }),
+                (0, react_1.jsx)("div", { className: 'ss__facet-slider__handles' }, handles.map(function (_a, idx) {
+                    var value = _a.value, active = _a.active, getHandleProps = _a.getHandleProps;
+                    return ((0, react_1.jsx)("button", __assign({ type: "button" }, getHandleProps({
+                        style: {
+                            appearance: 'none',
+                            border: 'none',
+                            background: 'transparent',
+                            outline: 'none',
+                        },
+                    })),
+                        (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == facet.range.low }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == facet.range.high }) }, (0, utilities_1.sprintf)(facet.formatValue, value))))));
+                }))),
+            !stickyHandleLabel && ((0, react_1.jsx)("div", { className: 'ss__facet-slider__labels' }, handles.map(function (_a, idx) {
+                var value = _a.value;
+                return ((0, react_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__label', "ss__facet-slider__label--".concat(idx)) }, (0, utilities_1.sprintf)(facet.formatValue, value)));
+            })))))));
+});

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts

@@ -0,0 +1,211 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FacetSliderProps } from './FacetSlider';
+declare const _default: {
+    title: string;
+    component: ((properties: FacetSliderProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    decorators: ((Story: any) => h.JSX.Element)[];
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        showTicks: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        tickSize: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        tickTextColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        trackColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        railColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        valueTextColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        handleColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        stickyHandleLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        handleDraggingColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onDrag: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Price: any;
+//# sourceMappingURL=FacetSlider.stories.d.ts.map

package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAuIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}