@searchspring/snap-preact-components 0.41.2 → 0.42.0

package/dist/cjs/components/Atoms/Button/Button.d.ts

@@ -14,5 +14,6 @@ export interface ButtonProps extends ComponentProps {
     disabled?: boolean;
     native?: boolean;
     onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    disableA11y?: boolean;
 }
 //# sourceMappingURL=Button.d.ts.map

package/dist/cjs/components/Atoms/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA6B5D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA8B5D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAwDnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/cjs/components/Atoms/Button/Button.js

@@ -21,6 +21,7 @@ var react_1 = require("@emotion/react");
 var classnames_1 = __importDefault(require("classnames"));
 var mobx_react_lite_1 = require("mobx-react-lite");
 var providers_1 = require("../../../providers");
+var useA11y_1 = require("../../../hooks/useA11y");
 var CSS = {
     button: function (_a) {
         var _b, _c, _d;
@@ -53,8 +54,10 @@ exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
     var _a, _b, _c;
     var globalTheme = (0, providers_1.useTheme)();
     var theme = __assign(__assign({}, globalTheme), properties.theme);
-    var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.button), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.button);
-    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var props = __assign(__assign(__assign({ 
+        // default props
+        disableA11y: false }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.button), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.button);
+    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var elementProps = {
         css: disableStyles
             ? [style]
@@ -73,9 +76,12 @@ exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
         disabled: disabled,
         onClick: function (e) { return !disabled && onClick && onClick(e); },
     };
+    var a11yProps = {
+        ref: function (e) { return (0, useA11y_1.useA11y)(e); },
+    };
     return content || children ? ((0, react_1.jsx)(providers_1.CacheProvider, null, native ? ((0, react_1.jsx)("button", __assign({}, elementProps),
         content,
-        children)) : ((0, react_1.jsx)("div", __assign({}, elementProps),
+        children)) : ((0, react_1.jsx)("div", __assign({}, (!disableA11y ? a11yProps : {}), elementProps, { role: 'button', "aria-disabled": disabled }),
         content,
         children)))) : ((0, react_1.jsx)(preact_1.Fragment, null));
 });

package/dist/cjs/components/Atoms/Button/Button.stories.d.ts

@@ -161,6 +161,20 @@ declare const _default: {
                 type: string;
             };
         };
+        disableA11y: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/cjs/components/Atoms/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI/C,wBA4FE;AAEF,eAAO,MAAM,OAAO;WAAU,WAAW;;;;CAAyB,CAAC;AAKnE,eAAO,MAAM,QAAQ;WAAU,WAAW;;;;;CAAyB,CAAC;AAMpE,eAAO,MAAM,MAAM;WAAU,WAAW;;;;;CAAyB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI/C,wBAsGE;AAEF,eAAO,MAAM,OAAO;WAAU,WAAW;;;;CAAyB,CAAC;AAKnE,eAAO,MAAM,QAAQ;WAAU,WAAW;;;;;CAAyB,CAAC;AAMpE,eAAO,MAAM,MAAM;WAAU,WAAW;;;;;CAAyB,CAAC"}

package/dist/cjs/components/Atoms/Button/Button.stories.js

@@ -98,6 +98,15 @@ exports.default = {
                 defaultValue: { summary: false },
             },
             control: { type: 'boolean' },
+        }, disableA11y: {
+            description: 'boolean to disable autoset ally properties',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
         } }, utilities_1.componentArgs),
 };
 var Default = function (args) { return (0, preact_1.h)(Button_1.Button, __assign({}, args)); };

package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts

@@ -16,5 +16,6 @@ export interface DropdownProps extends ComponentProps {
     onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
     startOpen?: boolean;
     disableClickOutside?: boolean;
+    disableA11y?: boolean;
 }
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAC;AAOzD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA8B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA4FvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAC;AAOzD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAiGvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/cjs/components/Atoms/Dropdown/Dropdown.js

@@ -22,6 +22,7 @@ var mobx_react_lite_1 = require("mobx-react-lite");
 var providers_1 = require("../../../providers");
 var hooks_2 = require("../../../hooks");
 var utilities_1 = require("../../../utilities");
