@wireapp/react-ui-kit 8.7.3 → 8.8.2

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.8.1...@wireapp/react-ui-kit@8.8.2) (2022-07-15)
+
+
+### Bug Fixes
+
+* centre align auth screen checkbox(ACC-207) ([#4330](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4330)) ([8936691](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/8936691f86ecb36e40c4652e376188dfa84aba33))
+
+
+
+
+
+## [8.8.1](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.8.0...@wireapp/react-ui-kit@8.8.1) (2022-07-08)
+
+
+### Bug Fixes
+
+* **react-ui-kit:** fix select component current value empty ([#4324](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4324)) ([6bbe8e2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/6bbe8e27e2a02586a294ce751a8ecd7ee0d8b57a))
+
+
+
+
+
+# [8.8.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.7.3...@wireapp/react-ui-kit@8.8.0) (2022-07-07)
+
+
+### Features
+
+* update icon button to use new theming ([#4321](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4321)) ([9776175](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/97761751b89d4fa214e4c5468357a6826570ea18))
+
+
+
+
+
 ## [8.7.3](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.7.2...@wireapp/react-ui-kit@8.7.3) (2022-07-07)
 
 **Note:** Version bump only for package @wireapp/react-ui-kit

package/package.json

@@ -67,6 +67,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.7.3",
-  "gitHead": "d337f26edd891dc23c00212e4d1a1d8f4f8c1752"
+  "version": "8.8.2",
+  "gitHead": "bbe98e85b48966ae66bb4439f6560d0920368063"
 }

package/src/Form/Checkbox.d.ts

@@ -6,9 +6,11 @@ import { InputProps } from './Input';
 export interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {
     disabled?: boolean;
     markInvalid?: boolean;
+    alignCenter?: boolean;
 }
 interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
     id?: string;
+    alignCenter?: boolean;
 }
 export declare const Checkbox: React.FC<CheckboxProps<HTMLInputElement>>;
 export declare type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;

package/src/Form/Checkbox.js

@@ -38,13 +38,15 @@ var filterStyledLabelProps = function filterStyledLabelProps(props) {
 
 var StyledLabel = function StyledLabel(props) {
   var disabled = props.disabled,
-      markInvalid = props.markInvalid;
+      markInvalid = props.markInvalid,
+      _props$alignCenter = props.alignCenter,
+      alignCenter = _props$alignCenter === void 0 ? false : _props$alignCenter;
   return (0, _react.jsx)("label", (0, _extends2["default"])({
     css: function css(theme) {
       var _objectSpread2, _objectSpread3;
 
       return _objectSpread(_objectSpread((_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
-        background: "".concat(disabled ? theme.checkbox.disablecheckedBgColor : theme.general.primaryColor),
+        background: "".concat(disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor),
         borderColor: theme.general.primaryColor
       }), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME, ":checked + & > svg"), {
         fill: theme.general.backgroundColor
@@ -56,11 +58,11 @@ var StyledLabel = function StyledLabel(props) {
       }), _objectSpread2), !disabled && (0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
         borderColor: theme.general.primaryColor
       })), {}, (_objectSpread3 = {}, (0, _defineProperty2["default"])(_objectSpread3, ".".concat(_Input.INPUT_CLASSNAME, " + &::before"), _objectSpread(_objectSpread({
-        background: disabled ? theme.checkbox.disableBgColor : theme.checkbox.background
+        background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background
       }, !disabled ? {
-        border: markInvalid ? "1.5px solid ".concat(theme.checkbox.invalidBorderColor) : "1.5px solid ".concat(theme.checkbox.border)
+        border: markInvalid ? "1.5px solid ".concat(theme.Checkbox.invalidBorderColor) : "1.5px solid ".concat(theme.Checkbox.border)
       } : {
-        border: "1.5px solid ".concat(theme.checkbox.disableBorderColor)
+        border: "1.5px solid ".concat(theme.Checkbox.disableBorderColor)
       }), {}, {
         borderRadius: '3px',
         boxSizing: 'border-box',
@@ -71,7 +73,7 @@ var StyledLabel = function StyledLabel(props) {
         lineHeight: 1.4,
         margin: '0 8px 0 0px',
         color: theme.general.color
-      })), (0, _defineProperty2["default"])(_objectSpread3, "a", _objectSpread({}, (0, _Text.textLinkStyle)(theme, {}))), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "margin", '0 0 0 -16px'), (0, _defineProperty2["default"])(_objectSpread3, "width", '100%'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), _objectSpread3));
+      })), (0, _defineProperty2["default"])(_objectSpread3, "a", _objectSpread({}, (0, _Text.textLinkStyle)(theme, {}))), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "margin", '0 0 0 -16px'), (0, _defineProperty2["default"])(_objectSpread3, "width", alignCenter ? 'auto' : '100%'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), _objectSpread3));
     }
   }, filterStyledLabelProps(props)), props.children, (0, _react.jsx)("svg", {
     width: "15",
@@ -125,7 +127,8 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
   }, filterCheckboxProps(props))), (0, _react.jsx)(StyledLabel, {
     htmlFor: id,
     disabled: disabled,
-    markInvalid: props.markInvalid
+    markInvalid: props.markInvalid,
+    alignCenter: props.alignCenter
   }, children));
 });
 

package/src/Form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","theme","INPUT_CLASSNAME","background","checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","children","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","Math","random","toString","style","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel","COLOR","TEXT","a","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst StyledLabel = (props: StyledLabelProps) => {\n  const {disabled, markInvalid} = props;\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${disabled ? theme.checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n          borderColor: theme.general.primaryColor,\n        },\n        [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n          fill: theme.general.backgroundColor,\n        },\n        [`.${INPUT_CLASSNAME} + & > svg`]: {\n          fill: 'none',\n          position: 'absolute',\n          left: '0.25rem',\n          top: '0.25rem',\n        },\n        ...(!disabled && {\n          [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n            borderColor: theme.general.primaryColor,\n          },\n        }),\n        [`.${INPUT_CLASSNAME} + &::before`]: {\n          background: disabled ? theme.checkbox.disableBgColor : theme.checkbox.background,\n          ...(!disabled\n            ? {\n                border: markInvalid\n                  ? `1.5px solid ${theme.checkbox.invalidBorderColor}`\n                  : `1.5px solid ${theme.checkbox.border}`,\n              }\n            : {\n                border: `1.5px solid ${theme.checkbox.disableBorderColor}`,\n              }),\n          borderRadius: '3px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          width: '22px',\n          height: '22px',\n          lineHeight: 1.4,\n          margin: '0 8px 0 0px',\n          color: theme.general.color,\n        },\n        a: {\n          ...textLinkStyle(theme, {}),\n        },\n        position: 'relative',\n        margin: '0 0 0 -16px',\n        width: '100%',\n        lineHeight: 1.4,\n        display: 'flex',\n        opacity: disabled ? 0.56 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      })}\n      {...filterStyledLabelProps(props)}\n    >\n      {props.children}\n      <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n      </svg>\n    </label>\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\n// We use Math.random..., because some of apps doesn't migrated to newest version of React.\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, ...props}, ref) => (\n  <div\n    css={(theme: Theme) => ({\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      position: 'relative',\n      left: '-0.3rem',\n      [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n        outline: `1px solid ${theme.general.primaryColor}`,\n        outlineOffset: '0.4rem',\n      },\n    })}\n    style={style}\n  >\n    <input\n      type=\"checkbox\"\n      id={id}\n      style={{\n        height: '22px',\n        marginBottom: '0',\n        opacity: 0,\n        width: '22px',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      disabled={disabled}\n      ref={ref}\n      className={INPUT_CLASSNAME}\n      {...filterCheckboxProps(props)}\n    />\n\n    <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid}>\n      {children}\n    </StyledLabel>\n  </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        color,\n        ...props,\n      }),\n      a: {\n        color: COLOR.LINK,\n        textDecoration: 'none',\n      },\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","alignCenter","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","children","filterCheckboxProps","React","forwardRef","ref","id","Math","random","toString","style","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel","COLOR","TEXT","a","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n  disabled?: boolean;\n  markInvalid?: boolean;\n  alignCenter?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst StyledLabel = (props: StyledLabelProps) => {\n  const {disabled, markInvalid, alignCenter = false} = props;\n  return (\n    <label\n      css={(theme: Theme) => ({\n        [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n          background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n          borderColor: theme.general.primaryColor,\n        },\n        [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n          fill: theme.general.backgroundColor,\n        },\n        [`.${INPUT_CLASSNAME} + & > svg`]: {\n          fill: 'none',\n          position: 'absolute',\n          left: '0.25rem',\n          top: '0.25rem',\n        },\n        ...(!disabled && {\n          [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n            borderColor: theme.general.primaryColor,\n          },\n        }),\n        [`.${INPUT_CLASSNAME} + &::before`]: {\n          background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,\n          ...(!disabled\n            ? {\n                border: markInvalid\n                  ? `1.5px solid ${theme.Checkbox.invalidBorderColor}`\n                  : `1.5px solid ${theme.Checkbox.border}`,\n              }\n            : {\n                border: `1.5px solid ${theme.Checkbox.disableBorderColor}`,\n              }),\n          borderRadius: '3px',\n          boxSizing: 'border-box',\n          content: '\"\"',\n          display: 'inline-block',\n          width: '22px',\n          height: '22px',\n          lineHeight: 1.4,\n          margin: '0 8px 0 0px',\n          color: theme.general.color,\n        },\n        a: {\n          ...textLinkStyle(theme, {}),\n        },\n        position: 'relative',\n        margin: '0 0 0 -16px',\n        width: alignCenter ? 'auto' : '100%',\n        lineHeight: 1.4,\n        display: 'flex',\n        opacity: disabled ? 0.56 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      })}\n      {...filterStyledLabelProps(props)}\n    >\n      {props.children}\n      <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n      </svg>\n    </label>\n  );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n  id?: string;\n  alignCenter?: boolean;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\n// We use Math.random..., because some of apps doesn't migrated to newest version of React.\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n  HTMLInputElement,\n  CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, ...props}, ref) => (\n  <div\n    css={(theme: Theme) => ({\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      position: 'relative',\n      left: '-0.3rem',\n      [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n        outline: `1px solid ${theme.general.primaryColor}`,\n        outlineOffset: '0.4rem',\n      },\n    })}\n    style={style}\n  >\n    <input\n      type=\"checkbox\"\n      id={id}\n      style={{\n        height: '22px',\n        marginBottom: '0',\n        opacity: 0,\n        width: '22px',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      disabled={disabled}\n      ref={ref}\n      className={INPUT_CLASSNAME}\n      {...filterCheckboxProps(props)}\n    />\n\n    <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid} alignCenter={props.alignCenter}>\n      {children}\n    </StyledLabel>\n  </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n  <Text\n    css={(theme: Theme) => ({\n      ...textStyle(theme, {\n        color,\n        ...props,\n      }),\n      a: {\n        color: COLOR.LINK,\n        textDecoration: 'none',\n      },\n    })}\n    {...props}\n  />\n);\n"],"file":"Checkbox.js"}

package/src/Form/Select.js

@@ -61,10 +61,10 @@ var selectStyle = function selectStyle(theme, _ref) {
       textShadow: '0 0 0 #000'
     },
     '&:disabled': {
-      color: theme.select.disabledColor
+      color: theme.Select.disabledColor
     },
     appearance: 'none',
-    boxShadow: markInvalid ? "0 0 0 1px ".concat(theme.general.dangerColor) : "0 0 0 1px ".concat(theme.select.borderColor),
+    boxShadow: markInvalid ? "0 0 0 1px ".concat(theme.general.dangerColor) : "0 0 0 1px ".concat(theme.Select.borderColor),
     cursor: disabled ? 'normal' : 'pointer',
     fontSize: '16px',
     fontWeight: 300,
