@spscommerce/ds-web-components 5.20.3-ie → 5.20.5

package/dist/lib/index.cjs.js

@@ -1,15 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dsShared = require('@spscommerce/ds-shared');
-var utils = require('@spscommerce/utils');
-
-var incrementalDomCjs = {};
-
-Object.defineProperty(incrementalDomCjs, '__esModule', { value: true });
-
-/**
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var T=require("@spscommerce/ds-shared"),l=require("@spscommerce/utils"),c={};Object.defineProperty(c,"__esModule",{value:!0});/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -24,12 +13,7 @@ Object.defineProperty(incrementalDomCjs, '__esModule', { value: true });
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-var symbols = {
-  default: '__default'
-};
-
-/**
+ */var V={default:"__default"};/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -44,45 +28,7 @@ var symbols = {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * A cached reference to the hasOwnProperty function.
- */
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-/**
- * A constructor function that will create blank objects.
- */
-function Blank() {}
-Blank.prototype = Object.create(null);
-/**
- * Used to prevent property collisions between our "map" and its prototype.
- * @param map The map to check.
- * @param property The property to check.
- * @return Whether map has property.
- */
-function has(map, property) {
-  return hasOwnProperty.call(map, property);
-}
-/**
- * Creates an map object without a prototype.
- */
-// tslint:disable-next-line:no-any
-function createMap() {
-  // tslint:disable-next-line:no-any
-  return new Blank();
-}
-/**
- * Truncates an array, removing items up until length.
- * @param arr The array to truncate.
- * @param length The new length of the array.
- */
-function truncateArray(arr, length) {
-  while (arr.length > length) {
-    arr.pop();
-  }
-}
-
-/**
+ */var ze=Object.prototype.hasOwnProperty;function pe(){}pe.prototype=Object.create(null);function We(e,t){return ze.call(e,t)}function ce(){return new pe}function Z(e,t){for(;e.length>t;)e.pop()}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -97,115 +43,7 @@ function truncateArray(arr, length) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * Returns the namespace to use for the attribute.
- */
-function getNamespace(name) {
-    if (name.lastIndexOf('xml:', 0) === 0) {
-        return 'http://www.w3.org/XML/1998/namespace';
-    }
-    if (name.lastIndexOf('xlink:', 0) === 0) {
-        return 'http://www.w3.org/1999/xlink';
-    }
-    return undefined;
-}
-/**
- * Applies an attribute or property to a given Element. If the value is null
- * or undefined, it is removed from the Element. Otherwise, the value is set
- * as an attribute.
- */
-// tslint:disable-next-line:no-any
-function applyAttr(el, name, value) {
-    if (value == null) {
-        el.removeAttribute(name);
-    } else {
-        var attrNS = getNamespace(name);
-        if (attrNS) {
-            el.setAttributeNS(attrNS, name, String(value));
-        } else {
-            el.setAttribute(name, String(value));
-        }
-    }
-}
-/**
- * Applies a property to a given Element.
- */
-// tslint:disable-next-line:no-any
-function applyProp(el, name, value) {
-    // tslint:disable-next-line:no-any
-    el[name] = value;
-}
-/**
- * Applies a value to a style declaration. Supports CSS custom properties by
- * setting properties containing a dash using CSSStyleDeclaration.setProperty.
- */
-function setStyleValue(style, prop, value) {
-    if (prop.indexOf('-') >= 0) {
-        style.setProperty(prop, value);
-    } else {
-        // TODO(tomnguyen) Figure out why this is necessary.
-        // tslint:disable-next-line:no-any
-        style[prop] = value;
-    }
-}
-/**
- * Applies a style to an Element. No vendor prefix expansion is done for
- * property names/values.
- * @param el
- * @param name The attribute's name.
- * @param  style The style to set. Either a string of css or an object
- *     containing property-value pairs.
- */
-function applyStyle(el, name, style) {
-    if (typeof style === 'string') {
-        el.style.cssText = style;
-    } else {
-        el.style.cssText = '';
-        var elStyle = el.style;
-        for (var prop in style) {
-            if (has(style, prop)) {
-                setStyleValue(elStyle, prop, style[prop]);
-            }
-        }
-    }
-}
-/**
- * Updates a single attribute on an Element.
- * @param el
- * @param name The attribute's name.
- * @param value The attribute's value. If the value is an object or
- *     function it is set on the Element, otherwise, it is set as an HTML
- *     attribute.
- */
-function applyAttributeTyped(el, name, value) {
-    var type = typeof value;
-    if (type === 'object' || type === 'function') {
-        applyProp(el, name, value);
-    } else {
-        applyAttr(el, name, value);
-    }
-}
-/**
- * A publicly mutable object to provide custom mutators for attributes.
- * NB: The result of createMap() has to be recast since closure compiler
- * will just assume attributes is "any" otherwise and throws away
- * the type annotation set by tsickle.
- */
-var attributes = createMap();
-// Special generic mutator that's called for any attribute that does not
-// have a specific mutator.
-attributes[symbols.default] = applyAttributeTyped;
-attributes['style'] = applyStyle;
-/**
- * Calls the appropriate attribute mutator for this attribute.
- */
-function updateAttribute(el, name, value) {
-    var mutator = attributes[name] || attributes[symbols.default];
-    mutator(el, name, value);
-}
-
-/**
+ */function He(e){if(e.lastIndexOf("xml:",0)===0)return"http://www.w3.org/XML/1998/namespace";if(e.lastIndexOf("xlink:",0)===0)return"http://www.w3.org/1999/xlink"}function de(e,t,s){if(s==null)e.removeAttribute(t);else{var n=He(t);n?e.setAttributeNS(n,t,String(s)):e.setAttribute(t,String(s))}}function he(e,t,s){e[t]=s}function qe(e,t,s){t.indexOf("-")>=0?e.setProperty(t,s):e[t]=s}function Ge(e,t,s){if(typeof s=="string")e.style.cssText=s;else{e.style.cssText="";var n=e.style;for(var i in s)We(s,i)&&qe(n,i,s[i])}}function Xe(e,t,s){var n=typeof s;n==="object"||n==="function"?he(e,t,s):de(e,t,s)}var U=ce();U[V.default]=Xe;U.style=Ge;function E(e,t,s){var n=U[t]||U[V.default];n(e,t,s)}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -220,151 +58,7 @@ function updateAttribute(el, name, value) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * Keeps track whether or not we are in an attributes declaration (after
- * elementOpenStart, but before elementOpenEnd).
- */
-var inAttributes = false;
-/**
- * Keeps track whether or not we are in an element that should not have its
- * children cleared.
- */
-var inSkip = false;
-/**
- * Makes sure that there is a current patch context.
- */
-function assertInPatch(functionName, context) {
-    if (!context) {
-        throw new Error('Cannot call ' + functionName + '() unless in patch.');
-    }
-}
-/**
- * Makes sure that a patch closes every node that it opened.
- * @param openElement
- * @param root
- */
-function assertNoUnclosedTags(openElement, root) {
-    if (openElement === root) {
-        return;
-    }
-    var currentElement = openElement;
-    var openTags = [];
-    while (currentElement && currentElement !== root) {
-        openTags.push(currentElement.nodeName.toLowerCase());
-        currentElement = currentElement.parentNode;
-    }
-    throw new Error('One or more tags were not closed:\n' + openTags.join('\n'));
-}
-/**
- * Makes sure that node being outer patched has a parent node.
- */
-function assertPatchOuterHasParentNode(parent) {
-    if (!parent) {
-        console.warn('patchOuter requires the node have a parent if there is a key.');
-    }
-}
-/**
- * Makes sure that the caller is not where attributes are expected.
- */
-function assertNotInAttributes(functionName) {
-    if (inAttributes) {
-        throw new Error(functionName + '() can not be called between ' + 'elementOpenStart() and elementOpenEnd().');
-    }
-}
-/**
- * Makes sure that the caller is not inside an element that has declared skip.
- */
-function assertNotInSkip(functionName) {
-    if (inSkip) {
-        throw new Error(functionName + '() may not be called inside an element ' + 'that has called skip().');
-    }
-}
-/**
- * Makes sure that the caller is where attributes are expected.
- */
-function assertInAttributes(functionName) {
-    if (!inAttributes) {
-        throw new Error(functionName + '() can only be called after calling ' + 'elementOpenStart().');
-    }
-}
-/**
- * Makes sure the patch closes virtual attributes call
- */
-function assertVirtualAttributesClosed() {
-    if (inAttributes) {
-        throw new Error('elementOpenEnd() must be called after calling ' + 'elementOpenStart().');
-    }
-}
-/**
- * Makes sure that tags are correctly nested.
- */
-function assertCloseMatchesOpenTag(currentNameOrCtor, nameOrCtor) {
-    if (currentNameOrCtor !== nameOrCtor) {
-        throw new Error('Received a call to close "' + nameOrCtor + '" but "' + currentNameOrCtor + '" was open.');
-    }
-}
-/**
- * Makes sure that no children elements have been declared yet in the current
- * element.
- */
-function assertNoChildrenDeclaredYet(functionName, previousNode) {
-    if (previousNode !== null) {
-        throw new Error(functionName + '() must come before any child ' + 'declarations inside the current element.');
-    }
-}
-/**
- * Checks that a call to patchOuter actually patched the element.
- * @param maybeStartNode The value for the currentNode when the patch
- *     started.
- * @param currentNode The currentNode when the patch finished.
- * @param expectedNextNode The Node that is expected to follow the
- *    currentNode after the patch;
- * @param  expectedPrevNode The Node that is expected to preceed the
- *    currentNode after the patch.
- */
-function assertPatchElementNoExtras(maybeStartNode, maybeCurrentNode, expectedNextNode, expectedPrevNode) {
-    assert(maybeStartNode);
-    var startNode = maybeStartNode;
-    // tslint:disable-next-line:no-unnecessary-type-assertion
-    var currentNode = maybeCurrentNode;
-    var wasUpdated = currentNode.nextSibling === expectedNextNode && currentNode.previousSibling === expectedPrevNode;
-    var wasChanged = currentNode.nextSibling === startNode.nextSibling && currentNode.previousSibling === expectedPrevNode;
-    var wasRemoved = currentNode === startNode;
-    if (!wasUpdated && !wasChanged && !wasRemoved) {
-        throw new Error('There must be exactly one top level call corresponding ' + 'to the patched element.');
-    }
-}
-/**
- * Updates the state of being in an attribute declaration.
- * @return the previous value.
- */
-function setInAttributes(value) {
-    var previous = inAttributes;
-    inAttributes = value;
-    return previous;
-}
-/**
- * Updates the state of being in a skip element.
- * @return the previous value.
- */
-function setInSkip(value) {
-    var previous = inSkip;
-    inSkip = value;
-    return previous;
-}
-/**
- * Asserts that a value exists and is not null or undefined. goog.asserts
- * is not used in order to avoid dependencies on external code.
- */
-function assert(val) {
-    if (process.env.NODE_ENV !== 'production' && !val) {
-        throw new Error('Expected value to be defined');
-    }
-    return val;
-}
-
-/**
+ */var ue=!1;function Ke(e){var t=ue;return ue=e,t}function Qe(e){return e}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -379,13 +73,7 @@ function assert(val) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-var notifications = {
-  nodesCreated: null,
-  nodesDeleted: null
-};
-
-/**
+ */var B={nodesCreated:null,nodesDeleted:null};/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -400,36 +88,7 @@ var notifications = {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * A context object keeps track of the state of a patch.
- */
-var Context = /** @class */function () {
-    function Context() {
-        this.created = [];
-        this.deleted = [];
-    }
-    Context.prototype.markCreated = function (node) {
-        this.created.push(node);
-    };
-    Context.prototype.markDeleted = function (node) {
-        this.deleted.push(node);
-    };
-    /**
-     * Notifies about nodes that were created during the patch operation.
-     */
-    Context.prototype.notifyChanges = function () {
-        if (notifications.nodesCreated && this.created.length > 0) {
-            notifications.nodesCreated(this.created);
-        }
-        if (notifications.nodesDeleted && this.deleted.length > 0) {
-            notifications.nodesDeleted(this.deleted);
-        }
-    };
-    return Context;
-}();
-
-/**
+ */var Ve=function(){function e(){this.created=[],this.deleted=[]}return e.prototype.markCreated=function(t){this.created.push(t)},e.prototype.markDeleted=function(t){this.deleted.push(t)},e.prototype.notifyChanges=function(){B.nodesCreated&&this.created.length>0&&B.nodesCreated(this.created),B.nodesDeleted&&this.deleted.length>0&&B.nodesDeleted(this.deleted)},e}();/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -444,103 +103,7 @@ var Context = /** @class */function () {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * Checks if the node is the root of a document. This is either a Document
- * or ShadowRoot. DocumentFragments are included for simplicity of the
- * implementation, though we only want to consider Documents or ShadowRoots.
- * @param node The node to check.
- * @return True if the node the root of a document, false otherwise.
- */
-function isDocumentRoot(node) {
-    return node.nodeType === 11 || node.nodeType === 9;
-}
-/**
- * Checks if the node is an Element. This is faster than an instanceof check.
- * @param node The node to check.
- * @return Whether or not the node is an Element.
- */
-function isElement(node) {
-    return node.nodeType === 1;
-}
-/**
- * Checks if the node is a text node. This is faster than an instanceof check.
- * @param node The node to check.
- * @return Whether or not the node is a Text.
- */
-function isText(node) {
-    return node.nodeType === 3;
-}
-/**
- * @param  node The node to start at, inclusive.
- * @param  root The root ancestor to get until, exclusive.
- * @return The ancestry of DOM nodes.
- */
-function getAncestry(node, root) {
-    var ancestry = [];
-    var cur = node;
-    while (cur !== root) {
-        var n = cur;
-        ancestry.push(n);
-        cur = n.parentNode;
-    }
-    return ancestry;
-}
-/**
- * return The root node of the DOM tree that contains this node.
- */
-var getRootNode =
-// tslint:disable-next-line:no-any b/79476176
-Node.prototype.getRootNode || function () {
-    // tslint:disable-next-line:no-unnecessary-type-assertion b/77361044
-    var cur = this;
-    var prev = cur;
-    while (cur) {
-        prev = cur;
-        cur = cur.parentNode;
-    }
-    return prev;
-};
-/**
- * @param node The node to get the activeElement for.
- * @return The activeElement in the Document or ShadowRoot
- *     corresponding to node, if present.
- */
-function getActiveElement(node) {
-    var root = getRootNode.call(node);
-    return isDocumentRoot(root) ? root.activeElement : null;
-}
-/**
- * Gets the path of nodes that contain the focused node in the same document as
- * a reference node, up until the root.
- * @param node The reference node to get the activeElement for.
- * @param root The root to get the focused path until.
- */
-function getFocusedPath(node, root) {
-    var activeElement = getActiveElement(node);
-    if (!activeElement || !node.contains(activeElement)) {
-        return [];
-    }
-    return getAncestry(activeElement, root);
-}
-/**
- * Like insertBefore, but instead instead of moving the desired node, instead
- * moves all the other nodes after.
- * @param parentNode
- * @param node
- * @param referenceNode
- */
-function moveBefore(parentNode, node, referenceNode) {
-    var insertReferenceNode = node.nextSibling;
-    var cur = referenceNode;
-    while (cur !== null && cur !== node) {
-        var next = cur.nextSibling;
-        parentNode.insertBefore(cur, insertReferenceNode);
-        cur = next;
-    }
-}
-
-/**
+ */function Ze(e){return e.nodeType===11||e.nodeType===9}function J(e){return e.nodeType===1}function Je(e){return e.nodeType===3}function Ye(e,t){for(var s=[],n=e;n!==t;){var i=n;s.push(i),n=i.parentNode}return s}var Me=Node.prototype.getRootNode||function(){for(var e=this,t=e;e;)t=e,e=e.parentNode;return t};function et(e){var t=Me.call(e);return Ze(t)?t.activeElement:null}function tt(e,t){var s=et(e);return!s||!e.contains(s)?[]:Ye(s,t)}function st(e,t,s){for(var n=t.nextSibling,i=s;i!==null&&i!==t;){var a=i.nextSibling;e.insertBefore(i,n),i=a}}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -555,116 +118,7 @@ function moveBefore(parentNode, node, referenceNode) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * Keeps track of information needed to perform diffs for a given DOM node.
- */
-var NodeData = /** @class */function () {
-    function NodeData(nameOrCtor, key, text) {
-        /**
-         * An array of attribute name/value pairs, used for quickly diffing the
-         * incomming attributes to see if the DOM node's attributes need to be
-         * updated.
-         */
-        // tslint:disable-next-line:no-any
-        this._attrsArr = null;
-        /**
-         * Whether or not the statics have been applied for the node yet.
-         */
-        this.staticsApplied = false;
-        this.nameOrCtor = nameOrCtor;
-        this.key = key;
-        this.text = text;
-    }
-    NodeData.prototype.hasEmptyAttrsArr = function () {
-        var attrs = this._attrsArr;
-        return !attrs || !attrs.length;
-    };
-    NodeData.prototype.getAttrsArr = function (length) {
-        return this._attrsArr || (this._attrsArr = new Array(length));
-    };
-    return NodeData;
-}();
-/**
- * Initializes a NodeData object for a Node.
- */
-function initData(node, nameOrCtor, key, text) {
-    var data = new NodeData(nameOrCtor, key, text);
-    node['__incrementalDOMData'] = data;
-    return data;
-}
-/**
- * Retrieves the NodeData object for a Node, creating it if necessary.
- */
-function getData(node, key) {
-    return importSingleNode(node, key);
-}
-function isDataInitialized(node) {
-    return Boolean(node['__incrementalDOMData']);
-}
-function getKey(node) {
-    assert(node['__incrementalDOMData']);
-    return getData(node).key;
-}
-/**
- * Imports single node and its subtree, initializing caches.
- */
-function importSingleNode(node, fallbackKey) {
-    if (node['__incrementalDOMData']) {
-        return node['__incrementalDOMData'];
-    }
-    var nodeName = isElement(node) ? node.localName : node.nodeName;
-    var key = isElement(node) ? node.getAttribute('key') || fallbackKey : null;
-    var text = isText(node) ? node.data : undefined;
-    var data = initData(node, nodeName, key, text);
-    if (isElement(node)) {
-        recordAttributes(node, data);
-    }
-    return data;
-}
-/**
- * Imports node and its subtree, initializing caches.
- */
-function importNode(node) {
-    importSingleNode(node);
-    for (var child = node.firstChild; child; child = child.nextSibling) {
-        importNode(child);
-    }
-}
-/**
- * Clears all caches from a node and all of its children.
- */
-function clearCache(node) {
-    node['__incrementalDOMData'] = null;
-    for (var child = node.firstChild; child; child = child.nextSibling) {
-        clearCache(child);
-    }
-}
-/**
- * Records the element's attributes.
- * @param node The Element that may have attributes
- * @param data The Element's data
- */
-function recordAttributes(node, data) {
-    var attributes = node.attributes;
-    var length = attributes.length;
-    if (!length) {
-        return;
-    }
-    var attrsArr = data.getAttrsArr(length);
-    // Use a cached length. The attributes array is really a live NamedNodeMap,
-    // which exists as a DOM "Host Object" (probably as C++ code). This makes the
-    // usual constant length iteration very difficult to optimize in JITs.
-    for (var i = 0, j = 0; i < length; i += 1, j += 2) {
-        var attr = attributes[i];
-        var name = attr.name;
-        var value = attr.value;
-        attrsArr[j] = name;
-        attrsArr[j + 1] = value;
-    }
-}
-
-/**
+ */var nt=function(){function e(t,s,n){this._attrsArr=null,this.staticsApplied=!1,this.nameOrCtor=t,this.key=s,this.text=n}return e.prototype.hasEmptyAttrsArr=function(){var t=this._attrsArr;return!t||!t.length},e.prototype.getAttrsArr=function(t){return this._attrsArr||(this._attrsArr=new Array(t))},e}();function Y(e,t,s,n){var i=new nt(t,s,n);return e.__incrementalDOMData=i,i}function R(e,t){return me(e,t)}function it(e){return Boolean(e.__incrementalDOMData)}function at(e){return Qe(e.__incrementalDOMData),R(e).key}function me(e,t){if(e.__incrementalDOMData)return e.__incrementalDOMData;var s=J(e)?e.localName:e.nodeName,n=J(e)?e.getAttribute("key")||t:null,i=Je(e)?e.data:void 0,a=Y(e,s,n,i);return J(e)&&rt(e,a),a}function fe(e){me(e);for(var t=e.firstChild;t;t=t.nextSibling)fe(t)}function ge(e){e.__incrementalDOMData=null;for(var t=e.firstChild;t;t=t.nextSibling)ge(t)}function rt(e,t){var s=e.attributes,n=s.length;if(!!n)for(var i=t.getAttrsArr(n),a=0,o=0;a<n;a+=1,o+=2){var g=s[a],x=g.name,v=g.value;i[o]=x,i[o+1]=v}}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -679,59 +133,7 @@ function recordAttributes(node, data) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * Gets the namespace to create an element (of a given tag) in.
- */
-function getNamespaceForTag(tag, parent) {
-    if (tag === 'svg') {
-        return 'http://www.w3.org/2000/svg';
-    }
-    if (tag === 'math') {
-        return 'http://www.w3.org/1998/Math/MathML';
-    }
-    if (parent == null) {
-        return null;
-    }
-    if (getData(parent).nameOrCtor === 'foreignObject') {
-        return null;
-    }
-    return parent.namespaceURI;
-}
-/**
- * Creates an Element.
- * @param doc The document with which to create the Element.
- * @param nameOrCtor The tag or constructor for the Element.
- * @param key A key to identify the Element.
- * @param  typeId The type identifier for the Element.
- */
-function createElement(doc, parent, nameOrCtor, key) {
-    var el;
-    if (typeof nameOrCtor === 'function') {
-        el = new nameOrCtor();
-    } else {
-        var namespace = getNamespaceForTag(nameOrCtor, parent);
-        if (namespace) {
-            el = doc.createElementNS(namespace, nameOrCtor);
-        } else {
-            el = doc.createElement(nameOrCtor);
-        }
-    }
-    initData(el, nameOrCtor, key);
-    return el;
-}
-/**
- * Creates a Text Node.
- * @param doc The document with which to create the Element.
- * @return
- */
-function createText(doc) {
-    var node = doc.createTextNode('');
-    initData(node, '#text', null);
-    return node;
-}
-
-/**
+ */function ot(e,t){return e==="svg"?"http://www.w3.org/2000/svg":e==="math"?"http://www.w3.org/1998/Math/MathML":t==null||R(t).nameOrCtor==="foreignObject"?null:t.namespaceURI}function lt(e,t,s,n){var i;if(typeof s=="function")i=new s;else{var a=ot(s,t);a?i=e.createElementNS(a,s):i=e.createElement(s)}return Y(i,s,n),i}function pt(e){var t=e.createTextNode("");return Y(t,"#text",null),t}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -746,303 +148,7 @@ function createText(doc) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-var context = null;
-var currentNode = null;
-var currentParent = null;
-var doc = null;
-var focusPath = [];
-/**
- * Used to build up call arguments. Each patch call gets a separate copy, so
- * this works with nested calls to patch.
- */
-var argsBuilder = [];
-/**
- * TODO(sparhami) We should just export argsBuilder directly when Closure
- * Compiler supports ES6 directly.
- */
-function getArgsBuilder() {
-    return argsBuilder;
-}
-/**
- * Returns a patcher function that sets up and restores a patch context,
- * running the run function with the provided data.
- */
-function patchFactory(run) {
-    var f = function (node, fn, data) {
-        var prevContext = context;
-        var prevDoc = doc;
-        var prevFocusPath = focusPath;
-        var prevArgsBuilder = argsBuilder;
-        var prevCurrentNode = currentNode;
-        var prevCurrentParent = currentParent;
-        var previousInAttributes = false;
-        var previousInSkip = false;
-        context = new Context();
-        doc = node.ownerDocument;
-        argsBuilder = [];
-        currentParent = node.parentNode;
-        focusPath = getFocusedPath(node, currentParent);
-        if (process.env.NODE_ENV !== 'production') {
-            previousInAttributes = setInAttributes(false);
-            previousInSkip = setInSkip(false);
-        }
-        try {
-            var retVal = run(node, fn, data);
-            if (process.env.NODE_ENV !== 'production') {
-                assertVirtualAttributesClosed();
-            }
-            return retVal;
-        } finally {
-            doc = prevDoc;
-            argsBuilder = prevArgsBuilder;
-            currentNode = prevCurrentNode;
-            currentParent = prevCurrentParent;
-            focusPath = prevFocusPath;
-            context.notifyChanges();
-            // Needs to be done after assertions because assertions rely on state
-            // from these methods.
-            setInAttributes(previousInAttributes);
-            setInSkip(previousInSkip);
-            context = prevContext;
-        }
-    };
-    return f;
-}
-/**
- * Patches the document starting at node with the provided function. This
- * function may be called during an existing patch operation.
- */
-var patchInner = patchFactory(function (node, fn, data) {
-    currentNode = node;
-    enterNode();
-    fn(data);
-    exitNode();
-    if (process.env.NODE_ENV !== 'production') {
-        assertNoUnclosedTags(currentNode, node);
-    }
-    return node;
-});
-/**
- * Patches an Element with the the provided function. Exactly one top level
- * element call should be made corresponding to `node`.
- */
-var patchOuter = patchFactory(function (node, fn, data) {
-    // tslint:disable-next-line:no-any
-    var startNode = { nextSibling: node };
-    var expectedNextNode = null;
-    var expectedPrevNode = null;
-    if (process.env.NODE_ENV !== 'production') {
-        expectedNextNode = node.nextSibling;
-        expectedPrevNode = node.previousSibling;
-    }
-    currentNode = startNode;
-    fn(data);
-    if (process.env.NODE_ENV !== 'production') {
-        assertPatchOuterHasParentNode(currentParent);
-        assertPatchElementNoExtras(startNode, currentNode, expectedNextNode, expectedPrevNode);
-    }
-    if (currentParent) {
-        clearUnvisitedDOM(currentParent, getNextNode(), node.nextSibling);
-    }
-    return startNode === currentNode ? null : currentNode;
-});
-/**
- * Checks whether or not the current node matches the specified nameOrCtor and
- * key.
- * @param matchNode A node to match the data to.
- * @param nameOrCtor The name or constructor to check for.
- * @param key The key used to identify the Node.
- * @return True if the node matches, false otherwise.
- */
-function matches(matchNode, nameOrCtor, key) {
-    var data = getData(matchNode, key);
-    // Key check is done using double equals as we want to treat a null key the
-    // same as undefined. This should be okay as the only values allowed are
-    // strings, null and undefined so the == semantics are not too weird.
-    // tslint:disable-next-line:triple-equals
-    return nameOrCtor == data.nameOrCtor && key == data.key;
-}
-/**
- * Finds the matching node, starting at `node` and looking at the subsequent
- * siblings if a key is used.
- * @param node The node to start looking at.
- * @param nameOrCtor The name or constructor for the Node.
- * @param key The key used to identify the Node.
- */
-function getMatchingNode(matchNode, nameOrCtor, key) {
-    if (!matchNode) {
-        return null;
-    }
-    if (matches(matchNode, nameOrCtor, key)) {
-        return matchNode;
-    }
-    if (key) {
-        while (matchNode = matchNode.nextSibling) {
-            if (matches(matchNode, nameOrCtor, key)) {
-                return matchNode;
-            }
-        }
-    }
-    return null;
-}
-/**
- * Creates a Node and marking it as created.
- * @param nameOrCtor The name or constructor for the Node.
- * @param key The key used to identify the Node.
- * @return The newly created node.
- */
-function createNode(nameOrCtor, key) {
-    var node;
-    if (nameOrCtor === '#text') {
-        node = createText(doc);
-    } else {
-        node = createElement(doc, currentParent, nameOrCtor, key);
-    }
-    context.markCreated(node);
-    return node;
-}
-/**
- * Aligns the virtual Node definition with the actual DOM, moving the
- * corresponding DOM node to the correct location or creating it if necessary.
- * @param nameOrCtor The name or constructor for the Node.
- * @param key The key used to identify the Node.
- */
-function alignWithDOM(nameOrCtor, key) {
-    var existingNode = getMatchingNode(currentNode, nameOrCtor, key);
-    var node = existingNode || createNode(nameOrCtor, key);
-    // If we are at the matching node, then we are done.
-    if (node === currentNode) {
-        return;
-    }
-    // Re-order the node into the right position, preserving focus if either
-    // node or currentNode are focused by making sure that they are not detached
-    // from the DOM.
-    if (focusPath.indexOf(node) >= 0) {
-        // Move everything else before the node.
-        moveBefore(currentParent, node, currentNode);
-    } else {
-        currentParent.insertBefore(node, currentNode);
-    }
-    currentNode = node;
-}
-/**
- * Clears out any unvisited Nodes in a given range.
- * @param maybeParentNode
- * @param startNode The node to start clearing from, inclusive.
- * @param endNode The node to clear until, exclusive.
- */
-function clearUnvisitedDOM(maybeParentNode, startNode, endNode) {
-    var parentNode = maybeParentNode;
-    var child = startNode;
-    while (child !== endNode) {
-        var next = child.nextSibling;
-        parentNode.removeChild(child);
-        context.markDeleted(child);
-        child = next;
-    }
-}
-/**
- * Changes to the first child of the current node.
- */
-function enterNode() {
-    currentParent = currentNode;
-    currentNode = null;
-}
-/**
- * @return The next Node to be patched.
- */
-function getNextNode() {
-    if (currentNode) {
-        return currentNode.nextSibling;
-    } else {
-        return currentParent.firstChild;
-    }
-}
-/**
- * Changes to the next sibling of the current node.
- */
-function nextNode() {
-    currentNode = getNextNode();
-}
-/**
- * Changes to the parent of the current node, removing any unvisited children.
- */
-function exitNode() {
-    clearUnvisitedDOM(currentParent, getNextNode(), null);
-    currentNode = currentParent;
-    currentParent = currentParent.parentNode;
-}
-/**
- * Makes sure that the current node is an Element with a matching nameOrCtor and
- * key.
- *
- * @param nameOrCtor The tag or constructor for the Element.
- * @param key The key used to identify this element. This can be an
- *     empty string, but performance may be better if a unique value is used
- *     when iterating over an array of items.
- * @return The corresponding Element.
- */
-function open(nameOrCtor, key) {
-    nextNode();
-    alignWithDOM(nameOrCtor, key);
-    enterNode();
-    return currentParent;
-}
-/**
- * Closes the currently open Element, removing any unvisited children if
- * necessary.
- */
-function close() {
-    if (process.env.NODE_ENV !== 'production') {
-        setInSkip(false);
-    }
-    exitNode();
-    return currentNode;
-}
-/**
- * Makes sure the current node is a Text node and creates a Text node if it is
- * not.
- */
-function text() {
-    nextNode();
-    alignWithDOM('#text', null);
-    return currentNode;
-}
-/**
- * Gets the current Element being patched.
- */
-function currentElement() {
-    if (process.env.NODE_ENV !== 'production') {
-        assertInPatch('currentElement', doc);
-        assertNotInAttributes('currentElement');
-    }
-    return currentParent;
-}
-/**
- * @return The Node that will be evaluated for the next instruction.
- */
-function currentPointer() {
-    if (process.env.NODE_ENV !== 'production') {
-        assertInPatch('currentPointer', doc);
-        assertNotInAttributes('currentPointer');
-    }
-    // TODO(tomnguyen): assert that this is not null
-    return getNextNode();
-}
-/**
- * Skips the children in a subtree, allowing an Element to be closed without
- * clearing out the children.
- */
-function skip() {
-    if (process.env.NODE_ENV !== 'production') {
-        assertNoChildrenDeclaredYet('skip', currentNode);
-        setInSkip(true);
-    }
-    currentNode = currentParent.lastChild;
-}
-
-/**
+ */var L=null,d=null,f=null,$=null,z=[],W=[];function H(){return W}function ve(e){var t=function(s,n,i){var a=L,o=$,g=z,x=W,v=d,S=f,m=!1;L=new Ve,$=s.ownerDocument,W=[],f=s.parentNode,z=tt(s,f);try{var C=e(s,n,i);return C}finally{$=o,W=x,d=v,f=S,z=g,L.notifyChanges(),Ke(m),L=a}};return t}var Ce=ve(function(e,t,s){return d=e,_e(),t(s),xe(),e}),ct=ve(function(e,t,s){var n={nextSibling:e},i=null,a=null;return d=n,t(s),f&&Se(f,q(),e.nextSibling),n===d?null:d});function be(e,t,s){var n=R(e,s);return t==n.nameOrCtor&&s==n.key}function dt(e,t,s){if(!e)return null;if(be(e,t,s))return e;if(s){for(;e=e.nextSibling;)if(be(e,t,s))return e}return null}function ht(e,t){var s;return e==="#text"?s=pt($):s=lt($,f,e,t),L.markCreated(s),s}function we(e,t){var s=dt(d,e,t),n=s||ht(e,t);n!==d&&(z.indexOf(n)>=0?st(f,n,d):f.insertBefore(n,d),d=n)}function Se(e,t,s){for(var n=e,i=t;i!==s;){var a=i.nextSibling;n.removeChild(i),L.markDeleted(i),i=a}}function _e(){f=d,d=null}function q(){return d?d.nextSibling:f.firstChild}function M(){d=q()}function xe(){Se(f,q(),null),d=f,f=f.parentNode}function Ne(e,t){return M(),we(e,t),_e(),f}function ye(){return xe(),d}function ut(){return M(),we("#text",null),d}function mt(){return f}function ft(){return q()}function gt(){d=f.lastChild}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -1057,300 +163,7 @@ function skip() {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-/**
- * The offset in the virtual element declaration where the attributes are
- * specified.
- */
-var ATTRIBUTES_OFFSET = 3;
-/**
- * Used to keep track of the previous values when a 2-way diff is necessary.
- * This object is reused.
- * TODO(sparhamI) Scope this to a patch so you can call patch from an attribute
- * update.
- */
-var prevAttrsMap = createMap();
-/**
- * Applies the statics. When importing an Element, any existing attributes that
- * match a static are converted into a static attribute.
- * @param node The Element to apply statics for.
- * @param data The Element's data
- * @param statics The statics array,
- */
-function applyStatics(node, data, statics) {
-    data.staticsApplied = true;
-    if (!statics || !statics.length) {
-        return;
-    }
-    if (data.hasEmptyAttrsArr()) {
-        for (var i = 0; i < statics.length; i += 2) {
-            updateAttribute(node, statics[i], statics[i + 1]);
-        }
-        return;
-    }
-    for (var i = 0; i < statics.length; i += 2) {
-        prevAttrsMap[statics[i]] = i + 1;
-    }
-    var attrsArr = data.getAttrsArr(0);
-    var j = 0;
-    for (var i = 0; i < attrsArr.length; i += 2) {
-        var name = attrsArr[i];
-        var value = attrsArr[i + 1];
-        var staticsIndex = prevAttrsMap[name];
-        if (staticsIndex) {
-            // For any attrs that are static and have the same value, make sure we do
-            // not set them again.
-            if (statics[staticsIndex] === value) {
-                delete prevAttrsMap[name];
-            }
-            continue;
-        }
-        // For any attrs that are dynamic, move them up to the right place.
-        attrsArr[j] = name;
-        attrsArr[j + 1] = value;
-        j += 2;
-    }
-    // Anything after `j` was either moved up already or static.
-    truncateArray(attrsArr, j);
-    for (var name in prevAttrsMap) {
-        updateAttribute(node, name, statics[prevAttrsMap[name]]);
-        delete prevAttrsMap[name];
-    }
-}
-/**
- * @param  nameOrCtor The Element's tag or constructor.
- * @param  key The key used to identify this element. This can be an
- *     empty string, but performance may be better if a unique value is used
- *     when iterating over an array of items.
- * @param statics An array of attribute name/value pairs of the static
- *     attributes for the Element. Attributes will only be set once when the
- *     Element is created.
- * @param varArgs, Attribute name/value pairs of the dynamic attributes
- *     for the Element.
- * @return The corresponding Element.
- */
-function elementOpen(nameOrCtor, key,
-// Ideally we could tag statics and varArgs as an array where every odd
-// element is a string and every even element is any, but this is hard.
-// tslint:disable-next-line:no-any
-statics) {
-    var varArgs = [];
-    for (var _i = 3; _i < arguments.length; _i++) {
-        varArgs[_i - 3] = arguments[_i];
-    }
-    if (process.env.NODE_ENV !== 'production') {
-        assertNotInAttributes('elementOpen');
-        assertNotInSkip('elementOpen');
-    }
-    var node = open(nameOrCtor, key);
-    var data = getData(node);
-    if (!data.staticsApplied) {
-        applyStatics(node, data, statics);
-    }
-    var attrsLength = Math.max(0, arguments.length - ATTRIBUTES_OFFSET);
-    var hadNoAttrs = data.hasEmptyAttrsArr();
-    if (!attrsLength && hadNoAttrs) {
-        return node;
-    }
-    var attrsArr = data.getAttrsArr(attrsLength);
-    /*
-     * Checks to see if one or more attributes have changed for a given Element.
-     * When no attributes have changed, this is much faster than checking each
-     * individual argument. When attributes have changed, the overhead of this is
-     * minimal.
-     */
-    var i = ATTRIBUTES_OFFSET;
-    var j = 0;
-    for (; i < arguments.length; i += 2, j += 2) {
-        var name = arguments[i];
-        if (hadNoAttrs) {
-            attrsArr[j] = name;
-        } else if (attrsArr[j] !== name) {
-            break;
-        }
-        var value = arguments[i + 1];
-        if (hadNoAttrs || attrsArr[j + 1] !== value) {
-            attrsArr[j + 1] = value;
-            updateAttribute(node, name, value);
-        }
-    }
-    /*
-     * Items did not line up exactly as before, need to make sure old items are
-     * removed. This can happen if using conditional logic when declaring
-     * attrs through the elementOpenStart flow or if one element is reused in
-     * the place of another.
-     */
-    if (i < arguments.length || j < attrsArr.length) {
-        var attrsStart = j;
-        for (; j < attrsArr.length; j += 2) {
-            prevAttrsMap[attrsArr[j]] = attrsArr[j + 1];
-        }
-        for (j = attrsStart; i < arguments.length; i += 2, j += 2) {
-            var name = arguments[i];
-            var value = arguments[i + 1];
-            if (prevAttrsMap[name] !== value) {
-                updateAttribute(node, name, value);
-            }
-            attrsArr[j] = name;
-            attrsArr[j + 1] = value;
-            delete prevAttrsMap[name];
-        }
-        truncateArray(attrsArr, j);
-        /*
-         * At this point, only have attributes that were present before, but have
-         * been removed.
-         */
-        for (var name in prevAttrsMap) {
-            updateAttribute(node, name, undefined);
-            delete prevAttrsMap[name];
-        }
-    }
-    return node;
-}
-/**
- * Declares a virtual Element at the current location in the document. This
- * corresponds to an opening tag and a elementClose tag is required. This is
- * like elementOpen, but the attributes are defined using the attr function
- * rather than being passed as arguments. Must be folllowed by 0 or more calls
- * to attr, then a call to elementOpenEnd.
- * @param nameOrCtor The Element's tag or constructor.
- * @param key The key used to identify this element. This can be an
- *     empty string, but performance may be better if a unique value is used
- *     when iterating over an array of items.
- * @param statics An array of attribute name/value pairs of the static
- *     attributes for the Element. Attributes will only be set once when the
- *     Element is created.
- */
-function elementOpenStart(nameOrCtor, key, statics) {
-    var argsBuilder = getArgsBuilder();
-    if (process.env.NODE_ENV !== 'production') {
-        assertNotInAttributes('elementOpenStart');
-        setInAttributes(true);
-    }
-    argsBuilder[0] = nameOrCtor;
-    argsBuilder[1] = key;
-    argsBuilder[2] = statics;
-}
-/**
- * Allows you to define a key after an elementOpenStart. This is useful in
- * templates that define key after an element has been opened ie
- * `<div key('foo')></div>`.
- */
-function key(key) {
-    var argsBuilder = getArgsBuilder();
-    if (process.env.NODE_ENV !== 'production') {
-        assertInAttributes('key');
-        assert(argsBuilder);
-    }
-    argsBuilder[1] = key;
-}
-/***
- * Defines a virtual attribute at this point of the DOM. This is only valid
- * when called between elementOpenStart and elementOpenEnd.
- */
-// tslint:disable-next-line:no-any
-function attr(name, value) {
-    var argsBuilder = getArgsBuilder();
-    if (process.env.NODE_ENV !== 'production') {
-        assertInAttributes('attr');
-    }
-    argsBuilder.push(name);
-    argsBuilder.push(value);
-}
-/**
- * Closes an open tag started with elementOpenStart.
- * @return The corresponding Element.
- */
-function elementOpenEnd() {
-    var argsBuilder = getArgsBuilder();
-    if (process.env.NODE_ENV !== 'production') {
-        assertInAttributes('elementOpenEnd');
-        setInAttributes(false);
-    }
-    assert(argsBuilder);
-    var node = elementOpen.apply(null, argsBuilder);
-    truncateArray(argsBuilder, 0);
-    return node;
-}
-/**
- * Closes an open virtual Element.
- *
- * @param nameOrCtor The Element's tag or constructor.
- * @return The corresponding Element.
- */
-function elementClose(nameOrCtor) {
-    if (process.env.NODE_ENV !== 'production') {
-        assertNotInAttributes('elementClose');
-    }
-    var node = close();
-    if (process.env.NODE_ENV !== 'production') {
-        assertCloseMatchesOpenTag(getData(node).nameOrCtor, nameOrCtor);
-    }
-    return node;
-}
-/**
- * Declares a virtual Element at the current location in the document that has
- * no children.
- * @param nameOrCtor The Element's tag or constructor.
- * @param key The key used to identify this element. This can be an
- *     empty string, but performance may be better if a unique value is used
- *     when iterating over an array of items.
- * @param statics An array of attribute name/value pairs of the static
- *     attributes for the Element. Attributes will only be set once when the
- *     Element is created.
- * @param varArgs Attribute name/value pairs of the dynamic attributes
- *     for the Element.
- * @return The corresponding Element.
- */
-function elementVoid(nameOrCtor, key,
-// Ideally we could tag statics and varArgs as an array where every odd
-// element is a string and every even element is any, but this is hard.
-// tslint:disable-next-line:no-any
-statics) {
-    var varArgs = [];
-    for (var _i = 3; _i < arguments.length; _i++) {
-        varArgs[_i - 3] = arguments[_i];
-    }
-    elementOpen.apply(null, arguments);
-    return elementClose(nameOrCtor);
-}
-/**
- * Declares a virtual Text at this point in the document.
- *
- * @param value The value of the Text.
- * @param varArgs
- *     Functions to format the value which are called only when the value has
- *     changed.
- * @return The corresponding text node.
- */
-function text$1(value) {
-    var varArgs = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        varArgs[_i - 1] = arguments[_i];
-    }
-    if (process.env.NODE_ENV !== 'production') {
-        assertNotInAttributes('text');
-        assertNotInSkip('text');
-    }
-    var node = text();
-    var data = getData(node);
-    if (data.text !== value) {
-        data.text = value;
-        var formatted = value;
-        for (var i = 1; i < arguments.length; i += 1) {
-            /*
-             * Call the formatter function directly to prevent leaking arguments.
-             * https://github.com/google/incremental-dom/pull/204#issuecomment-178223574
-             */
-            var fn = arguments[i];
-            formatted = fn(formatted);
-        }
-        node.data = formatted;
-    }
-    return node;
-}
-
-/**
+ */var Ae=3,_=ce();function vt(e,t,s){if(t.staticsApplied=!0,!(!s||!s.length)){if(t.hasEmptyAttrsArr()){for(var n=0;n<s.length;n+=2)E(e,s[n],s[n+1]);return}for(var n=0;n<s.length;n+=2)_[s[n]]=n+1;for(var i=t.getAttrsArr(0),a=0,n=0;n<i.length;n+=2){var o=i[n],g=i[n+1],x=_[o];if(x){s[x]===g&&delete _[o];continue}i[a]=o,i[a+1]=g,a+=2}Z(i,a);for(var o in _)E(e,o,s[_[o]]),delete _[o]}}function ee(e,t,s){for(var n=[],i=3;i<arguments.length;i++)n[i-3]=arguments[i];var a=Ne(e,t),o=R(a);o.staticsApplied||vt(a,o,s);var g=Math.max(0,arguments.length-Ae),x=o.hasEmptyAttrsArr();if(!g&&x)return a;for(var v=o.getAttrsArr(g),S=Ae,m=0;S<arguments.length;S+=2,m+=2){var C=arguments[S];if(x)v[m]=C;else if(v[m]!==C)break;var P=arguments[S+1];(x||v[m+1]!==P)&&(v[m+1]=P,E(a,C,P))}if(S<arguments.length||m<v.length){for(var je=m;m<v.length;m+=2)_[v[m]]=v[m+1];for(m=je;S<arguments.length;S+=2,m+=2){var C=arguments[S],P=arguments[S+1];_[C]!==P&&E(a,C,P),v[m]=C,v[m+1]=P,delete _[C]}Z(v,m);for(var C in _)E(a,C,void 0),delete _[C]}return a}function Ct(e,t,s){var n=H();n[0]=e,n[1]=t,n[2]=s}function bt(e){var t=H();t[1]=e}function wt(e,t){var s=H();s.push(e),s.push(t)}function St(){var e=H(),t=ee.apply(null,e);return Z(e,0),t}function Pe(e){var t=ye();return t}function _t(e,t,s){for(var n=[],i=3;i<arguments.length;i++)n[i-3]=arguments[i];return ee.apply(null,arguments),Pe()}function xt(e){for(var t=[],s=1;s<arguments.length;s++)t[s-1]=arguments[s];var n=ut(),i=R(n);if(i.text!==e){i.text=e;for(var a=e,o=1;o<arguments.length;o+=1){var g=arguments[o];a=g(a)}n.data=a}return n}/**
  * @license
  * Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
  *
@@ -1365,2013 +178,652 @@ function text$1(value) {
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-incrementalDomCjs.applyAttr = applyAttr;
-incrementalDomCjs.applyProp = applyProp;
-incrementalDomCjs.attributes = attributes;
-incrementalDomCjs.close = close;
-var currentElement_1 = incrementalDomCjs.currentElement = currentElement;
-var currentPointer_1 = incrementalDomCjs.currentPointer = currentPointer;
-incrementalDomCjs.open = open;
-var patch = incrementalDomCjs.patch = patchInner;
-incrementalDomCjs.patchInner = patchInner;
-incrementalDomCjs.patchOuter = patchOuter;
-incrementalDomCjs.skip = skip;
-var skipNode = incrementalDomCjs.skipNode = nextNode;
-incrementalDomCjs.getKey = getKey;
-incrementalDomCjs.clearCache = clearCache;
-incrementalDomCjs.importNode = importNode;
-incrementalDomCjs.isDataInitialized = isDataInitialized;
-incrementalDomCjs.notifications = notifications;
-incrementalDomCjs.symbols = symbols;
-var attr_1 = incrementalDomCjs.attr = attr;
-var elementClose_1 = incrementalDomCjs.elementClose = elementClose;
-incrementalDomCjs.elementOpen = elementOpen;
-var elementOpenEnd_1 = incrementalDomCjs.elementOpenEnd = elementOpenEnd;
-var elementOpenStart_1 = incrementalDomCjs.elementOpenStart = elementOpenStart;
-incrementalDomCjs.elementVoid = elementVoid;
-var text_1 = incrementalDomCjs.text = text$1;
-incrementalDomCjs.key = key;
-
-/** docs:ignore */
-function comment(content) {
-    var node = currentPointer_1();
-    if (node instanceof Comment && node.data !== content) {
-        node.data = content;
-    }
-    else {
-        node = document.createComment(content);
-        currentElement_1().appendChild(node);
-    }
-    skipNode();
-    return node;
-}
-
-var theI18n = dsShared.noI18nI18n;
-function webComponentsUseI18n(i18n) {
-    theI18n = i18n;
-}
-function getI18n() {
-    return theI18n;
-}
-
-var SYMBOL_COMPONENT_META = Symbol("ComponentMetadata");
-/** docs:ignore */
-var Metadata = Object.freeze({
-    has: function (target, key) {
-        return Boolean(target[SYMBOL_COMPONENT_META]
-            && Object.prototype.hasOwnProperty.call(target[SYMBOL_COMPONENT_META], key));
-    },
-    add: function (target, metadata) {
-        if (target[SYMBOL_COMPONENT_META]) {
-            Object.assign(target[SYMBOL_COMPONENT_META], metadata);
-        }
-        else {
-            // eslint-disable-next-line no-param-reassign
-            target[SYMBOL_COMPONENT_META] = metadata;
-        }
-    },
-    get: function (target, key, defaultValue) {
-        return target[SYMBOL_COMPONENT_META]
-            ? (target[SYMBOL_COMPONENT_META][key] || defaultValue)
-            : defaultValue;
-    },
-});
-
-var __values$3 = (undefined && undefined.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var SYMBOL_LISTENERS_ATTACHED = Symbol("ds-web-components:pragma:listeners-attached");
-/** docs:ignore */
-var MARK_CONTENT_START = "idom-pragma:content-begin";
-/** docs:ignore */
-var MARK_CONTENT_END = "idom-pragma:content-end";
-function handleChildren(children) {
-    var e_1, _a;
-    try {
-        for (var children_1 = __values$3(children), children_1_1 = children_1.next(); !children_1_1.done; children_1_1 = children_1.next()) {
-            var child = children_1_1.value;
-            if (typeof child === "function") {
-                child();
-            }
-            else if (typeof child === "string") {
-                text_1(child);
-            }
-            else if (child instanceof Set) {
-                /*
-                 * this Set thing is a bizzare solution but it works.
-                 * long term solution: make stencil work
-                 */
-                handleChildren(Array.from(child));
-            }
-            else if (Array.isArray(child) && child.length > 0) {
-                /*
-                 * child being an array represents a set of elements managed
-                 * externally to this system, perhaps by a framework like React.
-                 * so manually append them if need be and tell idom to skip over them
-                 */
-                var ptr = currentPointer_1();
-                comment(MARK_CONTENT_START);
-                if (ptr === null) {
-                    var ce = currentElement_1();
-                    for (var i = 0; i < child.length; i += 1) {
-                        if (!ce.contains(child[i])) {
-                            ce.appendChild(child[i]);
+ */c.applyAttr=de;c.applyProp=he;c.attributes=U;c.close=ye;var te=c.currentElement=mt,se=c.currentPointer=ft;c.open=Ne;var Nt=c.patch=Ce;c.patchInner=Ce;c.patchOuter=ct;c.skip=gt;var ne=c.skipNode=M;c.getKey=at;c.clearCache=ge;c.importNode=fe;c.isDataInitialized=it;c.notifications=B;c.symbols=V;var Ie=c.attr=wt,yt=c.elementClose=Pe;c.elementOpen=ee;var At=c.elementOpenEnd=St,Pt=c.elementOpenStart=Ct;c.elementVoid=_t;var It=c.text=xt;c.key=bt;function De(e){let t=se();return t instanceof Comment&&t.data!==e?t.data=e:(t=document.createComment(e),te().appendChild(t)),ne(),t}let Oe=T.noI18nI18n;function Dt(e){Oe=e}function Ot(){return Oe}const I=Symbol("ComponentMetadata"),b=Object.freeze({has(e,t){return Boolean(e[I]&&Object.prototype.hasOwnProperty.call(e[I],t))},add(e,t){e[I]?Object.assign(e[I],t):e[I]=t},get(e,t,s){return e[I]&&e[I][t]||s}}),Fe=Symbol("ds-web-components:pragma:listeners-attached"),Le="idom-pragma:content-begin",ie="idom-pragma:content-end";function ae(e){for(const t of e)if(typeof t=="function")t();else if(typeof t=="string")It(t);else if(t instanceof Set)ae(Array.from(t));else if(Array.isArray(t)&&t.length>0){let s=se();if(De(Le),s===null){const n=te();for(let i=0;i<t.length;i+=1)n.contains(t[i])||n.appendChild(t[i]),ne()}for(;s&&s.data!==ie;)ne(),s=se();De(ie)}}function r(e,t,...s){if(t){for(const n of Object.keys(t))if(n.toUpperCase()==="DATA-FRAGMENT")return()=>ae(s)}return()=>{Pt(e);const n=[];if(t)for(const a of Object.keys(t))a.toUpperCase()==="CLASSNAME"?Ie("class",t[a]):/^on[A-Z]/.test(a)?n.push(a):Ie(a,t[a]);At(e);const i=te();if(!i[Fe]){for(const a of n)i.addEventListener(a.substr(2).toLowerCase(),t[a]);i[Fe]=!0}ae(s),yt(e)}}function ke(e,t){customElements.get(e)||customElements.define(e,t)}function Ft(...e){for(const t of e)ke(b.get(t,"tag"),t)}function Lt(e){return function(...s){for(const n of s){const i=`${e}${b.get(n,"tag").substr(3)}`;ke(i,n)}}}const re=Symbol("Component Attribute Bindings"),D=Symbol("Component Class Bindings"),G=Symbol("Component Style Bindings"),kt={__initialized:!1,__observer:null,__queuedUpdate:null,__managedClasses:new Set,__updateHostBindings(){const e=this;for(const t of Object.keys(e[re]||{}))e.setAttribute(t,e[re][t]);for(const t of Object.keys(e[G]||{}))e.style[t]=e[G][t];for(const t of e.__managedClasses)e.classList.remove(t);for(const t of(e[D]||[]).filter(Boolean))e.__managedClasses.add(t),e.classList.add(t);for(const t of(e.getAttribute("classname")||"").split(/\w+/).filter(Boolean))e.classList.add(t)},__updateChildQueries(e){const t=this;for(const s of b.get(t.constructor,"childQueries",[]))if(!e||e&&s.refresh){const n=s.all?t.querySelectorAll:t.querySelector;t[s.key]=n.call(t,s.selector)}},__gatherChildren(){const e=this;let t=Array.from(e.childNodes),s=null,n=t.length;for(let i=0;i<t.length;i+=1){const a=t[i];a instanceof Comment&&(a.data===Le?s=i+1:a.data===ie&&(n=i-1))}if(s===null)for(const i of t)i.parentNode.removeChild(i);else t=t.slice(s,n);b.has(e.constructor,"contentProp")&&(e[b.get(e.constructor,"contentProp")]=t)},__startMutObs(){const e=this;e.__observer||(e.__observer=new MutationObserver(()=>{e.contentChangedCallback&&e.contentChangedCallback(),e.__gatherChildren(),e.update()})),e.__observer.observe(e,{childList:!0})},__stopMutObs(){const e=this;e.__observer&&e.__observer.disconnect()},__doRender(){const e=this;e.__stopMutObs(),Nt(e,e.render(Ot())),e.__startMutObs()},update(){const e=this;e.__initialized&&!e.__queuedUpdate&&(e.__queuedUpdate=window.requestAnimationFrame(()=>{e.__doRender(),setTimeout(()=>{e.__updateChildQueries(!0),e.__updateHostBindings()},0),e.__queuedUpdate=null}))},attributeChangedCallback(e,t,s){const n=this,i=s===""?!0:s;i!==t&&(n.__cbAttributeChanged&&n.__cbAttributeChanged(e,n[e],i),e!=="style"&&(n[e]=i),n.__initialized&&n.update())},connectedCallback(){const e=this;e.__cbConnected&&e.__cbConnected();const t=b.get(e.constructor,"eventListeners",[]);setTimeout(()=>{if(!e.__initialized){e.__gatherChildren();for(const[,s]of t)e[s]=e[s].bind(e);e.__initialized=!0}for(const[s,n]of t)e.addEventListener(s,e[n]);e.__doRender(),setTimeout(()=>{e.__updateChildQueries(),e.__updateHostBindings()},0)},0)},disconnectedCallback(){const e=this;e.__cbDisconnected&&e.__cbDisconnected();for(const[t,s]of b.get(e.constructor,"eventListeners",[]))e.removeEventListener(t,e[s]);e.__stopMutObs()}};function O(e){return t=>{b.add(t,e),Object.assign(t.prototype,{__cbAttributeChanged:t.prototype.attributeChangedCallback,__cbConnected:t.prototype.connectedCallback,__cbDisconnected:t.prototype.disconnectedCallback},kt)}}function X(){return(e,t)=>{b.add(e.constructor,{contentProp:t})}}function K(e){return(t,s)=>{Object.defineProperty(t,s,{get(){return Object.defineProperty(this,s,{value:{dispatch:n=>{const i=new CustomEvent(e||s,{detail:n});return this.dispatchEvent(i),i}}}),this[s]},configurable:!0})}}function j(e){return(t,s)=>{const n=b.get(t.constructor,"eventListeners",[]);n.push([e,s]),b.add(t.constructor,{eventListeners:n})}}function p(e){return(t,s)=>{const n=t.constructor,i=s.toLowerCase();if(n.observedAttributes=n.observedAttributes||["classname","className","style"],n.observedAttributes.push(s),n.observedAttributes.push(i),i!==s&&Object.defineProperty(t,s,{get(){return this[i]},set(a){this[i]=a}}),e){const a=Symbol.for(s);Object.defineProperty(t,i,{get(){return this[a]},set(o){let g=o;e===Boolean&&typeof o=="string"&&o.toLowerCase()==="false"?g=!1:g=e(o),this[a]=g}})}}}function Te(e,t,s){return(n,i)=>{const a=b.get(n.constructor,"childQueries",[]);a.push({key:i,selector:e,all:s,refresh:t.refresh}),b.add(n.constructor,{childQueries:a})}}function Q(e,t={}){return Te(e,t)}function Ue(e,t={}){return Te(e,t,!0)}function oe(){return(e,t)=>{const s=Symbol(t);Object.defineProperties(e,{[s]:{writable:!0,enumerable:!1,configurable:!1,value:e[t]},[t]:{get(){return this[s]},set(n){this[s]!==n&&(this[s]=n,this.update())}}})}}exports.MIMEType=void 0;(function(e){e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip"})(exports.MIMEType||(exports.MIMEType={}));var Tt=Object.defineProperty,Ut=Object.getOwnPropertyDescriptor,h=(e,t,s,n)=>{for(var i=n>1?void 0:n?Ut(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Tt(t,s,i),i};const u="sps-file-upload";exports.SpsFileUploadComponent=class extends HTMLElement{constructor(){super();this.shown=!0,this.files=[],this.acceptMIMETypes=new Set,this.active=!1,this.error=!1,this.namesOfUnsupportedFiles=[],this.handleBrowseLinkClick=this.handleBrowseLinkClick.bind(this),this.handleDownloadButtonClick=this.handleDownloadButtonClick.bind(this),this.handleFileInputChange=this.handleFileInputChange.bind(this),this.dismiss=this.dismiss.bind(this)}get[D](){return[u,this.active&&`${u}--active`,this.error&&`${u}--error`,!this.shown&&`${u}--hidden`,this.mini&&`${u}--mini`,this.constrainContentWidth&&`${u}--constrained-content-width`]}connectedCallback(){this.description=this.description||(this.multiple?"Files":"File"),this.acceptExtensions&&this.processAcceptExtensions(this.acceptExtensions),this.maxSize&&this.parseAndValidateMaxSize(this.maxSize)}attributeChangedCallback(e,t,s){e==="acceptExtensions"&&this.processAcceptExtensions(s),e==="maxSize"&&this.parseAndValidateMaxSize(s)}dismiss(){this.dismissable&&(this.shown=!1,this.update(),this.dismissal.dispatch())}show(){this.dismissable&&(this.shown=!0,this.update())}render({t:e}){const t=this.error?T.SpsIcon.EXCLAMATION_CIRCLE:T.SpsIcon.UPLOAD_CLOUD,s=(this.multiple?e("design-system:fileUpload.instructions_plural"):e("design-system:fileUpload.instructions")).split("|");return r("div",{"data-fragment":!0},r("div",{className:`${u}__content`},this.processing?r("div",{"data-fragment":!0},r("i",{className:"sps-spinner sps-spinner--medium","aria-hidden":"true"}),r("div",{className:`${u}__instructions`},e("design-system:fileUpload.processing"))):r("div",{"data-fragment":!0},r("i",{className:`sps-icon sps-icon-${t} ${u}__icon-primary`,"aria-hidden":"true"}),r("div",{className:`${u}__title`},this.error?r("div",{"data-fragment":!0},e(this.namesOfUnsupportedFiles.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):r("div",{"data-fragment":!0},e("design-system:fileUpload.title",{description:this.description}))),this.error?r("div",{className:`${u}__errored-files`},new Set(this.namesOfUnsupportedFiles.map((n,i)=>{const a=Math.floor(n.length/2);return r("div",{className:`${u}__errored-filename`,key:n},r("span",{className:`${u}__errored-filename-segment`},n.substr(0,a)),r("div",{className:`${u}__errored-filename-segment`},r("span",null,n.substr(a))),i<this.namesOfUnsupportedFiles.length-1?",":"")}))):r("span",null),r("div",{className:`${u}__instructions`},r("div",{"data-fragment":!0},r("span",null,s[0]),r("a",{href:"",onClick:this.handleBrowseLinkClick},s[1]),r("span",null,s[2]))),r("div",{className:`${u}__requirements`},this.acceptExtensions?r("span",null,"("," ",e("design-system:fileUpload.acceptedTypes",{fileTypes:this.acceptExtensionsDescription})," ",")"):"",this.maxSize?r("span",null,"("," ",e("design-system:fileUpload.maximumSize",{size:this.maxSize})," ",")"):"",this.customRequirement?r("span",null," ",this.customRequirement," "):""),this.downloadLabel&&r("div",{className:`sps-button sps-button--link ${u}__download-button`,onClick:this.handleDownloadButtonClick},r("button",{type:"button"},r("i",{className:"sps-icon sps-icon-download-cloud","aria-hidden":"true"})," ",this.downloadLabel)))),this.dismissable&&!this.processing&&r("div",{className:`sps-button sps-button--icon ${u}__close-button`,onClick:this.dismiss},r("button",{type:"button",title:e("design-system:fileUpload.close")},r("i",{className:"sps-icon sps-icon-x","aria-hidden":"true"}))),r("form",null,r("input",{type:"file",accept:this.accept||"*/*",multiple:this.multiple||null,onChange:this.handleFileInputChange})))}parseAndValidateMaxSize(e){try{this.maxSizeBytes=l.parseFileSize(e)}catch{throw new Error(`Could not parse "${e}" as a file size.`)}}processAcceptExtensions(e){const s=(Array.isArray(e)?e:e.trim().split(/\s?,\s?/)).map(i=>i.replace(/^\./,"")),n=s.map(i=>`.${i}`.toLowerCase());this.acceptExtensionsDescription=n.map((i,a)=>a>0&&a===n.length-1?`or ${i}`:i).join(n.length>2?", ":" "),this.acceptMIMETypes.clear();for(const i of s)for(const a of exports.MIMEType[i.toUpperCase()].split(","))this.acceptMIMETypes.add(a);this.accept=n.concat(Array.from(this.acceptMIMETypes)).join(",")}selectFiles(e){this.namesOfUnsupportedFiles=[];const t=Array.from(e);for(const s of t)this.acceptExtensions&&!this.acceptMIMETypes.has(s.type)&&this.namesOfUnsupportedFiles.push(s.name),this.maxSize&&s.size>this.maxSizeBytes&&this.namesOfUnsupportedFiles.push(s.name);this.namesOfUnsupportedFiles.length?(this.error=!0,this.fileInput.value=null,this.update()):(this.files=t,this.selection.dispatch(t))}handleDragOver(e){e.preventDefault(),e.stopPropagation()}handleDragEnter(e){e.preventDefault(),this.active=!0,this.error=!1,this.update()}handleDragLeave(e){e.preventDefault(),this.active=!1,this.update()}handleDrop(e){e.preventDefault(),e.stopPropagation(),this.active=!1,e.dataTransfer.items?this.selectFiles(Array.from(e.dataTransfer.items).map(t=>t.getAsFile())):this.selectFiles(e.dataTransfer.files),this.update()}handleBrowseLinkClick(e){e.preventDefault(),this.error=!1,this.update(),this.fileInput.click()}handleDownloadButtonClick(){this.download.dispatch()}handleFileInputChange(e){e.stopPropagation(),this.selectFiles(e.target.files)}};exports.SpsFileUploadComponent.displayName=u;exports.SpsFileUploadComponent.props={description:"string",multiple:"boolean",dismissable:"boolean",processing:"boolean",mini:"boolean",downloadLabel:"string",acceptExtensions:"Array<string> | string",maxSize:"string",customRequirement:"string",selection:{event:!0,type:"CustomEvent<Array<File>>"},dismissal:{event:!0,type:"CustomEvent<void>"},download:{event:!0,type:"CustomEvent<void>"}};h([p()],exports.SpsFileUploadComponent.prototype,"description",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"multiple",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"shown",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"dismissable",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"processing",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"mini",2);h([p(Boolean)],exports.SpsFileUploadComponent.prototype,"constrainContentWidth",2);h([p()],exports.SpsFileUploadComponent.prototype,"downloadLabel",2);h([p()],exports.SpsFileUploadComponent.prototype,"acceptExtensions",2);h([p()],exports.SpsFileUploadComponent.prototype,"maxSize",2);h([p()],exports.SpsFileUploadComponent.prototype,"customRequirement",2);h([K()],exports.SpsFileUploadComponent.prototype,"selection",2);h([K()],exports.SpsFileUploadComponent.prototype,"dismissal",2);h([K()],exports.SpsFileUploadComponent.prototype,"download",2);h([Q("input[type='file']")],exports.SpsFileUploadComponent.prototype,"fileInput",2);h([j("dragover")],exports.SpsFileUploadComponent.prototype,"handleDragOver",1);h([j("dragenter")],exports.SpsFileUploadComponent.prototype,"handleDragEnter",1);h([j("dragleave")],exports.SpsFileUploadComponent.prototype,"handleDragLeave",1);h([j("drop")],exports.SpsFileUploadComponent.prototype,"handleDrop",1);exports.SpsFileUploadComponent=h([O({tag:u})],exports.SpsFileUploadComponent);const Ee={basic:{label:"Basic File Upload",description:l.code`
+            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>
+        `,examples:{single:{description:"<p>Single file upload</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
                         }
-                        skipNode();
-                    }
-                }
-                while (ptr && ptr.data !== MARK_CONTENT_END) {
-                    skipNode();
-                    ptr = currentPointer_1();
-                }
-                comment(MARK_CONTENT_END);
-            }
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (children_1_1 && !children_1_1.done && (_a = children_1.return)) _a.call(children_1);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-}
-/** JSX pragma that utilizes incremental-dom. */
-function h(tagName, attrs) {
-    var e_2, _a;
-    var children = [];
-    for (var _i = 2; _i < arguments.length; _i++) {
-        children[_i - 2] = arguments[_i];
-    }
-    if (attrs) {
-        try {
-            for (var _b = __values$3(Object.keys(attrs)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var key = _c.value;
-                if (key.toUpperCase() === "DATA-FRAGMENT") {
-                    return function () { return handleChildren(children); };
-                }
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-    }
-    return function () {
-        var e_3, _a, e_4, _b;
-        elementOpenStart_1(tagName);
-        var eventListenerKeys = [];
-        if (attrs) {
-            try {
-                for (var _c = __values$3(Object.keys(attrs)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var key = _d.value;
-                    if (key.toUpperCase() === "CLASSNAME") {
-                        attr_1("class", attrs[key]);
-                    }
-                    else if (/^on[A-Z]/.test(key)) {
-                        eventListenerKeys.push(key);
-                    }
-                    else {
-                        attr_1(key, attrs[key]);
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref}/>
+                                </div>
+                            </div>
+                        )
                     }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-        }
-        elementOpenEnd_1(tagName);
-        var ce = currentElement_1();
-        if (!ce[SYMBOL_LISTENERS_ATTACHED]) {
-            try {
-                for (var eventListenerKeys_1 = __values$3(eventListenerKeys), eventListenerKeys_1_1 = eventListenerKeys_1.next(); !eventListenerKeys_1_1.done; eventListenerKeys_1_1 = eventListenerKeys_1.next()) {
-                    var key = eventListenerKeys_1_1.value;
-                    ce.addEventListener(key.substr(2).toLowerCase(), attrs[key]);
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (eventListenerKeys_1_1 && !eventListenerKeys_1_1.done && (_b = eventListenerKeys_1.return)) _b.call(eventListenerKeys_1);
-                }
-                finally { if (e_4) throw e_4.error; }
-            }
-            ce[SYMBOL_LISTENERS_ATTACHED] = true;
-        }
-        handleChildren(children);
-        elementClose_1(tagName);
-    };
-}
+                `},multiple:{description:"<p>Multiple file upload</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
 
-var __values$2 = (undefined && undefined.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-function ensureDefined(tag, Component) {
-    if (!customElements.get(tag)) {
-        customElements.define(tag, Component);
-    }
-}
-/**
- * Register a list of DS web components so that they can be used. Should be done
- * just once in your app, at init/bootstrap time.
- */
-function register() {
-    var e_1, _a;
-    var Components = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        Components[_i] = arguments[_i];
-    }
-    try {
-        for (var Components_1 = __values$2(Components), Components_1_1 = Components_1.next(); !Components_1_1.done; Components_1_1 = Components_1.next()) {
-            var Component = Components_1_1.value;
-            ensureDefined(Metadata.get(Component, "tag"), Component);
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (Components_1_1 && !Components_1_1.done && (_a = Components_1.return)) _a.call(Components_1);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-}
-/**
- * If for some reason you have a tag name conflict between a DS web component and
- * another component in your app, you can use this to override the "sps" namespace
- * for the DS web component(s). You pass in the new namespace, and it returns a customized
- * `register()` function that you can pass DS web components to. For example, you could
- * use this to make `<sps-photo>` become `<foo-photo>` instead.
- */
-function namespaceOverrideRegistrar(overrideNamespace) {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    return function register() {
-        var e_2, _a;
-        var Components = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            Components[_i] = arguments[_i];
-        }
-        try {
-            for (var Components_2 = __values$2(Components), Components_2_1 = Components_2.next(); !Components_2_1.done; Components_2_1 = Components_2.next()) {
-                var Component = Components_2_1.value;
-                var tag = "" + overrideNamespace + Metadata.get(Component, "tag").substr(3);
-                ensureDefined(tag, Component);
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (Components_2_1 && !Components_2_1.done && (_a = Components_2.return)) _a.call(Components_2);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-    };
-}
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
 
-var __values$1 = (undefined && undefined.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var __read$1 = (undefined && undefined.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var AttrBindings = Symbol("Component Attribute Bindings");
-var ClassBindings = Symbol("Component Class Bindings");
-var StyleBindings = Symbol("Component Style Bindings");
-var ext = {
-    __initialized: false,
-    __observer: null,
-    __queuedUpdate: null,
-    __managedClasses: new Set(),
-    __updateHostBindings: function () {
-        var e_1, _a, e_2, _b, e_3, _c, e_4, _d, e_5, _e;
-        var self = this;
-        try {
-            for (var _f = __values$1(Object.keys(self[AttrBindings] || {})), _g = _f.next(); !_g.done; _g = _f.next()) {
-                var attrName = _g.value;
-                self.setAttribute(attrName, self[AttrBindings][attrName]);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        try {
-            for (var _h = __values$1(Object.keys(self[StyleBindings] || {})), _j = _h.next(); !_j.done; _j = _h.next()) {
-                var styleKey = _j.value;
-                self.style[styleKey] = self[StyleBindings][styleKey];
-            }
-        }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-        finally {
-            try {
-                if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
-            }
-            finally { if (e_2) throw e_2.error; }
-        }
-        try {
-            for (var _k = __values$1(self.__managedClasses), _l = _k.next(); !_l.done; _l = _k.next()) {
-                var className = _l.value;
-                self.classList.remove(className);
-            }
-        }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
-        finally {
-            try {
-                if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
-            }
-            finally { if (e_3) throw e_3.error; }
-        }
-        try {
-            for (var _m = __values$1((self[ClassBindings] || []).filter(Boolean)), _o = _m.next(); !_o.done; _o = _m.next()) {
-                var className = _o.value;
-                self.__managedClasses.add(className);
-                self.classList.add(className);
-            }
-        }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
-        finally {
-            try {
-                if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
-            }
-            finally { if (e_4) throw e_4.error; }
-        }
-        try {
-            for (var _p = __values$1((self.getAttribute("classname") || "").split(/\w+/).filter(Boolean)), _q = _p.next(); !_q.done; _q = _p.next()) {
-                var className = _q.value;
-                self.classList.add(className);
-            }
-        }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
-        finally {
-            try {
-                if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
-            }
-            finally { if (e_5) throw e_5.error; }
-        }
-    },
-    __updateChildQueries: function (adhereToRefreshOption) {
-        var e_6, _a;
-        var self = this;
-        try {
-            // See query-selector.ts for explanation of refresh option
-            for (var _b = __values$1(Metadata.get(self.constructor, "childQueries", [])), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var childQuery = _c.value;
-                if (!adhereToRefreshOption || (adhereToRefreshOption && childQuery.refresh)) {
-                    var queryMethod = childQuery.all ? self.querySelectorAll : self.querySelector;
-                    self[childQuery.key] = queryMethod.call(self, childQuery.selector);
-                }
-            }
-        }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_6) throw e_6.error; }
-        }
-    },
-    __gatherChildren: function () {
-        var e_7, _a;
-        var self = this;
-        var childNodes = Array.from(self.childNodes);
-        var contentStartIndex = null;
-        var contentEndIndex = childNodes.length;
-        for (var i = 0; i < childNodes.length; i += 1) {
-            var node = childNodes[i];
-            if (node instanceof Comment) {
-                if (node.data === MARK_CONTENT_START) {
-                    contentStartIndex = i + 1;
-                }
-                else if (node.data === MARK_CONTENT_END) {
-                    contentEndIndex = i - 1;
-                }
-            }
-        }
-        if (contentStartIndex === null) {
-            try {
-                /*
-                 * Entire contents were replaced (React),
-                 * or initial render is about to happen
-                 * We must remove the children so they can be
-                 * placed in the proper location on render
-                 */
-                for (var childNodes_1 = __values$1(childNodes), childNodes_1_1 = childNodes_1.next(); !childNodes_1_1.done; childNodes_1_1 = childNodes_1.next()) {
-                    var node = childNodes_1_1.value;
-                    node.parentNode.removeChild(node);
-                }
-            }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
-            finally {
-                try {
-                    if (childNodes_1_1 && !childNodes_1_1.done && (_a = childNodes_1.return)) _a.call(childNodes_1);
-                }
-                finally { if (e_7) throw e_7.error; }
-            }
-        }
-        else {
-            /*
-             * Contents were updated in-place (Angular)
-             * Just update contentProp with the correct list
-             * of children
-             */
-            childNodes = childNodes.slice(contentStartIndex, contentEndIndex);
-        }
-        if (Metadata.has(self.constructor, "contentProp")) {
-            self[Metadata.get(self.constructor, "contentProp")] = childNodes;
-        }
-    },
-    __startMutObs: function () {
-        var self = this;
-        if (!self.__observer) {
-            self.__observer = new MutationObserver(function () {
-                if (self.contentChangedCallback) {
-                    self.contentChangedCallback();
-                }
-                self.__gatherChildren();
-                self.update();
-            });
-        }
-        self.__observer.observe(self, { childList: true });
-    },
-    __stopMutObs: function () {
-        var self = this;
-        if (self.__observer) {
-            self.__observer.disconnect();
-        }
-    },
-    __doRender: function () {
-        var self = this;
-        self.__stopMutObs();
-        patch(self, self.render(getI18n()));
-        self.__startMutObs();
-    },
-    update: function () {
-        var self = this;
-        if (self.__initialized && !self.__queuedUpdate) {
-            self.__queuedUpdate = window.requestAnimationFrame(function () {
-                self.__doRender();
-                setTimeout(function () {
-                    self.__updateChildQueries(true);
-                    self.__updateHostBindings();
-                }, 0);
-                self.__queuedUpdate = null;
-            });
-        }
-    },
-    attributeChangedCallback: function (key, oldValue, newValue) {
-        var self = this;
-        var value = newValue === "" ? true : newValue;
-        if (value !== oldValue) {
-            if (self.__cbAttributeChanged) {
-                self.__cbAttributeChanged(key, self[key], value);
-            }
-            if (key !== "style") {
-                self[key] = value;
-            }
-            if (self.__initialized) {
-                self.update();
-            }
-        }
-    },
-    connectedCallback: function () {
-        var self = this;
-        if (self.__cbConnected) {
-            self.__cbConnected();
-        }
-        var listeners = Metadata.get(self.constructor, "eventListeners", []);
-        setTimeout(function () {
-            var e_8, _a, e_9, _b;
-            if (!self.__initialized) {
-                self.__gatherChildren();
-                try {
-                    for (var listeners_1 = __values$1(listeners), listeners_1_1 = listeners_1.next(); !listeners_1_1.done; listeners_1_1 = listeners_1.next()) {
-                        var _c = __read$1(listeners_1_1.value, 2), key = _c[1];
-                        self[key] = self[key].bind(self);
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} multiple/>
+                                </div>
+                            </div>
+                        )
                     }
-                }
-                catch (e_8_1) { e_8 = { error: e_8_1 }; }
-                finally {
-                    try {
-                        if (listeners_1_1 && !listeners_1_1.done && (_a = listeners_1.return)) _a.call(listeners_1);
+                `}}},restrictions:{label:"Restrictions",description:l.code`
+            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>
+        `,examples:{size:{description:"<p>Maximum size</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
+
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload ref={ref} maxSize="100KB"/>
+                                </div>
+                            </div>
+                        )
                     }
-                    finally { if (e_8) throw e_8.error; }
-                }
-                self.__initialized = true;
-            }
-            try {
-                for (var listeners_2 = __values$1(listeners), listeners_2_1 = listeners_2.next(); !listeners_2_1.done; listeners_2_1 = listeners_2.next()) {
-                    var _d = __read$1(listeners_2_1.value, 2), eventName = _d[0], key = _d[1];
-                    self.addEventListener(eventName, self[key]);
-                }
-            }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
-            finally {
-                try {
-                    if (listeners_2_1 && !listeners_2_1.done && (_b = listeners_2.return)) _b.call(listeners_2);
-                }
-                finally { if (e_9) throw e_9.error; }
-            }
-            self.__doRender();
-            setTimeout(function () {
-                self.__updateChildQueries();
-                self.__updateHostBindings();
-            }, 0);
-        }, 0);
-    },
-    disconnectedCallback: function () {
-        var e_10, _a;
-        var self = this;
-        if (self.__cbDisconnected) {
-            self.__cbDisconnected();
-        }
-        try {
-            for (var _b = __values$1(Metadata.get(self.constructor, "eventListeners", [])), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read$1(_c.value, 2), eventName = _d[0], key = _d[1];
-                self.removeEventListener(eventName, self[key]);
-            }
-        }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_10) throw e_10.error; }
-        }
-        self.__stopMutObs();
-    },
-};
-/**
- * Marks a class as a component, setting the tag it will be registered under
- * when the class is passed to `register()`.
- */
-function Component(config) {
-    return function (target) {
-        Metadata.add(target, config);
-        Object.assign(target.prototype, {
-            __cbAttributeChanged: target.prototype.attributeChangedCallback,
-            __cbConnected: target.prototype.connectedCallback,
-            __cbDisconnected: target.prototype.disconnectedCallback,
-        }, ext);
-    };
-}
+                `},type:{description:"<p>File type whitelist</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
 
-/**
- * A property on a component class, when decorated with `@Content()`, will
- * be set to the content that has been placed inside the component. It can
- * then be placed wherever you want in the component's JSX. Analogous to
- * the `children` prop in react or `<ng-content>` in Angular.
- */
-function Content() {
-    return function (target, key) {
-        Metadata.add(target.constructor, { contentProp: key });
-    };
-}
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
 
-/** Defines a component class property as a dispatcher for a custom event. */
-function EventDispatcher(eventName) {
-    return function (target, key) {
-        Object.defineProperty(target, key, {
-            get: function () {
-                var _this = this;
-                Object.defineProperty(this, key, {
-                    value: {
-                        dispatch: function (detail) {
-                            var event = new CustomEvent(eventName || key, { detail: detail });
-                            _this.dispatchEvent(event);
-                            return event;
-                        },
-                    },
-                });
-                return this[key];
-            },
-            configurable: true,
-        });
-    };
-}
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                    />
+                                </div>
+                            </div>
+                        )
+                    }
+                `},both:{description:"<p>Both restrictions</p>",react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
 
-/**
- * Marks a method as a handler for a given event on the host element. For example, to respond
- * to clicks on a component, you would use a method decorated with `@EventListener("click")`.
- */
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-function EventListener(eventName) {
-    return function (target, key) {
-        var eventListeners = Metadata.get(target.constructor, "eventListeners", []);
-        eventListeners.push([eventName, key]);
-        Metadata.add(target.constructor, { eventListeners: eventListeners });
-    };
-}
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
 
-/**
- * Marks a component class property as a prop, meaning that a value can be passed
- * in for it via an attribute on the element, and whenever that value changes, the
- * component will be re-rendered.
- */
-function Prop(castToType) {
-    return function (target, key) {
-        var c = target.constructor;
-        var keyLowercase = key.toLowerCase();
-        c.observedAttributes = c.observedAttributes || ["classname",
-            "className",
-            "style"];
-        c.observedAttributes.push(key);
-        c.observedAttributes.push(keyLowercase);
-        if (keyLowercase !== key) {
-            Object.defineProperty(target, key, {
-                get: function () {
-                    return this[keyLowercase];
-                },
-                set: function (newValue) {
-                    this[keyLowercase] = newValue;
-                },
-            });
-        }
-        if (castToType) {
-            var privateKey_1 = Symbol.for(key);
-            Object.defineProperty(target, keyLowercase, {
-                get: function () {
-                    return this[privateKey_1];
-                },
-                set: function (newValue) {
-                    var castValue = newValue;
-                    if (castToType === Boolean
-                        && typeof newValue === "string"
-                        && newValue.toLowerCase() === "false") {
-                        castValue = false;
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheets"
+                                        multiple
+                                        acceptExtensions="XLS, xlsx, .csv"
+                                        maxSize="25MB"
+                                    />
+                                </div>
+                            </div>
+                        )
                     }
-                    else {
-                        castValue = castToType(newValue);
-                    }
-                    this[privateKey_1] = castValue;
-                },
-            });
-        }
-    };
-}
+                `}}},dismissable:{label:"Dismissable",description:l.code`
+            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can
+            show it again programmatically if you need to.</p>
+        `,examples:{dismissable:{react:l.code`
+                    function Component() {
+                        const [showFileUpload, setShowFileUpload] = React.useState(true)
+                        const ref = React.useRef()
+
+                        function handleDismissal() {
+                            setShowFileUpload(false)
+                        }
 
-function querySelectorDecorator(selector, options, all) {
-    return function (target, key) {
-        var childQueries = Metadata.get(target.constructor, "childQueries", []);
-        childQueries.push({
-            key: key,
-            selector: selector,
-            all: all,
-            refresh: options.refresh,
-        });
-        Metadata.add(target.constructor, { childQueries: childQueries });
-    };
-}
-/**
- * Defines a component class property as containing the
- * results of a `querySelector(selector)` call on
- * the component host element.
- */
-function QuerySelector(selector, options) {
-    if (options === void 0) { options = {}; }
-    return querySelectorDecorator(selector, options);
-}
-/**
- * Defines a component class property as containing the
- * results of a `querySelectorAll(selector)` call on
- * the component host element.
- */
-function QuerySelectorAll(selector, options) {
-    if (options === void 0) { options = {}; }
-    return querySelectorDecorator(selector, options, true);
-}
+                        React.useEffect(() => {
+                            ref.current.addEventListener("dismissal", handleDismissal)
+                            return () => {
+                                ref.current.removeEventListener("dismissal", handleDismissal)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        dismissable
+                                        shown={showFileUpload}
+                                    />
+                                    {!showFileUpload && (
+                                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                                        Reset
+                                    </SpsButton>
+                                    )}
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},downloadButton:{label:"Download Button",description:l.code`
+            <p>You can optionally provide a button to download a file. Typically this will be a template for
+            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>
+        `,examples:{downloadButton:{react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleDownload() {
+                            console.log("Download triggered.")
+                        }
 
-/** A "watched" property will trigger an update whenever it's written to. */
-function Watch() {
-    return function (target, key) {
-        var _a;
-        var privateKey = Symbol(key);
-        Object.defineProperties(target, (_a = {},
-            _a[privateKey] = {
-                writable: true,
-                enumerable: false,
-                configurable: false,
-                value: target[key],
-            },
-            _a[key] = {
-                get: function () {
-                    return this[privateKey];
-                },
-                set: function (newValue) {
-                    if (this[privateKey] !== newValue) {
-                        this[privateKey] = newValue;
-                        this.update();
+                        React.useEffect(() => {
+                            ref.current.addEventListener("download", handleDownload)
+                            return () => {
+                                ref.current.removeEventListener("download", handleDownload)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-12">
+                                    <sps-file-upload
+                                        ref={ref}
+                                        description="Spreadsheet"
+                                        acceptExtensions="xlsx"
+                                        downloadLabel="Download Excel Template"
+                                    />
+                                </div>
+                            </div>
+                        )
                     }
-                },
-            },
-            _a));
-    };
-}
+                `}}},mini:{label:"Mini File Upload",description:l.code`
+            <p>When the file upload component is to be placed in a small container,
+            it should be marked as a mini file upload so that everything fits.</p>
+        `,examples:{single:{react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event) {
+                            console.log(event.detail)
+                        }
 
-exports.MIMEType = void 0;
-(function (MIMEType) {
-    MIMEType["7Z"] = "application/x-7z-compressed";
-    MIMEType["AAC"] = "audio/aac";
-    MIMEType["ABW"] = "application/x-abiword";
-    MIMEType["ARC"] = "application/octet-stream";
-    MIMEType["AVI"] = "video/x-msvideo";
-    MIMEType["AZW"] = "application/vnd.amazon.ebook";
-    MIMEType["BIN"] = "application/octet-stream";
-    MIMEType["BMP"] = "image/bmp";
-    MIMEType["BZ"] = "application/x-bzip";
-    MIMEType["BZ2"] = "application/x-bzip2";
-    MIMEType["CSH"] = "application/x-csh";
-    MIMEType["CSS"] = "text/css";
-    MIMEType["CSV"] = "text/csv,application/vnd.ms-excel";
-    MIMEType["DOC"] = "application/msword";
-    MIMEType["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
-    MIMEType["EOT"] = "application/vnd.ms-fontobject";
-    MIMEType["EPUB"] = "application/epub+zip";
-    MIMEType["ES"] = "application/ecmascript";
-    MIMEType["FLV"] = "video/x-flv";
-    MIMEType["GIF"] = "image/gif";
-    MIMEType["GZ"] = "application/x-gzip";
-    MIMEType["HTM"] = "text/html";
-    MIMEType["HTML"] = "text/html";
-    MIMEType["ICO"] = "image/x-icon";
-    MIMEType["ICS"] = "text/calendar";
-    MIMEType["JAR"] = "application/java-archive";
-    MIMEType["JPEG"] = "image/jpeg";
-    MIMEType["JPG"] = "image/jpeg";
-    MIMEType["JS"] = "application/javascript";
-    MIMEType["JSON"] = "application/json";
-    MIMEType["M3U"] = "audio/x-mpequrl";
-    MIMEType["MID"] = "audio/midi";
-    MIMEType["MIDI"] = "audio/midi";
-    MIMEType["MOV"] = "video/quicktime";
-    MIMEType["MP3"] = "audio/mpeg3";
-    MIMEType["MP4"] = "video/mp4";
-    MIMEType["MPEG"] = "video/mpeg";
-    MIMEType["MPKG"] = "application/vnd.apple.installer+xml";
-    MIMEType["ODP"] = "application/vnd.oasis.opendocument.presentation";
-    MIMEType["ODS"] = "application/vnd.oasis.opendocument.spreadsheet";
-    MIMEType["ODT"] = "application/vnd.oasis.opendocument.text";
-    MIMEType["OGA"] = "audio/ogg";
-    MIMEType["OGV"] = "video/ogg";
-    MIMEType["OGX"] = "application/ogg";
-    MIMEType["OTF"] = "font/otf";
-    MIMEType["PNG"] = "image/png";
-    MIMEType["PDF"] = "application/pdf";
-    MIMEType["PPT"] = "application/vnd.ms-powerpoint";
-    MIMEType["PPTX"] = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
-    MIMEType["RAR"] = "application/x-rar-compressed";
-    MIMEType["RTF"] = "application/rtf";
-    MIMEType["SH"] = "application/x-sh";
-    MIMEType["SVG"] = "image/svg+xml";
-    MIMEType["SWF"] = "application/x-shockwave-flash";
-    MIMEType["TAR"] = "application/x-tar";
-    MIMEType["TIF"] = "image/tiff";
-    MIMEType["TIFF"] = "image/tiff";
-    MIMEType["TS"] = "application/typescript";
-    MIMEType["TTF"] = "font/ttf";
-    MIMEType["TXT"] = "text/plain";
-    MIMEType["VSD"] = "application/vnd.visio";
-    MIMEType["WAV"] = "audio/wav";
-    MIMEType["WEBA"] = "audio/webm";
-    MIMEType["WEBM"] = "video/webm";
-    MIMEType["WEBP"] = "image/webp";
-    MIMEType["WOFF"] = "font/woff";
-    MIMEType["WOFF2"] = "font/woff2";
-    MIMEType["XHTML"] = "application/xhtml+xml";
-    MIMEType["XLS"] = "application/vnd.ms-excel";
-    MIMEType["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-    MIMEType["XML"] = "application/xml";
-    MIMEType["XUL"] = "application/vnd.mozilla.xul+xml";
-    MIMEType["ZIP"] = "application/zip";
-})(exports.MIMEType || (exports.MIMEType = {}));
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-4">
+                                    <sps-file-upload ref={ref} mini/>
+                                </div>
+                            </div>
+                        )
+                    }
+                `}}},constrainContentWidth:{label:"Constrain Content Width",description:l.code`
+            <p>If this prop is provided, the content will be restricted to 50% of
+            the overall width of the component. Consult your product designer if
+            you're not sure whether to use this variant.</p>
+        `,examples:{constrainContentWidth:{react:l.code`
+                    function Component() {
+                        const ref = React.useRef()
+
+                        function handleChange(event: CustomEvent<Array<File>>) {
+                            console.log(event.detail)
+                        }
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$5 = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __values = (undefined && undefined.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var CPT_NAME$3 = "sps-file-upload";
-var SpsFileUploadComponent = /** @class */ (function (_super) {
-    __extends$5(SpsFileUploadComponent, _super);
-    function SpsFileUploadComponent() {
-        var _this = _super.call(this) || this;
-        /** Controls whether the component is visible. */
-        _this.shown = true;
-        /**
-         * The list of selected files. If the `multiple` prop has not been provided,
-         * it is still an array; it will simply be an array of one when the user selects
-         * a file.
-         */
-        _this.files = [];
-        _this.acceptMIMETypes = new Set();
-        _this.active = false;
-        _this.error = false;
-        _this.namesOfUnsupportedFiles = [];
-        _this.handleBrowseLinkClick = _this.handleBrowseLinkClick.bind(_this);
-        _this.handleDownloadButtonClick = _this.handleDownloadButtonClick.bind(_this);
-        _this.handleFileInputChange = _this.handleFileInputChange.bind(_this);
-        _this.dismiss = _this.dismiss.bind(_this);
-        return _this;
-    }
-    Object.defineProperty(SpsFileUploadComponent.prototype, ClassBindings, {
-        get: function () {
-            return [
-                CPT_NAME$3,
-                this.active && CPT_NAME$3 + "--active",
-                this.error && CPT_NAME$3 + "--error",
-                !this.shown && CPT_NAME$3 + "--hidden",
-                this.mini && CPT_NAME$3 + "--mini",
-                this.constrainContentWidth && CPT_NAME$3 + "--constrained-content-width",
-            ];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SpsFileUploadComponent.prototype.connectedCallback = function () {
-        this.description = this.description || (this.multiple ? "Files" : "File");
-        if (this.acceptExtensions) {
-            this.processAcceptExtensions(this.acceptExtensions);
-        }
-        if (this.maxSize) {
-            this.parseAndValidateMaxSize(this.maxSize);
-        }
-    };
-    SpsFileUploadComponent.prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
-        if (attrName === "acceptExtensions") {
-            this.processAcceptExtensions(newValue);
-        }
-        if (attrName === "maxSize") {
-            this.parseAndValidateMaxSize(newValue);
-        }
-    };
-    /**
-     * If the `dismissable` prop has been set, this will programmatically
-     * dismiss the component and fire the "dismissal" event.
-     */
-    SpsFileUploadComponent.prototype.dismiss = function () {
-        if (this.dismissable) {
-            this.shown = false;
-            this.update();
-            this.dismissal.dispatch();
-        }
-    };
-    /** If the `dismissable` prop has been set, this will programmatically show the component. */
-    SpsFileUploadComponent.prototype.show = function () {
-        if (this.dismissable) {
-            this.shown = true;
-            this.update();
-        }
-    };
-    SpsFileUploadComponent.prototype.render = function (_a) {
-        var _this = this;
-        var t = _a.t;
-        var icon = this.error ? dsShared.SpsIcon.EXCLAMATION_CIRCLE : dsShared.SpsIcon.UPLOAD_CLOUD;
-        var instructions = (this.multiple
-            ? t("design-system:fileUpload.instructions_plural")
-            : t("design-system:fileUpload.instructions")).split("|");
-        return (h("div", { "data-fragment": true },
-            h("div", { className: CPT_NAME$3 + "__content" }, this.processing
-                ? (h("div", { "data-fragment": true },
-                    h("i", { className: "sps-spinner sps-spinner--medium", "aria-hidden": "true" }),
-                    h("div", { className: CPT_NAME$3 + "__instructions" }, t("design-system:fileUpload.processing"))))
-                : (h("div", { "data-fragment": true },
-                    h("i", { className: "sps-icon sps-icon-" + icon + " " + CPT_NAME$3 + "__icon-primary", "aria-hidden": "true" }),
-                    h("div", { className: CPT_NAME$3 + "__title" }, this.error
-                        ? (h("div", { "data-fragment": true }, t(this.namesOfUnsupportedFiles.length > 1
-                            ? "design-system:fileUpload.cancelled_plural"
-                            : "design-system:fileUpload.cancelled")))
-                        : h("div", { "data-fragment": true }, t("design-system:fileUpload.title", { description: this.description }))),
-                    this.error
-                        ? (h("div", { className: CPT_NAME$3 + "__errored-files" }, new Set(this.namesOfUnsupportedFiles.map(function (name, i) {
-                            var breakpoint = Math.floor(name.length / 2);
-                            return (h("div", { className: CPT_NAME$3 + "__errored-filename", key: name },
-                                h("span", { className: CPT_NAME$3 + "__errored-filename-segment" }, name.substr(0, breakpoint)),
-                                h("div", { className: CPT_NAME$3 + "__errored-filename-segment" },
-                                    h("span", null, name.substr(breakpoint))),
-                                i < _this.namesOfUnsupportedFiles.length - 1 ? "," : ""));
-                        }))))
-                        : h("span", null),
-                    h("div", { className: CPT_NAME$3 + "__instructions" },
-                        h("div", { "data-fragment": true },
-                            h("span", null, instructions[0]),
-                            h("a", { href: "", onClick: this.handleBrowseLinkClick }, instructions[1]),
-                            h("span", null, instructions[2]))),
-                    h("div", { className: CPT_NAME$3 + "__requirements" },
-                        this.acceptExtensions
-                            ? (h("span", null,
-                                "(",
-                                " ",
-                                t("design-system:fileUpload.acceptedTypes", { fileTypes: this.acceptExtensionsDescription }),
-                                " ",
-                                ")"))
-                            : "",
-                        this.maxSize
-                            ? (h("span", null,
-                                "(",
-                                " ",
-                                t("design-system:fileUpload.maximumSize", { size: this.maxSize }),
-                                " ",
-                                ")"))
-                            : "",
-                        this.customRequirement
-                            ? (h("span", null,
-                                " ",
-                                this.customRequirement,
-                                " "))
-                            : ""),
-                    this.downloadLabel
-                        && (h("div", { className: "sps-button sps-button--link " + CPT_NAME$3 + "__download-button", onClick: this.handleDownloadButtonClick },
-                            h("button", { type: "button" },
-                                h("i", { className: "sps-icon sps-icon-download-cloud", "aria-hidden": "true" }),
-                                " ",
-                                this.downloadLabel)))))),
-            this.dismissable && !this.processing
-                && (h("div", { className: "sps-button sps-button--icon " + CPT_NAME$3 + "__close-button", onClick: this.dismiss },
-                    h("button", { type: "button", title: t("design-system:fileUpload.close") },
-                        h("i", { className: "sps-icon sps-icon-x", "aria-hidden": "true" })))),
-            h("form", null,
-                h("input", { type: "file", accept: this.accept || "*/*", multiple: this.multiple || null, onChange: this.handleFileInputChange }))));
-    };
-    SpsFileUploadComponent.prototype.parseAndValidateMaxSize = function (maxSize) {
-        try {
-            this.maxSizeBytes = utils.parseFileSize(maxSize);
-        }
-        catch (error) {
-            throw new Error("Could not parse \"" + maxSize + "\" as a file size.");
-        }
-    };
-    SpsFileUploadComponent.prototype.processAcceptExtensions = function (acceptExtensions) {
-        var e_1, _a, e_2, _b;
-        var splitExtensions = Array.isArray(acceptExtensions)
-            ? acceptExtensions
-            : acceptExtensions.trim().split(/\s?,\s?/);
-        var trimmedExtensions = splitExtensions.map(function (ext) { return ext.replace(/^\./, ""); });
-        var extList = trimmedExtensions.map(function (ext) { return ("." + ext).toLowerCase(); });
-        this.acceptExtensionsDescription = extList
-            .map(function (ext, i) { return (i > 0 && i === extList.length - 1 ? "or " + ext : ext); })
-            .join(extList.length > 2 ? ", " : " ");
-        this.acceptMIMETypes.clear();
-        try {
-            for (var trimmedExtensions_1 = __values(trimmedExtensions), trimmedExtensions_1_1 = trimmedExtensions_1.next(); !trimmedExtensions_1_1.done; trimmedExtensions_1_1 = trimmedExtensions_1.next()) {
-                var ext = trimmedExtensions_1_1.value;
-                try {
-                    for (var _c = (e_2 = void 0, __values(exports.MIMEType[ext.toUpperCase()].split(","))), _d = _c.next(); !_d.done; _d = _c.next()) {
-                        var type = _d.value;
-                        this.acceptMIMETypes.add(type);
+                        React.useEffect(() => {
+                            ref.current.addEventListener("selection", handleChange)
+                            return () => {
+                                ref.current.removeEventListener("selection", handleChange)
+                            }
+                        })
+
+                        return (
+                            <div className="sps-row">
+                                <div className="col-4">
+                                    <sps-file-upload ref={ref} constrainContentWidth/>
+                                </div>
+                            </div>
+                        )
                     }
-                }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                `}}}};var Et=Object.defineProperty,Bt=Object.getOwnPropertyDescriptor,F=(e,t,s,n)=>{for(var i=n>1?void 0:n?Bt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Et(t,s,i),i};exports.SpsNavTabComponent=class extends HTMLElement{constructor(){super(...arguments);this.active=!1,this.label="",this.tag=""}get[D](){return["sps-tabbed-nav__nav-item",this.active&&"sps-tabbed-nav__nav-item--active"]}render(){return r("a",{href:this.href,target:this.target,className:"sps-tabbed-nav__nav-item-link",tabIndex:0},this.icon&&r("i",{className:`sps-icon sps-icon-${this.icon}`}),this.label&&r("span",null,this.label),this.tag&&r("span",{className:"sps-tag sps-tag--default"},this.tag))}};exports.SpsNavTabComponent.displayName="sps-nav-tab";exports.SpsNavTabComponent.props={active:"boolean",label:"string",icon:"SpsIcon",tag:"string",href:"string",target:"string"};F([p()],exports.SpsNavTabComponent.prototype,"active",2);F([p()],exports.SpsNavTabComponent.prototype,"label",2);F([p()],exports.SpsNavTabComponent.prototype,"icon",2);F([p()],exports.SpsNavTabComponent.prototype,"tag",2);F([p()],exports.SpsNavTabComponent.prototype,"href",2);F([p()],exports.SpsNavTabComponent.prototype,"target",2);exports.SpsNavTabComponent=F([O({tag:"sps-nav-tab"})],exports.SpsNavTabComponent);var Rt=Object.defineProperty,$t=Object.getOwnPropertyDescriptor,Be=(e,t,s,n)=>{for(var i=n>1?void 0:n?$t(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Rt(t,s,i),i};exports.SpsNavTabSetComponent=class extends HTMLElement{constructor(){super(...arguments);this.content=[]}render(){return r("nav",{className:"sps-tabbed-nav"},this.content)}};exports.SpsNavTabSetComponent.displayName="sps-nav-tab-set";exports.SpsNavTabSetComponent.props={};Be([X()],exports.SpsNavTabSetComponent.prototype,"content",2);exports.SpsNavTabSetComponent=Be([O({tag:"sps-nav-tab-set"})],exports.SpsNavTabSetComponent);const Re={basic:{label:"Basic Navigation Tabs",description:l.code`
+          <p>Navigation tabs native web component</p>
+        `,examples:{basic:{react:l.code`
+                    function DemoComponent() {
+                        const tabs = [
+                            { label: "Tab A", icon: "chart-line" },
+                            { label: "Tab B", icon: "chart-bar", tag: "12" },
+                            { label: "Tab C", icon: "chart-pie" }
+                        ]
+
+                        const [activeTab, setActiveTab] = React.useState(0)
+
+                        return (
+                        <sps-nav-tab-set>
+                            {tabs.map((tab, index) => (
+                                <sps-nav-tab
+                                    key={index}
+                                    icon={tab.icon}
+                                    label={tab.label}
+                                    tag={tab.tag}
+                                    active={index === activeTab || null}
+                                    onClick={() => setActiveTab(index)}
+                                />
+                            ))}
+                        </sps-nav-tab-set>
+                        )
                     }
-                    finally { if (e_2) throw e_2.error; }
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (trimmedExtensions_1_1 && !trimmedExtensions_1_1.done && (_a = trimmedExtensions_1.return)) _a.call(trimmedExtensions_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        this.accept = extList.concat(Array.from(this.acceptMIMETypes)).join(",");
-    };
-    SpsFileUploadComponent.prototype.selectFiles = function (files) {
-        var e_3, _a;
-        this.namesOfUnsupportedFiles = [];
-        var fileArray = Array.from(files);
-        try {
-            for (var fileArray_1 = __values(fileArray), fileArray_1_1 = fileArray_1.next(); !fileArray_1_1.done; fileArray_1_1 = fileArray_1.next()) {
-                var file = fileArray_1_1.value;
-                if (this.acceptExtensions && !this.acceptMIMETypes.has(file.type)) {
-                    this.namesOfUnsupportedFiles.push(file.name);
-                }
-                if (this.maxSize && file.size > this.maxSizeBytes) {
-                    this.namesOfUnsupportedFiles.push(file.name);
-                }
-            }
-        }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
-        finally {
-            try {
-                if (fileArray_1_1 && !fileArray_1_1.done && (_a = fileArray_1.return)) _a.call(fileArray_1);
-            }
-            finally { if (e_3) throw e_3.error; }
-        }
-        if (this.namesOfUnsupportedFiles.length) {
-            this.error = true;
-            this.fileInput.value = null;
-            this.update();
-        }
-        else {
-            this.files = fileArray;
-            this.selection.dispatch(fileArray);
-        }
-    };
-    /* eslint-disable class-methods-use-this, @typescript-eslint/member-ordering */
-    SpsFileUploadComponent.prototype.handleDragOver = function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-    };
-    /* eslint-enable class-methods-use-this */
-    SpsFileUploadComponent.prototype.handleDragEnter = function (event) {
-        event.preventDefault();
-        this.active = true;
-        this.error = false;
-        this.update();
-    };
-    SpsFileUploadComponent.prototype.handleDragLeave = function (event) {
-        event.preventDefault();
-        this.active = false;
-        this.update();
-    };
-    SpsFileUploadComponent.prototype.handleDrop = function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.active = false;
-        if (event.dataTransfer.items) {
-            this.selectFiles(Array.from(event.dataTransfer.items).map(function (item) { return item.getAsFile(); }));
-        }
-        else {
-            this.selectFiles(event.dataTransfer.files);
-        }
-        this.update();
-    };
-    /* eslint-enable @typescript-eslint/member-ordering */
-    SpsFileUploadComponent.prototype.handleBrowseLinkClick = function (event) {
-        event.preventDefault();
-        this.error = false;
-        this.update();
-        this.fileInput.click();
-    };
-    SpsFileUploadComponent.prototype.handleDownloadButtonClick = function () {
-        this.download.dispatch();
-    };
-    SpsFileUploadComponent.prototype.handleFileInputChange = function (event) {
-        event.stopPropagation();
-        this.selectFiles(event.target.files);
-    };
-    SpsFileUploadComponent.displayName = CPT_NAME$3;
-    SpsFileUploadComponent.props = {
-        description: "string",
-        multiple: "boolean",
-        dismissable: "boolean",
-        processing: "boolean",
-        mini: "boolean",
-        downloadLabel: "string",
-        acceptExtensions: "Array<string> | string",
-        maxSize: "string",
-        customRequirement: "string",
-        selection: { event: true, type: "CustomEvent<Array<File>>" },
-        dismissal: { event: true, type: "CustomEvent<void>" },
-        download: { event: true, type: "CustomEvent<void>" },
-    };
-    __decorate$5([
-        Prop(),
-        __metadata$5("design:type", Object)
-    ], SpsFileUploadComponent.prototype, "description", void 0);
-    __decorate$5([
-        Prop(Boolean),
-        __metadata$5("design:type", Boolean)
-    ], SpsFileUploadComponent.prototype, "multiple", void 0);
-    __decorate$5([
-        Prop(Boolean),
-        __metadata$5("design:type", Object)
-    ], SpsFileUploadComponent.prototype, "shown", void 0);
-    __decorate$5([
-        Prop(Boolean),
-        __metadata$5("design:type", Boolean)
-    ], SpsFileUploadComponent.prototype, "dismissable", void 0);
-    __decorate$5([
-        Prop(Boolean),
-        __metadata$5("design:type", Boolean)
-    ], SpsFileUploadComponent.prototype, "processing", void 0);
-    __decorate$5([
-        Prop(Boolean),
-        __metadata$5("design:type", Boolean)
-    ], SpsFileUploadComponent.prototype, "mini", void 0);
-    __decorate$5([
-        Prop(Boolean),
-        __metadata$5("design:type", Boolean)
-    ], SpsFileUploadComponent.prototype, "constrainContentWidth", void 0);
-    __decorate$5([
-        Prop(),
-        __metadata$5("design:type", String)
-    ], SpsFileUploadComponent.prototype, "downloadLabel", void 0);
-    __decorate$5([
-        Prop(),
-        __metadata$5("design:type", Object)
-    ], SpsFileUploadComponent.prototype, "acceptExtensions", void 0);
-    __decorate$5([
-        Prop(),
-        __metadata$5("design:type", String)
-    ], SpsFileUploadComponent.prototype, "maxSize", void 0);
-    __decorate$5([
-        Prop(),
-        __metadata$5("design:type", String)
-    ], SpsFileUploadComponent.prototype, "customRequirement", void 0);
-    __decorate$5([
-        EventDispatcher(),
-        __metadata$5("design:type", Object)
-    ], SpsFileUploadComponent.prototype, "selection", void 0);
-    __decorate$5([
-        EventDispatcher(),
-        __metadata$5("design:type", Object)
-    ], SpsFileUploadComponent.prototype, "dismissal", void 0);
-    __decorate$5([
-        EventDispatcher(),
-        __metadata$5("design:type", Object)
-    ], SpsFileUploadComponent.prototype, "download", void 0);
-    __decorate$5([
-        QuerySelector("input[type='file']"),
-        __metadata$5("design:type", HTMLInputElement)
-    ], SpsFileUploadComponent.prototype, "fileInput", void 0);
-    __decorate$5([
-        EventListener("dragover"),
-        __metadata$5("design:type", Function),
-        __metadata$5("design:paramtypes", [Event]),
-        __metadata$5("design:returntype", void 0)
-    ], SpsFileUploadComponent.prototype, "handleDragOver", null);
-    __decorate$5([
-        EventListener("dragenter"),
-        __metadata$5("design:type", Function),
-        __metadata$5("design:paramtypes", [Event]),
-        __metadata$5("design:returntype", void 0)
-    ], SpsFileUploadComponent.prototype, "handleDragEnter", null);
-    __decorate$5([
-        EventListener("dragleave"),
-        __metadata$5("design:type", Function),
-        __metadata$5("design:paramtypes", [Event]),
-        __metadata$5("design:returntype", void 0)
-    ], SpsFileUploadComponent.prototype, "handleDragLeave", null);
-    __decorate$5([
-        EventListener("drop"),
-        __metadata$5("design:type", Function),
-        __metadata$5("design:paramtypes", [Object]),
-        __metadata$5("design:returntype", void 0)
-    ], SpsFileUploadComponent.prototype, "handleDrop", null);
-    SpsFileUploadComponent = __decorate$5([
-        Component({ tag: CPT_NAME$3 }),
-        __metadata$5("design:paramtypes", [])
-    ], SpsFileUploadComponent);
-    return SpsFileUploadComponent;
-}(HTMLElement));
-
-var __makeTemplateObject$3 = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var SpsFileUploadExamples = {
-    basic: {
-        label: "Basic File Upload",
-        description: utils.code(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject$3(["\n            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>\n        "], ["\n            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>\n        "]))),
-        examples: {
-            single: {
-                description: "<p>Single file upload</p>",
-                react: utils.code(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref}/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref}/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-            multiple: {
-                description: "<p>Multiple file upload</p>",
-                react: utils.code(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} multiple/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} multiple/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-    restrictions: {
-        label: "Restrictions",
-        description: utils.code(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$3(["\n            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>\n        "], ["\n            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>\n        "]))),
-        examples: {
-            size: {
-                description: "<p>Maximum size</p>",
-                react: utils.code(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} maxSize=\"100KB\"/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} maxSize=\"100KB\"/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-            type: {
-                description: "<p>File type whitelist</p>",
-                react: utils.code(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-            both: {
-                description: "<p>Both restrictions</p>",
-                react: utils.code(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                        maxSize=\"25MB\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                        maxSize=\"25MB\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-    dismissable: {
-        label: "Dismissable",
-        description: utils.code(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject$3(["\n            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can\n            show it again programmatically if you need to.</p>\n        "], ["\n            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can\n            show it again programmatically if you need to.</p>\n        "]))),
-        examples: {
-            dismissable: {
-                react: utils.code(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject$3(["\n                    function Component() {\n                        const [showFileUpload, setShowFileUpload] = React.useState(true)\n                        const ref = React.useRef()\n\n                        function handleDismissal() {\n                            setShowFileUpload(false)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"dismissal\", handleDismissal)\n                            return () => {\n                                ref.current.removeEventListener(\"dismissal\", handleDismissal)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        dismissable\n                                        shown={showFileUpload}\n                                    />\n                                    {!showFileUpload && (\n                                    <SpsButton onClick={() => setShowFileUpload(true)}>\n                                        Reset\n                                    </SpsButton>\n                                    )}\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [showFileUpload, setShowFileUpload] = React.useState(true)\n                        const ref = React.useRef()\n\n                        function handleDismissal() {\n                            setShowFileUpload(false)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"dismissal\", handleDismissal)\n                            return () => {\n                                ref.current.removeEventListener(\"dismissal\", handleDismissal)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        dismissable\n                                        shown={showFileUpload}\n                                    />\n                                    {!showFileUpload && (\n                                    <SpsButton onClick={() => setShowFileUpload(true)}>\n                                        Reset\n                                    </SpsButton>\n                                    )}\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-    downloadButton: {
-        label: "Download Button",
-        description: utils.code(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject$3(["\n            <p>You can optionally provide a button to download a file. Typically this will be a template for\n            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>\n        "], ["\n            <p>You can optionally provide a button to download a file. Typically this will be a template for\n            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>\n        "]))),
-        examples: {
-            downloadButton: {
-                react: utils.code(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleDownload() {\n                            console.log(\"Download triggered.\")\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"download\", handleDownload)\n                            return () => {\n                                ref.current.removeEventListener(\"download\", handleDownload)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheet\"\n                                        acceptExtensions=\"xlsx\"\n                                        downloadLabel=\"Download Excel Template\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleDownload() {\n                            console.log(\"Download triggered.\")\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"download\", handleDownload)\n                            return () => {\n                                ref.current.removeEventListener(\"download\", handleDownload)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheet\"\n                                        acceptExtensions=\"xlsx\"\n                                        downloadLabel=\"Download Excel Template\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-    mini: {
-        label: "Mini File Upload",
-        description: utils.code(templateObject_12 || (templateObject_12 = __makeTemplateObject$3(["\n            <p>When the file upload component is to be placed in a small container,\n            it should be marked as a mini file upload so that everything fits.</p>\n        "], ["\n            <p>When the file upload component is to be placed in a small container,\n            it should be marked as a mini file upload so that everything fits.</p>\n        "]))),
-        examples: {
-            single: {
-                react: utils.code(templateObject_13 || (templateObject_13 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} mini/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} mini/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-    constrainContentWidth: {
-        label: "Constrain Content Width",
-        description: utils.code(templateObject_14 || (templateObject_14 = __makeTemplateObject$3(["\n            <p>If this prop is provided, the content will be restricted to 50% of\n            the overall width of the component. Consult your product designer if\n            you're not sure whether to use this variant.</p>\n        "], ["\n            <p>If this prop is provided, the content will be restricted to 50% of\n            the overall width of the component. Consult your product designer if\n            you're not sure whether to use this variant.</p>\n        "]))),
-        examples: {
-            constrainContentWidth: {
-                react: utils.code(templateObject_15 || (templateObject_15 = __makeTemplateObject$3(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event: CustomEvent<Array<File>>) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} constrainContentWidth/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event: CustomEvent<Array<File>>) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} constrainContentWidth/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-};
-var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
-
-var __extends$4 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var SpsNavTabComponent = /** @class */ (function (_super) {
-    __extends$4(SpsNavTabComponent, _super);
-    function SpsNavTabComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.active = false;
-        _this.label = "";
-        _this.tag = "";
-        return _this;
-    }
-    Object.defineProperty(SpsNavTabComponent.prototype, ClassBindings, {
-        get: function () {
-            return [
-                "sps-tabbed-nav__nav-item", this.active && "sps-tabbed-nav__nav-item--active",
-            ];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SpsNavTabComponent.prototype.render = function () {
-        return (h("a", { href: this.href, target: this.target, className: "sps-tabbed-nav__nav-item-link", tabIndex: 0 },
-            this.icon && h("i", { className: "sps-icon sps-icon-" + this.icon }),
-            this.label && h("span", null, this.label),
-            this.tag && h("span", { className: "sps-tag sps-tag--default" }, this.tag)));
-    };
-    SpsNavTabComponent.displayName = "sps-nav-tab";
-    SpsNavTabComponent.props = {
-        active: "boolean",
-        label: "string",
-        icon: "SpsIcon",
-        tag: "string",
-        href: "string",
-        target: "string",
-    };
-    __decorate$4([
-        Prop(),
-        __metadata$4("design:type", Object)
-    ], SpsNavTabComponent.prototype, "active", void 0);
-    __decorate$4([
-        Prop(),
-        __metadata$4("design:type", Object)
-    ], SpsNavTabComponent.prototype, "label", void 0);
-    __decorate$4([
-        Prop(),
-        __metadata$4("design:type", String)
-    ], SpsNavTabComponent.prototype, "icon", void 0);
-    __decorate$4([
-        Prop(),
-        __metadata$4("design:type", Object)
-    ], SpsNavTabComponent.prototype, "tag", void 0);
-    __decorate$4([
-        Prop(),
-        __metadata$4("design:type", String)
-    ], SpsNavTabComponent.prototype, "href", void 0);
-    __decorate$4([
-        Prop(),
-        __metadata$4("design:type", String)
-    ], SpsNavTabComponent.prototype, "target", void 0);
-    SpsNavTabComponent = __decorate$4([
-        Component({ tag: "sps-nav-tab" })
-    ], SpsNavTabComponent);
-    return SpsNavTabComponent;
-}(HTMLElement));
-
-var __extends$3 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-/** Contains a set of navigation tabs. */
-var SpsNavTabSetComponent = /** @class */ (function (_super) {
-    __extends$3(SpsNavTabSetComponent, _super);
-    function SpsNavTabSetComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.content = [];
-        return _this;
-    }
-    SpsNavTabSetComponent.prototype.render = function () {
-        return (h("nav", { className: "sps-tabbed-nav" }, this.content));
-    };
-    SpsNavTabSetComponent.displayName = "sps-nav-tab-set";
-    SpsNavTabSetComponent.props = {};
-    __decorate$3([
-        Content(),
-        __metadata$3("design:type", Object)
-    ], SpsNavTabSetComponent.prototype, "content", void 0);
-    SpsNavTabSetComponent = __decorate$3([
-        Component({ tag: "sps-nav-tab-set" })
-    ], SpsNavTabSetComponent);
-    return SpsNavTabSetComponent;
-}(HTMLElement));
-
-var __makeTemplateObject$2 = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var SpsNavTabsExamples = {
-    basic: {
-        label: "Basic Navigation Tabs",
-        description: utils.code(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$2(["\n          <p>Navigation tabs native web component</p>\n        "], ["\n          <p>Navigation tabs native web component</p>\n        "]))),
-        examples: {
-            basic: {
-                react: utils.code(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$2(["\n                    function DemoComponent() {\n                        const tabs = [\n                            { label: \"Tab A\", icon: \"chart-line\" },\n                            { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n                            { label: \"Tab C\", icon: \"chart-pie\" }\n                        ]\n\n                        const [activeTab, setActiveTab] = React.useState(0)\n\n                        return (\n                        <sps-nav-tab-set>\n                            {tabs.map((tab, index) => (\n                                <sps-nav-tab\n                                    key={index}\n                                    icon={tab.icon}\n                                    label={tab.label}\n                                    tag={tab.tag}\n                                    active={index === activeTab || null}\n                                    onClick={() => setActiveTab(index)}\n                                />\n                            ))}\n                        </sps-nav-tab-set>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const tabs = [\n                            { label: \"Tab A\", icon: \"chart-line\" },\n                            { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n                            { label: \"Tab C\", icon: \"chart-pie\" }\n                        ]\n\n                        const [activeTab, setActiveTab] = React.useState(0)\n\n                        return (\n                        <sps-nav-tab-set>\n                            {tabs.map((tab, index) => (\n                                <sps-nav-tab\n                                    key={index}\n                                    icon={tab.icon}\n                                    label={tab.label}\n                                    tag={tab.tag}\n                                    active={index === activeTab || null}\n                                    onClick={() => setActiveTab(index)}\n                                />\n                            ))}\n                        </sps-nav-tab-set>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-};
-var templateObject_1$2, templateObject_2$2;
-
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-exports.SpsPhotoDisplayMode = void 0;
-(function (SpsPhotoDisplayMode) {
-    SpsPhotoDisplayMode["FIT"] = "fit";
-    SpsPhotoDisplayMode["FILL"] = "fill";
-})(exports.SpsPhotoDisplayMode || (exports.SpsPhotoDisplayMode = {}));
-var CPT_NAME$2 = "sps-photo";
-var SpsPhotoComponent = /** @class */ (function (_super) {
-    __extends$2(SpsPhotoComponent, _super);
-    function SpsPhotoComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /** Display mode - fill or fit. */
-        _this.mode = exports.SpsPhotoDisplayMode.FILL;
-        return _this;
-    }
-    Object.defineProperty(SpsPhotoComponent.prototype, "image", {
-        /** The native HTML <img> element within the photo component. */
-        get: function () {
-            return this.imageInternal;
-        },
-        set: function (newValue) {
-            var _this = this;
-            this.imageInternal = newValue;
-            if (newValue) {
-                if (this.waitForImgHeightInterval) {
-                    window.clearInterval(this.waitForImgHeightInterval);
-                }
-                this.waitForImgHeightInterval = window.setInterval(function () {
-                    var imgRect = newValue.getBoundingClientRect();
-                    if (imgRect.height) {
-                        window.clearInterval(_this.waitForImgHeightInterval);
-                        delete _this.waitForImgHeightInterval;
-                        var imageIsLandscape = true;
-                        imageIsLandscape = imgRect.width / imgRect.height > 1;
-                        _this.fitWidth = imageIsLandscape === (_this.mode === exports.SpsPhotoDisplayMode.FIT);
+                `}}}};var jt=Object.defineProperty,zt=Object.getOwnPropertyDescriptor,y=(e,t,s,n)=>{for(var i=n>1?void 0:n?zt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&jt(t,s,i),i};exports.SpsPhotoDisplayMode=void 0;(function(e){e.FIT="fit",e.FILL="fill"})(exports.SpsPhotoDisplayMode||(exports.SpsPhotoDisplayMode={}));const k="sps-photo";exports.SpsPhotoComponent=class extends HTMLElement{constructor(){super(...arguments);this.mode=exports.SpsPhotoDisplayMode.FILL}get image(){return this.imageInternal}set image(e){this.imageInternal=e,e&&(this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval),this.waitForImgHeightInterval=window.setInterval(()=>{const t=e.getBoundingClientRect();if(t.height){window.clearInterval(this.waitForImgHeightInterval),delete this.waitForImgHeightInterval;let s=!0;s=t.width/t.height>1,this.fitWidth=s===(this.mode===exports.SpsPhotoDisplayMode.FIT)}},1e3/60))}get[D](){return[k,this.fitWidth?`${k}--fit-width`:`${k}--fit-height`,this.placeholderIcon&&`${k}--placeholder`]}get[G](){return{fontSize:`${this.width*.05}rem`,width:`${this.width}rem`,height:`${.75*this.width}rem`}}connectedCallback(){this.waitForWidthInterval=window.setInterval(()=>{const e=this.getBoundingClientRect();e.width&&(this.setWidth(e.width),window.clearInterval(this.waitForWidthInterval),delete this.waitForWidthInterval)},1e3/60)}disconnectedCallback(){this.waitForWidthInterval&&window.clearInterval(this.waitForWidthInterval),this.waitForImgHeightInterval&&window.clearInterval(this.waitForImgHeightInterval)}render(){return this.src?this.width?r("img",{src:this.src,alt:this.altText}):r("span",null):r("i",{className:`sps-icon sps-icon-${this.placeholderIcon}`})}setWidth(e){if(e&&!this.width){const t=document.body.parentElement.style.fontSize||"16px",s=Number(t.substr(0,t.length-2));this.width=e/s}}};exports.SpsPhotoComponent.displayName=k;exports.SpsPhotoComponent.props={src:"string",altText:"string",mode:"SpsPhotoDisplayMode",placeholderIcon:"SpsIcon"};y([p()],exports.SpsPhotoComponent.prototype,"src",2);y([p()],exports.SpsPhotoComponent.prototype,"altText",2);y([p()],exports.SpsPhotoComponent.prototype,"mode",2);y([p()],exports.SpsPhotoComponent.prototype,"placeholderIcon",2);y([oe()],exports.SpsPhotoComponent.prototype,"width",2);y([oe()],exports.SpsPhotoComponent.prototype,"fitWidth",2);y([Q("img",{refresh:!0})],exports.SpsPhotoComponent.prototype,"image",1);exports.SpsPhotoComponent=y([O({tag:k})],exports.SpsPhotoComponent);const $e={sizing:{label:"Sizing",description:l.code`
+        <p>
+            Photos are block elements, so a photo fills its container's width unless
+            an explicit width is set. It is always a 4:3 aspect ratio. In this example,
+            photos have been placed in cards which have different widths in the 12
+            column grid.
+        </p>
+    `,examples:{basic:{jsx:l.code`
+            <div className="sfg-row">
+                <div className="sfg-col-2">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+                <div className="sfg-col-6">
+                    <sps-card>
+                        <sps-photo src="assets/images/photo-landscape.jpg"></sps-photo>
+                    </sps-card>
+                </div>
+            </div>
+        `}}},displayMode:{label:"Fill vs. Fit",description:l.code`
+        <p>
+            There are two display modes available:
+            <ul>
+                <li><b>"fill"</b> fills the entire 4:3 container, cropping off any excess portions of the image.
+                <li><b>"fit"</b> fits the entire image into the container, leaving any excess portions of the container blank.
+            </ul>
+        </p>
+    `,examples:{landscape:{description:"<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",jsx:l.code`
+            <div className="sfg-row">
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-landscape.jpg" mode="fill"></sps-photo>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-landscape.jpg" mode="fit"></sps-photo>
+                </div>
+            </div>
+        `},portrait:{description:"<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",jsx:l.code`
+            <div className="sfg-row">
+                <div className="sfg-col-4">
+                    <sps-photo src="assets/images/photo-portrait.jpg" mode="fill"></sps-photo>
+                </div>
+                <div className="sfg-col-4">
+                    <sps-photo id="foo" src="assets/images/photo-portrait.jpg" mode="fit"></sps-photo>
+                </div>
+            </div>
+        `}}},placeholder:{label:"Placeholders",description:l.code`
+        <p>
+            When an image is not provided for a particular use case (such as a user avatar,
+            a company photo, item image, etc.), a placeholder should be shown in its place.
+
+            The placeholder's icon, selected from our SPS icon set, should represent the
+            type of image it is substituting for.
+        </p>
+    `,examples:{general:{description:"<p>General Photo</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="photo"></sps-photo>
+                    </div>
+                </div>
+            `},photoAlt:{description:"<p>Photo Alt</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="camera"></sps-photo>
+                    </div>
+                </div>
+            `},user:{description:"<p>User / Single Person</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="user"></sps-photo>
+                    </div>
+                </div>
+            `},group:{description:"<p>Group / Multiple People</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="group"></sps-photo>
+                    </div>
+                </div>
+            `},company:{description:"<p>Company / Building</p>",jsx:l.code`
+                <div className="sfg-row">
+                    <div className="sfg-col-3">
+                        <sps-photo placeholderIcon="building"></sps-photo>
+                    </div>
+                </div>
+            `}}}},Wt={"File Upload":{components:[exports.SpsFileUploadComponent],examples:Ee},"Tabbed Navigation":{components:[exports.SpsNavTabComponent,exports.SpsNavTabSetComponent],examples:Re},Photos:{components:[exports.SpsPhotoComponent],examples:$e}};var Ht=Object.defineProperty,qt=Object.getOwnPropertyDescriptor,N=(e,t,s,n)=>{for(var i=n>1?void 0:n?qt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Ht(t,s,i),i};const w="sps-insight-card";exports.SpsInsightCardComponent=class extends HTMLElement{constructor(){super(...arguments);this.kind=T.SpsInsightCardKind.GENERAL}get[D](){return[w,`${w}--${this.kind}`,this.detail&&this.detail.children.length?`${w}--has-detail`:null]}render({t:e}){const t=r("div",{className:`${w}__metric-count`},this.metric),s=r("div",{className:`${w}__description`},r("div",{className:`${w}__title`,style:{"-webkit-box-orient":"vertical"}},this.title),r("div",{className:`${w}__detail`},this.content)),[n,i,a]=(this.partnerCount?e("design-system:insightCard.partnerCount",{count:this.partnerCount,total:this.totalPartners}):"").split("|");return r("div",{"data-fragment":!0},r("div",{className:`${w}__body`},this.icon?r("i",{className:`sps-icon sps-icon-${this.icon}`}):r("i",{className:`sps-icon sps-icon-${T.SpsInsightCardIcons[this.kind]}`}),t,s),this.partnerCount&&r("div",{className:`${w}__partner-count`},this.partnerCount===this.totalPartners?r("div",null,e("design-system:insightCard.all")):r("div",{"data-fragment":!0},r("div",null,n),r("div",null,i),r("div",null,a)),r("div",{className:`${w}__partners-text`},e("design-system:insightCard.partners"))))}};exports.SpsInsightCardComponent.displayName=w;exports.SpsInsightCardComponent.props={icon:"SpsIcon",kind:"SpsInsightCardKind",title:"string",metric:"number",partnerCount:"number",totalPartners:"number",secondary:"boolean"};N([p()],exports.SpsInsightCardComponent.prototype,"icon",2);N([p()],exports.SpsInsightCardComponent.prototype,"kind",2);N([p()],exports.SpsInsightCardComponent.prototype,"title",2);N([p()],exports.SpsInsightCardComponent.prototype,"metric",2);N([p()],exports.SpsInsightCardComponent.prototype,"partnerCount",2);N([p()],exports.SpsInsightCardComponent.prototype,"totalPartners",2);N([p()],exports.SpsInsightCardComponent.prototype,"secondary",2);N([X()],exports.SpsInsightCardComponent.prototype,"content",2);N([Q(`.${w}__detail`)],exports.SpsInsightCardComponent.prototype,"detail",2);exports.SpsInsightCardComponent=N([O({tag:w})],exports.SpsInsightCardComponent);var Gt=Object.defineProperty,Xt=Object.getOwnPropertyDescriptor,le=(e,t,s,n)=>{for(var i=n>1?void 0:n?Xt(t,s):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(i=(n?o(t,s,i):o(i))||i);return n&&i&&Gt(t,s,i),i};const A="sps-insights";exports.SpsInsightsComponent=class extends HTMLElement{constructor(){super();this.content=[],this.showAdditionalInsights=!1,this.toggleAdditionalInsights=this.toggleAdditionalInsights.bind(this)}get[D](){return[A,this.showAdditionalInsights&&`${A}--show-additional`,this.details&&Array.from(this.details).every(e=>!e.textContent)?`${A}--no-details`:null,this.content.length===6?`${A}--break-4`:null,this.content.length===7?`${A}--break-5`:null,this.content.length===8?`${A}--break-5`:null]}toggleAdditionalInsights(){this.showAdditionalInsights=!this.showAdditionalInsights,this.update()}render(){return r("div",{"data-fragment":!0},this.content,this.content.length>10&&r("div",{className:"sps-button sps-button--link",onClick:this.toggleAdditionalInsights},r("button",{type:"button"},this.showAdditionalInsights?"Hide ":"Show ","Additional Insights")))}};exports.SpsInsightsComponent.displayName=A;exports.SpsInsightsComponent.props={};le([X()],exports.SpsInsightsComponent.prototype,"content",2);le([Ue(".sps-insight-card__detail")],exports.SpsInsightsComponent.prototype,"details",2);exports.SpsInsightsComponent=le([O({tag:A})],exports.SpsInsightsComponent);const Kt={basic:{label:"Basic Insight Cards",examples:{basic:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                ></sps-insight-card>
+            </sps-insights>
+        `}}},details:{label:"With Details",examples:{details:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `}}},partner_count:{label:"Partner Count",examples:{partner_count:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="250"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="122"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="207"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="12"
+                    totalPartners="250"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="94"
+                    totalPartners="250"
+                ></sps-insight-card>
+            </sps-insights>
+        `}}},expansion:{label:"10+ Insight Cards",examples:{expansion:{jsx:l.code`
+            <sps-insights>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+                <sps-insight-card kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                ></sps-insight-card>
+                <sps-insight-card kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount="100"
+                    totalPartners="200"
+                >
+                    <span className="gray600 font-weight-bold">Detail:</span> 792 units
+                </sps-insight-card>
+            </sps-insights>
+        `}}},events:{label:"Adding a click handler",description:l.code`
+          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.
+          Here is how to do it:</p>
+      `,examples:{events:{react:l.code`
+                  function Component() {
+                      function handleClick() {
+                          window.alert("Insight card clicked");
+                      }
+
+                      const ref = React.useRef();
+                      React.useEffect(() => {
+                          ref.current.addEventListener("click", handleClick);
+                          return () => {
+                              ref.current.removeEventListener("click", handleClick);
+                          };
+                      }, []);
+
+                        return (
+                            <sps-insights>
+                                <sps-insight-card ref={ref}
+                                    kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card kind="general"
+                                    metric="1234"
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        );
                     }
-                }, 1000 / 60);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpsPhotoComponent.prototype, ClassBindings, {
-        get: function () {
-            return [
-                CPT_NAME$2,
-                this.fitWidth
-                    ? CPT_NAME$2 + "--fit-width"
-                    : CPT_NAME$2 + "--fit-height",
-                this.placeholderIcon && CPT_NAME$2 + "--placeholder",
-            ];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpsPhotoComponent.prototype, StyleBindings, {
-        get: function () {
-            return {
-                fontSize: this.width * 0.05 + "rem",
-                width: this.width + "rem",
-                height: 0.75 * this.width + "rem",
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SpsPhotoComponent.prototype.connectedCallback = function () {
-        var _this = this;
-        this.waitForWidthInterval = window.setInterval(function () {
-            var boundingClientRect = _this.getBoundingClientRect();
-            if (boundingClientRect.width) {
-                _this.setWidth(boundingClientRect.width);
-                window.clearInterval(_this.waitForWidthInterval);
-                delete _this.waitForWidthInterval;
-            }
-        }, 1000 / 60);
-    };
-    SpsPhotoComponent.prototype.disconnectedCallback = function () {
-        if (this.waitForWidthInterval) {
-            window.clearInterval(this.waitForWidthInterval);
-        }
-        if (this.waitForImgHeightInterval) {
-            window.clearInterval(this.waitForImgHeightInterval);
-        }
-    };
-    SpsPhotoComponent.prototype.render = function () {
-        if (this.src) {
-            return this.width
-                ? h("img", { src: this.src, alt: this.altText })
-                : h("span", null);
-        }
-        return h("i", { className: "sps-icon sps-icon-" + this.placeholderIcon });
-    };
-    SpsPhotoComponent.prototype.setWidth = function (hostWidth) {
-        if (hostWidth && !this.width) {
-            var baseFontSize = document.body.parentElement.style.fontSize || "16px";
-            var remPx = Number(baseFontSize.substr(0, baseFontSize.length - 2));
-            this.width = hostWidth / remPx;
-        }
-    };
-    SpsPhotoComponent.displayName = CPT_NAME$2;
-    SpsPhotoComponent.props = {
-        src: "string",
-        altText: "string",
-        mode: "SpsPhotoDisplayMode",
-        placeholderIcon: "SpsIcon",
-    };
-    __decorate$2([
-        Prop(),
-        __metadata$2("design:type", String)
-    ], SpsPhotoComponent.prototype, "src", void 0);
-    __decorate$2([
-        Prop(),
-        __metadata$2("design:type", String)
-    ], SpsPhotoComponent.prototype, "altText", void 0);
-    __decorate$2([
-        Prop(),
-        __metadata$2("design:type", Object)
-    ], SpsPhotoComponent.prototype, "mode", void 0);
-    __decorate$2([
-        Prop(),
-        __metadata$2("design:type", String)
-    ], SpsPhotoComponent.prototype, "placeholderIcon", void 0);
-    __decorate$2([
-        Watch(),
-        __metadata$2("design:type", Number)
-    ], SpsPhotoComponent.prototype, "width", void 0);
-    __decorate$2([
-        Watch(),
-        __metadata$2("design:type", Object)
-    ], SpsPhotoComponent.prototype, "fitWidth", void 0);
-    __decorate$2([
-        QuerySelector("img", { refresh: true }),
-        __metadata$2("design:type", HTMLImageElement),
-        __metadata$2("design:paramtypes", [HTMLImageElement])
-    ], SpsPhotoComponent.prototype, "image", null);
-    SpsPhotoComponent = __decorate$2([
-        Component({ tag: CPT_NAME$2 })
-    ], SpsPhotoComponent);
-    return SpsPhotoComponent;
-}(HTMLElement));
-
-var __makeTemplateObject$1 = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var SpsPhotoExamples = {
-    sizing: {
-        label: "Sizing",
-        description: utils.code(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n        <p>\n            Photos are block elements, so a photo fills its container's width unless\n            an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n            photos have been placed in cards which have different widths in the 12\n            column grid.\n        </p>\n    "], ["\n        <p>\n            Photos are block elements, so a photo fills its container's width unless\n            an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n            photos have been placed in cards which have different widths in the 12\n            column grid.\n        </p>\n    "]))),
-        examples: {
-            basic: {
-                jsx: utils.code(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1(["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-2\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-6\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n            </div>\n        "], ["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-2\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-6\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n            </div>\n        "]))),
-            },
-        },
-    },
-    displayMode: {
-        label: "Fill vs. Fit",
-        description: utils.code(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1(["\n        <p>\n            There are two display modes available:\n            <ul>\n                <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n                <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n            </ul>\n        </p>\n    "], ["\n        <p>\n            There are two display modes available:\n            <ul>\n                <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n                <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n            </ul>\n        </p>\n    "]))),
-        examples: {
-            landscape: {
-                description: "<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",
-                jsx: utils.code(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject$1(["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "], ["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "]))),
-            },
-            portrait: {
-                description: "<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",
-                jsx: utils.code(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "], ["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "]))),
-            },
-        },
-    },
-    placeholder: {
-        label: "Placeholders",
-        description: utils.code(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n        <p>\n            When an image is not provided for a particular use case (such as a user avatar,\n            a company photo, item image, etc.), a placeholder should be shown in its place.\n\n            The placeholder's icon, selected from our SPS icon set, should represent the\n            type of image it is substituting for.\n        </p>\n    "], ["\n        <p>\n            When an image is not provided for a particular use case (such as a user avatar,\n            a company photo, item image, etc.), a placeholder should be shown in its place.\n\n            The placeholder's icon, selected from our SPS icon set, should represent the\n            type of image it is substituting for.\n        </p>\n    "]))),
-        examples: {
-            general: {
-                description: "<p>General Photo</p>",
-                jsx: utils.code(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject$1(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"photo\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"photo\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
-            },
-            photoAlt: {
-                description: "<p>Photo Alt</p>",
-                jsx: utils.code(templateObject_8 || (templateObject_8 = __makeTemplateObject$1(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"camera\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"camera\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
-            },
-            user: {
-                description: "<p>User / Single Person</p>",
-                jsx: utils.code(templateObject_9 || (templateObject_9 = __makeTemplateObject$1(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"user\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"user\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
-            },
-            group: {
-                description: "<p>Group / Multiple People</p>",
-                jsx: utils.code(templateObject_10 || (templateObject_10 = __makeTemplateObject$1(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"group\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"group\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
-            },
-            company: {
-                description: "<p>Company / Building</p>",
-                jsx: utils.code(templateObject_11 || (templateObject_11 = __makeTemplateObject$1(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"building\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"building\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
-            },
-        },
-    },
-};
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
-
-var MANIFEST = {
-    "File Upload": {
-        components: [SpsFileUploadComponent],
-        examples: SpsFileUploadExamples,
-    },
-    /*
-     * 'Insight Cards': {
-     *     components: [SpsInsightCardComponent, SpsInsightsComponent],
-     *     examples: SpsInsightCardExamples,
-     * },
-     */
-    "Tabbed Navigation": {
-        components: [SpsNavTabComponent, SpsNavTabSetComponent],
-        examples: SpsNavTabsExamples,
-    },
-    Photos: {
-        components: [SpsPhotoComponent],
-        examples: SpsPhotoExamples,
-    },
-};
-
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __read = (undefined && undefined.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var CPT_NAME$1 = "sps-insight-card";
-var SpsInsightCardComponent = /** @class */ (function (_super) {
-    __extends$1(SpsInsightCardComponent, _super);
-    function SpsInsightCardComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /** Specifies which of the visual styling variants of the Insight Card to use. */
-        _this.kind = dsShared.SpsInsightCardKind.GENERAL;
-        return _this;
-    }
-    Object.defineProperty(SpsInsightCardComponent.prototype, ClassBindings, {
-        get: function () {
-            return [
-                CPT_NAME$1,
-                CPT_NAME$1 + "--" + this.kind,
-                this.detail && this.detail.children.length ? CPT_NAME$1 + "--has-detail" : null,
-            ];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SpsInsightCardComponent.prototype.render = function (_a) {
-        var t = _a.t;
-        var metric = h("div", { className: CPT_NAME$1 + "__metric-count" }, this.metric);
-        var description = (h("div", { className: CPT_NAME$1 + "__description" },
-            h("div", { className: CPT_NAME$1 + "__title", 
-                /*
-                 * Both Chrome & FF ignore -webkit-box-orient in the actual CSS for some reason
-                 * Also the TS types don't think -webkit-box-orient is a real CSS property
-                 */
-                style: { "-webkit-box-orient": "vertical" } }, this.title),
-            h("div", { className: CPT_NAME$1 + "__detail" }, this.content)));
-        var _b = __read((this.partnerCount
-            ? t("design-system:insightCard.partnerCount", { count: this.partnerCount, total: this.totalPartners })
-            : "").split("|"), 3), count = _b[0], ofText = _b[1], total = _b[2];
-        return (h("div", { "data-fragment": true },
-            h("div", { className: CPT_NAME$1 + "__body" },
-                this.icon ? h("i", { className: "sps-icon sps-icon-" + this.icon }) : h("i", { className: "sps-icon sps-icon-" + dsShared.SpsInsightCardIcons[this.kind] }),
-                metric,
-                description),
-            this.partnerCount && (h("div", { className: CPT_NAME$1 + "__partner-count" },
-                this.partnerCount === this.totalPartners
-                    ? h("div", null, t("design-system:insightCard.all"))
-                    : (h("div", { "data-fragment": true },
-                        h("div", null, count),
-                        h("div", null, ofText),
-                        h("div", null, total))),
-                h("div", { className: CPT_NAME$1 + "__partners-text" }, t("design-system:insightCard.partners"))))));
-    };
-    SpsInsightCardComponent.displayName = CPT_NAME$1;
-    SpsInsightCardComponent.props = {
-        icon: "SpsIcon",
-        kind: "SpsInsightCardKind",
-        title: "string",
-        metric: "number",
-        partnerCount: "number",
-        totalPartners: "number",
-        secondary: "boolean",
-    };
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", String)
-    ], SpsInsightCardComponent.prototype, "icon", void 0);
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", Object)
-    ], SpsInsightCardComponent.prototype, "kind", void 0);
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", String)
-    ], SpsInsightCardComponent.prototype, "title", void 0);
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", Number)
-    ], SpsInsightCardComponent.prototype, "metric", void 0);
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", Number)
-    ], SpsInsightCardComponent.prototype, "partnerCount", void 0);
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", Number)
-    ], SpsInsightCardComponent.prototype, "totalPartners", void 0);
-    __decorate$1([
-        Prop(),
-        __metadata$1("design:type", Boolean)
-    ], SpsInsightCardComponent.prototype, "secondary", void 0);
-    __decorate$1([
-        Content(),
-        __metadata$1("design:type", Object)
-    ], SpsInsightCardComponent.prototype, "content", void 0);
-    __decorate$1([
-        QuerySelector("." + CPT_NAME$1 + "__detail"),
-        __metadata$1("design:type", Object)
-    ], SpsInsightCardComponent.prototype, "detail", void 0);
-    SpsInsightCardComponent = __decorate$1([
-        Component({ tag: CPT_NAME$1 })
-    ], SpsInsightCardComponent);
-    return SpsInsightCardComponent;
-}(HTMLElement));
-
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var CPT_NAME = "sps-insights";
-/** Container for Insight Cards. */
-var SpsInsightsComponent = /** @class */ (function (_super) {
-    __extends(SpsInsightsComponent, _super);
-    function SpsInsightsComponent() {
-        var _this = _super.call(this) || this;
-        _this.content = [];
-        _this.showAdditionalInsights = false;
-        _this.toggleAdditionalInsights = _this.toggleAdditionalInsights.bind(_this);
-        return _this;
-    }
-    Object.defineProperty(SpsInsightsComponent.prototype, ClassBindings, {
-        get: function () {
-            return [
-                CPT_NAME,
-                this.showAdditionalInsights && CPT_NAME + "--show-additional",
-                this.details && Array.from(this.details).every(function (d) { return !d.textContent; })
-                    ? CPT_NAME + "--no-details"
-                    : null,
-                this.content.length === 6 ? CPT_NAME + "--break-4" : null,
-                this.content.length === 7 ? CPT_NAME + "--break-5" : null,
-                this.content.length === 8 ? CPT_NAME + "--break-5" : null,
-            ];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Only the first ten Insight Cards are visible by default; the rest are behind
-     * the "Show Additional Insights"/"Hide Additional Insights" button. This method
-     * will toggle the additional insights.
-     */
-    SpsInsightsComponent.prototype.toggleAdditionalInsights = function () {
-        this.showAdditionalInsights = !this.showAdditionalInsights;
-        this.update();
-    };
-    SpsInsightsComponent.prototype.render = function () {
-        return (h("div", { "data-fragment": true },
-            this.content,
-            this.content.length > 10
-                && (h("div", { className: "sps-button sps-button--link", onClick: this.toggleAdditionalInsights },
-                    h("button", { type: "button" },
-                        this.showAdditionalInsights ? "Hide " : "Show ",
-                        "Additional Insights")))));
-    };
-    SpsInsightsComponent.displayName = CPT_NAME;
-    SpsInsightsComponent.props = {};
-    __decorate([
-        Content(),
-        __metadata("design:type", Object)
-    ], SpsInsightsComponent.prototype, "content", void 0);
-    __decorate([
-        QuerySelectorAll(".sps-insight-card__detail"),
-        __metadata("design:type", NodeList)
-    ], SpsInsightsComponent.prototype, "details", void 0);
-    SpsInsightsComponent = __decorate([
-        Component({ tag: CPT_NAME }),
-        __metadata("design:paramtypes", [])
-    ], SpsInsightsComponent);
-    return SpsInsightsComponent;
-}(HTMLElement));
-
-var __makeTemplateObject = (undefined && undefined.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var SpsInsightCardExamples = {
-    basic: {
-        label: "Basic Insight Cards",
-        examples: {
-            basic: {
-                jsx: utils.code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                ></sps-insight-card>\n            </sps-insights>\n        "]))),
-            },
-        },
-    },
-    details: {
-        label: "With Details",
-        examples: {
-            details: {
-                jsx: utils.code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "]))),
-            },
-        },
-    },
-    partner_count: {
-        label: "Partner Count",
-        examples: {
-            partner_count: {
-                jsx: utils.code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"250\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"122\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"207\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"12\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"94\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"250\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"122\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"207\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"12\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"94\"\n                    totalPartners=\"250\"\n                ></sps-insight-card>\n            </sps-insights>\n        "]))),
-            },
-        },
-    },
-    expansion: {
-        label: "10+ Insight Cards",
-        examples: {
-            expansion: {
-                jsx: utils.code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "], ["\n            <sps-insights>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"general\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"processing\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"success\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n                <sps-insight-card kind=\"warning\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                ></sps-insight-card>\n                <sps-insight-card kind=\"error\"\n                    metric=\"1234\"\n                    title=\"Insight Card Title\"\n                    partnerCount=\"100\"\n                    totalPartners=\"200\"\n                >\n                    <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                </sps-insight-card>\n            </sps-insights>\n        "]))),
-            },
-        },
-    },
-    events: {
-        label: "Adding a click handler",
-        description: utils.code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n          Here is how to do it:</p>\n      "], ["\n          <p>Attaching event handlers to native web components in React cannot be done the usual way at this time.\n          Here is how to do it:</p>\n      "]))),
-        examples: {
-            events: {
-                react: utils.code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  function Component() {\n                      function handleClick() {\n                          window.alert(\"Insight card clicked\");\n                      }\n\n                      const ref = React.useRef();\n                      React.useEffect(() => {\n                          ref.current.addEventListener(\"click\", handleClick);\n                          return () => {\n                              ref.current.removeEventListener(\"click\", handleClick);\n                          };\n                      }, []);\n\n                        return (\n                            <sps-insights>\n                                <sps-insight-card ref={ref}\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        );\n                    }\n                "], ["\n                  function Component() {\n                      function handleClick() {\n                          window.alert(\"Insight card clicked\");\n                      }\n\n                      const ref = React.useRef();\n                      React.useEffect(() => {\n                          ref.current.addEventListener(\"click\", handleClick);\n                          return () => {\n                              ref.current.removeEventListener(\"click\", handleClick);\n                          };\n                      }, []);\n\n                        return (\n                            <sps-insights>\n                                <sps-insight-card ref={ref}\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card kind=\"general\"\n                                    metric=\"1234\"\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        );\n                    }\n                "]))),
-            },
-        },
-    },
-    alternateIcon: {
-        label: "Using alternate icons",
-        examples: {
-            basic: {
-                react: utils.code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        return (\n                            <sps-insights>\n                                <sps-insight-card\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.DOLLAR_SIGN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"processing\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.ASTERISK}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"success\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.USER}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"warning\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.FOLDER_OPEN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"error\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.BAN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        return (\n                            <sps-insights>\n                                <sps-insight-card\n                                    kind=\"general\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.DOLLAR_SIGN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"processing\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.ASTERISK}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"success\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.USER}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"warning\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.FOLDER_OPEN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                                <sps-insight-card\n                                    kind=\"error\"\n                                    metric=\"1234\"\n                                    icon={SpsIcon.BAN}\n                                    title=\"Insight Card Title\"\n                                ></sps-insight-card>\n                            </sps-insights>\n                        )\n                    }\n                "]))),
-            },
-        },
-    },
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
-
-exports.AttrBindings = AttrBindings;
-exports.ClassBindings = ClassBindings;
-exports.Component = Component;
-exports.Content = Content;
-exports.EventDispatcher = EventDispatcher;
-exports.EventListener = EventListener;
-exports.MANIFEST = MANIFEST;
-exports.Prop = Prop;
-exports.QuerySelector = QuerySelector;
-exports.QuerySelectorAll = QuerySelectorAll;
-exports.SpsFileUploadComponent = SpsFileUploadComponent;
-exports.SpsFileUploadExamples = SpsFileUploadExamples;
-exports.SpsInsightCardComponent = SpsInsightCardComponent;
-exports.SpsInsightCardExamples = SpsInsightCardExamples;
-exports.SpsInsightsComponent = SpsInsightsComponent;
-exports.SpsNavTabComponent = SpsNavTabComponent;
-exports.SpsNavTabSetComponent = SpsNavTabSetComponent;
-exports.SpsNavTabsExamples = SpsNavTabsExamples;
-exports.SpsPhotoComponent = SpsPhotoComponent;
-exports.SpsPhotoExamples = SpsPhotoExamples;
-exports.StyleBindings = StyleBindings;
-exports.Watch = Watch;
-exports.h = h;
-exports.namespaceOverrideRegistrar = namespaceOverrideRegistrar;
-exports.register = register;
-exports.webComponentsUseI18n = webComponentsUseI18n;
+                `}}},alternateIcon:{label:"Using alternate icons",examples:{basic:{react:l.code`
+                    function DemoComponent() {
+                        return (
+                            <sps-insights>
+                                <sps-insight-card
+                                    kind="general"
+                                    metric="1234"
+                                    icon={SpsIcon.DOLLAR_SIGN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="processing"
+                                    metric="1234"
+                                    icon={SpsIcon.ASTERISK}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="success"
+                                    metric="1234"
+                                    icon={SpsIcon.USER}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="warning"
+                                    metric="1234"
+                                    icon={SpsIcon.FOLDER_OPEN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                                <sps-insight-card
+                                    kind="error"
+                                    metric="1234"
+                                    icon={SpsIcon.BAN}
+                                    title="Insight Card Title"
+                                ></sps-insight-card>
+                            </sps-insights>
+                        )
+                    }
+                `}}}};exports.AttrBindings=re;exports.ClassBindings=D;exports.Component=O;exports.Content=X;exports.EventDispatcher=K;exports.EventListener=j;exports.MANIFEST=Wt;exports.Prop=p;exports.QuerySelector=Q;exports.QuerySelectorAll=Ue;exports.SpsFileUploadExamples=Ee;exports.SpsInsightCardExamples=Kt;exports.SpsNavTabsExamples=Re;exports.SpsPhotoExamples=$e;exports.StyleBindings=G;exports.Watch=oe;exports.h=r;exports.namespaceOverrideRegistrar=Lt;exports.register=Ft;exports.webComponentsUseI18n=Dt;