@searchspring/snap-preact-components 0.26.1 → 0.27.0

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}

package/dist/cjs/index.js

@@ -43,6 +43,7 @@ __exportStar(require("./components/Molecules/Slideout"), exports);
 __exportStar(require("./components/Molecules/FacetSlider"), exports);
 // ORGANISMS
 __exportStar(require("./components/Organisms/Autocomplete"), exports);
+__exportStar(require("./components/Organisms/BranchOverride"), exports);
 __exportStar(require("./components/Organisms/Facet"), exports);
 __exportStar(require("./components/Organisms/Facets"), exports);
 __exportStar(require("./components/Organisms/FilterSummary"), exports);

package/dist/cjs/utilities/snapify.d.ts

@@ -1,4 +1,5 @@
-import type { SearchController, AutocompleteController, RecommendationController, SearchControllerConfig, AutocompleteControllerConfig, RecommendationControllerConfig } from '@searchspring/snap-controller';
+import { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+import type { SearchControllerConfig, AutocompleteControllerConfig, RecommendationControllerConfig } from '@searchspring/snap-controller';
 export declare class Snapify {
     static recommendation(config: RecommendationControllerConfig): RecommendationController;
     static autocomplete(config: AutocompleteControllerConfig): AutocompleteController;

package/dist/cjs/utilities/snapify.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapify.d.ts","sourceRoot":"","sources":["../../../src/utilities/snapify.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACX,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,4BAA4B,EAC5B,8BAA8B,EAC9B,MAAM,+BAA+B,CAAC;AAMvC,qBAAa,OAAO;IACnB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,8BAA8B,GAAG,wBAAwB;IAkBvF,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,4BAA4B,GAAG,sBAAsB;IAmBjF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB;CAkB/D"}
+{"version":3,"file":"snapify.d.ts","sourceRoot":"","sources":["../../../src/utilities/snapify.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAUnH,OAAO,KAAK,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAc1I,qBAAa,OAAO;IACnB,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,8BAA8B,GAAG,wBAAwB;IAkBvF,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,4BAA4B,GAAG,sBAAsB;IAmBjF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,sBAAsB,GAAG,gBAAgB;CAkB/D"}

package/dist/cjs/utilities/snapify.js

@@ -37,8 +37,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Snapify = void 0;
-/* searchspring imports */
-var snap_preact_1 = require("@searchspring/snap-preact");
+var snap_controller_1 = require("@searchspring/snap-controller");
+var snap_client_1 = require("@searchspring/snap-client");
+var snap_store_mobx_1 = require("@searchspring/snap-store-mobx");
+var snap_url_manager_1 = require("@searchspring/snap-url-manager");
+var snap_event_manager_1 = require("@searchspring/snap-event-manager");
+var snap_profiler_1 = require("@searchspring/snap-profiler");
+var snap_logger_1 = require("@searchspring/snap-logger");
+var snap_tracker_1 = require("@searchspring/snap-tracker");
 var controllers = {};
 var client = {
     globals: { siteId: '8uyt2m' },
@@ -52,7 +58,7 @@ var Snapify = /** @class */ (function () {
         if (controllers[id]) {
             return controllers[id];
         }
-        var cntrlr = (controllers[id] = (0, snap_preact_1.createRecommendationsController)({ client: client, controller: config }));
+        var cntrlr = (controllers[id] = createRecommendationController({ client: client, controller: config }));
         cntrlr.on('afterStore', function (_a, next) {
             var controller = _a.controller;
             return __awaiter(_this, void 0, void 0, function () {
@@ -78,7 +84,7 @@ var Snapify = /** @class */ (function () {
         if (controllers[id]) {
             return controllers[id];
         }
-        var cntrlr = (controllers[id] = (0, snap_preact_1.createAutocompleteController)({ client: client, controller: config }));
+        var cntrlr = (controllers[id] = createAutocompleteController({ client: client, controller: config }));
         cntrlr.on('afterStore', function (_a, next) {
             var controller = _a.controller;
             return __awaiter(_this, void 0, void 0, function () {
@@ -104,7 +110,7 @@ var Snapify = /** @class */ (function () {
         if (controllers[id]) {
             return controllers[id];
         }
-        var cntrlr = (controllers[id] = (0, snap_preact_1.createSearchController)({ client: client, controller: config }));
+        var cntrlr = (controllers[id] = createSearchController({ client: client, controller: config }));
         cntrlr.on('afterStore', function (_a, next) {
             var controller = _a.controller;
             return __awaiter(_this, void 0, void 0, function () {
@@ -127,3 +133,42 @@ var Snapify = /** @class */ (function () {
     return Snapify;
 }());
 exports.Snapify = Snapify;
+function createSearchController(config) {
+    var urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker);
+    var cntrlr = new snap_controller_1.SearchController(config.controller, {
+        client: new snap_client_1.Client(config.client.globals, config.client.config),
+        store: new snap_store_mobx_1.SearchStore(config.controller, { urlManager: urlManager }),
+        urlManager: urlManager,
+        eventManager: new snap_event_manager_1.EventManager(),
+        profiler: new snap_profiler_1.Profiler(),
+        logger: new snap_logger_1.Logger(),
+        tracker: new snap_tracker_1.Tracker(config.client.globals),
+    });
+    return cntrlr;
+}
+function createRecommendationController(config) {
+    var urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker).detach(true);
+    var cntrlr = new snap_controller_1.RecommendationController(config.controller, {
+        client: new snap_client_1.Client(config.client.globals, config.client.config),
+        store: new snap_store_mobx_1.RecommendationStore(config.controller, { urlManager: urlManager }),
+        urlManager: urlManager,
+        eventManager: new snap_event_manager_1.EventManager(),
+        profiler: new snap_profiler_1.Profiler(),
+        logger: new snap_logger_1.Logger(),
+        tracker: new snap_tracker_1.Tracker(config.client.globals),
+    });
+    return cntrlr;
+}
+function createAutocompleteController(config) {
+    var urlManager = new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(), snap_url_manager_1.reactLinker).detach();
+    var cntrlr = new snap_controller_1.AutocompleteController(config.controller, {
+        client: new snap_client_1.Client(config.client.globals, config.client.config),
+        store: new snap_store_mobx_1.AutocompleteStore(config.controller, { urlManager: urlManager }),
+        urlManager: urlManager,
+        eventManager: new snap_event_manager_1.EventManager(),
+        profiler: new snap_profiler_1.Profiler(),
+        logger: new snap_logger_1.Logger(),
+        tracker: new snap_tracker_1.Tracker(config.client.globals),
+    });
+    return cntrlr;
+}

package/dist/esm/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/esm/components/Atoms/Icon/Icon.js

@@ -7,6 +7,7 @@ const CSS = {
         fill: color || theme.colors?.primary,
         width: width || size,
         height: height || size,
+        position: 'relative',
     }),
 };
 export function Icon(properties) {

package/dist/esm/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/esm/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/esm/components/Molecules/Carousel/Carousel.js

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
 import SwiperCore, { Pagination, Navigation } from 'swiper/core';
-import 'swiper/swiper.min.css';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { defined } from '../../../utilities';
@@ -63,9 +62,35 @@ const 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',
@@ -89,6 +114,15 @@ const CSS = {
                 background: theme?.colors?.primary || '#000',
             },
         },
+        '.swiper-container-pointer-events': {
+            touchAction: 'pan-y',
+            '&.swiper-container-vertical': {
+                touchAction: 'pan-x',
+            },
+        },
+        '.swiper-slide-invisible-blank': {
+            visibility: 'hidden',
+        },
     }),
 };
 export const defaultCarouselBreakpoints = {

package/dist/esm/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/esm/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/esm/components/Organisms/BranchOverride/BranchOverride.js

@@ -0,0 +1,263 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useState } from 'preact/hooks';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { defined } from '../../../utilities';
+import { useTheme } from '../../../providers';
+const CSS = {
+    override: ({ theme }) => 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',
+            },
+        },
+    }),
+};
+const 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',
+        },
+    },
+};
+const 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',
+        },
+    },
+};
+const 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',
+        },
+    },
+};
+const themes = {
+    darkTheme,
+    lightTheme,
+    failureTheme,
+};
+export const BranchOverride = (properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    let props = {
+        // global theme
+        ...globalTheme?.components?.branchOverride,
+        // props
+        ...properties,
+        ...properties.theme?.components?.branchOverride,
+    };
+    const { name, details, error, className, darkMode, disableStyles, style, onRemoveClick } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__branch-override__bottom__left__icon',
+            size: '12px',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+    const [themeName, setThemeName] = useState(prefersDark ? 'darkTheme' : 'lightTheme');
+    const [collapsed, setCollapsed] = useState(0);
+    if (error) {
+        setThemeName('failureTheme');
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.override({ theme: themes[themeName] }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return ((details || error) &&
+        name && (jsx("div", { className: classnames('ss__branch-override', { 'ss__branch-override--collapsed': collapsed }, className), ...styling, onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCollapsed(0);
+        } },
+        jsx("div", { className: "ss__branch-override__top" },
+            jsx("img", { className: "ss__branch-override__top__logo", src: themes[themeName].top.logo.src }),
+            jsx("div", { className: "ss__branch-override__top__collapse", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setCollapsed(1);
+                } },
+                jsx(Icon, { size: "18px", color: themes[themeName].top.close.fill, ...subProps.icon, icon: "close-thin" })),
+            jsx("div", { className: "ss__branch-override__top__button", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onRemoveClick && onRemoveClick(e, name);
+                } }, themes[themeName].top.button.content)),
+        jsx("div", { className: "ss__branch-override__bottom" },
+            jsx("span", { className: "ss__branch-override__bottom__left" }, error ? (jsx(Fragment, null,
+                jsx(Icon, { size: "12px", color: themes[themeName].bottom.branch.color, ...subProps.icon, icon: "warn" }),
+                jsx("span", null, error.message))) : (name)),
+            jsx("span", { className: "ss__branch-override__bottom__right" }, error ? name : details?.lastModified),
+            jsx("div", { className: "ss__branch-override__bottom__content" }, error?.description || themes[themeName].bottom.content)))));
+};

package/dist/esm/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/esm/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"}