@touchtech/baselayer-ui 1.0.0

package/README.md

@@ -0,0 +1,74 @@
+# Baselayer UI - React Component Library
+
+
+## Development
+
+Run `npm install` to install the project dependencies. Since this library is used by multiple Digital Showroom projects it's important that we create
+a global [link](https://docs.npmjs.com/cli/link) so we can use this local copy in the other projects during development. Run `npm link` to do so.
+
+Run `npm start` to open our [Storybook](https://storybook.js.org).
+
+### Testing
+
+We test our components using [Jest](http://jestjs.io) and [React Testing Library](https://github.com/testing-library/react-testing-library). Tests are placed in the `__tests__` directory in the same directory as the component.
+
+```
+src/
+├── Button
+│   ├── Button.js
+│   ├── Button.module.css
+│   ├── Button.stories.js
+│   ├── __tests__
+│   │   └── Button.test.js
+│   └── index.js
+└── index.js
+
+2 directories, 6 files
+```
+
+You can execute `npm run test` or `npm test` as a shorthand to run all tests. Running `npm test` every time you change a file gets old pretty fast. Thankfully we can mitigate that by entering watch mode.
+
+- `npm test -- --watch`
+
+### Linting & Formatting
+
+We lint our code using [ESlint](https://eslint.org). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.
+
+- `npm run lint` - Run the linter over the entire codebase and report problems.
+- `npm run lint-fix` - Run the linter over the entire codebase and automatically fix problems.
+
+[ESlint](https://eslint.org) also have editor integrations, see [editors](https://eslint.org/docs/user-guide/integrations#editors) for instructions on how to set up your editor.
+
+We format our code using [Prettier](https://prettier.io). For your convinience there are a few [npm scripts](https://docs.npmjs.com/misc/scripts) available.
+
+- `npm run format` - Run the formatter over the entire codebase and report any formatting issues.
+- `npm run format-fix` - Run the formatter over the entire codebase and automatically format the code.
+
+[Prettier](https://prettier.io) also have editor integrations, see [editors](https://prettier.io/docs/en/editors.html) for instructions on how to setup your editor.
+
+Since linting and formatting is such a common task, you can execute `npm run check` to check for both linting problems and formatting issues simultaneously. Execute `npm run fix` to automatically fix both.
+
+### CSS
+
+Each component can have a related CSS file. The CSS file should end with the extension `.module.css` and is treated as a [CSS Module](https://github.com/css-modules/css-modules). Whenever a `.module.css` file is imported, its definitions
+are only available locally to the component importing it. When referencing class names from a CSS Module use camelCase. E.g., `.button-small` becomes `buttonSmall`.
+
+**Example**
+
+```css
+/* Button.module.css */
+.button-small {
+}
+```
+
+```javascript
+// Button.js
+import React from "react";
+import styles from "./Button.module.css";
+
+function Button({ children }) {
+  return <button className={styles.buttonSmall}>{children}</button>;
+}
+
+export default Button;
+```

package/dist/640e1c62fd0dfa7c00a1c8fe0e35c6d1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1932" height="1254" viewBox="0 0 1932 1254">
+  <path d="M547,564 L2172,564 C2207,564 2236,592 2236,627 C2236,662 2207,691 2172,691 L547,691 L1003,1146 C1028,1171 1028,1211 1003,1236 C978,1260 938,1260 913,1236 L304,627 L913,18 C938,-6 978,-6 1003,18 C1028,43 1028,83 1003,108 L547,564 Z" transform="translate(-304)"/>
+</svg>

package/dist/bundle.js

@@ -0,0 +1,15 @@
+!function(e,t){for(var a in t)e[a]=t[a]}(exports,function(e){var t={};function a(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,a),r.l=!0,r.exports}return a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=29)}([function(e,t,a){e.exports=a(27)()},function(e,t){e.exports=require("react")},function(e,t,a){var n;
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/!function(){"use strict";var a={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)&&n.length){var o=r.apply(null,n);o&&e.push(o)}else if("object"===i)for(var s in n)a.call(n,s)&&n[s]&&e.push(s)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},function(e,t,a){e.exports={container:"_2AasuMOuypf72nbY49wOB3",medium:"_2ccWTBUojwulFi4_HMdqrU",large:"_1fa3qv5sR2TPR6fpOfo5vm",inverted:"_2UYh9mgKjtU23uNhD83Ocx",rounded:"_3Z4Ktcy3wzAy44gorESgVr",plain:"_3904xHhy3YVRabzbm2Jp1m",transparent:"_2KgQIC54C7daQQvv2yx2AJ",stretchHorizontally:"vOIaBw3isf1BgJt3BtMaB",stretchVertically:"_2U6VwL29C2GriKDmpfnGs7",icon:"_8KOnJz0dKoQE4u5VPMox_"}},function(e,t,a){e.exports={container:"UFhkzqhonCpQ51u4CrX1t",medium:"K8wju_yT6BBEkxQSvBbji",large:"xa9TOtXuvIjYcON9CWpZE",inverted:"_18tgJGtxaIy6IkZdJCUCR1",rounded:"_2_eDclH1w76FWyN-sgxrz4",plain:"_2ZKuEedcJa23LSU5bqlK3k",transparent:"_2OqcqOvkDlXkNFZCXCHjxj",stretchHorizontally:"Pz69qX26v5M10VLHf4tGg",stretchVertically:"_32S1q5WprWdhjszlCSXuaj",icon:"_3G2FW5nLwHekds3ceysrsT"}},function(e,t,a){e.exports={container:"AvS0_YSbZqNZg8IWcaJwV",medium:"nfXZbsGD6SsCktuxGFXu6",large:"_2Zy48EfiqyIO3OehZWEmTd",inverted:"_3ICdtA8Bg_DxRZFwfG6fDp",plain:"_38k8iyngPtp-gPtJ3KmGFJ",transparent:"_3PtZ-HwHrieRv7vD5uLl-m",icon:"_3EkIuE-7jFloR2v7sxXnv3"}},function(e,t,a){e.exports={container:"_1hWS8Ctp_Xoptl5yH4iK10",medium:"_3UTD5rXy8pHInbyfAISfLM",large:"_2wAE1TI9UtoiVq8_mQ85zY",inverted:"DTmrJKQW_p69bmIfnz6pJ",plain:"_2Qo01PXIf_n07WdjfgRnsB",transparent:"_3bAFtWXUmgiVGOMoaqkNYk",icon:"_3_TEIn-NvzG9z0gRRz-iwm"}},function(e,t,a){e.exports={container:"FQuCidfLn1zXAIdtpAABK",modalHeader:"_3R3n7P4OiBE0Jiq3TqOsOz",modalContent:"_3BJi8ln7Dl1pAnoUvQAkZ",modalButtonsContainer:"_9EfRpte56_FRO34zqwGML",modalButtons:"-ZaLlNla8yzLCqW89ThVF"}},function(e,t,a){e.exports={imageContainer:"_3ga-5_2SfhLOfX-0-TDzHS",imageOverlay:"_3gmrpbvtZtoO-SkCDcBUJA",image:"_2nN1TMfQmlIA-AIvwXwDBJ",cover:"_199tBIf4h-Vim7lfnTpjc7",contain:"_22u3ihmiMr6W6QAqeppKJR",stretchHorizontally:"_1Icfq_z7gaGwsndPrHnMis",stretchVertically:"_3DaoKqEKFpY8KS-i9eGr4X"}},function(e,t,a){e.exports={container:"_28diEMRpUad1Q1fibH6MyE",medium:"lwlqUJXbDtDlGiMAiIKrF",large:"_32ZovUZ4J2RO7cnxyUPb7x",inverted:"_2XQZsbpYzbsJnCIM86qfew",plain:"_3EqQ8mVn6bLSejinL1nUWP",transparent:"_1zT9Ow7Zr1mvYS3pSTIs4_",icon:"gAo1poaczpfncRiW2B32Z"}},function(e,t,a){e.exports={videoContainer:"s-h4Xsi7NaPueKevx2S5q",video:"_7ibfehQJ_B3QKJgPBrPOo",cover:"_3H90ULnn3Kzm9SHtLoOENk",contain:"_2NZhXAL1DIwphorQWgQEh-",stretchHorizontally:"_1VYh1GNvAnH2t2YSoMJ-ww",stretchVertically:"_2ZBppPYj0eYG08Zwt2TWqS",videoOverlay:"_3VokDlaSvuSkA6d6uzvJx2"}},function(e,t,a){e.exports={container:"_1sqc6n_4UBiDzd8CDlZQTI",plain:"_2HktRR2g9a4JtJirdzTXbS",transparent:"_3RFf4eu5UC_7V_Msv7yeUt",top:"_2Q3NnJ8ooZe2RGlWTuc4r_",right:"_2VkLrWqnR7jDIdWZhIL0Zl",bottom:"_2rgmcVFgt9CSJUJ2t5aps0",left:"_1G69fno5OYu8tzvyqlU4xJ",horizontalCenter:"vgftmKcR9f0_bQ68wtMtK",verticalCenter:"Bn2UFVLeQOwrIbWvuKqNm"}},function(e,t,a){e.exports={menu:"q_oxs63VcG5Ch5zl7b_Pc",top:"_2HY5pU1J95rFNADHVnqqKp",right:"pzllfXC5M7IZ6FFZivQhj",left:"_1dhYc9BwcrlMIr4OAbQFxr",bottom:"_2aWOUP6bObYrXJNzLXcH1g",open:"_1Jo1EF12l-iCNSZfDdzamZ",entrance:"_3kMaWvfYxfu7tnK2q7NNms",menuHeader:"_2Uclm_J5zdCpbmc91tcF4z"}},function(e,t,a){e.exports={container:"_2uj0x284WZRoLuqbYbDDuZ",centered:"hjjyi0HLSUpPZ9OYA_FTb",plain:"_20vjyXFLbe54KpwBbacI9c",transparent:"_16gfL52F7P1xtVV5V1GmCl",top:"H-stPL7EAX_KqvWT1yHqL",right:"_26dfvTjUBINkM9lFRDrb_1",bottom:"_3ce4Yf087jEJh-3qqI0YWW",left:"_2iHyB1aJyeJxEkdZg0qj-s"}},function(e,t,a){e.exports={container:"_1dDJngMZQG8QQzFLctmraM",horizontal:"_25nBC8iOAPkHb9XxAbYeQW",vertical:"_2FsnjtVSCtrk0PNYFIq0QW",plain:"_24Mr2LJsbWa5VZsaruDt7Q",value:"_3Y6XivFLEzCt-oiO_Be6lU"}},function(e,t,a){e.exports={toast:"_2oDAMdGscA7a-r3fJVYT4y",entrance:"_2xe-xU-Wr7wQmdtigV88uw",toastContent:"_13HMC8BVI57yGHbSHosAXQ",toastImage:"bstIGBKksyAHdkP6fx9JN",toastButtons:"_37JXerbZedQiyzUOc889kB"}},function(e,t,a){e.exports={colorSwatch:"yiJjoznX0cApVlHDtWNBa",selected:"_3Do97iq9wF8MYjO9AR3HT3",srOnly:"Vhekl7q9lt78RlIgC1Hdy"}},function(e,t,a){e.exports={overlay:"_308f1undwHPjgRJSQRl2kt",modal:"_2LtHDby-jXFLoVV3AW8_UC",modalButton:"_169bRmV6JG9l2e_Z2cQ6HD"}},function(e,t,a){e.exports={container:"_3QkI96grcOC6N6AVKQcRa6",header:"_3AnbCLyfrnJelaXyVxVtcp",list:"_17CIizo0l5sRULrvwtfdQN"}},function(e,t,a){e.exports={listViewItem:"B13tTn7sk_tPdI3R9OJJK",listViewItemButton:"sKY7x7Mk3_qLAitiDnZlB",active:"_2h0KyxjhJpxxNZqKe2dJ_b"}},function(e,t,a){e.exports={overlay:"_1eunm7CzhVJQdjeXfMO5V7",transparent:"_3T4uZyMYIWyfVw9gqdOCUl",fixed:"_28xhqgctgfmBAGJeV8gb-G"}},function(e,t,a){e.exports={colorPicker:"_2g2BqoTSwr5yCrmpdh_gCf",horizontal:"_14LiU3lkvKCkq4objeCSc1",vertical:"wnePJrG71FxQHRavatNwN"}},function(e,t,a){e.exports={menuItem:"_22iDagQ2p2kJrO6oxWOF1s",active:"_3wWA2riaj0K_s7Xk06NS50"}},function(e,t,a){e.exports={menuLinkItem:"OJm9CQ8ijhCEtebr_52wh",active:"_3wpGy0p2m2C-rbEOo6m9c1",menuItem:"_1RDKAqO0ugO2ZeJtFhlUOC",menuLinkItemIcon:"_3e9mPRDpiOaq-H_25ofB8Y"}},function(e,t,a){e.exports={textInput:"_3fgDyPSknZVO1tT3fpmw6G",textLabel:"_198R9u8Ak_N3w7GJKgN4QX"}},function(e,t,a){e.exports={menuContainer:"-VxSGog20HxlgG6MV2J8u"}},function(e,t,a){e.exports={toastContainer:"m8Ob4c2odriI4-R5RUozy"}},function(e,t,a){"use strict";var n=a(28);function r(){}function i(){}i.resetWarningCache=r,e.exports=function(){function e(e,t,a,r,i,o){if(o!==n){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var a={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:r};return a.PropTypes=a,a}},function(e,t,a){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,a){"use strict";a.r(t),a.d(t,"Button",(function(){return p})),a.d(t,"ButtonLink",(function(){return v})),a.d(t,"CircularButton",(function(){return O})),a.d(t,"ColorPicker",(function(){return T})),a.d(t,"ColorSwatch",(function(){return N})),a.d(t,"ConfirmationModal",(function(){return se})),a.d(t,"FloatingPanel",(function(){return ue})),a.d(t,"Image",(function(){return ye})),a.d(t,"ListView",(function(){return ge})),a.d(t,"ListViewItem",(function(){return ke})),a.d(t,"Menu",(function(){return Pe})),a.d(t,"MenuContainer",(function(){return qe})),a.d(t,"MenuItem",(function(){return je})),a.d(t,"MenuLinkItem",(function(){return Be})),a.d(t,"Modal",(function(){return ne})),a.d(t,"Overlay",(function(){return Qe})),a.d(t,"QuantitySelector",(function(){return Ye})),a.d(t,"Sidebar",(function(){return at})),a.d(t,"SquareButton",(function(){return Ue})),a.d(t,"SquareButtonLink",(function(){return st})),a.d(t,"TextInput",(function(){return ut})),a.d(t,"Toast",(function(){return yt})),a.d(t,"ToastContainer",(function(){return gt})),a.d(t,"Video",(function(){return kt}));var n=a(1),r=a.n(n),i=a(0),o=a.n(i),s=a(2),l=a.n(s),c=a(3),d=a.n(c);function u({children:e,className:t,icon:a,isDisabled:n,isInverted:i,isRounded:o,isPlain:s,isTransparent:c,onClick:u,stretchHorizontally:p,stretchVertically:f,size:m}){return r.a.createElement("button",{className:l()(d.a.container,d.a[m],{[d.a.inverted]:i,[d.a.rounded]:o,[d.a.plain]:s,[d.a.transparent]:c,[d.a.stretchHorizontally]:p,[d.a.stretchVertically]:f},t),disabled:n,onClick:u,role:"button"},a&&r.a.createElement("img",{"data-testid":"button-icon",className:d.a.icon,src:a.src,alt:a.alt}),e&&r.a.createElement("span",null,e))}u.defaultProps={isDisabled:!1,isInverted:!1,isRounded:!1,isPlain:!1,isTransparent:!1,stretchHorizontally:!1,stretchVertically:!1,size:o.a.oneOf(["small","medium","large"])},u.propTypes={children:o.a.node,className:o.a.string,icon:o.a.shape({src:o.a.string.isRequired,alt:o.a.string.isRequired}),isDisabled:o.a.bool,isInverted:o.a.bool,isRounded:o.a.bool,isPlain:o.a.bool,isTransparent:o.a.bool,stretchHorizontally:o.a.bool,stretchVertically:o.a.bool,onClick:o.a.func,size:o.a.oneOf(["small","medium","large"])};var p=u,f=a(4),m=a.n(f);function y(){return(y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function h({as:e,children:t,className:a,icon:n,isInverted:i,isRounded:o,isPlain:s,isTransparent:c,stretchHorizontally:d,stretchVertically:u,size:p,...f}){return r.a.createElement(e,y({"data-testid":"button-link",className:l()(m.a.container,m.a[p],{[m.a.inverted]:i,[m.a.rounded]:o,[m.a.plain]:s,[m.a.transparent]:c,[m.a.stretchHorizontally]:d,[m.a.stretchVertically]:u},a)},f),n&&r.a.createElement("img",{"data-testid":"button-link-icon",className:m.a.icon,alt:n.alt,src:n.src}),t&&r.a.createElement("span",null,t))}h.defaultProps={as:"a",isInverted:!1,isRounded:!1,isPlain:!1,isTransparent:!1,stretchHorizontally:!1,stretchVertically:!1},h.propTypes={as:o.a.elementType,children:o.a.node,className:o.a.string,icon:o.a.shape({src:o.a.string.isRequired,alt:o.a.string.isRequired}),isInverted:o.a.bool,isRounded:o.a.bool,isPlain:o.a.bool,isTransparent:o.a.bool,stretchHorizontally:o.a.bool,stretchVertically:o.a.bool,size:o.a.oneOf(["small","medium","large"])};var v=h,b=a(5),g=a.n(b);function _({children:e,className:t,icon:a,isDisabled:n,isInverted:i,isPlain:o,isActive:s,isTransparent:c,onClick:d,size:u}){return r.a.createElement("button",{className:l()(g.a.container,g.a[u],{[g.a.inverted]:i,[g.a.plain]:o,[g.a.active]:s,[g.a.transparent]:c},t),disabled:n,onClick:d,role:"button"},a&&r.a.createElement("img",{"data-testid":"button-icon",className:g.a.icon,src:a.src,alt:a.alt}),e&&r.a.createElement("span",null,e))}_.defaultProps={isDisabled:!1,isInverted:!1,isActive:!1,isPlain:!1,isTransparent:!1,size:"small"},_.propTypes={children:o.a.node,className:o.a.string,icon:o.a.shape({src:o.a.string.isRequired,alt:o.a.string.isRequired}),isActive:o.a.bool,isDisabled:o.a.bool,isInverted:o.a.bool,isPlain:o.a.bool,isTransparent:o.a.bool,onClick:o.a.func,size:o.a.oneOf(["small","medium","large"])};var O=_,C=a(16),k=a.n(C);function E({color:e,isSelected:t,onClick:a}){return r.a.createElement("button",{className:l()(k.a.colorSwatch,{[k.a.selected]:t}),"data-testid":"color-swatch",disabled:t,onClick:a,style:{backgroundColor:e.hexCode}},r.a.createElement("span",{className:k.a.srOnly},`Select ${e.label} color`))}E.defaultProps={isSelected:!1},E.propTypes={color:o.a.shape({hexCode:o.a.string.isRequired,label:o.a.string.isRequired}).isRequired,isSelected:o.a.bool,onClick:o.a.func.isRequired};var N=E,x=a(21),P=a.n(x);function w({colors:e,direction:t,onSelect:a,selectedColor:n}){return r.a.createElement("div",{className:l()(P.a.colorPicker,P.a[t])},e.map(e=>r.a.createElement(N,{key:e.key,color:e,isSelected:e===n,onClick:()=>a(e)})))}w.defaultProps={direction:"vertical"},w.propTypes={direction:o.a.oneOf(["horizontal","vertical"]),colors:o.a.arrayOf(o.a.shape({hexCode:o.a.string.isRequired,key:o.a.string.isRequired,label:o.a.string.isRequired})).isRequired,onSelect:o.a.func.isRequired,selectedColor:o.a.shape({hexCode:o.a.string.isRequired,key:o.a.string.isRequired,label:o.a.string.isRequired})};var T=w,R="undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>0;
+/*!
+ * hotkeys-js v3.8.1
+ * A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.
+ * 
+ * Copyright (c) 2020 kenny wong <wowohoo@qq.com>
+ * http://jaywcjlove.github.io/hotkeys
+ * 
+ * Licensed under the MIT license.
+ */function q(e,t,a){e.addEventListener?e.addEventListener(t,a,!1):e.attachEvent&&e.attachEvent("on".concat(t),(function(){a(window.event)}))}function I(e,t){for(var a=t.slice(0,t.length-1),n=0;n<a.length;n++)a[n]=e[a[n].toLowerCase()];return a}function z(e){"string"!=typeof e&&(e="");for(var t=(e=e.replace(/\s/g,"")).split(","),a=t.lastIndexOf("");a>=0;)t[a-1]+=",",t.splice(a,1),a=t.lastIndexOf("");return t}for(var A={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,"⇪":20,",":188,".":190,"/":191,"`":192,"-":R?173:189,"=":R?61:187,";":R?59:186,"'":222,"[":219,"]":221,"\\":220},j={"⇧":16,shift:16,"⌥":18,alt:18,option:18,"⌃":17,ctrl:17,control:17,"⌘":91,cmd:91,command:91},S={16:"shiftKey",18:"altKey",17:"ctrlKey",91:"metaKey",shiftKey:16,ctrlKey:17,altKey:18,metaKey:91},V={16:!1,18:!1,17:!1,91:!1},K={},D=1;D<20;D++)A["f".concat(D)]=111+D;var B=[],H="all",L=[],J=function(e){return A[e.toLowerCase()]||j[e.toLowerCase()]||e.toUpperCase().charCodeAt(0)};function Q(e){H=e||"all"}function M(){return H||"all"}var F=function(e){var t=e.key,a=e.scope,n=e.method,r=e.splitKey,i=void 0===r?"+":r;z(t).forEach((function(e){var t=e.split(i),r=t.length,o=t[r-1],s="*"===o?"*":J(o);if(K[s]){a||(a=M());var l=r>1?I(j,t):[];K[s]=K[s].map((function(e){return(!n||e.method===n)&&e.scope===a&&function(e,t){for(var a=e.length>=t.length?e:t,n=e.length>=t.length?t:e,r=!0,i=0;i<a.length;i++)-1===n.indexOf(a[i])&&(r=!1);return r}(e.mods,l)?{}:e}))}}))};function Z(e,t,a){var n;if(t.scope===a||"all"===t.scope){for(var r in n=t.mods.length>0,V)Object.prototype.hasOwnProperty.call(V,r)&&(!V[r]&&t.mods.indexOf(+r)>-1||V[r]&&-1===t.mods.indexOf(+r))&&(n=!1);(0!==t.mods.length||V[16]||V[18]||V[17]||V[91])&&!n&&"*"!==t.shortcut||!1===t.method(e,t)&&(e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation&&e.stopPropagation(),e.cancelBubble&&(e.cancelBubble=!0))}}function U(e){var t=K["*"],a=e.keyCode||e.which||e.charCode;if(W.filter.call(this,e)){if(93!==a&&224!==a||(a=91),-1===B.indexOf(a)&&229!==a&&B.push(a),["ctrlKey","altKey","shiftKey","metaKey"].forEach((function(t){var a=S[t];e[t]&&-1===B.indexOf(a)?B.push(a):!e[t]&&B.indexOf(a)>-1?B.splice(B.indexOf(a),1):"metaKey"===t&&e[t]&&3===B.length&&(e.ctrlKey||e.shiftKey||e.altKey||(B=B.slice(B.indexOf(a))))})),a in V){for(var n in V[a]=!0,j)j[n]===a&&(W[n]=!0);if(!t)return}for(var r in V)Object.prototype.hasOwnProperty.call(V,r)&&(V[r]=e[S[r]]);e.getModifierState&&(!e.altKey||e.ctrlKey)&&e.getModifierState("AltGraph")&&(-1===B.indexOf(17)&&B.push(17),-1===B.indexOf(18)&&B.push(18),V[17]=!0,V[18]=!0);var i=M();if(t)for(var o=0;o<t.length;o++)t[o].scope===i&&("keydown"===e.type&&t[o].keydown||"keyup"===e.type&&t[o].keyup)&&Z(e,t[o],i);if(a in K)for(var s=0;s<K[a].length;s++)if(("keydown"===e.type&&K[a][s].keydown||"keyup"===e.type&&K[a][s].keyup)&&K[a][s].key){for(var l=K[a][s],c=l.splitKey,d=l.key.split(c),u=[],p=0;p<d.length;p++)u.push(J(d[p]));u.sort().join("")===B.sort().join("")&&Z(e,l,i)}}}function W(e,t,a){B=[];var n=z(e),r=[],i="all",o=document,s=0,l=!1,c=!0,d="+";for(void 0===a&&"function"==typeof t&&(a=t),"[object Object]"===Object.prototype.toString.call(t)&&(t.scope&&(i=t.scope),t.element&&(o=t.element),t.keyup&&(l=t.keyup),void 0!==t.keydown&&(c=t.keydown),"string"==typeof t.splitKey&&(d=t.splitKey)),"string"==typeof t&&(i=t);s<n.length;s++)r=[],(e=n[s].split(d)).length>1&&(r=I(j,e)),(e="*"===(e=e[e.length-1])?"*":J(e))in K||(K[e]=[]),K[e].push({keyup:l,keydown:c,scope:i,mods:r,shortcut:n[s],method:a,key:n[s],splitKey:d});void 0!==o&&!function(e){return L.indexOf(e)>-1}(o)&&window&&(L.push(o),q(o,"keydown",(function(e){U(e)})),q(window,"focus",(function(){B=[]})),q(o,"keyup",(function(e){U(e),function(e){var t=e.keyCode||e.which||e.charCode,a=B.indexOf(t);if(a>=0&&B.splice(a,1),e.key&&"meta"===e.key.toLowerCase()&&B.splice(0,B.length),93!==t&&224!==t||(t=91),t in V)for(var n in V[t]=!1,j)j[n]===t&&(W[n]=!1)}(e)})))}var X={setScope:Q,getScope:M,deleteScope:function(e,t){var a,n;for(var r in e||(e=M()),K)if(Object.prototype.hasOwnProperty.call(K,r))for(a=K[r],n=0;n<a.length;)a[n].scope===e?a.splice(n,1):n++;M()===e&&Q(t||"all")},getPressedKeyCodes:function(){return B.slice(0)},isPressed:function(e){return"string"==typeof e&&(e=J(e)),-1!==B.indexOf(e)},filter:function(e){var t=e.target||e.srcElement,a=t.tagName,n=!0;return!t.isContentEditable&&("INPUT"!==a&&"TEXTAREA"!==a&&"SELECT"!==a||t.readOnly)||(n=!1),n},unbind:function(e){if(e){if(Array.isArray(e))e.forEach((function(e){e.key&&F(e)}));else if("object"==typeof e)e.key&&F(e);else if("string"==typeof e){for(var t=arguments.length,a=new Array(t>1?t-1:0),n=1;n<t;n++)a[n-1]=arguments[n];var r=a[0],i=a[1];"function"==typeof r&&(i=r,r=""),F({key:e,scope:r,method:i,splitKey:"+"})}}else Object.keys(K).forEach((function(e){return delete K[e]}))}};for(var G in X)Object.prototype.hasOwnProperty.call(X,G)&&(W[G]=X[G]);if("undefined"!=typeof window){var Y=window.hotkeys;W.noConflict=function(e){return e&&window.hotkeys===W&&(window.hotkeys=Y),W},window.hotkeys=W}var $=W;var ee=a(17),te=a.n(ee);function ae({children:e,isOpen:t,onClose:a,button:i}){!function(e,t,a,r){a instanceof Array&&(r=a,a=void 0);const{enableOnTags:i,filter:o}=a||{},s=Object(n.useCallback)(t,r||[]);Object(n.useEffect)(()=>(a&&a.enableOnTags&&($.filter=({target:e,srcElement:t})=>{const a=e&&e.tagName||t&&t.tagName;return Boolean(a&&i&&i.includes(a))}),o&&($.filter=o),$(e,a||{},s),()=>$.unbind(e,s)),[s,a])}("Escape",a);const o=Object(n.useCallback)(()=>{a()},[a]);return t&&r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{className:te.a.overlay,"data-testid":"modal-overlay",onClick:o}),r.a.createElement("div",{className:te.a.modal,"data-testid":"modal"},e),i&&r.a.createElement("div",{className:te.a.modalButton},i))}ae.defaultProps={onClose:()=>{}},ae.propTypes={children:o.a.node.isRequired,isOpen:o.a.bool.isRequired,onClose:o.a.func,button:o.a.node};var ne=ae,re=a(7),ie=a.n(re);function oe({buttonsLeft:e,buttonsRight:t,children:a,header:n,isOpen:i,onClose:o}){return r.a.createElement(ne,{isOpen:i,onClose:o,showCloseButton:!1},r.a.createElement("div",{className:ie.a.container},r.a.createElement("h1",{className:ie.a.modalHeader},n),r.a.createElement("div",{className:ie.a.modalContent},a),r.a.createElement("div",{className:ie.a.modalButtonsContainer},r.a.createElement("div",{className:ie.a.modalButtons},e),r.a.createElement("div",{className:ie.a.modalButtons},t))))}oe.displayName="ConfirmationModal",oe.defaultProps={buttonsLeft:[],buttonsRight:[],onClose:()=>{}},oe.propTypes={buttonsLeft:o.a.arrayOf(o.a.element),buttonsRight:o.a.arrayOf(o.a.element),children:o.a.node.isRequired,header:o.a.string.isRequired,isOpen:o.a.bool.isRequired,onClose:o.a.func};var se=oe,le=a(11),ce=a.n(le);function de({children:e,placement:t,isTransparent:a,isPlain:n}){const i="center"===t.horizontal?"horizontalCenter":t.horizontal,o="center"===t.vertical?"verticalCenter":t.vertical;return r.a.createElement("nav",{"data-testid":"floating-panel",className:l()(ce.a.container,ce.a[i],ce.a[o],{[ce.a.transparent]:a,[ce.a.plain]:n})},e)}de.defaultProps={placement:{horizontal:"center",vertical:"bottom"},isTransparent:!1,isPlain:!1},de.propTypes={children:o.a.node,placement:o.a.shape({horizontal:o.a.oneOf(["right","left","center"]),vertical:o.a.oneOf(["top","bottom","center"])}),isTransparent:o.a.bool,isPlain:o.a.bool};var ue=de,pe=a(8),fe=a.n(pe);function me({src:e,alt:t,layout:a,srcWidth:n,srcHeight:i,children:o}){return o?r.a.createElement("div",{className:fe.a.imageContainer},r.a.createElement("img",{className:l()(fe.a.image,fe.a[a]),crossOrigin:"anonymous","data-testid":"image",alt:t,src:e,width:n,height:i}),o&&r.a.createElement("div",{className:fe.a.imageOverlay},o)):r.a.createElement("img",{className:l()(fe.a.image,fe.a[a]),crossOrigin:"anonymous","data-testid":"image",alt:t,src:e,width:n,height:i})}me.defaultProps={layout:"contain"},me.propTypes={src:o.a.string.isRequired,alt:o.a.string,children:o.a.node,srcWidth:o.a.number,srcHeight:o.a.number,layout:o.a.oneOf(["cover","contain","stretchHorizontally","stretchVertically"])};var ye=me,he=a(18),ve=a.n(he);function be({children:e,className:t,header:a}){return r.a.createElement("div",{className:l()(ve.a.container,t)},a&&r.a.createElement("h3",{className:ve.a.header},a),r.a.createElement("ul",{className:ve.a.list},e))}be.propTypes={children:o.a.node.isRequired,className:o.a.string,header:o.a.string};var ge=be,_e=a(19),Oe=a.n(_e);function Ce({children:e,isActive:t,isDisabled:a,onClick:n}){return r.a.createElement("li",{className:l()(Oe.a.listViewItem)},r.a.createElement("button",{className:l()(Oe.a.listViewItemButton,{[Oe.a.active]:t}),onClick:n,disabled:a},e))}Ce.defaultProps={isActive:!1,isDisabled:!1},Ce.propTypes={children:o.a.node.isRequired,isActive:o.a.bool,isDisabled:o.a.bool,onClick:o.a.func};var ke=Ce,Ee=a(12),Ne=a.n(Ee);function xe({children:e,className:t,isOpen:a,placement:n,header:i}){return r.a.createElement("div",{className:l()(Ne.a.menu,Ne.a[n.horizontal],Ne.a[n.vertical],{[Ne.a.open]:a},t)},i&&a&&r.a.createElement("h3",{className:Ne.a.menuHeader},i),r.a.createElement("ul",null,a&&e))}xe.defaultProps={isOpen:!0,placement:{horizontal:"left",vertical:"bottom"}},xe.propTypes={children:o.a.node.isRequired,className:o.a.string,isOpen:o.a.bool,header:o.a.string,placement:o.a.shape({horizontal:o.a.oneOf(["right","left"]),vertical:o.a.oneOf(["top","bottom"])})};var Pe=xe,we=a(25),Te=a.n(we);function Re({children:e,className:t},a){return r.a.createElement("div",{ref:a,className:l()(Te.a.menuContainer,t)},e)}var qe=Object(n.forwardRef)(Re),Ie=a(22),ze=a.n(Ie);function Ae({children:e,className:t,isActive:a,onClick:n}){return r.a.createElement("li",{className:l()(ze.a.menuItem,{[ze.a.active]:a},t),onClick:n},e)}Ae.defaultProps={isActive:!1},Ae.propTypes={children:o.a.node.isRequired,className:o.a.string,isActive:o.a.bool,onClick:o.a.func};var je=Ae,Se=a(23),Ve=a.n(Se);function Ke(){return(Ke=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function De({as:e,children:t,className:a,icon:n,...i}){return r.a.createElement(e,Ke({"data-testid":"menu-link-item",className:l()(Ve.a.menuLinkItem,a)},i),n&&r.a.createElement("img",{"data-testid":"menu-link-item-icon",className:Ve.a.menuLinkItemIcon,alt:n.alt,src:n.src}),t&&r.a.createElement("span",null,t))}De.defaultProps={as:"a"},De.propTypes={as:o.a.elementType,children:o.a.node,className:o.a.string,icon:o.a.shape({src:o.a.string.isRequired,alt:o.a.string.isRequired})};var Be=De,He=a(20),Le=a.n(He);function Je({children:e,isTransparent:t,isFixed:a,onClick:n}){return r.a.createElement("div",{"data-testid":"overlay",className:l()(Le.a.overlay,{[Le.a.transparent]:t,[Le.a.fixed]:a}),onClick:n},e)}Je.defaultProps={isTransparent:!1,isFixed:!1,onClick:()=>{}},Je.propTypes={children:o.a.arrayOf(o.a.node),isTransparent:o.a.bool,isFixed:o.a.bool,onClick:o.a.func};var Qe=Je,Me=a(6),Fe=a.n(Me);function Ze({children:e,className:t,icon:a,isDisabled:n,isInverted:i,isPlain:o,isActive:s,isTransparent:c,onClick:d,size:u}){return r.a.createElement("button",{className:l()(Fe.a.container,Fe.a[u],{[Fe.a.inverted]:i,[Fe.a.plain]:o,[Fe.a.active]:s,[Fe.a.transparent]:c},t),disabled:n,onClick:d,role:"button"},a&&r.a.createElement("img",{"data-testid":"button-icon",className:Fe.a.icon,src:a.src,alt:a.alt}),e&&r.a.createElement("span",null,e))}Ze.defaultProps={isDisabled:!1,isInverted:!1,isActive:!1,isPlain:!1,isTransparent:!1,size:"small"},Ze.propTypes={children:o.a.node,className:o.a.string,icon:o.a.shape({src:o.a.string.isRequired,alt:o.a.string.isRequired}),isActive:o.a.bool,isDisabled:o.a.bool,isInverted:o.a.bool,isPlain:o.a.bool,isTransparent:o.a.bool,onClick:o.a.func,size:o.a.oneOf(["small","medium","large"])};var Ue=Ze,We=a(14),Xe=a.n(We);function Ge({value:e,onChange:t,canIncrease:a,canDecrease:n,direction:i,isInverted:o,isPlain:s}){return r.a.createElement("div",{className:l()(Xe.a.container,Xe.a[i],{[Xe.a.plain]:s})},r.a.createElement(Ue,{onClick:()=>t(e-1),isInverted:o,isDisabled:!n,isPlain:!0},"−"),r.a.createElement("div",{className:Xe.a.value},e),r.a.createElement(Ue,{onClick:()=>t(e+1),isInverted:o,isDisabled:!a,isPlain:!0},"+"))}Ge.defaultProps={canIncrease:!0,canDecrease:!0,direction:"horizontal",isInverted:!1,isPlain:!1},Ge.propTypes={value:o.a.number.isRequired,onChange:o.a.func.isRequired,canIncrease:o.a.bool,canDecrease:o.a.bool,direction:o.a.oneOf(["horizontal","vertical"]),isInverted:o.a.bool,isPlain:o.a.bool};var Ye=Ge,$e=a(13),et=a.n($e);function tt({children:e,placement:t,isCentered:a,isPlain:n,isTransparent:i}){return r.a.createElement("nav",{"data-testid":"side-bar",className:l()(et.a.container,et.a[t],{[et.a.centered]:a,[et.a.plain]:n,[et.a.transparent]:i})},e)}tt.defaultProps={placement:"left",isCentered:!1,isPlain:!1,isTransparent:!1},tt.propTypes={children:o.a.node,placement:o.a.oneOf(["top","right","bottom","left"]),isCentered:o.a.bool,isPlain:o.a.bool,isTransparent:o.a.bool};var at=tt,nt=a(9),rt=a.n(nt);function it(){return(it=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function ot({as:e,children:t,className:a,icon:n,isInverted:i,isPlain:o,isTransparent:s,size:c,...d}){return r.a.createElement(e,it({"data-testid":"button-link",className:l()(rt.a.container,rt.a[c],{[rt.a.inverted]:i,[rt.a.plain]:o,[rt.a.transparent]:s},a)},d),n&&r.a.createElement("img",{"data-testid":"square-button-link-icon",className:rt.a.icon,alt:n.alt,src:n.src}),t&&r.a.createElement("span",null,t))}ot.defaultProps={as:"a",isInverted:!1,isPlain:!1,isTransparent:!1},ot.propTypes={as:o.a.elementType,children:o.a.node,className:o.a.string,icon:o.a.shape({src:o.a.string.isRequired,alt:o.a.string.isRequired}),isInverted:o.a.bool,isPlain:o.a.bool,isTransparent:o.a.bool,size:o.a.oneOf(["small","medium","large"])};var st=ot,lt=a(24),ct=a.n(lt);function dt({label:e,onChange:t,placeholder:a,value:n,type:i}){return r.a.createElement("label",{className:ct.a.textLabel},e,r.a.createElement("input",{className:ct.a.textInput,"data-testid":"input",onChange:t,placeholder:a,type:i,value:n,autoFocus:!0}))}dt.defaultProps={type:"text"},dt.propTypes={label:o.a.string.isRequired,onChange:o.a.func,placeholder:o.a.string,value:o.a.string.isRequired,type:o.a.oneOf(["text","password","email"])};var ut=dt,pt=a(15),ft=a.n(pt);function mt({children:e,image:t,buttons:a,onClick:n}){return r.a.createElement("div",{className:l()(ft.a.toast),onClick:n,"data-testid":"toast"},t&&r.a.createElement("img",{"data-testid":"toast-image",className:ft.a.toastImage,src:t.src,alt:t.alt}),r.a.createElement("div",{className:ft.a.toastContent},e),r.a.createElement("div",{className:ft.a.toastButtons},a))}mt.defaultProps={onClick:()=>{}},mt.propTypes={children:o.a.node,buttons:o.a.arrayOf(o.a.node),image:o.a.shape({alt:o.a.string.isRequired,src:o.a.string.isRequired}),onClick:o.a.func};var yt=mt,ht=a(26),vt=a.n(ht);function bt({children:e}){return r.a.createElement("div",{className:l()(vt.a.toastContainer),"data-testid":"toast-container"},e)}bt.propTypes={children:o.a.node};var gt=bt,_t=a(10),Ot=a.n(_t);function Ct({src:e,type:t,muted:a,loop:n,autoPlay:i,layout:o,children:s}){return s?r.a.createElement("div",{className:Ot.a.videoContainer},r.a.createElement("video",{"data-testid":"video",crossOrigin:"anonymous",className:l()(Ot.a.video,Ot.a[o]),src:e,type:t,muted:a,loop:n,autoPlay:i,playsInline:!0}),s&&r.a.createElement("div",{className:Ot.a.videoOverlay},s)):r.a.createElement("video",{"data-testid":"video",crossOrigin:"anonymous",className:l()(Ot.a.video,Ot.a[o]),src:e,type:t,muted:a,loop:n,autoPlay:i,playsInline:!0})}Ct.defaultProps={muted:!0,loop:!0,autoPlay:!0,layout:"contain"},Ct.propTypes={src:o.a.string.isRequired,type:o.a.string.isRequired,layout:o.a.oneOf(["cover","contain","stretchHorizontally","stretchVertically"]),autoPlay:o.a.bool,loop:o.a.bool,muted:o.a.bool,children:o.a.node};var kt=Ct}]));

package/dist/styles.css

@@ -0,0 +1,1110 @@
+._2AasuMOuypf72nbY49wOB3 {
+  --button-size: var(--theme-button-height, 42px);
+
+  align-items: center;
+  background-color: var(--theme-button-background-color, #fff);
+  border: none;
+  box-shadow: var(--theme-button-shadow, 0 0 12px 0 rgba(0, 0, 0, 0.1));
+  color: var(--theme-button-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--theme-button-font-family, helvetica, arial, sans-serif);
+  font-size: var(--theme-base-font-size, 15px);
+  font-weight: bold;
+  height: var(--button-size, 42px);
+  justify-content: center;
+  margin: 0;
+  padding: 0 calc(var(--button-size, 42px) * 0.55);
+  text-decoration: none;
+  text-transform: uppercase;
+  transform: scale(1);
+  transition: all 0.1s ease-out;
+  white-space: nowrap;
+}
+
+._2AasuMOuypf72nbY49wOB3:focus {
+  outline: none;
+}
+
+._2AasuMOuypf72nbY49wOB3:hover {
+  background-color: var(--theme-button-hover-background-color, #ddd);
+}
+
+._2AasuMOuypf72nbY49wOB3:active {
+  transform: scale(0.95);
+}
+
+._2AasuMOuypf72nbY49wOB3:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+._2AasuMOuypf72nbY49wOB3._2ccWTBUojwulFi4_HMdqrU {
+  --button-size: var(--theme-button-height-medium, 52px);
+}
+
+._2AasuMOuypf72nbY49wOB3._1fa3qv5sR2TPR6fpOfo5vm {
+  --button-size: var(--theme-button-height-large, 72px);
+}
+
+._2AasuMOuypf72nbY49wOB3._2UYh9mgKjtU23uNhD83Ocx {
+  background-color: var(--theme-button-foreground-color, #0e0e0f);
+  color: var(--theme-button-background-color, #fff);
+}
+
+._2AasuMOuypf72nbY49wOB3._3Z4Ktcy3wzAy44gorESgVr {
+  border-radius: calc(var(--button-size, 42px) / 2);
+  padding: 0 calc(var(--button-size, 42px) * 0.6);
+}
+
+._2AasuMOuypf72nbY49wOB3._3904xHhy3YVRabzbm2Jp1m {
+  box-shadow: none;
+}
+
+._2AasuMOuypf72nbY49wOB3._2KgQIC54C7daQQvv2yx2AJ {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+._2AasuMOuypf72nbY49wOB3.vOIaBw3isf1BgJt3BtMaB {
+  width: 100%;
+}
+
+._2AasuMOuypf72nbY49wOB3._2U6VwL29C2GriKDmpfnGs7 {
+  height: 100%;
+}
+
+._8KOnJz0dKoQE4u5VPMox_ {
+  height: calc(var(--theme-button-height, 42px) / 2.667);
+  margin-right: calc(var(--theme-button-height, 42px) / 2);
+}
+
+._8KOnJz0dKoQE4u5VPMox_:last-child {
+  margin-right: 0;
+}
+
+._2AasuMOuypf72nbY49wOB3._2ccWTBUojwulFi4_HMdqrU > ._8KOnJz0dKoQE4u5VPMox_ {
+  height: calc(var(--theme-button-height-medium, 52px) / 2.667);
+}
+
+._2AasuMOuypf72nbY49wOB3._1fa3qv5sR2TPR6fpOfo5vm > ._8KOnJz0dKoQE4u5VPMox_ {
+  height: calc(var(--theme-button-height-large, 72px) / 2.667);
+}
+
+.UFhkzqhonCpQ51u4CrX1t {
+  --button-size: var(--theme-button-height, 42px);
+
+  align-items: center;
+  background-color: var(--theme-button-background-color, #fff);
+  border: none;
+  box-shadow: var(--theme-button-shadow, 0 0 12px 0 rgba(0, 0, 0, 0.1));
+  box-sizing: border-box;
+  color: var(--theme-button-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--theme-button-font-family, helvetica, arial, sans-serif);
+  font-size: var(--theme-base-font-size, 15px);
+  font-weight: bold;
+  height: var(--button-size, 42px);
+  justify-content: center;
+  margin: 0;
+  padding: 0 calc(var(--button-size, 42px) * 0.55);
+  text-decoration: none;
+  text-transform: uppercase;
+  transform: scale(1);
+  transition: all 0.1s ease-out;
+  white-space: nowrap;
+  width: min-content;
+}
+
+.UFhkzqhonCpQ51u4CrX1t:focus {
+  outline: none;
+}
+
+.UFhkzqhonCpQ51u4CrX1t:hover {
+  background-color: var(--theme-button-hover-background-color, #ddd);
+}
+
+.UFhkzqhonCpQ51u4CrX1t:active {
+  transform: scale(0.95);
+}
+
+.UFhkzqhonCpQ51u4CrX1t.K8wju_yT6BBEkxQSvBbji {
+  --button-size: var(--theme-button-height-medium, 52px);
+}
+
+.UFhkzqhonCpQ51u4CrX1t.xa9TOtXuvIjYcON9CWpZE {
+  --button-size: var(--theme-button-height-large, 72px);
+}
+
+.UFhkzqhonCpQ51u4CrX1t._18tgJGtxaIy6IkZdJCUCR1 {
+  background-color: var(--theme-button-foreground-color, #0e0e0f);
+  color: var(--theme-button-background-color, #fff);
+}
+
+.UFhkzqhonCpQ51u4CrX1t._2_eDclH1w76FWyN-sgxrz4 {
+  border-radius: calc(var(--button-size, 42px) / 2);
+  padding: 0 calc(var(--button-size, 42px) * 0.6);
+}
+
+.UFhkzqhonCpQ51u4CrX1t._2ZKuEedcJa23LSU5bqlK3k {
+  box-shadow: none;
+}
+
+.UFhkzqhonCpQ51u4CrX1t._2OqcqOvkDlXkNFZCXCHjxj {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.UFhkzqhonCpQ51u4CrX1t.Pz69qX26v5M10VLHf4tGg {
+  width: 100%;
+}
+
+.UFhkzqhonCpQ51u4CrX1t._32S1q5WprWdhjszlCSXuaj {
+  height: 100%;
+}
+
+._3G2FW5nLwHekds3ceysrsT {
+  height: calc(var(--theme-button-height, 42px) / 2.667);
+  margin-right: calc(var(--theme-button-height, 42px) / 2);
+}
+
+._3G2FW5nLwHekds3ceysrsT:last-child {
+  margin-right: 0;
+}
+
+.UFhkzqhonCpQ51u4CrX1t.K8wju_yT6BBEkxQSvBbji > ._3G2FW5nLwHekds3ceysrsT {
+  height: calc(var(--theme-button-height-medium, 52px) / 2.667);
+}
+
+.UFhkzqhonCpQ51u4CrX1t.xa9TOtXuvIjYcON9CWpZE > ._3G2FW5nLwHekds3ceysrsT {
+  height: calc(var(--theme-button-height-large, 72px) / 2.667);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV {
+  --button-size: var(--theme-button-height, 42px);
+
+  align-items: center;
+  background-color: var(--theme-button-background-color, #fff);
+  border: none;
+  border-radius: var(--button-size);
+  box-shadow: var(--theme-button-shadow, 0 0 12px 0 rgba(0, 0, 0, 0.1));
+  color: var(--theme-button-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  font-size: var(--theme-base-font-size, 15px);
+  font-weight: bold;
+  height: var(--button-size);
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  text-transform: uppercase;
+  transform: scale(1);
+  transition: all 0.1s ease-out;
+  white-space: nowrap;
+  width: var(--button-size);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV.nfXZbsGD6SsCktuxGFXu6 {
+  --button-size: var(--theme-button-height-medium, 52px);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV._2Zy48EfiqyIO3OehZWEmTd {
+  --button-size: var(--theme-button-height-large, 72px);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV:focus {
+  outline: none;
+}
+
+.AvS0_YSbZqNZg8IWcaJwV:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.AvS0_YSbZqNZg8IWcaJwV:active {
+  transform: scale(0.95);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV:hover {
+  background-color: var(--theme-button-hover-background-color, #ddd);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV._3ICdtA8Bg_DxRZFwfG6fDp {
+  border: 1px solid var(--theme-button-background-color, #fff);
+  background-color: var(--theme-button-foreground-color, #0e0e0f);
+  color: var(--theme-button-background-color, #fff);
+}
+
+.AvS0_YSbZqNZg8IWcaJwV._38k8iyngPtp-gPtJ3KmGFJ {
+  box-shadow: none;
+}
+
+.AvS0_YSbZqNZg8IWcaJwV._3PtZ-HwHrieRv7vD5uLl-m {
+  background-color: transparent;
+  border: 2px solid var(--theme-button-foreground-color, #0e0e0f);
+  box-shadow: none;
+}
+
+.AvS0_YSbZqNZg8IWcaJwV._3PtZ-HwHrieRv7vD5uLl-m._3ICdtA8Bg_DxRZFwfG6fDp {
+  border: 2px solid var(--theme-button-background-color, #fff);
+}
+
+._3EkIuE-7jFloR2v7sxXnv3 {
+  height: calc(var(--theme-button-height, 42px) / 2.5);
+  margin-right: calc(var(--theme-button-height, 42px) / 2.5);
+}
+
+._3EkIuE-7jFloR2v7sxXnv3:last-child {
+  margin-right: 0;
+}
+
+.yiJjoznX0cApVlHDtWNBa {
+  --color-swatch-size: var(--theme-button-height, 42px);
+  --color-swatch-shadow: var(
+    --theme-button-shadow,
+    0 0 12px 0 rgba(0, 0, 0, 0.1)
+  );
+
+  border: 0;
+  border-radius: var(--color-swatch-size);
+  box-shadow: var(--color-swatch-shadow);
+  cursor: pointer;
+  height: var(--color-swatch-size);
+  transform: scale(1);
+  transition: all 0.1s ease-out;
+  width: var(--color-swatch-size);
+}
+
+.yiJjoznX0cApVlHDtWNBa:hover {
+  transform: scale(1.05);
+  box-shadow: var(--theme-button-hover-shadow, 0 0 15px 0 rgba(0, 0, 0, 0.15));
+}
+
+.yiJjoznX0cApVlHDtWNBa:not(._3Do97iq9wF8MYjO9AR3HT3):active {
+  transform: scale(0.9);
+}
+
+.yiJjoznX0cApVlHDtWNBa._3Do97iq9wF8MYjO9AR3HT3 {
+  --color-swatch-size: calc(var(--theme-button-height, 42px) * 1.5);
+
+  cursor: auto;
+}
+
+/*
+ * See https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link
+*/
+.Vhekl7q9lt78RlIgC1Hdy {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+._2g2BqoTSwr5yCrmpdh_gCf {
+  display: grid;
+  grid-gap: var(--theme-button-gap, 10px);
+}
+
+._2g2BqoTSwr5yCrmpdh_gCf._14LiU3lkvKCkq4objeCSc1 {
+  align-items: center;
+  grid-auto-flow: column;
+}
+
+._2g2BqoTSwr5yCrmpdh_gCf.wnePJrG71FxQHRavatNwN {
+  grid-auto-flow: row;
+  justify-items: center;
+}
+
+._308f1undwHPjgRJSQRl2kt {
+  background-color: var(--theme-modal-overlay-color, rgba(255, 255, 255, 0.9));
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9;
+}
+
+._2LtHDby-jXFLoVV3AW8_UC {
+  background-color: var(--theme-modal-background-color, #fff);
+  box-shadow: var(--theme-modal-shadow, 0 0 50px 0 rgba(0, 0, 0, 0.2));
+  outline: none;
+  overflow: auto;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+._169bRmV6JG9l2e_Z2cQ6HD {
+  bottom: var(--theme-outer-padding, 21px);
+  left: var(--theme-outer-padding, 21px);
+  position: fixed;
+  z-index: 11;
+}
+
+.FQuCidfLn1zXAIdtpAABK {
+  padding: var(--theme-confirmation-modal-padding, 42px 21px 21px 21px);
+}
+
+._3R3n7P4OiBE0Jiq3TqOsOz {
+  font-size: var(--theme-confirmation-modal-header-font-size, 2.5rem);
+  margin: 0;
+}
+
+._3BJi8ln7Dl1pAnoUvQAkZ {
+  display: grid;
+  grid-auto-flow: row;
+  row-gap: 1em;
+  padding: var(--theme-button-height, 42px) 0;
+}
+
+._9EfRpte56_FRO34zqwGML {
+  display: flex;
+  justify-content: space-between;
+}
+
+.-ZaLlNla8yzLCqW89ThVF {
+  display: flex;
+}
+
+.-ZaLlNla8yzLCqW89ThVF > * {
+  margin-right: var(--theme-button-gap, 10px);
+}
+
+.-ZaLlNla8yzLCqW89ThVF > *:last-child {
+  margin-right: 0;
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI {
+  display: flex;
+  position: fixed;
+  background-color: var(--theme-floating-panel-background-color, #fff);
+  box-shadow: var(--theme-floating-panel-shadow, 0 0 5px 0 rgba(0, 0, 0, 0.15));
+  z-index: 3;
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI._2HktRR2g9a4JtJirdzTXbS {
+  box-shadow: none;
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI._3RFf4eu5UC_7V_Msv7yeUt {
+  background-color: transparent;
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI._2Q3NnJ8ooZe2RGlWTuc4r_ {
+  top: var(--theme-outer-padding, 21px);
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI._2VkLrWqnR7jDIdWZhIL0Zl {
+  right: var(--theme-outer-padding, 21px);
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI._2rgmcVFgt9CSJUJ2t5aps0 {
+  bottom: var(--theme-outer-padding, 21px);
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI._1G69fno5OYu8tzvyqlU4xJ {
+  left: var(--theme-outer-padding, 21px);
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI.vgftmKcR9f0_bQ68wtMtK {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+._1sqc6n_4UBiDzd8CDlZQTI.Bn2UFVLeQOwrIbWvuKqNm {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+._3ga-5_2SfhLOfX-0-TDzHS {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._3gmrpbvtZtoO-SkCDcBUJA {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+._2nN1TMfQmlIA-AIvwXwDBJ {
+  display: block;
+}
+
+._2nN1TMfQmlIA-AIvwXwDBJ._199tBIf4h-Vim7lfnTpjc7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+._2nN1TMfQmlIA-AIvwXwDBJ._22u3ihmiMr6W6QAqeppKJR {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+._2nN1TMfQmlIA-AIvwXwDBJ._1Icfq_z7gaGwsndPrHnMis {
+  width: 100%;
+  max-width: 100%;
+}
+
+._2nN1TMfQmlIA-AIvwXwDBJ._3DaoKqEKFpY8KS-i9eGr4X {
+  height: 100%;
+  max-height: 100%;
+}
+
+._3QkI96grcOC6N6AVKQcRa6 {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+
+._3AnbCLyfrnJelaXyVxVtcp {
+  background-color: var(--theme-list-view-background-color, #fff);
+  border-bottom: 1px solid var(--theme-list-view-border-color, #ddd);
+  color: var(--theme-list-view-foreground-color, #0e0e0f);
+  cursor: pointer;
+  font-weight: 500;
+  margin: 0;
+  padding: 20px 15px 25px 15px;
+  text-transform: capitalize;
+  white-space: nowrap;
+}
+
+._17CIizo0l5sRULrvwtfdQN {
+  list-style: none;
+  margin: 0;
+  max-height: 100%;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.B13tTn7sk_tPdI3R9OJJK {
+  border-bottom: 1px solid var(--theme-list-view-border-color, #ddd);
+  text-decoration: none;
+}
+
+.sKY7x7Mk3_qLAitiDnZlB {
+  background-color: var(--theme-list-view-background-color, #fff);
+  border: none;
+  color: var(--theme-list-view-foreground-color, #0e0e0f);
+  cursor: pointer;
+  font-family: var(--theme-list-view-item-font-family, sans-serif);
+  font-size: var(--theme-list-view-item-font-size, 1rem);
+  font-weight: var(--theme-list-view-item-font-weight, 500);
+  height: 100%;
+  padding: 15px;
+  text-align: left;
+  text-decoration: none;
+  transition: all 0.1s ease-out;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.sKY7x7Mk3_qLAitiDnZlB._2h0KyxjhJpxxNZqKe2dJ_b {
+  background-color: var(--theme-list-view-foreground-color, #0e0e0f);
+  color: var(--theme-list-view-background-color, #fff);
+}
+
+.sKY7x7Mk3_qLAitiDnZlB:focus {
+  outline: none;
+}
+
+.sKY7x7Mk3_qLAitiDnZlB:active {
+  transform: scale(0.9);
+}
+
+.sKY7x7Mk3_qLAitiDnZlB:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.B13tTn7sk_tPdI3R9OJJK:last-child {
+  border-bottom: none;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc {
+  box-shadow: var(--theme-menu-shadow, 0 0 15px 0 rgba(0, 0, 0, 0.15));
+  max-height: var(--theme-menu-max-height, 50vh);
+  min-width: var(--theme-menu-min-width, 5vw);
+  overflow-y: auto;
+  position: absolute;
+  z-index: 1;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc._2HY5pU1J95rFNADHVnqqKp.pzllfXC5M7IZ6FFZivQhj {
+  margin-bottom: var(--theme-menu-margin, 15px);
+  bottom: 100%;
+  right: 0;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc._2HY5pU1J95rFNADHVnqqKp._1dhYc9BwcrlMIr4OAbQFxr {
+  margin-bottom: var(--theme-menu-margin, 15px);
+  bottom: 100%;
+  left: 0;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc._2aWOUP6bObYrXJNzLXcH1g.pzllfXC5M7IZ6FFZivQhj {
+  margin-top: var(--theme-menu-margin, 15px);
+  top: 100%;
+  right: 0;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc._2aWOUP6bObYrXJNzLXcH1g._1dhYc9BwcrlMIr4OAbQFxr {
+  margin-top: var(--theme-menu-margin, 15px);
+  top: 100%;
+  left: 0;
+}
+
+.q_oxs63VcG5Ch5zl7b_Pc._1Jo1EF12l-iCNSZfDdzamZ {
+  -webkit-animation: _3kMaWvfYxfu7tnK2q7NNms 0.5s ease-in-out both;
+  animation: _3kMaWvfYxfu7tnK2q7NNms 0.5s ease-in-out both;
+}
+
+._2Uclm_J5zdCpbmc91tcF4z {
+  background-color: var(--theme-list-view-background-color, #fff);
+  border-bottom: 1px solid var(--theme-list-view-border-color, #ddd);
+  color: var(--theme-list-view-foreground-color, #0e0e0f);
+  cursor: pointer;
+  font-weight: 500;
+  margin: 0;
+  padding: 20px 15px 25px 15px;
+  text-transform: capitalize;
+  white-space: nowrap;
+}
+
+@-webkit-keyframes _3kMaWvfYxfu7tnK2q7NNms {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes _3kMaWvfYxfu7tnK2q7NNms {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.-VxSGog20HxlgG6MV2J8u {
+  display: inline-block;
+  position: relative;
+}
+
+._22iDagQ2p2kJrO6oxWOF1s {
+  background-color: var(--theme-menu-background-color, #fff);
+  border-bottom: 1px solid var(--theme-menu-border-color, #ddd);
+  color: var(--theme-menu-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-family: var(--theme-menu-item-font-family, sans-serif);
+  font-weight: var(--theme-menu-item-font-weight, 500);
+  height: var(--theme-menu-item-height, 42px);
+  padding: 0 15px;
+  white-space: nowrap;
+}
+
+._22iDagQ2p2kJrO6oxWOF1s._3wWA2riaj0K_s7Xk06NS50 {
+  background-color: var(--theme-menu-foreground-color, #0e0e0f);
+  color: var(--theme-menu-background-color, #fff);
+  text-decoration: none;
+}
+
+._22iDagQ2p2kJrO6oxWOF1s:hover {
+  background-color: var(--theme-menu-hover-background-color, #ddd);
+}
+
+._22iDagQ2p2kJrO6oxWOF1s:last-child {
+  border-bottom: none;
+}
+
+.OJm9CQ8ijhCEtebr_52wh {
+  background-color: var(--theme-menu-background-color, #fff);
+  border-bottom: 1px solid var(--theme-menu-border-color, #ddd);
+  color: var(--theme-menu-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-family: var(--theme-menu-item-font-family, sans-serif);
+  font-weight: var(--theme-menu-item-font-weight, 500);
+  height: var(--theme-menu-item-height, 42px);
+  padding: 0 15px;
+  white-space: nowrap;
+}
+
+.OJm9CQ8ijhCEtebr_52wh._3wpGy0p2m2C-rbEOo6m9c1 {
+  background-color: var(--theme-menu-foreground-color, #0e0e0f);
+  color: var(--theme-menu-background-color, #fff);
+  text-decoration: none;
+}
+
+.OJm9CQ8ijhCEtebr_52wh:hover {
+  background-color: var(--theme-menu-hover-background-color, #ddd);
+}
+
+._1RDKAqO0ugO2ZeJtFhlUOC:last-child {
+  border-bottom: none;
+}
+
+._3e9mPRDpiOaq-H_25ofB8Y {
+  height: calc(var(--theme-menu-item-height, 42px) / 2);
+  width: calc(var(--theme-menu-item-height, 42px) / 2);
+  margin-right: calc(var(--theme-menu-item-height, 42px) / 2);
+}
+
+._3e9mPRDpiOaq-H_25ofB8Y:last-child {
+  margin-right: 0;
+}
+
+._1eunm7CzhVJQdjeXfMO5V7 {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(
+    --theme-overlay-background-color,
+    rgba(240, 240, 240, 0.75)
+  );
+}
+
+._1eunm7CzhVJQdjeXfMO5V7._3T4uZyMYIWyfVw9gqdOCUl {
+  background-color: transparent;
+}
+
+._1eunm7CzhVJQdjeXfMO5V7._28xhqgctgfmBAGJeV8gb-G {
+  position: fixed;
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10 {
+  --button-size: var(--theme-button-height, 42px);
+
+  align-items: center;
+  background-color: var(--theme-button-background-color, #fff);
+  border: none;
+  box-shadow: var(--theme-button-shadow, 0 0 12px 0 rgba(0, 0, 0, 0.1));
+  color: var(--theme-button-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  font-size: var(--theme-base-font-size, 15px);
+  font-weight: bold;
+  height: var(--button-size);
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  text-transform: uppercase;
+  transform: scale(1);
+  transition: all 0.1s ease-out;
+  white-space: nowrap;
+  width: var(--button-size);
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10._3UTD5rXy8pHInbyfAISfLM {
+  --button-size: var(--theme-button-height-medium, 52px);
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10._2wAE1TI9UtoiVq8_mQ85zY {
+  --button-size: var(--theme-button-height-large, 72px);
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10:focus {
+  outline: none;
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10:active {
+  transform: scale(0.95);
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10:hover {
+  background-color: var(--theme-button-hover-background-color, #ddd);
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10.DTmrJKQW_p69bmIfnz6pJ {
+  border: 1px solid var(--theme-button-background-color, #fff);
+  background-color: var(--theme-button-foreground-color, #0e0e0f);
+  color: var(--theme-button-background-color, #fff);
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10._2Qo01PXIf_n07WdjfgRnsB {
+  box-shadow: none;
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10._3bAFtWXUmgiVGOMoaqkNYk {
+  background-color: transparent;
+  border: 2px solid var(--theme-button-foreground-color, #0e0e0f);
+  box-shadow: none;
+}
+
+._1hWS8Ctp_Xoptl5yH4iK10._3bAFtWXUmgiVGOMoaqkNYk.DTmrJKQW_p69bmIfnz6pJ {
+  border: 2px solid var(--theme-button-background-color, #fff);
+}
+
+._3_TEIn-NvzG9z0gRRz-iwm {
+  height: calc(var(--theme-button-height, 42px) / 2.5);
+  width: calc(var(--theme-button-height, 42px) / 2.5);
+  margin-right: calc(var(--theme-button-height, 42px) / 2.5);
+}
+
+._3_TEIn-NvzG9z0gRRz-iwm:last-child {
+  margin-right: 0;
+}
+
+._1dDJngMZQG8QQzFLctmraM {
+  display: flex;
+  box-shadow: var(--theme-button-shadow, 0 0 12px 0 rgba(0, 0, 0, 0.1));
+}
+
+._1dDJngMZQG8QQzFLctmraM._25nBC8iOAPkHb9XxAbYeQW {
+  flex-direction: row;
+}
+
+._1dDJngMZQG8QQzFLctmraM._2FsnjtVSCtrk0PNYFIq0QW {
+  flex-direction: column-reverse;
+  width: calc(var(--theme-button-height, 42px) * 1.22);
+}
+
+._1dDJngMZQG8QQzFLctmraM._24Mr2LJsbWa5VZsaruDt7Q {
+  box-shadow: none;
+}
+
+._3Y6XivFLEzCt-oiO_Be6lU {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--theme-button-height, 42px);
+  padding: 0 calc(var(--theme-button-height, 42px) * 0.5);
+  background-color: var(--theme-input-background-color, #ededed);
+}
+
+._2uj0x284WZRoLuqbYbDDuZ {
+  display: flex;
+  position: fixed;
+  justify-content: space-between;
+  background-color: var(--theme-sidebar-background-color, #fff);
+  box-shadow: var(--theme-sidebar-shadow, 0 0 5px 0 rgba(0, 0, 0, 0.15));
+  z-index: 1;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ.hjjyi0HLSUpPZ9OYA_FTb {
+  justify-content: center;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ._20vjyXFLbe54KpwBbacI9c {
+  box-shadow: none;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ._16gfL52F7P1xtVV5V1GmCl {
+  background-color: transparent;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ.H-stPL7EAX_KqvWT1yHqL {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ._26dfvTjUBINkM9lFRDrb_1 {
+  flex-direction: column;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ._3ce4Yf087jEJh-3qqI0YWW {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+._2uj0x284WZRoLuqbYbDDuZ._2iHyB1aJyeJxEkdZg0qj-s {
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+._28diEMRpUad1Q1fibH6MyE {
+  --button-size: var(--theme-button-height, 42px);
+
+  align-items: center;
+  background-color: var(--theme-button-background-color, #fff);
+  border: none;
+  box-shadow: var(--theme-button-shadow, 0 0 12px 0 rgba(0, 0, 0, 0.1));
+  color: var(--theme-button-foreground-color, #0e0e0f);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--theme-button-font-family, helvetica, arial, sans-serif);
+  font-size: var(--theme-base-font-size, 15px);
+  font-weight: bold;
+  height: var(--button-size);
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  text-transform: uppercase;
+  transform: scale(1);
+  transition: all 0.1s ease-out;
+  white-space: nowrap;
+  width: var(--button-size);
+}
+
+._28diEMRpUad1Q1fibH6MyE.lwlqUJXbDtDlGiMAiIKrF {
+  --button-size: var(--theme-button-height-medium, 52px);
+}
+
+._28diEMRpUad1Q1fibH6MyE._32ZovUZ4J2RO7cnxyUPb7x {
+  --button-size: var(--theme-button-height-large, 72px);
+}
+
+._28diEMRpUad1Q1fibH6MyE:focus {
+  outline: none;
+}
+
+._28diEMRpUad1Q1fibH6MyE:hover {
+  background-color: var(--theme-button-hover-background-color, #ddd);
+}
+
+._28diEMRpUad1Q1fibH6MyE:active {
+  transform: scale(0.95);
+}
+
+._28diEMRpUad1Q1fibH6MyE._2XQZsbpYzbsJnCIM86qfew {
+  background-color: var(--theme-button-foreground-color, #0e0e0f);
+  color: var(--theme-button-background-color, #fff);
+}
+
+._28diEMRpUad1Q1fibH6MyE._3EqQ8mVn6bLSejinL1nUWP {
+  box-shadow: none;
+}
+
+._28diEMRpUad1Q1fibH6MyE._1zT9Ow7Zr1mvYS3pSTIs4_ {
+  background-color: transparent;
+  border: 2px solid var(--theme-button-foreground-color, #0e0e0f);
+  box-shadow: none;
+}
+
+._28diEMRpUad1Q1fibH6MyE._1zT9Ow7Zr1mvYS3pSTIs4_._2XQZsbpYzbsJnCIM86qfew {
+  border: 2px solid var(--theme-button-background-color, #fff);
+}
+
+.gAo1poaczpfncRiW2B32Z {
+  height: calc(var(--theme-button-height, 42px) / 2.5);
+  margin-right: calc(var(--theme-button-height, 42px) / 2);
+}
+
+.gAo1poaczpfncRiW2B32Z:last-child {
+  margin-right: 0;
+}
+
+._3fgDyPSknZVO1tT3fpmw6G {
+  background-color: var(--theme-input-background-color, #ededed);
+  border: none;
+  box-sizing: border-box;
+  font-size: var(--theme-input-font-size, 2rem);
+  font-weight: var(--theme-input-font-weight, 500);
+  outline: none;
+  padding: 1rem 2rem;
+  width: 100%;
+}
+
+._3fgDyPSknZVO1tT3fpmw6G:focus {
+  background-color: var(--theme-input-background-color-focus, #e3e3e3);
+}
+
+._198R9u8Ak_N3w7GJKgN4QX {
+  font-family: var(--theme-input-label-font-family, sans-serif);
+  font-weight: 500;
+  margin-bottom: 0.5em;
+}
+
+._2oDAMdGscA7a-r3fJVYT4y {
+  -webkit-animation: _2xe-xU-Wr7wQmdtigV88uw 0.5s ease-in-out both;
+  animation: _2xe-xU-Wr7wQmdtigV88uw 0.5s ease-in-out both;
+  background-color: var(--theme-toast-background-color, #fff);
+  box-shadow: var(--theme-toast-shadow, 0 0 15px 0 rgba(0, 0, 0, 0.15));
+  cursor: pointer;
+  display: flex;
+  height: var(--theme-toast-height, 60px);
+  justify-content: space-between;
+  min-width: var(--theme-toast-min-width, 40vw);
+}
+
+._13HMC8BVI57yGHbSHosAXQ {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  font-size: var(--theme-toast-font-size, 0.85rem);
+  padding: var(--theme-toast-padding, 10px 60px 10px 25px);
+}
+
+._13HMC8BVI57yGHbSHosAXQ h1,
+h2,
+h3,
+h4 {
+  font-size: var(--theme-toast-heading-font-size, 1.2rem);
+  line-height: 1.35em;
+  margin: 0;
+}
+
+.bstIGBKksyAHdkP6fx9JN {
+  height: 100%;
+}
+
+._37JXerbZedQiyzUOc889kB {
+  display: flex;
+}
+
+._37JXerbZedQiyzUOc889kB > * {
+  margin-left: var(--theme-button-gap, 8px);
+}
+
+._37JXerbZedQiyzUOc889kB > *:first-child {
+  margin-left: none;
+}
+
+@-webkit-keyframes _2xe-xU-Wr7wQmdtigV88uw {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes _2xe-xU-Wr7wQmdtigV88uw {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.m8Ob4c2odriI4-R5RUozy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(var(--theme-button-height, 30px) * 1.5);
+  z-index: 20;
+}
+
+.m8Ob4c2odriI4-R5RUozy > * {
+  margin: var(--theme-toast-margin, 5px);
+}
+
+.s-h4Xsi7NaPueKevx2S5q {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._7ibfehQJ_B3QKJgPBrPOo {
+  display: block;
+}
+
+._7ibfehQJ_B3QKJgPBrPOo._3H90ULnn3Kzm9SHtLoOENk {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+._7ibfehQJ_B3QKJgPBrPOo._2NZhXAL1DIwphorQWgQEh- {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+._7ibfehQJ_B3QKJgPBrPOo._1VYh1GNvAnH2t2YSoMJ-ww {
+  width: 100%;
+}
+
+._7ibfehQJ_B3QKJgPBrPOo._2ZBppPYj0eYG08Zwt2TWqS {
+  height: 100%;
+}
+
+._3VokDlaSvuSkA6d6uzvJx2 {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@touchtech/baselayer-ui",
+  "version": "1.0.0",
+  "description": "React UI component library",
+  "main": "dist/bundle.js",
+  "scripts": {
+    "start": "start-storybook",
+    "eslint": "eslint --ignore-path .gitignore",
+    "lint:js": "npm run eslint -- \"**/*.js\"",
+    "stylelint": "stylelint --ignore-path .gitignore",
+    "lint:css": "npm run stylelint -- \"**/*.css\"",
+    "lint": "run-p lint:js lint:css",
+    "lint-fix": "run-p \"lint:** -- --fix\"",
+    "build": "webpack",
+    "prettier": "prettier --ignore-path .gitignore",
+    "format": "npm run prettier -- --list-different \"**/*.{css,html,js,json}\"",
+    "format-fix": "npm run prettier -- --write \"**/*.{css,html,js,json}\"",
+    "check": "run-p lint format \"test -- --coverage\"",
+    "fix": "run-s lint-fix format-fix",
+    "test": "jest",
+    "prepublish": "npm run check && npm run build",
+    "build-storybook": "build-storybook -c .storybook -o .out"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "Steffen Stratz",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@storybook/addon-centered": "^5.3.19",
+    "@storybook/addon-storysource": "^5.3.19",
+    "@storybook/react": "^5.3.19",
+    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/react": "^10.4.3",
+    "babel-jest": "^26.1.0",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.3.1",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.1.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "style-loader": "^1.2.1",
+    "stylelint": "^13.6.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-prettier": "^1.1.2",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "prop-types": "^15.7.2",
+    "react-hotkeys-hook": "^2.1.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TouchtechAB/baselayer-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TouchtechAB/baselayer-ui/issues"
+  },
+  "homepage": "https://github.com/TouchtechAB/baselayer-ui#readme"
+}