+var useA11y_1 = require("../../../hooks/useA11y");
 var CSS = {
     dropdown: function (_a) {
         var disableOverlay = _a.disableOverlay;
@@ -54,8 +55,8 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
     var globalTheme = (0, providers_1.useTheme)();
     var props = __assign(__assign(__assign({ 
         // default props
-        startOpen: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.dropdown), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.dropdown);
-    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, disableOverlay = props.disableOverlay, onClick = props.onClick, onToggle = props.onToggle, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableStyles = props.disableStyles, className = props.className, style = props.style;
+        startOpen: false, disableA11y: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.dropdown), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.dropdown);
+    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, disableOverlay = props.disableOverlay, onClick = props.onClick, onToggle = props.onToggle, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var showContent, setShowContent;
     var stateful = open === undefined;
     if (stateful) {
@@ -93,7 +94,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     return ((0, react_1.jsx)(providers_1.CacheProvider, null,
         (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef }),
-            (0, react_1.jsx)("div", { className: "ss__dropdown__button", onClick: function (e) {
+            (0, react_1.jsx)("div", { className: "ss__dropdown__button", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-expanded": showContent, role: "button", onClick: function (e) {
                     if (!disabled) {
                         toggleShowContent(e);
                         onClick && onClick(e);

package/dist/cjs/components/Atoms/Dropdown/Dropdown.stories.d.ts

@@ -185,6 +185,20 @@ declare const _default: {
             };
             action: string;
         };
+        disableA11y: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/cjs/components/Atoms/Dropdown/Dropdown.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAgHE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;;CAA2B,CAAC;AAMvE,eAAO,MAAM,aAAa;WAAU,aAAa;;;;;;CAA2B,CAAC;AAO7E,eAAO,MAAM,UAAU;WAAU,aAAa;;;;;CAA2B,CAAC;AAM1E,eAAO,MAAM,WAAW;WAAU,aAAa;;;;;CAA6D,CAAC;AAM7G,eAAO,MAAM,cAAc;WAAU,aAAa;;;;;CAA6D,CAAC"}
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA0HE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;;CAA2B,CAAC;AAMvE,eAAO,MAAM,aAAa;WAAU,aAAa;;;;;;CAA2B,CAAC;AAO7E,eAAO,MAAM,UAAU;WAAU,aAAa;;;;;CAA2B,CAAC;AAM1E,eAAO,MAAM,WAAW;WAAU,aAAa;;;;;CAA6D,CAAC;AAM7G,eAAO,MAAM,cAAc;WAAU,aAAa;;;;;CAA6D,CAAC"}

package/dist/cjs/components/Atoms/Dropdown/Dropdown.stories.js

@@ -117,6 +117,15 @@ exports.default = {
                 },
             },
             action: 'onToggle',
+        }, disableA11y: {
+            description: 'boolean to disable autoset ally properties',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
         } }, utilities_1.componentArgs),
 };
 var Default = function (args) { return (0, preact_1.h)(Dropdown_1.Dropdown, __assign({}, args)); };

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8H9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+JvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAA4C,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAmI9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+JvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}

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

@@ -73,6 +73,10 @@ var CSS = {
             margin: 0,
             padding: 0,
             overflow: 'hidden',
+            '.swiper-notification': {
+                position: 'absolute',
+                left: '100000000000000px',
+            },
             '&.ss__carousel-vertical': {
                 flexDirection: 'column',
                 '.swiper-slide': {
@@ -246,7 +250,7 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
             // component theme overrides
             theme: props.theme }),
     };
-    var swiperModulesUnfiltered = modules ? [core_1.Navigation, core_1.Pagination].concat(modules) : [core_1.Navigation, core_1.Pagination];
+    var swiperModulesUnfiltered = modules ? [core_1.Navigation, core_1.Pagination, core_1.A11y].concat(modules) : [core_1.Navigation, core_1.Pagination, core_1.A11y];
     //remove any duplicates, in case user passes in Navigation or Pagination
     var swiperModules = swiperModulesUnfiltered.filter(function (module, pos) { return swiperModulesUnfiltered.indexOf(module) === pos; });
     core_1.default.use(swiperModules);

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

@@ -13,5 +13,6 @@ export interface CheckboxProps extends ComponentProps {
     size?: string;
     startChecked?: boolean;
     native?: boolean;
+    disableA11y?: boolean;
 }
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA0B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAuFvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+FvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

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

@@ -22,6 +22,7 @@ var mobx_react_lite_1 = require("mobx-react-lite");
 var utilities_1 = require("../../../utilities");
 var providers_1 = require("../../../providers");
 var Icon_1 = require("../../Atoms/Icon");
+var useA11y_1 = require("../../../hooks/useA11y");
 var CSS = {
     checkbox: function (_a) {
         var _b;
@@ -52,8 +53,8 @@ exports.Checkbox = (0, mobx_react_lite_1.observer)(function (properties) {
     var theme = __assign(__assign({}, globalTheme), properties.theme);
     var props = __assign(__assign(__assign({ 
         // default props
-        size: '12px', startChecked: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.checkbox), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.checkbox);
-    var checked = props.checked, color = props.color, disabled = props.disabled, icon = props.icon, iconColor = props.iconColor, onClick = props.onClick, size = props.size, startChecked = props.startChecked, native = props.native, disableStyles = props.disableStyles, className = props.className, style = props.style;
+        size: '12px', startChecked: false, disableA11y: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.checkbox), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.checkbox);
+    var checked = props.checked, color = props.color, disabled = props.disabled, icon = props.icon, iconColor = props.iconColor, onClick = props.onClick, size = props.size, startChecked = props.startChecked, native = props.native, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var subProps = {
         icon: __assign(__assign(__assign({ 
             // default props
@@ -97,5 +98,5 @@ exports.Checkbox = (0, mobx_react_lite_1.observer)(function (properties) {
     else if (style) {
         styling.css = [style];
     }
-    return ((0, react_1.jsx)(providers_1.CacheProvider, null, native ? ((0, react_1.jsx)("input", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), type: "checkbox", onClick: function (e) { return clickFunc(e); }, disabled: disabled, checked: checkedState }))) : ((0, react_1.jsx)("span", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), onClick: function (e) { return clickFunc(e); } }), checkedState ? (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon)) : (0, react_1.jsx)("span", { className: "ss__checkbox__empty" })))));
+    return ((0, react_1.jsx)(providers_1.CacheProvider, null, native ? ((0, react_1.jsx)("input", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), type: "checkbox", onClick: function (e) { return clickFunc(e); }, disabled: disabled, checked: checkedState }))) : ((0, react_1.jsx)("span", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), onClick: function (e) { return clickFunc(e); }, ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-label": "".concat(disabled ? 'disabled' : '', " ").concat(checkedState ? 'checked' : 'unchecked', " checkbox"), role: "checkbox" }), checkedState ? (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon)) : (0, react_1.jsx)("span", { className: "ss__checkbox__empty" })))));
 });

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

@@ -187,6 +187,20 @@ declare const _default: {
             };
             action: string;
         };
+        disableA11y: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAEF,eAAO,MAAM,OAAO,SAAU,aAAa,kBAA2B,CAAC;AAEvE,eAAO,MAAM,QAAQ;WAAU,aAAa;;;;;CAA2B,CAAC;AAMxE,eAAO,MAAM,MAAM;WAAU,aAAa;;;;CAA2B,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAwHE;AAEF,eAAO,MAAM,OAAO,SAAU,aAAa,kBAA2B,CAAC;AAEvE,eAAO,MAAM,QAAQ;WAAU,aAAa;;;;;CAA2B,CAAC;AAMxE,eAAO,MAAM,MAAM;WAAU,aAAa;;;;CAA2B,CAAC"}

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

@@ -125,6 +125,15 @@ exports.default = {
                 },
             },
             action: 'onClick',
+        }, disableA11y: {
+            description: 'boolean to disable autoset ally properties',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
         } }, utilities_1.componentArgs),
 };
 var Default = function (args) { return (0, preact_1.h)(Checkbox_1.Checkbox, __assign({}, args)); };

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

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import { FacetValue } from '@searchspring/snap-store-mobx';
+import type { FacetValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetGridOptionsProps extends ComponentProps {
-    values: FacetValue[];
+    values?: FacetValue[];
     columns?: number;
     gapSize?: string;
     onClick?: (e: React.MouseEvent) => void;
+    facet?: ValueFacet;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAiE3D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAoDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAiE5E,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA6DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -91,7 +91,7 @@ exports.FacetGridOptions = (0, mobx_react_lite_1.observer)(function (properties)
     var props = __assign(__assign(__assign({ 
         // default props
         columns: 4, gapSize: '8px' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facetGridOptions), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facetGridOptions);
-    var values = props.values, columns = props.columns, gapSize = props.gapSize, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var values = props.values, columns = props.columns, gapSize = props.gapSize, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var styling = {};
     if (!disableStyles) {
         styling.css = [CSS.grid({ columns: columns, gapSize: gapSize, theme: theme }), style];
@@ -99,10 +99,15 @@ exports.FacetGridOptions = (0, mobx_react_lite_1.observer)(function (properties)
     else if (style) {
         styling.css = [style];
     }
-    return (values === null || values === void 0 ? void 0 : values.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-grid-options', className) }), values.map(function (value) {
+    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.values);
+    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-grid-options', className) }), facetValues.map(function (value) {
             var _a, _b;
-            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps, { href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
+            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), "aria-label": value.filtered
+                    ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
+                    : (facet === null || facet === void 0 ? void 0 : facet.label)
+                        ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
+                        : "filter by ".concat(value.label) }, valueProps, { onMouseEnter: function (e) { return previewOnFocus && valueProps.onMouseEnter(e, value); }, href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
                     var _a, _b;
                     (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
                     onClick && onClick(e);

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

@@ -79,6 +79,20 @@ declare const _default: {
                 type: string;
             };
         };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         columns: {
             defaultValue: number;
             description: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAoFE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}
+{"version":3,"file":"FacetGridOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA8FE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}

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

@@ -74,13 +74,22 @@ exports.default = {
     ],
     argTypes: __assign({ values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'facet values store array',
                 },
             },
             control: { type: 'none' },
+        }, facet: {
+            description: 'Facet store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
         }, columns: {
             defaultValue: 4,
             description: 'Number of columns in grid',

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import type { FacetHierarchyValue } from '@searchspring/snap-store-mobx';
+import type { FacetHierarchyValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetHierarchyOptionsProps extends ComponentProps {
-    values: FacetHierarchyValue[];
+    values?: FacetHierarchyValue[];
     hideCount?: boolean;
+    facet?: ValueFacet;
     onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;

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

@@ -1 +1 @@
-{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AA2CzE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAqDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA2CrF,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CA8DjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -69,7 +69,7 @@ exports.FacetHierarchyOptions = (0, mobx_react_lite_1.observer)(function (proper
     var globalTheme = (0, providers_1.useTheme)();
     var theme = __assign(__assign({}, globalTheme), properties.theme);
     var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facetHierarchyOptions), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facetHierarchyOptions);
-    var values = props.values, hideCount = props.hideCount, onClick = props.onClick, disableStyles = props.disableStyles, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, className = props.className, style = props.style;
+    var values = props.values, hideCount = props.hideCount, onClick = props.onClick, disableStyles = props.disableStyles, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, className = props.className, style = props.style;
     var styling = {};
     if (!disableStyles) {
         styling.css = [CSS.hierarchy({ theme: theme }), style];
@@ -77,14 +77,19 @@ exports.FacetHierarchyOptions = (0, mobx_react_lite_1.observer)(function (proper
     else if (style) {
         styling.css = [style];
     }
-    return (values === null || values === void 0 ? void 0 : values.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-hierarchy-options', className) }), values.map(function (value) {
+    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.values);
+    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-hierarchy-options', className) }), facetValues.map(function (value) {
             var _a, _b;
-            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
+            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), "aria-label": value.filtered
+                    ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
+                    : (facet === null || facet === void 0 ? void 0 : facet.label)
+                        ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
+                        : "filter by ".concat(value.label), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
                     var _a, _b;
                     (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
                     onClick && onClick(e);
-                }, onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps),
+                } }, valueProps, { onMouseEnter: function (e) { return previewOnFocus && valueProps.onMouseEnter(e, value); } }),
                 (0, react_1.jsx)("span", { className: "ss__facet-hierarchy-options__option__value" },
                     value.label,
                     !hideCount && (value === null || value === void 0 ? void 0 : value.count) > 0 && !value.filtered && ((0, react_1.jsx)("span", { className: "ss__facet-hierarchy-options__option__value__count" },

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

@@ -79,6 +79,20 @@ declare const _default: {
                 type: string;
             };
         };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         hideCount: {
             defaultValue: boolean;
             description: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FacetHierarchyOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAyB,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAK5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAyEE;AAaF,eAAO,MAAM,OAAO;WAAU,0BAA0B;;wBAAsD,gBAAgB;;;;;;CAE7H,CAAC"}
+{"version":3,"file":"FacetHierarchyOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAyB,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAK5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAmFE;AAaF,eAAO,MAAM,OAAO;WAAU,0BAA0B;;wBAAsD,gBAAgB;;;;;;CAE7H,CAAC"}

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

@@ -75,13 +75,22 @@ exports.default = {
     ],
     argTypes: __assign({ values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'object',
                 },
             },
             control: { type: 'object' },
+        }, facet: {
+            description: 'Facet store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
         }, hideCount: {
             defaultValue: false,
             description: 'Hide facet option count',

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

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import type { FacetValue } from '@searchspring/snap-store-mobx';
+import type { FacetValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetListOptionsProps extends ComponentProps {
-    values: FacetValue[];
+    values?: FacetValue[];
     hideCheckbox?: boolean;
     hideCount?: boolean;
+    facet?: ValueFacet;
     onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;

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

@@ -1 +1 @@
-{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA6BhE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA+DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA6B5E,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAwEvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -57,7 +57,7 @@ exports.FacetListOptions = (0, mobx_react_lite_1.observer)(function (properties)
     var globalTheme = (0, providers_1.useTheme)();
     var theme = __assign(__assign({}, globalTheme), properties.theme);
     var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facetListOptions), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facetListOptions);
-    var values = props.values, hideCheckbox = props.hideCheckbox, hideCount = props.hideCount, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var values = props.values, hideCheckbox = props.hideCheckbox, hideCount = props.hideCount, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, disableStyles = props.disableStyles, className = props.className, style = props.style;
     var subProps = {
         checkbox: __assign(__assign(__assign({ 
             // default props
@@ -74,15 +74,20 @@ exports.FacetListOptions = (0, mobx_react_lite_1.observer)(function (properties)
     else if (style) {
         styling.css = [style];
     }
-    return (values === null || values === void 0 ? void 0 : values.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
-        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-list-options', className) }), values.map(function (value) {
+    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.values);
+    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-list-options', className) }), facetValues.map(function (value) {
             var _a, _b;
-            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onFocus: function () { return previewOnFocus && value.preview && value.preview(); } }, valueProps, { href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
+            return ((0, react_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), "aria-label": value.filtered
+                    ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
+                    : (facet === null || facet === void 0 ? void 0 : facet.label)
+                        ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
+                        : "filter by ".concat(value.label) }, valueProps, { onMouseEnter: function (e) { return previewOnFocus && valueProps.onMouseEnter(e, value); }, href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href, onClick: function (e) {
                     var _a, _b;
                     (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
                     onClick && onClick(e);
                 } }),
-                !hideCheckbox && (0, react_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: value.filtered })),
+                !hideCheckbox && (0, react_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: value.filtered, disableA11y: true })),
                 (0, react_1.jsx)("span", { className: "ss__facet-list-options__option__value" },
                     value.label,
                     !hideCount && (value === null || value === void 0 ? void 0 : value.count) > 0 && (0, react_1.jsx)("span", { className: "ss__facet-list-options__option__value__count" },