@searchspring/snap-preact-components 0.25.1 → 0.27.0

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAY9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

@@ -27,6 +27,7 @@ var CSS = {
             fill: color || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary),
             width: width || size,
             height: height || size,
+            position: 'relative',
         });
     },
 };

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import 'swiper/swiper.min.css';
 import { ComponentProps, BreakpointsProps } from '../../../types';
 export declare const defaultCarouselBreakpoints: {
     0: {

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":";AASA,OAAO,uBAAuB,CAAC;AAM/B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2FlE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA8IvE,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,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,KAAK,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACzB"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA8HlE,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA8IvE,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,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,KAAK,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACzB"}

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

@@ -55,7 +55,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var mobx_react_lite_1 = require("mobx-react-lite");
 var deepmerge_1 = __importDefault(require("deepmerge"));
 var core_1 = __importStar(require("swiper/core"));
-require("swiper/swiper.min.css");
 var Icon_1 = require("../../Atoms/Icon/Icon");
 var react_2 = require("swiper/react");
 var utilities_1 = require("../../../utilities");
@@ -117,9 +116,35 @@ var CSS = {
             '.swiper-container': {
                 display: 'flex',
                 flexDirection: 'column',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                position: 'relative',
+                overflow: 'hidden',
+                listStyle: 'none',
+                padding: 0,
+                zIndex: 1,
+            },
+            '.swiper-container-vertical': {
+                '.swiper-wrapper': {
+                    flexDirection: 'column',
+                },
             },
             '.swiper-wrapper': {
                 order: 0,
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+                zIndex: 1,
+                display: 'flex',
+                transitionProperty: 'transform',
+                boxSizing: 'content-box',
+            },
+            '.swiper-slide': {
+                flexShrink: 0,
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                transitionProperty: 'transform',
             },
             '.swiper-pagination': {
                 display: 'flex',
@@ -143,6 +168,15 @@ var CSS = {
                     background: ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#000',
                 },
             },
+            '.swiper-container-pointer-events': {
+                touchAction: 'pan-y',
+                '&.swiper-container-vertical': {
+                    touchAction: 'pan-x',
+                },
+            },
+            '.swiper-slide-invisible-blank': {
+                visibility: 'hidden',
+            },
         });
     },
 };

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

@@ -1 +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"}
+{"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;;CAwJ7E,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

@@ -141,20 +141,28 @@ var CSS = {
     },
 };
 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 _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     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 tickTextColor = props.tickTextColor, trackColor = props.trackColor, valueTextColor = props.valueTextColor, railColor = props.railColor, handleColor = props.handleColor, handleDraggingColor = props.handleDraggingColor, showTicks = props.showTicks, facet = props.facet, stickyHandleLabel = props.stickyHandleLabel, onChange = props.onChange, onDrag = props.onDrag, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var tickSize = props.tickSize;
+    if (isNaN(Number(tickSize)) || Number(tickSize) <= 0) {
+        // fallback to default (causes chrome to crash)
+        tickSize = ((_e = properties.facet) === null || _e === void 0 ? void 0 : _e.step) * 10 || 20;
     }