@@ -79,7 +79,7 @@ var selectStyle = function selectStyle(theme, _ref) {
     }
   }, !disabled && {
     '&:hover': {
-      boxShadow: "0 0 0 1px ".concat(theme.select.borderColor)
+      boxShadow: "0 0 0 1px ".concat(theme.Select.borderColor)
     },
     '&:focus, &:active': {
       boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
@@ -124,7 +124,7 @@ var dropdownOptionStyles = function dropdownOptionStyles(theme, isSelected) {
     fontWeight: 300,
     lineHeight: '24px',
     letterSpacing: '0.05px',
-    color: isSelected ? theme.select.contrastTextColor : theme.general.color,
+    color: isSelected ? theme.Select.contrastTextColor : theme.general.color,
     '&:first-of-type': {
       borderRadius: '10px 10px 0 0'
     },
@@ -132,15 +132,15 @@ var dropdownOptionStyles = function dropdownOptionStyles(theme, isSelected) {
       borderRadius: '0 0 10px 10px'
     },
     '&:not(:last-of-type)': {
-      borderBottom: "1px solid ".concat(theme.select.borderColor)
+      borderBottom: "1px solid ".concat(theme.Select.borderColor)
     },
     '&:not(:first-of-type)': {
-      borderTop: "1px solid ".concat(theme.select.borderColor)
+      borderTop: "1px solid ".concat(theme.Select.borderColor)
     },
     '&:hover, &:active, &:focus': {
       background: theme.general.primaryColor,
       borderColor: theme.general.primaryColor,
-      color: theme.select.contrastTextColor
+      color: theme.Select.contrastTextColor
     }
   };
 };
@@ -157,7 +157,7 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "tvi1yf-Select",
   styles: "position:relative;label:Select;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbVJXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHN9IGZyb20gJy4uL3V0aWwnO1xuaW1wb3J0IHtpbnB1dFN0eWxlfSBmcm9tICcuL0lucHV0JztcbmltcG9ydCBSZWFjdCwge1JlYWN0RWxlbWVudCwgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgdHlwZSBTZWxlY3RPcHRpb24gPSB7XG4gIHZhbHVlOiBzdHJpbmcgfCBudW1iZXI7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3RQcm9wczxUIGV4dGVuZHMgU2VsZWN0T3B0aW9uID0gU2VsZWN0T3B0aW9uPiB7XG4gIGlkOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAoc2VsZWN0ZWRPcHRpb246IFRbJ3ZhbHVlJ10pID0+IHZvaWQ7XG4gIGRhdGFVaWVOYW1lOiBzdHJpbmc7XG4gIG9wdGlvbnM6IFRbXTtcbiAgdmFsdWU/OiBUIHwgbnVsbDtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGVycm9yPzogUmVhY3RFbGVtZW50O1xuICB3cmFwcGVyQ1NTPzogQ1NTT2JqZWN0O1xufVxuXG5jb25zdCBBcnJvd0Rvd24gPSAoXG4gIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICA8cGF0aCBkPVwiTTcuOTk5NjMgMTIuNTcxMUwxNS42NTY1IDQuOTE0MjFMMTQuMjQyMyAzLjVMNy45OTk2MyA5Ljc0MjY0TDEuNzU2OTkgMy41TDAuMzQyNzczIDQuOTE0MjFMNy45OTk2MyAxMi41NzExWlwiIC8+XG4gIDwvc3ZnPlxuKTtcblxuZXhwb3J0IGNvbnN0IHNlbGVjdFN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wcywgZXJyb3I/OiBib29sZWFuKSA9PiBDU1NPYmplY3QgPSAoXG4gIHRoZW1lLFxuICB7ZGlzYWJsZWQgPSBmYWxzZSwgbWFya0ludmFsaWQsIC4uLnByb3BzfSxcbiAgZXJyb3IgPSBmYWxzZSxcbikgPT4gKHtcbiAgLi4uaW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMpLFxuICAnJjotbW96LWZvY3VzcmluZyc6IHtcbiAgICBjb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICB0ZXh0U2hhZG93OiAnMCAwIDAgIzAwMCcsXG4gIH0sXG4gICcmOmRpc2FibGVkJzoge1xuICAgIGNvbG9yOiB0aGVtZS5zZWxlY3QuZGlzYWJsZWRDb2xvcixcbiAgfSxcbiAgYXBwZWFyYW5jZTogJ25vbmUnLFxuICBib3hTaGFkb3c6IG1hcmtJbnZhbGlkID8gYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwuZGFuZ2VyQ29sb3J9YCA6IGAwIDAgMCAxcHggJHt0aGVtZS5zZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgY3Vyc29yOiBkaXNhYmxlZCA/ICdub3JtYWwnIDogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIHBhZGRpbmdSaWdodDogJzMwcHgnLFxuICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgdGV4dE92ZXJmbG93OiAnZWxsaXBzaXMnLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICBtYXJnaW5Cb3R0b206IGVycm9yICYmICc4cHgnLFxuICAnJjppbnZhbGlkLCBvcHRpb246Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBjb2xvcjogdGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcixcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5zZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICB9LFxuICAgICcmOmZvY3VzLCAmOmFjdGl2ZSc6IHtcbiAgICAgIGJveFNoYWRvdzogYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gICcmID4gc3ZnJzoge1xuICAgIGZpbGw6IGRpc2FibGVkID8gdGhlbWUuSW5wdXQucGxhY2Vob2xkZXJDb2xvciA6IHRoZW1lLmdlbmVyYWwuY29sb3IsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAnMXJlbScsXG4gICAgcmlnaHQ6ICcxcmVtJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBkcm9wZG93blN0eWxlcyA9ICh0aGVtZTogVGhlbWUsIGlzRHJvcGRvd25PcGVuOiBib29sZWFuKTogQ1NTT2JqZWN0ID0+ICh7XG4gIGhlaWdodDogaXNEcm9wZG93bk9wZW4gPyAnYXV0bycgOiAwLFxuICB2aXNpYmlsaXR5OiBpc0Ryb3Bkb3duT3BlbiA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICBtYXJnaW46ICczcHggMCAwJyxcbiAgcGFkZGluZzogMCxcbiAgYm9yZGVyUmFkaXVzOiAnMTBweCcsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB0b3A6ICcxMDAlJyxcbiAgbGVmdDogMCxcbiAgd2lkdGg6ICcxMDAlJyxcbiAgbWF4SGVpZ2h0OiAnMjQwcHgnLFxuICBvdmVyZmxvd1k6ICdhdXRvJyxcbiAgekluZGV4OiA5LFxufSk7XG5cbmNvbnN0IGRyb3Bkb3duT3B0aW9uU3R5bGVzID0gKHRoZW1lOiBUaGVtZSwgaXNTZWxlY3RlZDogYm9vbGVhbik6IENTU09iamVjdCA9PiAoe1xuICBiYWNrZ3JvdW5kOiBpc1NlbGVjdGVkID8gdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IgOiB0aGVtZS5nZW5lcmFsLmJhY2tncm91bmRDb2xvcixcbiAgbGlzdFN0eWxlOiAnbm9uZScsXG4gIHBhZGRpbmc6ICcxMHB4IDIwcHggMTRweCcsXG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgbGV0dGVyU3BhY2luZzogJzAuMDVweCcsXG4gIGNvbG9yOiBpc1NlbGVjdGVkID8gdGhlbWUuc2VsZWN0LmNvbnRyYXN0VGV4dENvbG9yIDogdGhlbWUuZ2VuZXJhbC5jb2xvcixcbiAgJyY6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcxMHB4IDEwcHggMCAwJyxcbiAgfSxcbiAgJyY6bGFzdC1vZi10eXBlJzoge1xuICAgIGJvcmRlclJhZGl1czogJzAgMCAxMHB4IDEwcHgnLFxuICB9LFxuICAnJjpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuc2VsZWN0LmJvcmRlckNvbG9yfWAsXG4gIH0sXG4gICcmOm5vdCg6Zmlyc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyVG9wOiBgMXB4IHNvbGlkICR7dGhlbWUuc2VsZWN0LmJvcmRlckNvbG9yfWAsXG4gIH0sXG4gICcmOmhvdmVyLCAmOmFjdGl2ZSwgJjpmb2N1cyc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICBib3JkZXJDb2xvcjogdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IsXG4gICAgY29sb3I6IHRoZW1lLnNlbGVjdC5jb250cmFzdFRleHRDb2xvcixcbiAgfSxcbn0pO1xuXG5jb25zdCBmaWx0ZXJTZWxlY3RQcm9wcyA9IHByb3BzID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG5jb25zdCBwbGFjZWhvbGRlclRleHQgPSAnLSBQbGVhc2Ugc2VsZWN0IC0nO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gPFQgZXh0ZW5kcyBTZWxlY3RPcHRpb24gPSBTZWxlY3RPcHRpb24+KHtcbiAgaWQsXG4gIGxhYmVsLFxuICBlcnJvcixcbiAgaGVscGVyVGV4dCxcbiAgb3B0aW9ucyA9IFtdLFxuICB2YWx1ZSA9IG51bGwsXG4gIG9uQ2hhbmdlLFxuICByZXF1aXJlZCxcbiAgbWFya0ludmFsaWQsXG4gIGRhdGFVaWVOYW1lLFxuICB3cmFwcGVyQ1NTID0ge30sXG4gIC4uLnByb3BzXG59OiBTZWxlY3RQcm9wczxUPikgPT4ge1xuICBjb25zdCBjdXJyZW50T3B0aW9uID0gb3B0aW9ucy5maW5kSW5kZXgob3B0aW9uID0+IG9wdGlvbi52YWx1ZSA9PT0gdmFsdWU/LnZhbHVlKTtcblxuICBjb25zdCBzZWxlY3RDb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBsaXN0UmVmID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBbaXNEcm9wZG93bk9wZW4sIHNldElzRHJvcGRvd25PcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW3NlbGVjdGVkT3B0aW9uLCBzZXRTZWxlY3RlZE9wdGlvbl0gPSB1c2VTdGF0ZTxudW1iZXIgfCBudWxsPihjdXJyZW50T3B0aW9uID09PSAtMSA/IG51bGwgOiBjdXJyZW50T3B0aW9uKTtcblxuICBjb25zdCBoYXNTZWxlY3RlZE9wdGlvbiA9IHNlbGVjdGVkT3B0aW9uICE9PSBudWxsO1xuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG5cbiAgY29uc3Qgc2Nyb2xsVG9DdXJyZW50T3B0aW9uID0gKGlkeDogbnVtYmVyKSA9PiB7XG4gICAgaWYgKGxpc3RSZWYuY3VycmVudCkge1xuICAgICAgY29uc3QgbGlzdFNlbGVjdGVkT3B0aW9uID0gbGlzdFJlZi5jdXJyZW50LmNoaWxkcmVuW2lkeF0gYXMgSFRNTExJRWxlbWVudDtcbiAgICAgIGNvbnN0IGdldFlQb3NpdGlvbiA9IGxpc3RTZWxlY3RlZE9wdGlvbiAmJiBsaXN0U2VsZWN0ZWRPcHRpb24ub2Zmc2V0VG9wO1xuXG4gICAgICBsaXN0UmVmLmN1cnJlbnQuc2Nyb2xsKHtcbiAgICAgICAgdG9wOiBnZXRZUG9zaXRpb24gPz8gMCxcbiAgICAgICAgYmVoYXZpb3I6ICdzbW9vdGgnLFxuICAgICAgfSk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IG9uVG9nZ2xlRHJvcGRvd24gPSAoKSA9PiBzZXRJc0Ryb3Bkb3duT3BlbihwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgY29uc3Qgb25PcHRpb25TZWxlY3QgPSAoaWR4OiBudW1iZXIpID0+IHtcbiAgICBzZXRTZWxlY3RlZE9wdGlvbihpZHgpO1xuICAgIG9uQ2hhbmdlKG9wdGlvbnNbaWR4XS52YWx1ZSk7XG4gICAgc2Nyb2xsVG9DdXJyZW50T3B0aW9uKGlkeCk7XG4gIH07XG5cbiAgY29uc3Qgb25PcHRpb25DaGFuZ2UgPSAoaWR4OiBudW1iZXIpID0+IHtcbiAgICBvbk9wdGlvblNlbGVjdChpZHgpO1xuICAgIHNldElzRHJvcGRvd25PcGVuKGZhbHNlKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVMaXN0S2V5RG93biA9IGUgPT4ge1xuICAgIHN3aXRjaCAoZS5rZXkpIHtcbiAgICAgIGNhc2UgJ0VzY2FwZSc6XG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ0Fycm93VXAnOlxuICAgICAgY2FzZSAnQXJyb3dMZWZ0JzpcbiAgICAgICAgaWYgKCFpc0Ryb3Bkb3duT3Blbikge1xuICAgICAgICAgIHNldElzRHJvcGRvd25PcGVuKHRydWUpO1xuICAgICAgICB9XG5cbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBvbk9wdGlvblNlbGVjdChzZWxlY3RlZE9wdGlvbiAtIDEgPj0gMCA/IHNlbGVjdGVkT3B0aW9uIC0gMSA6IG9wdGlvbnMubGVuZ3RoIC0gMSk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dEb3duJzpcbiAgICAgIGNhc2UgJ0Fycm93UmlnaHQnOlxuICAgICAgICBpZiAoIWlzRHJvcGRvd25PcGVuKSB7XG4gICAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4odHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGlmIChzZWxlY3RlZE9wdGlvbiA9PT0gbnVsbCkge1xuICAgICAgICAgIG9uT3B0aW9uU2VsZWN0KDApO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIG9uT3B0aW9uU2VsZWN0KHNlbGVjdGVkT3B0aW9uID09PSBvcHRpb25zLmxlbmd0aCAtIDEgPyAwIDogc2VsZWN0ZWRPcHRpb24gKyAxKTtcbiAgICAgICAgfVxuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlEb3duID0gaW5kZXggPT4gZSA9PiB7XG4gICAgc3dpdGNoIChlLmtleSkge1xuICAgICAgY2FzZSAnICc6XG4gICAgICBjYXNlICdTcGFjZUJhcic6XG4gICAgICBjYXNlICdFbnRlcic6XG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgb25PcHRpb25DaGFuZ2UoaW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVPdXRzaWRlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICBpZiAoc2VsZWN0Q29udGFpbmVyUmVmLmN1cnJlbnQgJiYgIXNlbGVjdENvbnRhaW5lclJlZi5jdXJyZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZU91dHNpZGVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlT3V0c2lkZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgIG1hcmdpbkJvdHRvbTogbWFya0ludmFsaWQgPyAnMnB4JyA6ICcyMHB4JyxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgJyY6Zm9jdXMtd2l0aGluIGxhYmVsJzoge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICAgICAgfSxcbiAgICAgICAgLi4ud3JhcHBlckNTUyxcbiAgICAgIH0pfVxuICAgICAgZGF0YS11aWUtbmFtZT17ZGF0YVVpZU5hbWV9XG4gICAgICByZWY9e3NlbGVjdENvbnRhaW5lclJlZn1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtpZH0gaXNSZXF1aXJlZD17cmVxdWlyZWR9IG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e3Bvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e2hhc1NlbGVjdGVkT3B0aW9uID8gdmFsdWUubGFiZWwgOiAnJ31cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0Ryb3Bkb3duT3Blbn1cbiAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgb25DbGljaz17b25Ub2dnbGVEcm9wZG93bn1cbiAgICAgICAgICBvbktleURvd249e2hhbmRsZUxpc3RLZXlEb3dufVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gc2VsZWN0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX1cbiAgICAgICAgICBkYXRhLXVpZS1uYW1lPXtkYXRhVWllTmFtZX1cbiAgICAgICAgICB7Li4uKGhhc1NlbGVjdGVkT3B0aW9uICYmIHtcbiAgICAgICAgICAgICdkYXRhLXZhbHVlJzogdmFsdWUudmFsdWUsXG4gICAgICAgICAgfSl9XG4gICAgICAgID5cbiAgICAgICAgICB7aGFzU2VsZWN0ZWRPcHRpb24gPyB2YWx1ZS5sYWJlbCA6IHBsYWNlaG9sZGVyVGV4dH1cbiAgICAgICAgICB7QXJyb3dEb3dufVxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8dWxcbiAgICAgICAgICByZWY9e2xpc3RSZWZ9XG4gICAgICAgICAgcm9sZT1cImxpc3Rib3hcIlxuICAgICAgICAgIGFyaWEtbGFiZWxsZWRieT17aWR9XG4gICAgICAgICAgdGFiSW5kZXg9ey0xfVxuICAgICAgICAgIG9uS2V5RG93bj17aGFuZGxlTGlzdEtleURvd259XG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93blN0eWxlcyh0aGVtZSwgaXNEcm9wZG93bk9wZW4pfVxuICAgICAgICAgIHsuLi4oZGF0YVVpZU5hbWUgJiYge1xuICAgICAgICAgICAgJ2RhdGEtdWllLW5hbWUnOiBgZHJvcGRvd24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBpc1NlbGVjdGVkID0gY3VycmVudE9wdGlvbiA9PSBpbmRleDtcblxuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPGxpXG4gICAgICAgICAgICAgICAga2V5PXtvcHRpb24udmFsdWV9XG4gICAgICAgICAgICAgICAgaWQ9e29wdGlvbi52YWx1ZS50b1N0cmluZygpfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3duKGluZGV4KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbk9wdGlvbkNoYW5nZShpbmRleCl9XG4gICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93bk9wdGlvblN0eWxlcyh0aGVtZSwgaXNTZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBvcHRpb24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgICAgICAgICAgJ2RhdGEtdWllLXZhbHVlJzogb3B0aW9uLnZhbHVlLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge29wdGlvbi5sYWJlbH1cblxuICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgPHBcbiAgICAgICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbkJvdHRvbTogMCxcbiAgICAgICAgICAgICAgICAgICAgICBmb250U2l6ZTogJzE0cHgnLFxuICAgICAgICAgICAgICAgICAgICAgIGNvbG9yOiBpc1NlbGVjdGVkID8gdGhlbWUuZ2VuZXJhbC5jb2xvciA6IHRoZW1lLklucHV0LmxhYmVsQ29sb3IsXG4gICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7b3B0aW9uLmRlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L3VsPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiB0aGVtZS5JbnB1dC5sYWJlbENvbG9yLCBtYXJnaW5Ub3A6IDh9KX0+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa1JXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHN9IGZyb20gJy4uL3V0aWwnO1xuaW1wb3J0IHtpbnB1dFN0eWxlfSBmcm9tICcuL0lucHV0JztcbmltcG9ydCBSZWFjdCwge1JlYWN0RWxlbWVudCwgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgdHlwZSBTZWxlY3RPcHRpb24gPSB7XG4gIHZhbHVlOiBzdHJpbmcgfCBudW1iZXI7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3RQcm9wczxUIGV4dGVuZHMgU2VsZWN0T3B0aW9uID0gU2VsZWN0T3B0aW9uPiB7XG4gIGlkOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAoc2VsZWN0ZWRPcHRpb246IFRbJ3ZhbHVlJ10pID0+IHZvaWQ7XG4gIGRhdGFVaWVOYW1lOiBzdHJpbmc7XG4gIG9wdGlvbnM6IFRbXTtcbiAgdmFsdWU/OiBUIHwgbnVsbDtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGVycm9yPzogUmVhY3RFbGVtZW50O1xuICB3cmFwcGVyQ1NTPzogQ1NTT2JqZWN0O1xufVxuXG5jb25zdCBBcnJvd0Rvd24gPSAoXG4gIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICA8cGF0aCBkPVwiTTcuOTk5NjMgMTIuNTcxMUwxNS42NTY1IDQuOTE0MjFMMTQuMjQyMyAzLjVMNy45OTk2MyA5Ljc0MjY0TDEuNzU2OTkgMy41TDAuMzQyNzczIDQuOTE0MjFMNy45OTk2MyAxMi41NzExWlwiIC8+XG4gIDwvc3ZnPlxuKTtcblxuZXhwb3J0IGNvbnN0IHNlbGVjdFN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wcywgZXJyb3I/OiBib29sZWFuKSA9PiBDU1NPYmplY3QgPSAoXG4gIHRoZW1lLFxuICB7ZGlzYWJsZWQgPSBmYWxzZSwgbWFya0ludmFsaWQsIC4uLnByb3BzfSxcbiAgZXJyb3IgPSBmYWxzZSxcbikgPT4gKHtcbiAgLi4uaW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMpLFxuICAnJjotbW96LWZvY3VzcmluZyc6IHtcbiAgICBjb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICB0ZXh0U2hhZG93OiAnMCAwIDAgIzAwMCcsXG4gIH0sXG4gICcmOmRpc2FibGVkJzoge1xuICAgIGNvbG9yOiB0aGVtZS5TZWxlY3QuZGlzYWJsZWRDb2xvcixcbiAgfSxcbiAgYXBwZWFyYW5jZTogJ25vbmUnLFxuICBib3hTaGFkb3c6IG1hcmtJbnZhbGlkID8gYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwuZGFuZ2VyQ29sb3J9YCA6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgY3Vyc29yOiBkaXNhYmxlZCA/ICdub3JtYWwnIDogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIHBhZGRpbmdSaWdodDogJzMwcHgnLFxuICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgdGV4dE92ZXJmbG93OiAnZWxsaXBzaXMnLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICBtYXJnaW5Cb3R0b206IGVycm9yICYmICc4cHgnLFxuICAnJjppbnZhbGlkLCBvcHRpb246Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBjb2xvcjogdGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcixcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICB9LFxuICAgICcmOmZvY3VzLCAmOmFjdGl2ZSc6IHtcbiAgICAgIGJveFNoYWRvdzogYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gICcmID4gc3ZnJzoge1xuICAgIGZpbGw6IGRpc2FibGVkID8gdGhlbWUuSW5wdXQucGxhY2Vob2xkZXJDb2xvciA6IHRoZW1lLmdlbmVyYWwuY29sb3IsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAnMXJlbScsXG4gICAgcmlnaHQ6ICcxcmVtJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBkcm9wZG93blN0eWxlcyA9ICh0aGVtZTogVGhlbWUsIGlzRHJvcGRvd25PcGVuOiBib29sZWFuKTogQ1NTT2JqZWN0ID0+ICh7XG4gIGhlaWdodDogaXNEcm9wZG93bk9wZW4gPyAnYXV0bycgOiAwLFxuICB2aXNpYmlsaXR5OiBpc0Ryb3Bkb3duT3BlbiA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICBtYXJnaW46ICczcHggMCAwJyxcbiAgcGFkZGluZzogMCxcbiAgYm9yZGVyUmFkaXVzOiAnMTBweCcsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB0b3A6ICcxMDAlJyxcbiAgbGVmdDogMCxcbiAgd2lkdGg6ICcxMDAlJyxcbiAgbWF4SGVpZ2h0OiAnMjQwcHgnLFxuICBvdmVyZmxvd1k6ICdhdXRvJyxcbiAgekluZGV4OiA5LFxufSk7XG5cbmNvbnN0IGRyb3Bkb3duT3B0aW9uU3R5bGVzID0gKHRoZW1lOiBUaGVtZSwgaXNTZWxlY3RlZDogYm9vbGVhbik6IENTU09iamVjdCA9PiAoe1xuICBiYWNrZ3JvdW5kOiBpc1NlbGVjdGVkID8gdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IgOiB0aGVtZS5nZW5lcmFsLmJhY2tncm91bmRDb2xvcixcbiAgbGlzdFN0eWxlOiAnbm9uZScsXG4gIHBhZGRpbmc6ICcxMHB4IDIwcHggMTRweCcsXG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgbGV0dGVyU3BhY2luZzogJzAuMDVweCcsXG4gIGNvbG9yOiBpc1NlbGVjdGVkID8gdGhlbWUuU2VsZWN0LmNvbnRyYXN0VGV4dENvbG9yIDogdGhlbWUuZ2VuZXJhbC5jb2xvcixcbiAgJyY6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcxMHB4IDEwcHggMCAwJyxcbiAgfSxcbiAgJyY6bGFzdC1vZi10eXBlJzoge1xuICAgIGJvcmRlclJhZGl1czogJzAgMCAxMHB4IDEwcHgnLFxuICB9LFxuICAnJjpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuU2VsZWN0LmJvcmRlckNvbG9yfWAsXG4gIH0sXG4gICcmOm5vdCg6Zmlyc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyVG9wOiBgMXB4IHNvbGlkICR7dGhlbWUuU2VsZWN0LmJvcmRlckNvbG9yfWAsXG4gIH0sXG4gICcmOmhvdmVyLCAmOmFjdGl2ZSwgJjpmb2N1cyc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICBib3JkZXJDb2xvcjogdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IsXG4gICAgY29sb3I6IHRoZW1lLlNlbGVjdC5jb250cmFzdFRleHRDb2xvcixcbiAgfSxcbn0pO1xuXG5jb25zdCBmaWx0ZXJTZWxlY3RQcm9wcyA9IHByb3BzID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG5jb25zdCBwbGFjZWhvbGRlclRleHQgPSAnLSBQbGVhc2Ugc2VsZWN0IC0nO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gPFQgZXh0ZW5kcyBTZWxlY3RPcHRpb24gPSBTZWxlY3RPcHRpb24+KHtcbiAgaWQsXG4gIGxhYmVsLFxuICBlcnJvcixcbiAgaGVscGVyVGV4dCxcbiAgb3B0aW9ucyA9IFtdLFxuICB2YWx1ZSA9IG51bGwsXG4gIG9uQ2hhbmdlLFxuICByZXF1aXJlZCxcbiAgbWFya0ludmFsaWQsXG4gIGRhdGFVaWVOYW1lLFxuICB3cmFwcGVyQ1NTID0ge30sXG4gIC4uLnByb3BzXG59OiBTZWxlY3RQcm9wczxUPikgPT4ge1xuICBjb25zdCBjdXJyZW50T3B0aW9uSWR4ID0gb3B0aW9ucy5maW5kSW5kZXgob3B0aW9uID0+IG9wdGlvbi52YWx1ZSA9PT0gdmFsdWU/LnZhbHVlKTtcbiAgY29uc3Qgc2VsZWN0ZWRPcHRpb24gPSBjdXJyZW50T3B0aW9uSWR4ID09PSAtMSA/IG51bGwgOiBjdXJyZW50T3B0aW9uSWR4O1xuXG4gIGNvbnN0IHNlbGVjdENvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGxpc3RSZWYgPSB1c2VSZWY8SFRNTFVMaXN0RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc0Ryb3Bkb3duT3Blbiwgc2V0SXNEcm9wZG93bk9wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhhc1NlbGVjdGVkT3B0aW9uID0gc2VsZWN0ZWRPcHRpb24gIT09IG51bGw7XG4gIGNvbnN0IGhhc0Vycm9yID0gISFlcnJvcjtcblxuICBjb25zdCBzY3JvbGxUb0N1cnJlbnRPcHRpb24gPSAoaWR4OiBudW1iZXIpID0+IHtcbiAgICBpZiAobGlzdFJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCBsaXN0U2VsZWN0ZWRPcHRpb24gPSBsaXN0UmVmLmN1cnJlbnQuY2hpbGRyZW5baWR4XSBhcyBIVE1MTElFbGVtZW50O1xuICAgICAgY29uc3QgZ2V0WVBvc2l0aW9uID0gbGlzdFNlbGVjdGVkT3B0aW9uICYmIGxpc3RTZWxlY3RlZE9wdGlvbi5vZmZzZXRUb3A7XG5cbiAgICAgIGxpc3RSZWYuY3VycmVudC5zY3JvbGwoe1xuICAgICAgICB0b3A6IGdldFlQb3NpdGlvbiA/PyAwLFxuICAgICAgICBiZWhhdmlvcjogJ3Ntb290aCcsXG4gICAgICB9KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgb25Ub2dnbGVEcm9wZG93biA9ICgpID0+IHNldElzRHJvcGRvd25PcGVuKHByZXZTdGF0ZSA9PiAhcHJldlN0YXRlKTtcblxuICBjb25zdCBvbk9wdGlvblNlbGVjdCA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIG9uQ2hhbmdlKG9wdGlvbnNbaWR4XS52YWx1ZSk7XG4gICAgc2Nyb2xsVG9DdXJyZW50T3B0aW9uKGlkeCk7XG4gIH07XG5cbiAgY29uc3Qgb25PcHRpb25DaGFuZ2UgPSAoaWR4OiBudW1iZXIpID0+IHtcbiAgICBvbk9wdGlvblNlbGVjdChpZHgpO1xuICAgIHNldElzRHJvcGRvd25PcGVuKGZhbHNlKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVMaXN0S2V5RG93biA9IGUgPT4ge1xuICAgIHN3aXRjaCAoZS5rZXkpIHtcbiAgICAgIGNhc2UgJ0VzY2FwZSc6XG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ0Fycm93VXAnOlxuICAgICAgY2FzZSAnQXJyb3dMZWZ0JzpcbiAgICAgICAgaWYgKCFpc0Ryb3Bkb3duT3Blbikge1xuICAgICAgICAgIHNldElzRHJvcGRvd25PcGVuKHRydWUpO1xuICAgICAgICB9XG5cbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBvbk9wdGlvblNlbGVjdChzZWxlY3RlZE9wdGlvbiAtIDEgPj0gMCA/IHNlbGVjdGVkT3B0aW9uIC0gMSA6IG9wdGlvbnMubGVuZ3RoIC0gMSk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dEb3duJzpcbiAgICAgIGNhc2UgJ0Fycm93UmlnaHQnOlxuICAgICAgICBpZiAoIWlzRHJvcGRvd25PcGVuKSB7XG4gICAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4odHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGlmIChzZWxlY3RlZE9wdGlvbiA9PT0gbnVsbCkge1xuICAgICAgICAgIG9uT3B0aW9uU2VsZWN0KDApO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIG9uT3B0aW9uU2VsZWN0KHNlbGVjdGVkT3B0aW9uID09PSBvcHRpb25zLmxlbmd0aCAtIDEgPyAwIDogc2VsZWN0ZWRPcHRpb24gKyAxKTtcbiAgICAgICAgfVxuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlEb3duID0gaW5kZXggPT4gZSA9PiB7XG4gICAgc3dpdGNoIChlLmtleSkge1xuICAgICAgY2FzZSAnICc6XG4gICAgICBjYXNlICdTcGFjZUJhcic6XG4gICAgICBjYXNlICdFbnRlcic6XG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgb25PcHRpb25DaGFuZ2UoaW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVPdXRzaWRlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICBpZiAoc2VsZWN0Q29udGFpbmVyUmVmLmN1cnJlbnQgJiYgIXNlbGVjdENvbnRhaW5lclJlZi5jdXJyZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZU91dHNpZGVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlT3V0c2lkZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgIG1hcmdpbkJvdHRvbTogbWFya0ludmFsaWQgPyAnMnB4JyA6ICcyMHB4JyxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgJyY6Zm9jdXMtd2l0aGluIGxhYmVsJzoge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICAgICAgfSxcbiAgICAgICAgLi4ud3JhcHBlckNTUyxcbiAgICAgIH0pfVxuICAgICAgZGF0YS11aWUtbmFtZT17ZGF0YVVpZU5hbWV9XG4gICAgICByZWY9e3NlbGVjdENvbnRhaW5lclJlZn1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtpZH0gaXNSZXF1aXJlZD17cmVxdWlyZWR9IG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e3Bvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e2hhc1NlbGVjdGVkT3B0aW9uID8gdmFsdWUubGFiZWwgOiAnJ31cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0Ryb3Bkb3duT3Blbn1cbiAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgb25DbGljaz17b25Ub2dnbGVEcm9wZG93bn1cbiAgICAgICAgICBvbktleURvd249e2hhbmRsZUxpc3RLZXlEb3dufVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gc2VsZWN0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX1cbiAgICAgICAgICBkYXRhLXVpZS1uYW1lPXtkYXRhVWllTmFtZX1cbiAgICAgICAgICB7Li4uKGhhc1NlbGVjdGVkT3B0aW9uICYmIHtcbiAgICAgICAgICAgICdkYXRhLXZhbHVlJzogdmFsdWUudmFsdWUsXG4gICAgICAgICAgfSl9XG4gICAgICAgID5cbiAgICAgICAgICB7aGFzU2VsZWN0ZWRPcHRpb24gPyB2YWx1ZS5sYWJlbCA6IHBsYWNlaG9sZGVyVGV4dH1cbiAgICAgICAgICB7QXJyb3dEb3dufVxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8dWxcbiAgICAgICAgICByZWY9e2xpc3RSZWZ9XG4gICAgICAgICAgcm9sZT1cImxpc3Rib3hcIlxuICAgICAgICAgIGFyaWEtbGFiZWxsZWRieT17aWR9XG4gICAgICAgICAgdGFiSW5kZXg9ey0xfVxuICAgICAgICAgIG9uS2V5RG93bj17aGFuZGxlTGlzdEtleURvd259XG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93blN0eWxlcyh0aGVtZSwgaXNEcm9wZG93bk9wZW4pfVxuICAgICAgICAgIHsuLi4oZGF0YVVpZU5hbWUgJiYge1xuICAgICAgICAgICAgJ2RhdGEtdWllLW5hbWUnOiBgZHJvcGRvd24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBpc1NlbGVjdGVkID0gY3VycmVudE9wdGlvbklkeCA9PSBpbmRleDtcblxuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPGxpXG4gICAgICAgICAgICAgICAga2V5PXtvcHRpb24udmFsdWV9XG4gICAgICAgICAgICAgICAgaWQ9e29wdGlvbi52YWx1ZS50b1N0cmluZygpfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3duKGluZGV4KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbk9wdGlvbkNoYW5nZShpbmRleCl9XG4gICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93bk9wdGlvblN0eWxlcyh0aGVtZSwgaXNTZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBvcHRpb24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgICAgICAgICAgJ2RhdGEtdWllLXZhbHVlJzogb3B0aW9uLnZhbHVlLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge29wdGlvbi5sYWJlbH1cblxuICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgPHBcbiAgICAgICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbkJvdHRvbTogMCxcbiAgICAgICAgICAgICAgICAgICAgICBmb250U2l6ZTogJzE0cHgnLFxuICAgICAgICAgICAgICAgICAgICAgIGNvbG9yOiBpc1NlbGVjdGVkID8gdGhlbWUuZ2VuZXJhbC5jb2xvciA6IHRoZW1lLklucHV0LmxhYmVsQ29sb3IsXG4gICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7b3B0aW9uLmRlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L3VsPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiB0aGVtZS5JbnB1dC5sYWJlbENvbG9yLCBtYXJnaW5Ub3A6IDh9KX0+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -177,9 +177,10 @@ var Select = function Select(_ref2) {
       _ref2$wrapperCSS = _ref2.wrapperCSS,
       wrapperCSS = _ref2$wrapperCSS === void 0 ? {} : _ref2$wrapperCSS,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var currentOption = options.findIndex(function (option) {
+  var currentOptionIdx = options.findIndex(function (option) {
     return option.value === (value === null || value === void 0 ? void 0 : value.value);
   });
+  var selectedOption = currentOptionIdx === -1 ? null : currentOptionIdx;
   var selectContainerRef = (0, _react2.useRef)(null);
   var listRef = (0, _react2.useRef)(null);
 
@@ -188,11 +189,6 @@ var Select = function Select(_ref2) {
       isDropdownOpen = _useState2[0],
       setIsDropdownOpen = _useState2[1];
 
-  var _useState3 = (0, _react2.useState)(currentOption === -1 ? null : currentOption),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      selectedOption = _useState4[0],
-      setSelectedOption = _useState4[1];
-
   var hasSelectedOption = selectedOption !== null;
   var hasError = !!error;
 
@@ -214,7 +210,6 @@ var Select = function Select(_ref2) {
   };
 
   var onOptionSelect = function onOptionSelect(idx) {
-    setSelectedOption(idx);
     onChange(options[idx].value);
     scrollToCurrentOption(idx);
   };
@@ -336,7 +331,7 @@ var Select = function Select(_ref2) {
   }, dataUieName && {
     'data-uie-name': "dropdown-".concat(dataUieName)
   }), options.map(function (option, index) {
-    var isSelected = currentOption == index;
+    var isSelected = currentOptionIdx == index;
     return (0, _react.jsx)("li", (0, _extends2["default"])({
       key: option.value,
       id: option.value.toString(),

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","selectStyle","theme","disabled","markInvalid","props","error","color","textShadow","select","disabledColor","appearance","boxShadow","general","dangerColor","borderColor","cursor","fontSize","fontWeight","paddingRight","textAlign","textOverflow","overflow","whiteSpace","marginBottom","primaryColor","fill","Input","placeholderColor","position","top","right","dropdownStyles","isDropdownOpen","height","visibility","margin","padding","borderRadius","border","left","width","maxHeight","overflowY","zIndex","dropdownOptionStyles","isSelected","background","backgroundColor","listStyle","lineHeight","letterSpacing","contrastTextColor","borderBottom","borderTop","filterSelectProps","placeholderText","Select","id","label","helperText","options","value","onChange","required","dataUieName","wrapperCSS","currentOption","findIndex","option","selectContainerRef","listRef","setIsDropdownOpen","selectedOption","setSelectedOption","hasSelectedOption","hasError","scrollToCurrentOption","idx","current","listSelectedOption","children","getYPosition","offsetTop","scroll","behavior","onToggleDropdown","prevState","onOptionSelect","onOptionChange","handleListKeyDown","e","key","preventDefault","length","handleKeyDown","index","handleOutsideClick","event","contains","target","window","addEventListener","removeEventListener","map","toString","description","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;AAuBA,IAAMA,SAAS,GACb;AAAK,EAAA,KAAK,EAAC,4BAAX;AAAwC,EAAA,KAAK,EAAC,IAA9C;AAAmD,EAAA,MAAM,EAAC,IAA1D;AAA+D,EAAA,OAAO,EAAC;AAAvE,GACE;AAAM,EAAA,CAAC,EAAC;AAAR,EADF,CADF;;AAMO,IAAMC,WAAmE,GAAG,SAAtEA,WAAsE,CACjFC,KADiF;AAAA,2BAEhFC,QAFgF;AAAA,MAEhFA,QAFgF,8BAErE,KAFqE;AAAA,MAE9DC,WAF8D,QAE9DA,WAF8D;AAAA,MAE9CC,KAF8C;AAAA,MAGjFC,KAHiF,uEAGzE,KAHyE;AAAA,uDAK9E,uBAAWJ,KAAX,EAAkBG,KAAlB,CAL8E;AAMjF,wBAAoB;AAClBE,MAAAA,KAAK,EAAE,aADW;AAElBC,MAAAA,UAAU,EAAE;AAFM,KAN6D;AAUjF,kBAAc;AACZD,MAAAA,KAAK,EAAEL,KAAK,CAACO,MAAN,CAAaC;AADR,KAVmE;AAajFC,IAAAA,UAAU,EAAE,MAbqE;AAcjFC,IAAAA,SAAS,EAAER,WAAW,uBAAgBF,KAAK,CAACW,OAAN,CAAcC,WAA9B,wBAA2DZ,KAAK,CAACO,MAAN,CAAaM,WAAxE,CAd2D;AAejFC,IAAAA,MAAM,EAAEb,QAAQ,GAAG,QAAH,GAAc,SAfmD;AAgBjFc,IAAAA,QAAQ,EAAE,MAhBuE;AAiBjFC,IAAAA,UAAU,EAAE,GAjBqE;AAkBjFC,IAAAA,YAAY,EAAE,MAlBmE;AAmBjFC,IAAAA,SAAS,EAAE,MAnBsE;AAoBjFC,IAAAA,YAAY,EAAE,UApBmE;AAqBjFC,IAAAA,QAAQ,EAAE,QArBuE;AAsBjFC,IAAAA,UAAU,EAAE,QAtBqE;AAuBjFC,IAAAA,YAAY,EAAElB,KAAK,IAAI,KAvB0D;AAwBjF,uCAAmC;AACjCC,MAAAA,KAAK,EAAEL,KAAK,CAACW,OAAN,CAAcC;AADY;AAxB8C,KA2B7E,CAACX,QAAD,IAAa;AACf,eAAW;AACTS,MAAAA,SAAS,sBAAeV,KAAK,CAACO,MAAN,CAAaM,WAA5B;AADA,KADI;AAIf,yBAAqB;AACnBH,MAAAA,SAAS,sBAAeV,KAAK,CAACW,OAAN,CAAcY,YAA7B;AADU;AAJN,GA3BgE;AAmCjF,eAAW;AACTC,MAAAA,IAAI,EAAEvB,QAAQ,GAAGD,KAAK,CAACyB,KAAN,CAAYC,gBAAf,GAAkC1B,KAAK,CAACW,OAAN,CAAcN,KADrD;AAETsB,MAAAA,QAAQ,EAAE,UAFD;AAGTC,MAAAA,GAAG,EAAE,MAHI;AAITC,MAAAA,KAAK,EAAE;AAJE;AAnCsE;AAAA,CAA5E;;;;AA2CP,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAAC9B,KAAD,EAAe+B,cAAf;AAAA,SAAuD;AAC5EC,IAAAA,MAAM,EAAED,cAAc,GAAG,MAAH,GAAY,CAD0C;AAE5EE,IAAAA,UAAU,EAAEF,cAAc,GAAG,SAAH,GAAe,QAFmC;AAG5EG,IAAAA,MAAM,EAAE,SAHoE;AAI5EC,IAAAA,OAAO,EAAE,CAJmE;AAK5EC,IAAAA,YAAY,EAAE,MAL8D;AAM5EC,IAAAA,MAAM,sBAAerC,KAAK,CAACW,OAAN,CAAcY,YAA7B,CANsE;AAO5EI,IAAAA,QAAQ,EAAE,UAPkE;AAQ5EC,IAAAA,GAAG,EAAE,MARuE;AAS5EU,IAAAA,IAAI,EAAE,CATsE;AAU5EC,IAAAA,KAAK,EAAE,MAVqE;AAW5EC,IAAAA,SAAS,EAAE,OAXiE;AAY5EC,IAAAA,SAAS,EAAE,MAZiE;AAa5EC,IAAAA,MAAM,EAAE;AAboE,GAAvD;AAAA,CAAvB;;AAgBA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAAC3C,KAAD,EAAe4C,UAAf;AAAA,SAAmD;AAC9EC,IAAAA,UAAU,EAAED,UAAU,GAAG5C,KAAK,CAACW,OAAN,CAAcY,YAAjB,GAAgCvB,KAAK,CAACW,OAAN,CAAcmC,eADU;AAE9EC,IAAAA,SAAS,EAAE,MAFmE;AAG9EZ,IAAAA,OAAO,EAAE,gBAHqE;AAI9ErB,IAAAA,MAAM,EAAE,SAJsE;AAK9EC,IAAAA,QAAQ,EAAE,MALoE;AAM9EC,IAAAA,UAAU,EAAE,GANkE;AAO9EgC,IAAAA,UAAU,EAAE,MAPkE;AAQ9EC,IAAAA,aAAa,EAAE,QAR+D;AAS9E5C,IAAAA,KAAK,EAAEuC,UAAU,GAAG5C,KAAK,CAACO,MAAN,CAAa2C,iBAAhB,GAAoClD,KAAK,CAACW,OAAN,CAAcN,KATW;AAU9E,uBAAmB;AACjB+B,MAAAA,YAAY,EAAE;AADG,KAV2D;AAa9E,sBAAkB;AAChBA,MAAAA,YAAY,EAAE;AADE,KAb4D;AAgB9E,4BAAwB;AACtBe,MAAAA,YAAY,sBAAenD,KAAK,CAACO,MAAN,CAAaM,WAA5B;AADU,KAhBsD;AAmB9E,6BAAyB;AACvBuC,MAAAA,SAAS,sBAAepD,KAAK,CAACO,MAAN,CAAaM,WAA5B;AADc,KAnBqD;AAsB9E,kCAA8B;AAC5BgC,MAAAA,UAAU,EAAE7C,KAAK,CAACW,OAAN,CAAcY,YADE;AAE5BV,MAAAA,WAAW,EAAEb,KAAK,CAACW,OAAN,CAAcY,YAFC;AAG5BlB,MAAAA,KAAK,EAAEL,KAAK,CAACO,MAAN,CAAa2C;AAHQ;AAtBgD,GAAnD;AAAA,CAA7B;;AA6BA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAlD,KAAK;AAAA,SAAI,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,CAAnB,CAAJ;AAAA,CAA/B;;AAEA,IAAMmD,eAAe,GAAG,mBAAxB;;;;;;;;;;;;AAEO,IAAMC,MAAM,GAAG,SAATA,MAAS,QAaA;AAAA,MAZpBC,EAYoB,SAZpBA,EAYoB;AAAA,MAXpBC,KAWoB,SAXpBA,KAWoB;AAAA,MAVpBrD,KAUoB,SAVpBA,KAUoB;AAAA,MATpBsD,UASoB,SATpBA,UASoB;AAAA,4BARpBC,OAQoB;AAAA,MARpBA,OAQoB,8BARV,EAQU;AAAA,0BAPpBC,KAOoB;AAAA,MAPpBA,KAOoB,4BAPZ,IAOY;AAAA,MANpBC,QAMoB,SANpBA,QAMoB;AAAA,MALpBC,QAKoB,SALpBA,QAKoB;AAAA,MAJpB5D,WAIoB,SAJpBA,WAIoB;AAAA,MAHpB6D,WAGoB,SAHpBA,WAGoB;AAAA,+BAFpBC,UAEoB;AAAA,MAFpBA,UAEoB,iCAFP,EAEO;AAAA,MADjB7D,KACiB;AACpB,MAAM8D,aAAa,GAAGN,OAAO,CAACO,SAAR,CAAkB,UAAAC,MAAM;AAAA,WAAIA,MAAM,CAACP,KAAP,MAAiBA,KAAjB,aAAiBA,KAAjB,uBAAiBA,KAAK,CAAEA,KAAxB,CAAJ;AAAA,GAAxB,CAAtB;AAEA,MAAMQ,kBAAkB,GAAG,oBAAuB,IAAvB,CAA3B;AACA,MAAMC,OAAO,GAAG,oBAAyB,IAAzB,CAAhB;;AACA,kBAA4C,sBAAS,KAAT,CAA5C;AAAA;AAAA,MAAOtC,cAAP;AAAA,MAAuBuC,iBAAvB;;AACA,mBAA4C,sBAAwBL,aAAa,KAAK,CAAC,CAAnB,GAAuB,IAAvB,GAA8BA,aAAtD,CAA5C;AAAA;AAAA,MAAOM,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,MAAMC,iBAAiB,GAAGF,cAAc,KAAK,IAA7C;AACA,MAAMG,QAAQ,GAAG,CAAC,CAACtE,KAAnB;;AAEA,MAAMuE,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,GAAD,EAAiB;AAC7C,QAAIP,OAAO,CAACQ,OAAZ,EAAqB;AACnB,UAAMC,kBAAkB,GAAGT,OAAO,CAACQ,OAAR,CAAgBE,QAAhB,CAAyBH,GAAzB,CAA3B;AACA,UAAMI,YAAY,GAAGF,kBAAkB,IAAIA,kBAAkB,CAACG,SAA9D;AAEAZ,MAAAA,OAAO,CAACQ,OAAR,CAAgBK,MAAhB,CAAuB;AACrBtD,QAAAA,GAAG,EAAEoD,YAAF,aAAEA,YAAF,cAAEA,YAAF,GAAkB,CADA;AAErBG,QAAAA,QAAQ,EAAE;AAFW,OAAvB;AAID;AACF,GAVD;;AAYA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,WAAMd,iBAAiB,CAAC,UAAAe,SAAS;AAAA,aAAI,CAACA,SAAL;AAAA,KAAV,CAAvB;AAAA,GAAzB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACV,GAAD,EAAiB;AACtCJ,IAAAA,iBAAiB,CAACI,GAAD,CAAjB;AACAf,IAAAA,QAAQ,CAACF,OAAO,CAACiB,GAAD,CAAP,CAAahB,KAAd,CAAR;AACAe,IAAAA,qBAAqB,CAACC,GAAD,CAArB;AACD,GAJD;;AAMA,MAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAACX,GAAD,EAAiB;AACtCU,IAAAA,cAAc,CAACV,GAAD,CAAd;AACAN,IAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD,GAHD;;AAKA,MAAMkB,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAC,CAAC,EAAI;AAC7B,YAAQA,CAAC,CAACC,GAAV;AACE,WAAK,QAAL;AACED,QAAAA,CAAC,CAACE,cAAF;AACArB,QAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACA;;AACF,WAAK,SAAL;AACA,WAAK,WAAL;AACE,YAAI,CAACvC,cAAL,EAAqB;AACnBuC,UAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;;AAEDmB,QAAAA,CAAC,CAACE,cAAF;AACAL,QAAAA,cAAc,CAACf,cAAc,GAAG,CAAjB,IAAsB,CAAtB,GAA0BA,cAAc,GAAG,CAA3C,GAA+CZ,OAAO,CAACiC,MAAR,GAAiB,CAAjE,CAAd;AACA;;AACF,WAAK,WAAL;AACA,WAAK,YAAL;AACE,YAAI,CAAC7D,cAAL,EAAqB;AACnBuC,UAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;;AAEDmB,QAAAA,CAAC,CAACE,cAAF;;AACA,YAAIpB,cAAc,KAAK,IAAvB,EAA6B;AAC3Be,UAAAA,cAAc,CAAC,CAAD,CAAd;AACD,SAFD,MAEO;AACLA,UAAAA,cAAc,CAACf,cAAc,KAAKZ,OAAO,CAACiC,MAAR,GAAiB,CAApC,GAAwC,CAAxC,GAA4CrB,cAAc,GAAG,CAA9D,CAAd;AACD;;AACD;;AACF;AACE;AA5BJ;AA8BD,GA/BD;;AAiCA,MAAMsB,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,KAAK;AAAA,WAAI,UAAAL,CAAC,EAAI;AAClC,cAAQA,CAAC,CAACC,GAAV;AACE,aAAK,GAAL;AACA,aAAK,UAAL;AACA,aAAK,OAAL;AACED,UAAAA,CAAC,CAACE,cAAF;AACAJ,UAAAA,cAAc,CAACO,KAAD,CAAd;AACA;;AACF;AACE;AARJ;AAUD,KAX0B;AAAA,GAA3B;;AAaA,MAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAuB;AAChD,QAAI5B,kBAAkB,CAACS,OAAnB,IAA8B,CAACT,kBAAkB,CAACS,OAAnB,CAA2BoB,QAA3B,CAAoCD,KAAK,CAACE,MAA1C,CAAnC,EAA8F;AAC5F5B,MAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD;AACF,GAJD;;AAMA,yBAAU,YAAM;AACd6B,IAAAA,MAAM,CAACC,gBAAP,CAAwB,OAAxB,EAAiCL,kBAAjC;AAEA,WAAO,YAAM;AACXI,MAAAA,MAAM,CAACE,mBAAP,CAA2B,OAA3B,EAAoCN,kBAApC;AACD,KAFD;AAGD,GAND,EAMG,EANH;AAQA,SACE;AACE,IAAA,GAAG,EAAE,aAAC/F,KAAD;AAAA;AACHsB,QAAAA,YAAY,EAAEpB,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHqC,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBlC,UAAAA,KAAK,EAAEL,KAAK,CAACW,OAAN,CAAcY;AADC;AAHrB,SAMAyC,UANA;AAAA,KADP;AASE,qBAAeD,WATjB;AAUE,IAAA,GAAG,EAAEK;AAVP,KAYGX,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,UAAU,EAAEM,QAArC;AAA+C,IAAA,WAAW,EAAE5D;AAA5D,KACGuD,KADH,CAbJ,EAkBE;AAAK,IAAA,GAAG;AAAR,KACE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,6BAAuBgB,iBAAiB,GAAGb,KAAK,CAACH,KAAT,GAAiB,EAF3D;AAGE,qBAAe1B,cAHjB;AAIE,qBAAc,SAJhB;AAKE,uBAAiByB,EALnB;AAME,IAAA,EAAE,EAAEA,EANN;AAOE,IAAA,OAAO,EAAE4B,gBAPX;AAQE,IAAA,SAAS,EAAEI,iBARb;AASE,IAAA,GAAG,EAAE,aAACxF,KAAD;AAAA,aAAkBD,WAAW,CAACC,KAAD,EAAQG,KAAR,EAAeuE,QAAf,CAA7B;AAAA;AATP,KAUMrB,iBAAiB,CAAClD,KAAD,CAVvB;AAWE,qBAAe4D;AAXjB,KAYOU,iBAAiB,IAAI;AACxB,kBAAcb,KAAK,CAACA;AADI,GAZ5B,GAgBGa,iBAAiB,GAAGb,KAAK,CAACH,KAAT,GAAiBH,eAhBrC,EAiBGxD,SAjBH,CADF,EAqBE;AACE,IAAA,GAAG,EAAEuE,OADP;AAEE,IAAA,IAAI,EAAC,SAFP;AAGE,uBAAiBb,EAHnB;AAIE,IAAA,QAAQ,EAAE,CAAC,CAJb;AAKE,IAAA,SAAS,EAAEgC,iBALb;AAME,IAAA,GAAG,EAAE,aAACxF,KAAD;AAAA,aAAkB8B,cAAc,CAAC9B,KAAD,EAAQ+B,cAAR,CAAhC;AAAA;AANP,KAOOgC,WAAW,IAAI;AAClB,wCAA6BA,WAA7B;AADkB,GAPtB,GAWGJ,OAAO,CAAC2C,GAAR,CAAY,UAACnC,MAAD,EAAS2B,KAAT,EAAmB;AAC9B,QAAMlD,UAAU,GAAGqB,aAAa,IAAI6B,KAApC;AAEA,WACE;AACE,MAAA,GAAG,EAAE3B,MAAM,CAACP,KADd;AAEE,MAAA,EAAE,EAAEO,MAAM,CAACP,KAAP,CAAa2C,QAAb,EAFN;AAGE,MAAA,IAAI,EAAC,QAHP;AAIE,uBAAe3D,UAJjB;AAKE,MAAA,QAAQ,EAAE,CALZ;AAME,MAAA,SAAS,EAAEiD,aAAa,CAACC,KAAD,CAN1B;AAOE,MAAA,OAAO,EAAE;AAAA,eAAMP,cAAc,CAACO,KAAD,CAApB;AAAA,OAPX;AAQE,MAAA,GAAG,EAAE,aAAC9F,KAAD;AAAA,eAAkB2C,oBAAoB,CAAC3C,KAAD,EAAQ4C,UAAR,CAAtC;AAAA;AARP,OASOmB,WAAW,IAAI;AAClB,wCAA2BA,WAA3B,CADkB;AAElB,wBAAkBI,MAAM,CAACP;AAFP,KATtB,GAcGO,MAAM,CAACV,KAdV,EAgBGU,MAAM,CAACqC,WAAP,IACC;AACE,MAAA,GAAG,EAAE,aAACxG,KAAD;AAAA,eAAmB;AACtBsB,UAAAA,YAAY,EAAE,CADQ;AAEtBP,UAAAA,QAAQ,EAAE,MAFY;AAGtBV,UAAAA,KAAK,EAAEuC,UAAU,GAAG5C,KAAK,CAACW,OAAN,CAAcN,KAAjB,GAAyBL,KAAK,CAACyB,KAAN,CAAYgF;AAHhC,SAAnB;AAAA;AADP,OAOGtC,MAAM,CAACqC,WAPV,CAjBJ,CADF;AA8BD,GAjCA,CAXH,CArBF,CAlBF,EAuFG,CAAC9B,QAAD,IAAahB,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAAC1D,KAAD;AAAA,aAAmB;AAACe,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCX,QAAAA,KAAK,EAAEL,KAAK,CAACyB,KAAN,CAAYgF,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACGhD,UADH,CAxFJ,EA6FGtD,KA7FH,CADF;AAiGD,CA9MM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport type {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {inputStyle} from './Input';\nimport React, {ReactElement, useEffect, useRef, useState} from 'react';\nimport InputLabel from './InputLabel';\n\nexport type SelectOption = {\n  value: string | number;\n  label: string;\n  description?: string;\n};\n\nexport interface SelectProps<T extends SelectOption = SelectOption> {\n  id: string;\n  onChange: (selectedOption: T['value']) => void;\n  dataUieName: string;\n  options: T[];\n  value?: T | null;\n  helperText?: string;\n  label?: string;\n  disabled?: boolean;\n  required?: boolean;\n  markInvalid?: boolean;\n  error?: ReactElement;\n  wrapperCSS?: CSSObject;\n}\n\nconst ArrowDown = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n    <path d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\" />\n  </svg>\n);\n\nexport const selectStyle: <T>(theme: Theme, props, error?: boolean) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n  error = false,\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: theme.select.disabledColor,\n  },\n  appearance: 'none',\n  boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.select.borderColor}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n  textAlign: 'left',\n  textOverflow: 'ellipsis',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  marginBottom: error && '8px',\n  '&:invalid, option:first-of-type': {\n    color: theme.general.dangerColor,\n  },\n  ...(!disabled && {\n    '&:hover': {\n      boxShadow: `0 0 0 1px ${theme.select.borderColor}`,\n    },\n    '&:focus, &:active': {\n      boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n    },\n  }),\n  '& > svg': {\n    fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    position: 'absolute',\n    top: '1rem',\n    right: '1rem',\n  },\n});\n\nconst dropdownStyles = (theme: Theme, isDropdownOpen: boolean): CSSObject => ({\n  height: isDropdownOpen ? 'auto' : 0,\n  visibility: isDropdownOpen ? 'visible' : 'hidden',\n  margin: '3px 0 0',\n  padding: 0,\n  borderRadius: '10px',\n  border: `1px solid ${theme.general.primaryColor}`,\n  position: 'absolute',\n  top: '100%',\n  left: 0,\n  width: '100%',\n  maxHeight: '240px',\n  overflowY: 'auto',\n  zIndex: 9,\n});\n\nconst dropdownOptionStyles = (theme: Theme, isSelected: boolean): CSSObject => ({\n  background: isSelected ? theme.general.primaryColor : theme.general.backgroundColor,\n  listStyle: 'none',\n  padding: '10px 20px 14px',\n  cursor: 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  lineHeight: '24px',\n  letterSpacing: '0.05px',\n  color: isSelected ? theme.select.contrastTextColor : theme.general.color,\n  '&:first-of-type': {\n    borderRadius: '10px 10px 0 0',\n  },\n  '&:last-of-type': {\n    borderRadius: '0 0 10px 10px',\n  },\n  '&:not(:last-of-type)': {\n    borderBottom: `1px solid ${theme.select.borderColor}`,\n  },\n  '&:not(:first-of-type)': {\n    borderTop: `1px solid ${theme.select.borderColor}`,\n  },\n  '&:hover, &:active, &:focus': {\n    background: theme.general.primaryColor,\n    borderColor: theme.general.primaryColor,\n    color: theme.select.contrastTextColor,\n  },\n});\n\nconst filterSelectProps = props => filterProps(props, ['markInvalid']);\n\nconst placeholderText = '- Please select -';\n\nexport const Select = <T extends SelectOption = SelectOption>({\n  id,\n  label,\n  error,\n  helperText,\n  options = [],\n  value = null,\n  onChange,\n  required,\n  markInvalid,\n  dataUieName,\n  wrapperCSS = {},\n  ...props\n}: SelectProps<T>) => {\n  const currentOption = options.findIndex(option => option.value === value?.value);\n\n  const selectContainerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState<number | null>(currentOption === -1 ? null : currentOption);\n\n  const hasSelectedOption = selectedOption !== null;\n  const hasError = !!error;\n\n  const scrollToCurrentOption = (idx: number) => {\n    if (listRef.current) {\n      const listSelectedOption = listRef.current.children[idx] as HTMLLIElement;\n      const getYPosition = listSelectedOption && listSelectedOption.offsetTop;\n\n      listRef.current.scroll({\n        top: getYPosition ?? 0,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const onToggleDropdown = () => setIsDropdownOpen(prevState => !prevState);\n\n  const onOptionSelect = (idx: number) => {\n    setSelectedOption(idx);\n    onChange(options[idx].value);\n    scrollToCurrentOption(idx);\n  };\n\n  const onOptionChange = (idx: number) => {\n    onOptionSelect(idx);\n    setIsDropdownOpen(false);\n  };\n\n  const handleListKeyDown = e => {\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault();\n        setIsDropdownOpen(false);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        onOptionSelect(selectedOption - 1 >= 0 ? selectedOption - 1 : options.length - 1);\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        if (selectedOption === null) {\n          onOptionSelect(0);\n        } else {\n          onOptionSelect(selectedOption === options.length - 1 ? 0 : selectedOption + 1);\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleKeyDown = index => e => {\n    switch (e.key) {\n      case ' ':\n      case 'SpaceBar':\n      case 'Enter':\n        e.preventDefault();\n        onOptionChange(index);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleOutsideClick = (event: MouseEvent) => {\n    if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node)) {\n      setIsDropdownOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('click', handleOutsideClick);\n\n    return () => {\n      window.removeEventListener('click', handleOutsideClick);\n    };\n  }, []);\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n      ref={selectContainerRef}\n    >\n      {label && (\n        <InputLabel htmlFor={id} isRequired={required} markInvalid={markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <div css={{position: 'relative'}}>\n        <button\n          type=\"button\"\n          aria-activedescendant={hasSelectedOption ? value.label : ''}\n          aria-expanded={isDropdownOpen}\n          aria-haspopup=\"listbox\"\n          aria-labelledby={id}\n          id={id}\n          onClick={onToggleDropdown}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => selectStyle(theme, props, hasError)}\n          {...filterSelectProps(props)}\n          data-uie-name={dataUieName}\n          {...(hasSelectedOption && {\n            'data-value': value.value,\n          })}\n        >\n          {hasSelectedOption ? value.label : placeholderText}\n          {ArrowDown}\n        </button>\n\n        <ul\n          ref={listRef}\n          role=\"listbox\"\n          aria-labelledby={id}\n          tabIndex={-1}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => dropdownStyles(theme, isDropdownOpen)}\n          {...(dataUieName && {\n            'data-uie-name': `dropdown-${dataUieName}`,\n          })}\n        >\n          {options.map((option, index) => {\n            const isSelected = currentOption == index;\n\n            return (\n              <li\n                key={option.value}\n                id={option.value.toString()}\n                role=\"option\"\n                aria-selected={isSelected}\n                tabIndex={0}\n                onKeyDown={handleKeyDown(index)}\n                onClick={() => onOptionChange(index)}\n                css={(theme: Theme) => dropdownOptionStyles(theme, isSelected)}\n                {...(dataUieName && {\n                  'data-uie-name': `option-${dataUieName}`,\n                  'data-uie-value': option.value,\n                })}\n              >\n                {option.label}\n\n                {option.description && (\n                  <p\n                    css={(theme: Theme) => ({\n                      marginBottom: 0,\n                      fontSize: '14px',\n                      color: isSelected ? theme.general.color : theme.Input.labelColor,\n                    })}\n                  >\n                    {option.description}\n                  </p>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}
+{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","selectStyle","theme","disabled","markInvalid","props","error","color","textShadow","Select","disabledColor","appearance","boxShadow","general","dangerColor","borderColor","cursor","fontSize","fontWeight","paddingRight","textAlign","textOverflow","overflow","whiteSpace","marginBottom","primaryColor","fill","Input","placeholderColor","position","top","right","dropdownStyles","isDropdownOpen","height","visibility","margin","padding","borderRadius","border","left","width","maxHeight","overflowY","zIndex","dropdownOptionStyles","isSelected","background","backgroundColor","listStyle","lineHeight","letterSpacing","contrastTextColor","borderBottom","borderTop","filterSelectProps","placeholderText","id","label","helperText","options","value","onChange","required","dataUieName","wrapperCSS","currentOptionIdx","findIndex","option","selectedOption","selectContainerRef","listRef","setIsDropdownOpen","hasSelectedOption","hasError","scrollToCurrentOption","idx","current","listSelectedOption","children","getYPosition","offsetTop","scroll","behavior","onToggleDropdown","prevState","onOptionSelect","onOptionChange","handleListKeyDown","e","key","preventDefault","length","handleKeyDown","index","handleOutsideClick","event","contains","target","window","addEventListener","removeEventListener","map","toString","description","labelColor","marginTop"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport type {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {inputStyle} from './Input';\nimport React, {ReactElement, useEffect, useRef, useState} from 'react';\nimport InputLabel from './InputLabel';\n\nexport type SelectOption = {\n  value: string | number;\n  label: string;\n  description?: string;\n};\n\nexport interface SelectProps<T extends SelectOption = SelectOption> {\n  id: string;\n  onChange: (selectedOption: T['value']) => void;\n  dataUieName: string;\n  options: T[];\n  value?: T | null;\n  helperText?: string;\n  label?: string;\n  disabled?: boolean;\n  required?: boolean;\n  markInvalid?: boolean;\n  error?: ReactElement;\n  wrapperCSS?: CSSObject;\n}\n\nconst ArrowDown = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n    <path d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\" />\n  </svg>\n);\n\nexport const selectStyle: <T>(theme: Theme, props, error?: boolean) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n  error = false,\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: theme.Select.disabledColor,\n  },\n  appearance: 'none',\n  boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n  textAlign: 'left',\n  textOverflow: 'ellipsis',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  marginBottom: error && '8px',\n  '&:invalid, option:first-of-type': {\n    color: theme.general.dangerColor,\n  },\n  ...(!disabled && {\n    '&:hover': {\n      boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,\n    },\n    '&:focus, &:active': {\n      boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n    },\n  }),\n  '& > svg': {\n    fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    position: 'absolute',\n    top: '1rem',\n    right: '1rem',\n  },\n});\n\nconst dropdownStyles = (theme: Theme, isDropdownOpen: boolean): CSSObject => ({\n  height: isDropdownOpen ? 'auto' : 0,\n  visibility: isDropdownOpen ? 'visible' : 'hidden',\n  margin: '3px 0 0',\n  padding: 0,\n  borderRadius: '10px',\n  border: `1px solid ${theme.general.primaryColor}`,\n  position: 'absolute',\n  top: '100%',\n  left: 0,\n  width: '100%',\n  maxHeight: '240px',\n  overflowY: 'auto',\n  zIndex: 9,\n});\n\nconst dropdownOptionStyles = (theme: Theme, isSelected: boolean): CSSObject => ({\n  background: isSelected ? theme.general.primaryColor : theme.general.backgroundColor,\n  listStyle: 'none',\n  padding: '10px 20px 14px',\n  cursor: 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  lineHeight: '24px',\n  letterSpacing: '0.05px',\n  color: isSelected ? theme.Select.contrastTextColor : theme.general.color,\n  '&:first-of-type': {\n    borderRadius: '10px 10px 0 0',\n  },\n  '&:last-of-type': {\n    borderRadius: '0 0 10px 10px',\n  },\n  '&:not(:last-of-type)': {\n    borderBottom: `1px solid ${theme.Select.borderColor}`,\n  },\n  '&:not(:first-of-type)': {\n    borderTop: `1px solid ${theme.Select.borderColor}`,\n  },\n  '&:hover, &:active, &:focus': {\n    background: theme.general.primaryColor,\n    borderColor: theme.general.primaryColor,\n    color: theme.Select.contrastTextColor,\n  },\n});\n\nconst filterSelectProps = props => filterProps(props, ['markInvalid']);\n\nconst placeholderText = '- Please select -';\n\nexport const Select = <T extends SelectOption = SelectOption>({\n  id,\n  label,\n  error,\n  helperText,\n  options = [],\n  value = null,\n  onChange,\n  required,\n  markInvalid,\n  dataUieName,\n  wrapperCSS = {},\n  ...props\n}: SelectProps<T>) => {\n  const currentOptionIdx = options.findIndex(option => option.value === value?.value);\n  const selectedOption = currentOptionIdx === -1 ? null : currentOptionIdx;\n\n  const selectContainerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const hasSelectedOption = selectedOption !== null;\n  const hasError = !!error;\n\n  const scrollToCurrentOption = (idx: number) => {\n    if (listRef.current) {\n      const listSelectedOption = listRef.current.children[idx] as HTMLLIElement;\n      const getYPosition = listSelectedOption && listSelectedOption.offsetTop;\n\n      listRef.current.scroll({\n        top: getYPosition ?? 0,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const onToggleDropdown = () => setIsDropdownOpen(prevState => !prevState);\n\n  const onOptionSelect = (idx: number) => {\n    onChange(options[idx].value);\n    scrollToCurrentOption(idx);\n  };\n\n  const onOptionChange = (idx: number) => {\n    onOptionSelect(idx);\n    setIsDropdownOpen(false);\n  };\n\n  const handleListKeyDown = e => {\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault();\n        setIsDropdownOpen(false);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        onOptionSelect(selectedOption - 1 >= 0 ? selectedOption - 1 : options.length - 1);\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        if (selectedOption === null) {\n          onOptionSelect(0);\n        } else {\n          onOptionSelect(selectedOption === options.length - 1 ? 0 : selectedOption + 1);\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleKeyDown = index => e => {\n    switch (e.key) {\n      case ' ':\n      case 'SpaceBar':\n      case 'Enter':\n        e.preventDefault();\n        onOptionChange(index);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleOutsideClick = (event: MouseEvent) => {\n    if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node)) {\n      setIsDropdownOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('click', handleOutsideClick);\n\n    return () => {\n      window.removeEventListener('click', handleOutsideClick);\n    };\n  }, []);\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n      ref={selectContainerRef}\n    >\n      {label && (\n        <InputLabel htmlFor={id} isRequired={required} markInvalid={markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <div css={{position: 'relative'}}>\n        <button\n          type=\"button\"\n          aria-activedescendant={hasSelectedOption ? value.label : ''}\n          aria-expanded={isDropdownOpen}\n          aria-haspopup=\"listbox\"\n          aria-labelledby={id}\n          id={id}\n          onClick={onToggleDropdown}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => selectStyle(theme, props, hasError)}\n          {...filterSelectProps(props)}\n          data-uie-name={dataUieName}\n          {...(hasSelectedOption && {\n            'data-value': value.value,\n          })}\n        >\n          {hasSelectedOption ? value.label : placeholderText}\n          {ArrowDown}\n        </button>\n\n        <ul\n          ref={listRef}\n          role=\"listbox\"\n          aria-labelledby={id}\n          tabIndex={-1}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => dropdownStyles(theme, isDropdownOpen)}\n          {...(dataUieName && {\n            'data-uie-name': `dropdown-${dataUieName}`,\n          })}\n        >\n          {options.map((option, index) => {\n            const isSelected = currentOptionIdx == index;\n\n            return (\n              <li\n                key={option.value}\n                id={option.value.toString()}\n                role=\"option\"\n                aria-selected={isSelected}\n                tabIndex={0}\n                onKeyDown={handleKeyDown(index)}\n                onClick={() => onOptionChange(index)}\n                css={(theme: Theme) => dropdownOptionStyles(theme, isSelected)}\n                {...(dataUieName && {\n                  'data-uie-name': `option-${dataUieName}`,\n                  'data-uie-value': option.value,\n                })}\n              >\n                {option.label}\n\n                {option.description && (\n                  <p\n                    css={(theme: Theme) => ({\n                      marginBottom: 0,\n                      fontSize: '14px',\n                      color: isSelected ? theme.general.color : theme.Input.labelColor,\n                    })}\n                  >\n                    {option.description}\n                  </p>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}

package/src/Layout/Theme.d.ts

@@ -6,6 +6,28 @@ export declare enum THEME_ID {
     LIGHT = "THEME_LIGHT"
 }
 export interface Theme {
+    IconButton: {
+        activePrimaryBgColor?: string;
+        activePrimaryBorderColor?: string;
+        focusBorderColor?: string;
+        hoverPrimaryBgColor?: string;
+        primaryActiveFillColor?: string;
+        primaryBgColor?: string;
+        primaryBorderColor?: string;
+        primaryDisabledBgColor?: string;
+        primaryDisabledBorderColor?: string;
+        primaryHoverBorderColor?: string;
+        secondaryActiveBorderColor?: string;
+    };
+    Checkbox: {
+        background?: string;
+        border?: string;
+        borderFocused?: string;
+        disableBgColor?: string;
+        disableBorderColor?: string;
+        disablecheckedBgColor?: string;
+        invalidBorderColor?: string;
+    };
     general: {
         backgroundColor: string;
         color: string;
@@ -18,20 +40,11 @@ export interface Theme {
         placeholderColor: string;
         labelColor: string;
     };
-    select: {
+    Select: {
         disabledColor?: string;
         contrastTextColor?: string;
         borderColor?: string;
     };
-    checkbox: {
-        background?: string;
-        border?: string;
-        borderFocused?: string;
-        disableBgColor?: string;
-        disableBorderColor?: string;
-        disablecheckedBgColor?: string;
-        invalidBorderColor?: string;
-    };
 }
 export declare const themes: {
     [themeId in THEME_ID]: Theme;

package/src/Layout/Theme.js

@@ -32,6 +32,18 @@ exports.THEME_ID = THEME_ID;
 })(THEME_ID || (exports.THEME_ID = THEME_ID = {}));
 
 var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.LIGHT, {
+  IconButton: {
+    activePrimaryBgColor: _colorsV.COLOR_V2.BLUE_LIGHT_50,
+    focusBorderColor: _colorsV.COLOR_V2.BLUE_LIGHT_500,
+    hoverPrimaryBgColor: _colorsV.COLOR_V2.GRAY_20,
+    primaryActiveFillColor: _colorsV.COLOR_V2.BLUE,
+    primaryBgColor: _colorsV.COLOR_V2.WHITE,
+    primaryBorderColor: _colorsV.COLOR_V2.GRAY_40,
+    primaryDisabledBgColor: _colorsV.COLOR_V2.GRAY_20,
+    primaryDisabledBorderColor: _colorsV.COLOR_V2.GRAY_40,
+    primaryHoverBorderColor: _colorsV.COLOR_V2.GRAY_50,
+    secondaryActiveBorderColor: 'none'
+  },
   Input: {
     backgroundColor: _colors.COLOR.WHITE,
     backgroundColorDisabled: _colorsV.COLOR_V2.GRAY_20,
@@ -44,12 +56,12 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.L
     primaryColor: _colorsV.COLOR_V2.BLUE,
     dangerColor: _colorsV.COLOR_V2.RED
   },
-  select: {
+  Select: {
     disabledColor: _colorsV.COLOR_V2.GRAY_70,
     contrastTextColor: _colors.COLOR.WHITE,
     borderColor: _colorsV.COLOR_V2.GRAY_40
   },
-  checkbox: {
+  Checkbox: {
     background: _colorsV.COLOR_V2.GRAY_20,
     border: _colorsV.COLOR_V2.GRAY_80,
     borderFocused: _colorsV.BASE_LIGHT_COLOR.BLUE,
@@ -59,6 +71,18 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.L
     invalidBorderColor: _colorsV.BASE_LIGHT_COLOR.RED
   }
 }), (0, _defineProperty2["default"])(_themes, THEME_ID.DARK, {
+  IconButton: {
+    activePrimaryBgColor: _colorsV.COLOR_V2.BLUE_DARK_800,
+    focusBorderColor: _colorsV.COLOR_V2.BLUE_DARK_600,
+    hoverPrimaryBgColor: _colorsV.COLOR_V2.GRAY_80,
+    primaryActiveFillColor: _colors.COLOR.WHITE,
+    primaryBgColor: _colorsV.COLOR_V2.GRAY_90,
+    primaryBorderColor: _colorsV.COLOR_V2.GRAY_100,
+    primaryDisabledBgColor: _colorsV.COLOR_V2.GRAY_95,
+    primaryDisabledBorderColor: _colorsV.COLOR_V2.GRAY_90,
+    primaryHoverBorderColor: _colorsV.COLOR_V2.GRAY_70,
+    secondaryActiveBorderColor: _colorsV.COLOR_V2.BLUE_DARK_800
+  },
   Input: {
     backgroundColor: _colors.COLOR.BLACK_LIGHTEN_24,
     backgroundColorDisabled: _colors.COLOR.GRAY_100,
@@ -71,12 +95,12 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.L
     primaryColor: _colorsV.COLOR_V2.BLUE,
     dangerColor: _colorsV.COLOR_V2.RED
   },
-  select: {
+  Select: {
     disabledColor: _colorsV.COLOR_V2.GRAY_60,
     contrastTextColor: _colors.COLOR.BLACK,
     borderColor: _colorsV.COLOR_V2.GRAY_90
   },
-  checkbox: {
+  Checkbox: {
     background: _colorsV.COLOR_V2.GRAY_20,
     border: _colorsV.COLOR_V2.GRAY_60,
     borderFocused: _colorsV.BASE_DARK_COLOR.BLUE,

package/src/Layout/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","LIGHT","Input","backgroundColor","COLOR","WHITE","backgroundColorDisabled","COLOR_V2","GRAY_20","placeholderColor","GRAY_DARKEN_24","labelColor","GRAY_80","general","color","TEXT","primaryColor","BLUE","dangerColor","RED","select","disabledColor","GRAY_70","contrastTextColor","borderColor","GRAY_40","checkbox","background","border","borderFocused","BASE_LIGHT_COLOR","disableBgColor","disableBorderColor","GRAY_60","disablecheckedBgColor","invalidBorderColor","DARK","BLACK_LIGHTEN_24","GRAY_100","GRAY_LIGHTEN_88","BLACK","GRAY_90","BASE_DARK_COLOR","GRAY_10","filterThemeProps","props","ThemeProvider","theme"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2, BASE_DARK_COLOR, BASE_LIGHT_COLOR} from '../Identity/colors-v2';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n  DARK = 'THEME_DARK',\n  LIGHT = 'THEME_LIGHT',\n}\n\nexport interface Theme {\n  general: {\n    backgroundColor: string;\n    color: string;\n    dangerColor?: string;\n    primaryColor?: string;\n  };\n  Input: {\n    backgroundColor: string;\n    backgroundColorDisabled: string;\n    placeholderColor: string;\n    labelColor: string;\n  };\n  select: {\n    disabledColor?: string;\n    contrastTextColor?: string;\n    borderColor?: string;\n  };\n  checkbox: {\n    background?: string;\n    border?: string;\n    borderFocused?: string;\n    disableBgColor?: string;\n    disableBorderColor?: string;\n    disablecheckedBgColor?: string;\n    invalidBorderColor?: string;\n  };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n  [THEME_ID.LIGHT]: {\n    Input: {\n      backgroundColor: COLOR.WHITE,\n      backgroundColorDisabled: COLOR_V2.GRAY_20,\n      placeholderColor: COLOR.GRAY_DARKEN_24,\n      labelColor: COLOR_V2.GRAY_80,\n    },\n    general: {\n      backgroundColor: COLOR_V2.GRAY_20,\n      color: COLOR.TEXT,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\n    },\n    select: {\n      disabledColor: COLOR_V2.GRAY_70,\n      contrastTextColor: COLOR.WHITE,\n      borderColor: COLOR_V2.GRAY_40,\n    },\n    checkbox: {\n      background: COLOR_V2.GRAY_20,\n      border: COLOR_V2.GRAY_80,\n      borderFocused: BASE_LIGHT_COLOR.BLUE,\n      disableBgColor: COLOR_V2.GRAY_20,\n      disableBorderColor: COLOR_V2.GRAY_60,\n      disablecheckedBgColor: COLOR_V2.GRAY_20,\n      invalidBorderColor: BASE_LIGHT_COLOR.RED,\n    },\n  },\n  [THEME_ID.DARK]: {\n    Input: {\n      backgroundColor: COLOR.BLACK_LIGHTEN_24,\n      backgroundColorDisabled: COLOR.GRAY_100,\n      placeholderColor: COLOR.GRAY_LIGHTEN_88,\n      labelColor: COLOR_V2.GRAY_40,\n    },\n    general: {\n      backgroundColor: COLOR.BLACK,\n      color: COLOR.WHITE,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\n    },\n    select: {\n      disabledColor: COLOR_V2.GRAY_60,\n      contrastTextColor: COLOR.BLACK,\n      borderColor: COLOR_V2.GRAY_90,\n    },\n    checkbox: {\n      background: COLOR_V2.GRAY_20,\n      border: COLOR_V2.GRAY_60,\n      borderFocused: BASE_DARK_COLOR.BLUE,\n      disableBgColor: COLOR_V2.GRAY_10,\n      disableBorderColor: COLOR_V2.GRAY_70,\n      disablecheckedBgColor: COLOR_V2.GRAY_60,\n      invalidBorderColor: BASE_DARK_COLOR.RED,\n    },\n  },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  theme?: Theme;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['theme']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n  <EmotionThemeProvider theme={props.theme} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}
+{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","LIGHT","IconButton","activePrimaryBgColor","COLOR_V2","BLUE_LIGHT_50","focusBorderColor","BLUE_LIGHT_500","hoverPrimaryBgColor","GRAY_20","primaryActiveFillColor","BLUE","primaryBgColor","WHITE","primaryBorderColor","GRAY_40","primaryDisabledBgColor","primaryDisabledBorderColor","primaryHoverBorderColor","GRAY_50","secondaryActiveBorderColor","Input","backgroundColor","COLOR","backgroundColorDisabled","placeholderColor","GRAY_DARKEN_24","labelColor","GRAY_80","general","color","TEXT","primaryColor","dangerColor","RED","Select","disabledColor","GRAY_70","contrastTextColor","borderColor","Checkbox","background","border","borderFocused","BASE_LIGHT_COLOR","disableBgColor","disableBorderColor","GRAY_60","disablecheckedBgColor","invalidBorderColor","DARK","BLUE_DARK_800","BLUE_DARK_600","GRAY_90","GRAY_100","GRAY_95","BLACK_LIGHTEN_24","GRAY_LIGHTEN_88","BLACK","BASE_DARK_COLOR","GRAY_10","filterThemeProps","props","ThemeProvider","theme"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2, BASE_DARK_COLOR, BASE_LIGHT_COLOR} from '../Identity/colors-v2';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n  DARK = 'THEME_DARK',\n  LIGHT = 'THEME_LIGHT',\n}\n\nexport interface Theme {\n  IconButton: {\n    activePrimaryBgColor?: string;\n    activePrimaryBorderColor?: string;\n    focusBorderColor?: string;\n    hoverPrimaryBgColor?: string;\n    primaryActiveFillColor?: string;\n    primaryBgColor?: string;\n    primaryBorderColor?: string;\n    primaryDisabledBgColor?: string;\n    primaryDisabledBorderColor?: string;\n    primaryHoverBorderColor?: string;\n    secondaryActiveBorderColor?: string;\n  };\n  Checkbox: {\n    background?: string;\n    border?: string;\n    borderFocused?: string;\n    disableBgColor?: string;\n    disableBorderColor?: string;\n    disablecheckedBgColor?: string;\n    invalidBorderColor?: string;\n  };\n  general: {\n    backgroundColor: string;\n    color: string;\n    dangerColor?: string;\n    primaryColor?: string;\n  };\n  Input: {\n    backgroundColor: string;\n    backgroundColorDisabled: string;\n    placeholderColor: string;\n    labelColor: string;\n  };\n  Select: {\n    disabledColor?: string;\n    contrastTextColor?: string;\n    borderColor?: string;\n  };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n  [THEME_ID.LIGHT]: {\n    IconButton: {\n      activePrimaryBgColor: COLOR_V2.BLUE_LIGHT_50,\n      focusBorderColor: COLOR_V2.BLUE_LIGHT_500,\n      hoverPrimaryBgColor: COLOR_V2.GRAY_20,\n      primaryActiveFillColor: COLOR_V2.BLUE,\n      primaryBgColor: COLOR_V2.WHITE,\n      primaryBorderColor: COLOR_V2.GRAY_40,\n      primaryDisabledBgColor: COLOR_V2.GRAY_20,\n      primaryDisabledBorderColor: COLOR_V2.GRAY_40,\n      primaryHoverBorderColor: COLOR_V2.GRAY_50,\n      secondaryActiveBorderColor: 'none',\n    },\n    Input: {\n      backgroundColor: COLOR.WHITE,\n      backgroundColorDisabled: COLOR_V2.GRAY_20,\n      placeholderColor: COLOR.GRAY_DARKEN_24,\n      labelColor: COLOR_V2.GRAY_80,\n    },\n    general: {\n      backgroundColor: COLOR_V2.GRAY_20,\n      color: COLOR.TEXT,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\n    },\n    Select: {\n      disabledColor: COLOR_V2.GRAY_70,\n      contrastTextColor: COLOR.WHITE,\n      borderColor: COLOR_V2.GRAY_40,\n    },\n    Checkbox: {\n      background: COLOR_V2.GRAY_20,\n      border: COLOR_V2.GRAY_80,\n      borderFocused: BASE_LIGHT_COLOR.BLUE,\n      disableBgColor: COLOR_V2.GRAY_20,\n      disableBorderColor: COLOR_V2.GRAY_60,\n      disablecheckedBgColor: COLOR_V2.GRAY_20,\n      invalidBorderColor: BASE_LIGHT_COLOR.RED,\n    },\n  },\n  [THEME_ID.DARK]: {\n    IconButton: {\n      activePrimaryBgColor: COLOR_V2.BLUE_DARK_800,\n      focusBorderColor: COLOR_V2.BLUE_DARK_600,\n      hoverPrimaryBgColor: COLOR_V2.GRAY_80,\n      primaryActiveFillColor: COLOR.WHITE,\n      primaryBgColor: COLOR_V2.GRAY_90,\n      primaryBorderColor: COLOR_V2.GRAY_100,\n      primaryDisabledBgColor: COLOR_V2.GRAY_95,\n      primaryDisabledBorderColor: COLOR_V2.GRAY_90,\n      primaryHoverBorderColor: COLOR_V2.GRAY_70,\n      secondaryActiveBorderColor: COLOR_V2.BLUE_DARK_800,\n    },\n    Input: {\n      backgroundColor: COLOR.BLACK_LIGHTEN_24,\n      backgroundColorDisabled: COLOR.GRAY_100,\n      placeholderColor: COLOR.GRAY_LIGHTEN_88,\n      labelColor: COLOR_V2.GRAY_40,\n    },\n    general: {\n      backgroundColor: COLOR.BLACK,\n      color: COLOR.WHITE,\n      primaryColor: COLOR_V2.BLUE,\n      dangerColor: COLOR_V2.RED,\n    },\n    Select: {\n      disabledColor: COLOR_V2.GRAY_60,\n      contrastTextColor: COLOR.BLACK,\n      borderColor: COLOR_V2.GRAY_90,\n    },\n    Checkbox: {\n      background: COLOR_V2.GRAY_20,\n      border: COLOR_V2.GRAY_60,\n      borderFocused: BASE_DARK_COLOR.BLUE,\n      disableBgColor: COLOR_V2.GRAY_10,\n      disableBorderColor: COLOR_V2.GRAY_70,\n      disablecheckedBgColor: COLOR_V2.GRAY_60,\n      invalidBorderColor: BASE_DARK_COLOR.RED,\n    },\n  },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  theme?: Theme;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['theme']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n  <EmotionThemeProvider theme={props.theme} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}

package/src/Misc/IconButton.d.js

@@ -1,6 +1,2 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
 //# sourceMappingURL=IconButton.d.js.map

package/src/Misc/IconButton.d.ts

@@ -2,7 +2,7 @@
 import { CSSObject, jsx } from '@emotion/react';
 import type { Theme } from '../Layout';
 import { TextProps } from '../Text';
-declare enum IconButtonVariant {
+export declare enum IconButtonVariant {
     PRIMARY = "primary",
     SECONDARY = "secondary"
 }
@@ -12,4 +12,3 @@ export interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {
 }
 export declare const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject;
 export declare const IconButton: ({ children, ...props }: IconButtonProps) => jsx.JSX.Element;
-export {};

package/src/Misc/IconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButton = exports.iconButtonStyle = void 0;
+exports.IconButton = exports.iconButtonStyle = exports.IconButtonVariant = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,8 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("@emotion/react");
 
-var _Identity = require("../Identity");
-
 var _motions = require("../Identity/motions");
 
 var _Text = require("../Text");
@@ -30,11 +28,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var IconButtonVariant;
+exports.IconButtonVariant = IconButtonVariant;
 
 (function (IconButtonVariant) {
   IconButtonVariant["PRIMARY"] = "primary";
   IconButtonVariant["SECONDARY"] = "secondary";
-})(IconButtonVariant || (IconButtonVariant = {}));
+})(IconButtonVariant || (exports.IconButtonVariant = IconButtonVariant = {}));
 
 var iconButtonStyle = function iconButtonStyle(theme, _ref) {
   var _ref$variant = _ref.variant,
@@ -61,43 +60,45 @@ var iconButtonStyle = function iconButtonStyle(theme, _ref) {
       textDecoration: 'none'
     }
   }, variant === IconButtonVariant.PRIMARY && _objectSpread({
-    backgroundColor: disabled ? _Identity.COLOR_V2.GRAY_20 : backgroundColor || _Identity.COLOR_V2.WHITE,
-    border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
+    backgroundColor: disabled ? theme.IconButton.primaryDisabledBgColor : backgroundColor || theme.IconButton.primaryBgColor,
+    border: disabled ? "1px solid ".concat(theme.IconButton.primaryDisabledBorderColor) : "1px solid ".concat(theme.IconButton.primaryBorderColor),
     svg: {
-      fill: disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLACK
+      fill: disabled ? theme.Input.placeholderColor : theme.general.color
     }
   }, !disabled && {
     '&:hover, &:focus': {
-      backgroundColor: _Identity.COLOR_V2.GRAY_20
+      backgroundColor: theme.IconButton.hoverPrimaryBgColor
     },
     '&:hover': {
-      borderColor: _Identity.COLOR_V2.GRAY_50
+      borderColor: theme.IconButton.primaryHoverBorderColor
     },
     '&:focus': {
-      borderColor: _Identity.COLOR_V2.GRAY_60
+      borderColor: theme.IconButton.focusBorderColor
     },
     '&:active': {
-      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
-      borderColor: _Identity.COLOR_V2.BLUE_LIGHT_300,
+      backgroundColor: theme.IconButton.activePrimaryBgColor,
+      borderColor: theme.IconButton.focusBorderColor,
       svg: {
-        fill: _Identity.COLOR_V2.BLUE
+        fill: theme.general.primaryColor
       }
     }
   })), variant === IconButtonVariant.SECONDARY && _objectSpread({
+    backgroundColor: 'inherit',
     svg: {
-      fill: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
+      fill: disabled ? theme.Input.placeholderColor : theme.general.color
     }
   }, !disabled && {
     '&:hover, &:focus, &:active': {
       svg: {
-        fill: _Identity.COLOR_V2.BLUE
+        fill: theme.general.primaryColor
       }
     },
     '&:focus': {
-      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_300)
+      border: "1px solid ".concat(theme.IconButton.focusBorderColor)
     },
     '&:active': {
-      backgroundColor: _Identity.COLOR_V2.GRAY_10
+      border: "1px solid ".concat(theme.IconButton.secondaryActiveBorderColor),
+      backgroundColor: theme.Input.backgroundColor
     }
   }));
 };

package/src/Misc/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["IconButton.tsx"],"names":["IconButtonVariant","iconButtonStyle","theme","variant","PRIMARY","backgroundColor","disabled","border","borderRadius","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","height","COLOR_V2","GRAY_20","WHITE","GRAY_40","svg","fill","GRAY_70","BLACK","borderColor","GRAY_50","GRAY_60","BLUE_LIGHT_50","BLUE_LIGHT_300","BLUE","SECONDARY","GRAY_10","IconButton","children","props","filterButtonProps"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {TextProps, filterTextProps} from '../Text';\nimport {filterProps} from '../util';\n\nenum IconButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: IconButtonVariant;\n  backgroundColor?: string;\n}\n\nexport const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (\n  theme,\n  {variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false},\n) => ({\n  border: 0,\n  borderRadius: '12px',\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: '40px',\n  height: '32px',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant === IconButtonVariant.PRIMARY && {\n    backgroundColor: disabled ? COLOR_V2.GRAY_20 : backgroundColor || COLOR_V2.WHITE,\n    border: `1px solid ${COLOR_V2.GRAY_40}`,\n    svg: {\n      fill: disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLACK,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GRAY_20,\n      },\n      '&:hover': {\n        borderColor: COLOR_V2.GRAY_50,\n      },\n      '&:focus': {\n        borderColor: COLOR_V2.GRAY_60,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n        borderColor: COLOR_V2.BLUE_LIGHT_300,\n        svg: {\n          fill: COLOR_V2.BLUE,\n        },\n      },\n    }),\n  }),\n  ...(variant === IconButtonVariant.SECONDARY && {\n    svg: {\n      fill: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus, &:active': {\n        svg: {\n          fill: COLOR_V2.BLUE,\n        },\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GRAY_10,\n      },\n    }),\n  }),\n});\n\nexport const IconButton = ({children, ...props}: IconButtonProps) => (\n  <button css={(theme: Theme) => iconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {children}\n  </button>\n);\n\nconst filterButtonProps = (props: IconButtonProps) => {\n  return filterProps(filterTextProps(props) as IconButtonProps, ['backgroundColor']);\n};\n"],"file":"IconButton.js"}
+{"version":3,"sources":["IconButton.tsx"],"names":["IconButtonVariant","iconButtonStyle","theme","variant","PRIMARY","backgroundColor","disabled","border","borderRadius","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","height","IconButton","primaryDisabledBgColor","primaryBgColor","primaryDisabledBorderColor","primaryBorderColor","svg","fill","Input","placeholderColor","general","color","hoverPrimaryBgColor","borderColor","primaryHoverBorderColor","focusBorderColor","activePrimaryBgColor","primaryColor","SECONDARY","secondaryActiveBorderColor","children","props","filterButtonProps"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {TextProps, filterTextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum IconButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: IconButtonVariant;\n  backgroundColor?: string;\n}\n\nexport const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (\n  theme,\n  {variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false},\n) => ({\n  border: 0,\n  borderRadius: '12px',\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: '40px',\n  height: '32px',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant === IconButtonVariant.PRIMARY && {\n    backgroundColor: disabled\n      ? theme.IconButton.primaryDisabledBgColor\n      : backgroundColor || theme.IconButton.primaryBgColor,\n    border: disabled\n      ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`\n      : `1px solid ${theme.IconButton.primaryBorderColor}`,\n    svg: {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.IconButton.hoverPrimaryBgColor,\n      },\n      '&:hover': {\n        borderColor: theme.IconButton.primaryHoverBorderColor,\n      },\n      '&:focus': {\n        borderColor: theme.IconButton.focusBorderColor,\n      },\n      '&:active': {\n        backgroundColor: theme.IconButton.activePrimaryBgColor,\n        borderColor: theme.IconButton.focusBorderColor,\n        svg: {\n          fill: theme.general.primaryColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === IconButtonVariant.SECONDARY && {\n    backgroundColor: 'inherit',\n    svg: {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus, &:active': {\n        svg: {\n          fill: theme.general.primaryColor,\n        },\n      },\n      '&:focus': {\n        border: `1px solid ${theme.IconButton.focusBorderColor}`,\n      },\n      '&:active': {\n        border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,\n        backgroundColor: theme.Input.backgroundColor,\n      },\n    }),\n  }),\n});\n\nexport const IconButton = ({children, ...props}: IconButtonProps) => (\n  <button css={(theme: Theme) => iconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n    {children}\n  </button>\n);\n\nconst filterButtonProps = (props: IconButtonProps) => {\n  return filterProps(filterTextProps(props) as IconButtonProps, ['backgroundColor']);\n};\n"],"file":"IconButton.js"}