@longline/aqua-ui 1.0.214 → 1.0.216

package/controls/View/View.js

@@ -44,7 +44,7 @@ var ViewBase = function (props) {
 };
 var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 22px;\n  bottom: 22px;\n  left: 0;\n  right: 0;\n  padding-left: 12px;\n  padding-right: 12px;\n"], ["\n  position: absolute;\n  top: 22px;\n  bottom: 22px;\n  left: 0;\n  right: 0;\n  padding-left: 12px;\n  padding-right: 12px;\n"])));
 var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"], ["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
-var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  min-height: 80px;\n  ", "\n  z-index: 0; // for :before\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n    user-select: none;\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  min-height: 80px;\n  ", "\n  z-index: 0; // for :before\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n    user-select: none;\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && !p.ghost && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "], ["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    user-select: none;\n    ", ", ", ", ", " {\n      visibility: hidden;\n    }  \n  "], ["\n    pointer-events: none;\n    user-select: none;\n    ", ", ", ", ", " {\n      visibility: hidden;\n    }  \n  "])), Label, HintContent, Content); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
+var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  min-height: 80px;\n  ", "\n  z-index: 0; // for :before\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n    user-select: none;\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  min-height: 80px;\n  ", "\n  z-index: 0; // for :before\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n    user-select: none;\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && !p.ghost && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "], ["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    user-select: none;\n    ", ", ", ", ", " {\n      visibility: hidden;\n    }  \n  "], ["\n    pointer-events: none;\n    user-select: none;\n    ", ", ", ", ", " {\n      visibility: hidden;\n    }  \n  "])), Label, HintContent, Content); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
 var BadgeWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n  align-items: center;\n"])));
 var Badge = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 12px;\n  width: 12px;\n  display: flex;\n  font-size: 8px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  background: ", ";\n"], ["\n  height: 12px;\n  width: 12px;\n  display: flex;\n  font-size: 8px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  background: ", ";\n"
     /**

package/inputs/Dropdown/Dropdown.js

@@ -425,7 +425,7 @@ var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2
      * </Dropdown>
      * ```
      */