-    var _u = (0, react_ranger_1.useRanger)({
+    else {
+        tickSize = Number(tickSize);
+    }
+    var _t = (0, hooks_1.useState)([(_f = facet.active) === null || _f === void 0 ? void 0 : _f.low, (_g = facet.active) === null || _g === void 0 ? void 0 : _g.high]), values = _t[0], setValues = _t[1];
+    var _u = (0, hooks_1.useState)([(_h = facet.active) === null || _h === void 0 ? void 0 : _h.low, (_j = facet.active) === null || _j === void 0 ? void 0 : _j.high]), active = _u[0], setActive = _u[1];
+    if (values[0] != ((_k = facet.active) === null || _k === void 0 ? void 0 : _k.low) || values[1] != ((_l = facet.active) === null || _l === void 0 ? void 0 : _l.high)) {
+        setActive([(_m = facet.active) === null || _m === void 0 ? void 0 : _m.low, (_o = facet.active) === null || _o === void 0 ? void 0 : _o.high]);
+        setValues([(_p = facet.active) === null || _p === void 0 ? void 0 : _p.low, (_q = facet.active) === null || _q === void 0 ? void 0 : _q.high]);
+    }
+    var _v = (0, react_ranger_1.useRanger)({
         values: active,
         onChange: function (val) {
             var _a;
@@ -173,11 +181,11 @@ exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
             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,
+        min: (_r = facet.range) === null || _r === void 0 ? void 0 : _r.low,
+        max: (_s = facet.range) === null || _s === void 0 ? void 0 : _s.high,
         stepSize: facet.step,
         tickSize: tickSize,
-    }), getTrackProps = _u.getTrackProps, ticks = _u.ticks, segments = _u.segments, handles = _u.handles;
+    }), getTrackProps = _v.getTrackProps, ticks = _v.ticks, segments = _v.segments, handles = _v.handles;
     var styling = {};
     if (!disableStyles) {
         styling.css = [

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+export declare const BranchOverride: (properties: BranchOverrideProps) => JSX.Element;
+export interface BranchOverrideProps extends ComponentProps {
+    name: string;
+    error?: {
+        message: string;
+        description: string;
+    };
+    details?: {
+        url: string;
+        lastModified: string;
+    };
+    onRemoveClick?: (e: any, name: string) => void;
+    darkMode?: boolean;
+}
+//# sourceMappingURL=BranchOverride.d.ts.map

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BranchOverride.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/BranchOverride/BranchOverride.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAwMhD,eAAO,MAAM,cAAc,eAAgB,mBAAmB,KAAG,WAqGhE,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,CAAC,KAAA,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.js

@@ -0,0 +1,273 @@
+"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.BranchOverride = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var hooks_1 = require("preact/hooks");
+var Icon_1 = require("../../Atoms/Icon/Icon");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var CSS = {
+    override: function (_a) {
+        var theme = _a.theme;
+        return (0, react_1.css)({
+            width: '360px',
+            height: '120px',
+            overflow: 'hidden',
+            fontSize: '14px',
+            position: 'fixed',
+            zIndex: 9999,
+            cursor: 'auto',
+            bottom: '50px',
+            right: 0,
+            background: theme.main.background,
+            color: theme.main.color,
+            border: theme.main.border,
+            borderRight: 0,
+            borderTopLeftRadius: '5px',
+            borderBottomLeftRadius: '5px',
+            boxShadow: theme.main.boxShadow,
+            transition: 'height ease 0.2s, right ease 0.5s 0.2s',
+            '&.ss__branch-override--collapsed': {
+                transition: 'height ease 0.5s 0.5s, right ease 0.5s',
+                right: '-316px',
+                height: '50px',
+                cursor: 'pointer',
+            },
+            '.ss__branch-override__top': {
+                padding: '10px',
+                background: theme.top.background,
+                borderBottom: theme.top.border,
+                '.ss__branch-override__top__logo': {
+                    display: 'inline-block',
+                    height: '30px',
+                    maxHeight: '30px',
+                    verticalAlign: 'middle',
+                },
+                '.ss__branch-override__top__collapse': {
+                    display: 'inline-block',
+                    float: 'right',
+                    padding: '5px',
+                    cursor: 'pointer',
+                },
+                '.ss__branch-override__top__button': {
+                    borderRadius: '5px',
+                    padding: '6px',
+                    height: '100%',
+                    lineHeight: '14px',
+                    textAlign: 'center',
+                    cursor: 'pointer',
+                    fontSize: '10px',
+                    border: theme.top.button.border,
+                    color: theme.top.button.color,
+                    float: 'right',
+                    marginRight: '14px',
+                },
+            },
+            '.ss__branch-override__bottom': {
+                padding: '10px 15px',
+                fontSize: '12px',
+                '.ss__branch-override__bottom__left': {
+                    fontWeight: 'bold',
+                    fontStyle: theme.bottom.branch.style,
+                    color: theme.bottom.branch.color,
+                    fontSize: '14px',
+                    lineHeight: '20px',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    maxWidth: '180px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    svg: {
+                        marginRight: '10px',
+                    },
+                },
+                '.ss__branch-override__bottom__right': {
+                    float: 'right',
+                    fontStyle: 'italic',
+                    color: theme.bottom.additional.color,
+                    fontSize: '12px',
+                    lineHeight: '20px',
+                },
+                '.ss__branch-override__bottom__content': {
+                    marginTop: '10px',
+                },
+            },
+        });
+    },
+};
+var darkTheme = {
+    main: {
+        border: '0',
+        background: 'rgba(59, 35, 173, 0.9)',
+        color: '#fff',
+        boxShadow: '#4c3ce2 1px 1px 3px 0px',
+    },
+    top: {
+        background: 'rgba(59, 35, 173, 0.3)',
+        border: '1px solid #4c3de1',
+        logo: {
+            src: 'https://snapui.searchspring.io/searchspring_light.svg',
+        },
+        button: {
+            border: '1px solid #fff',
+            color: '#fff',
+            content: 'STOP PREVIEW',
+        },
+        close: {
+            fill: '#fff',
+        },
+    },
+    bottom: {
+        content: 'Preview functionality may differ from production.',
+        branch: {
+            color: '#03cee1',
+            style: 'italic',
+        },
+        additional: {
+            color: '#03cee1',
+        },
+    },
+};
+var lightTheme = {
+    main: {
+        border: '1px solid #ccc',
+        background: 'rgba(255, 255, 255, 0.95)',
+        color: '#515151',
+        boxShadow: 'rgba(81, 81, 81, 0.5) 1px 1px 3px 0px',
+    },
+    top: {
+        border: '1px solid #ccc',
+        logo: {
+            src: 'https://snapui.searchspring.io/searchspring.svg',
+        },
+        button: {
+            border: '1px solid #515151',
+            color: '#515151',
+            content: 'STOP PREVIEW',
+        },
+        close: {
+            fill: '#515151',
+        },
+    },
+    bottom: {
+        content: 'Preview functionality may differ from production.',
+        branch: {
+            color: '#3a23ad',
+            style: 'italic',
+        },
+        additional: {
+            color: '#3a23ad',
+        },
+    },
+};
+var failureTheme = {
+    main: {
+        border: '0',
+        background: 'rgba(130, 6, 6, 0.9)',
+        color: '#fff',
+        boxShadow: 'rgba(130, 6, 6, 0.4) 1px 1px 3px 0px',
+    },
+    top: {
+        background: 'rgba(130, 6, 6, 0.3)',
+        border: '1px solid #760000',
+        logo: {
+            src: 'https://snapui.searchspring.io/searchspring_light.svg',
+        },
+        button: {
+            border: '1px solid #fff',
+            color: '#fff',
+            content: 'REMOVE',
+        },
+        close: {
+            fill: '#fff',
+        },
+    },
+    bottom: {
+        content: 'Incorrect branch name or branch no longer exists.',
+        branch: {
+            color: '#be9628',
+            style: 'italic',
+        },
+        additional: {
+            color: '#be9628',
+        },
+    },
+};
+var themes = {
+    darkTheme: darkTheme,
+    lightTheme: lightTheme,
+    failureTheme: failureTheme,
+};
+var BranchOverride = function (properties) {
+    var _a, _b, _c, _d;
+    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.branchOverride), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.branchOverride);
+    var name = props.name, details = props.details, error = props.error, className = props.className, darkMode = props.darkMode, disableStyles = props.disableStyles, style = props.style, onRemoveClick = props.onRemoveClick;
+    var subProps = {
+        icon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__branch-override__bottom__left__icon', size: '12px' }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+    };
+    var prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+    var _e = (0, hooks_1.useState)(prefersDark ? 'darkTheme' : 'lightTheme'), themeName = _e[0], setThemeName = _e[1];
+    var _f = (0, hooks_1.useState)(0), collapsed = _f[0], setCollapsed = _f[1];
+    if (error) {
+        setThemeName('failureTheme');
+    }
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.override({ theme: themes[themeName] }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return ((details || error) &&
+        name && ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__branch-override', { 'ss__branch-override--collapsed': collapsed }, className) }, styling, { onClick: function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            setCollapsed(0);
+        } }),
+        (0, react_1.jsx)("div", { className: "ss__branch-override__top" },
+            (0, react_1.jsx)("img", { className: "ss__branch-override__top__logo", src: themes[themeName].top.logo.src }),
+            (0, react_1.jsx)("div", { className: "ss__branch-override__top__collapse", onClick: function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setCollapsed(1);
+                } },
+                (0, react_1.jsx)(Icon_1.Icon, __assign({ size: "18px", color: themes[themeName].top.close.fill }, subProps.icon, { icon: "close-thin" }))),
+            (0, react_1.jsx)("div", { className: "ss__branch-override__top__button", onClick: function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onRemoveClick && onRemoveClick(e, name);
+                } }, themes[themeName].top.button.content)),
+        (0, react_1.jsx)("div", { className: "ss__branch-override__bottom" },
+            (0, react_1.jsx)("span", { className: "ss__branch-override__bottom__left" }, error ? ((0, react_1.jsx)(preact_1.Fragment, null,
+                (0, react_1.jsx)(Icon_1.Icon, __assign({ size: "12px", color: themes[themeName].bottom.branch.color }, subProps.icon, { icon: "warn" })),
+                (0, react_1.jsx)("span", null, error.message))) : (name)),
+            (0, react_1.jsx)("span", { className: "ss__branch-override__bottom__right" }, error ? name : details === null || details === void 0 ? void 0 : details.lastModified),
+            (0, react_1.jsx)("div", { className: "ss__branch-override__bottom__content" }, (error === null || error === void 0 ? void 0 : error.description) || themes[themeName].bottom.content)))));
+};
+exports.BranchOverride = BranchOverride;

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.stories.d.ts

@@ -0,0 +1,136 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: (properties: import("./BranchOverride").BranchOverrideProps) => JSX.Element;
+    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;
+            };
+        };
+        name: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        details: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        error: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onRemoveClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        darkMode: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Auto: any;
+export declare const Dark: any;
+export declare const Error: any;
+export declare const Light: any;
+//# sourceMappingURL=BranchOverride.stories.d.ts.map

package/dist/cjs/components/Organisms/BranchOverride/BranchOverride.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BranchOverride.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/BranchOverride/BranchOverride.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQrC,wBA6EE;AAIF,eAAO,MAAM,IAAI,KAAoB,CAAC;AAStC,eAAO,MAAM,IAAI,KAAoB,CAAC;AAUtC,eAAO,MAAM,KAAK,KAAoB,CAAC;AASvC,eAAO,MAAM,KAAK,KAAoB,CAAC"}