-])), function (p) { return p.fluid && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[30]; });
+])), function (p) { return p.fluid && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.neutral[30]; });
 /**
  * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or
  * downwards depending on its position in the viewport. Its selection and

package/inputs/Input/Input.js

@@ -74,7 +74,7 @@ var InputBase = function (props) {
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
         React.createElement("input", { className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
 };
-var InputStyled = styled(InputBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; });
+var InputStyled = styled(InputBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; });
 var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };
 Input.displayName = 'Input';
 export { Input };

package/inputs/Input/InputWrapper.js

@@ -53,7 +53,7 @@ var InputWrapperBase = function (props) {
 };
 var Unit = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  sup {\n    vertical-align: baseline;\n    font-size: xx-small;\n    line-height: normal;\n  }  \n"], ["\n  font: ", ";\n  color: ", ";\n  sup {\n    vertical-align: baseline;\n    font-size: xx-small;\n    line-height: normal;\n  }  \n"])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.primary[2]; });
 var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n  overflow-x: hidden;\n"], ["\n  position: relative;\n  flex: 1;\n  overflow-x: hidden;\n"])));
-var InputWrapperStyled = styled(InputWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: 250px;\n  ", "\n  box-sizing:       border-box;\n  z-index:          0;\n  ", ";\n\n  // Content: \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", " {\n    ", "\n  }\n\n  // Appearance:\n  transition:       border-color ", "ms ease;\n  border-radius:    ", "px;\n  background-color: ", ";\n  border:           none;\n  padding:          7px 11px 7px 11px;\n  outline:          none;\n  cursor:           ", ";\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  &:focus-within {\n    outline: solid 2px ", ";\n  }\n\n  // Error\n  ", "\n\n  // Disabled\n  ", "\n\n  // Ghost\n  ", "\n\n  // Transparent (borderless)\n  ", "\n"], ["\n  // Position and size:\n  position: relative;\n  width: 250px;\n  ", "\n  box-sizing:       border-box;\n  z-index:          0;\n  ", ";\n\n  // Content: \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", " {\n    ", "\n  }\n\n  // Appearance:\n  transition:       border-color ", "ms ease;\n  border-radius:    ", "px;\n  background-color: ", ";\n  border:           none;\n  padding:          7px 11px 7px 11px;\n  outline:          none;\n  cursor:           ", ";\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  &:focus-within {\n    outline: solid 2px ", ";\n  }\n\n  // Error\n  ", "\n\n  // Disabled\n  ", "\n\n  // Ghost\n  ", "\n\n  // Transparent (borderless)\n  ", "\n"])), function (p) { return p.fluid && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["flex: 1"], ["flex: 1"]))); }, Content, function (p) { return p.flex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      height: 100%;\n    "], ["\n      height: 100%;\n    "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.error && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    &:focus-within {\n      outline: solid 2px ", ";\n    }\n    &:hover {\n      outline: solid 2px ", ";\n    }    \n    box-shadow: none;\n  "], ["\n    outline: solid 2px ", ";\n    &:focus-within {\n      outline: solid 2px ", ";\n    }\n    &:hover {\n      outline: solid 2px ", ";\n    }    \n    box-shadow: none;\n  "])), p.theme.colors.negative, p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    user-select: none;\n  "], ["\n    outline: solid 2px ", ";\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    user-select: none;\n  "])), p.theme.colors.primary[4], p.theme.colors.primary[4], p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: transparent;\n    color: transparent;\n    pointer-events: none;\n    user-select: none;\n    ", " {\n      visibility: hidden;\n    }\n  "], ["\n    background-color: transparent;\n    color: transparent;\n    pointer-events: none;\n    user-select: none;\n    ", " {\n      visibility: hidden;\n    }\n  "])), Content); }, function (p) { return p.transparent && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    border-width: 0px;\n    outline: none !important;\n    background-color: transparent;\n  "], ["\n    border-width: 0px;\n    outline: none !important;\n    background-color: transparent;\n  "]))); });
+var InputWrapperStyled = styled(InputWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: 250px;\n  ", "\n  box-sizing:       border-box;\n  z-index:          0;\n  ", ";\n\n  // Content: \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", " {\n    ", "\n  }\n\n  // Appearance:\n  transition:       border-color ", "ms ease;\n  border-radius:    ", "px;\n  background-color: ", ";\n  border:           none;\n  padding:          7px 11px 7px 11px;\n  outline:          none;\n  cursor:           ", ";\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  &:focus-within {\n    outline: solid 2px ", ";\n  }\n\n  // Error\n  ", "\n\n  // Disabled\n  ", "\n\n  // Ghost\n  ", "\n\n  // Transparent (borderless)\n  ", "\n"], ["\n  // Position and size:\n  position: relative;\n  width: 250px;\n  ", "\n  box-sizing:       border-box;\n  z-index:          0;\n  ", ";\n\n  // Content: \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ", " {\n    ", "\n  }\n\n  // Appearance:\n  transition:       border-color ", "ms ease;\n  border-radius:    ", "px;\n  background-color: ", ";\n  border:           none;\n  padding:          7px 11px 7px 11px;\n  outline:          none;\n  cursor:           ", ";\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  &:focus-within {\n    outline: solid 2px ", ";\n  }\n\n  // Error\n  ", "\n\n  // Disabled\n  ", "\n\n  // Ghost\n  ", "\n\n  // Transparent (borderless)\n  ", "\n"])), function (p) { return p.fluid && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["flex: 1"], ["flex: 1"]))); }, Content, function (p) { return p.flex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      height: 100%;\n    "], ["\n      height: 100%;\n    "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.error && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    &:focus-within {\n      outline: solid 2px ", ";\n    }\n    &:hover {\n      outline: solid 2px ", ";\n    }    \n    box-shadow: none;\n  "], ["\n    outline: solid 2px ", ";\n    &:focus-within {\n      outline: solid 2px ", ";\n    }\n    &:hover {\n      outline: solid 2px ", ";\n    }    \n    box-shadow: none;\n  "])), p.theme.colors.negative, p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    user-select: none;\n  "], ["\n    outline: solid 2px ", ";\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    user-select: none;\n  "])), p.theme.colors.primary[4], p.theme.colors.primary[4], p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: transparent;\n    color: transparent;\n    pointer-events: none;\n    user-select: none;\n    ", " {\n      visibility: hidden;\n    }\n  "], ["\n    background-color: transparent;\n    color: transparent;\n    pointer-events: none;\n    user-select: none;\n    ", " {\n      visibility: hidden;\n    }\n  "])), Content); }, function (p) { return p.transparent && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    border-width: 0px;\n    outline: none !important;\n    background-color: transparent;\n  "], ["\n    border-width: 0px;\n    outline: none !important;\n    background-color: transparent;\n  "]))); });
 var InputWrapper = function (_a) {
     var _b = _a.iconPosition, iconPosition = _b === void 0 ? 'left' : _b, props = __rest(_a, ["iconPosition"]);
     return React.createElement(InputWrapperStyled, __assign({ iconPosition: iconPosition }, props));

package/inputs/Textarea/Textarea.js

@@ -54,7 +54,7 @@ var TextareaStyled = styled(TextareaBase)(templateObject_6 || (templateObject_6
      * it can be contained in a `Form.Field`. A (vertical) resizer can be added
      * using `resizable`, and a fullscreen toggle is added using `fullscreen`.
      */
-])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), p.minHeight); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["min-height: 100%;"], ["min-height: 100%;"]))); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return (p.disabled || p.transparent || p.ghost) ? 'transparent' : p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.monospaced && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["font: ", ";"], ["font: ", ";"])), p.theme.font.dataLarge); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; });
+])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), p.minHeight); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["min-height: 100%;"], ["min-height: 100%;"]))); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return (p.disabled || p.transparent || p.ghost) ? 'transparent' : p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.monospaced && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["font: ", ";"], ["font: ", ";"])), p.theme.font.dataLarge); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; });
 /**
  * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
  * it can be contained in a `Form.Field`. A (vertical) resizer can be added

package/map/Map/Map.d.ts

@@ -72,7 +72,7 @@ interface IMapProps {
      * IDs of interactive layers.
      * @default []
      */
-    interactiveLayerIDs?: string[];
+    interactiveLayerIds?: string[];
     /**
      * If set, map cannot be rotated using dragging or touch gestures.
      * @default false
@@ -97,10 +97,14 @@ interface IMapProps {
      * Fired when map is clicked.
      */
     onClick?: (e: MapMouseEvent) => void;
+    /**
+     * Fired when mouse moves over map.
+     */
+    onMouseMove?: (e: MapMouseEvent) => void;
 }
 declare const useViewState: () => ViewState;
 declare const Map: {
-    ({ longitude, latitude, zoom, pitch, bearing, logoPosition, interactiveLayerIDs, noRotate, preserveDrawingBuffer, minZoom, maxZoom, fadeDuration, ...props }: IMapProps): React.JSX.Element;
+    ({ longitude, latitude, zoom, pitch, bearing, logoPosition, interactiveLayerIds, noRotate, preserveDrawingBuffer, minZoom, maxZoom, fadeDuration, ...props }: IMapProps): React.JSX.Element;
     displayName: string;
 };
 export { Map, IMapProps, useViewState };

package/map/Map/Map.js

@@ -216,7 +216,7 @@ var MapBase = function (props) {
     var handleMove = function (e) {
         setViewState(e.viewState);
     };
-    return (React.createElement(GLMap, __assign({}, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: props.minZoom, maxZoom: props.maxZoom, interactiveLayerIds: props.interactiveLayerIDs, doubleClickZoom: true, preserveDrawingBuffer: props.preserveDrawingBuffer, fadeDuration: props.fadeDuration, onMove: handleMove, onLoad: handleLoad, onClick: props.onClick }),
+    return (React.createElement(GLMap, __assign({}, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: props.minZoom, maxZoom: props.maxZoom, interactiveLayerIds: props.interactiveLayerIds, doubleClickZoom: true, preserveDrawingBuffer: props.preserveDrawingBuffer, fadeDuration: props.fadeDuration, onMove: handleMove, onMouseMove: props.onMouseMove, onLoad: handleLoad, onClick: props.onClick }),
         props.clipped && React.createElement(React.Fragment, null,
             React.createElement(Source, { type: "raster", tiles: ["https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.webp?access_token=".concat(props.token)] },
                 React.createElement(Layer, { id: "overlay", type: "raster" })),
@@ -227,8 +227,8 @@ var MapBase = function (props) {
 };
 var Controls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
 var Map = function (_a) {
-    var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.logoPosition, logoPosition = _g === void 0 ? 'top-right' : _g, _h = _a.interactiveLayerIDs, interactiveLayerIDs = _h === void 0 ? [] : _h, _j = _a.noRotate, noRotate = _j === void 0 ? false : _j, _k = _a.preserveDrawingBuffer, preserveDrawingBuffer = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, _o = _a.fadeDuration, fadeDuration = _o === void 0 ? 300 : _o, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "logoPosition", "interactiveLayerIDs", "noRotate", "preserveDrawingBuffer", "minZoom", "maxZoom", "fadeDuration"]);
-    return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, logoPosition: logoPosition, interactiveLayerIDs: interactiveLayerIDs, noRotate: noRotate, preserveDrawingBuffer: preserveDrawingBuffer, minZoom: minZoom, maxZoom: maxZoom, fadeDuration: fadeDuration }, props));
+    var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.logoPosition, logoPosition = _g === void 0 ? 'top-right' : _g, _h = _a.interactiveLayerIds, interactiveLayerIds = _h === void 0 ? [] : _h, _j = _a.noRotate, noRotate = _j === void 0 ? false : _j, _k = _a.preserveDrawingBuffer, preserveDrawingBuffer = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, _o = _a.fadeDuration, fadeDuration = _o === void 0 ? 300 : _o, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "logoPosition", "interactiveLayerIds", "noRotate", "preserveDrawingBuffer", "minZoom", "maxZoom", "fadeDuration"]);
+    return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, logoPosition: logoPosition, interactiveLayerIds: interactiveLayerIds, noRotate: noRotate, preserveDrawingBuffer: preserveDrawingBuffer, minZoom: minZoom, maxZoom: maxZoom, fadeDuration: fadeDuration }, props));
 };
 Map.displayName = 'Map';
 export { Map, useViewState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.214",
+  "version": "1.0.216",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",

package/services/Dialog/DialogWindow.js

@@ -7,6 +7,6 @@ import styled, { css } from 'styled-components';
 var DialogWindowBase = React.forwardRef(function (props, ref) {
     return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status), ref: ref }, props.children);
 });
-var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
+var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
 export { DialogWindow };
 var templateObject_1, templateObject_2;