@quoll/ui-components - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/index.d.ts

@@ -7,2 +7,3 @@ export * from "./themes";
 export * from "./IconButton";
+export * from "./Input";
 export * from "./Modal";

dist/Modal/index.d.ts

 import React from "react";
 import ReactModal from "react-modal";
-export declare const Modal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ReactModal.Props, never>> & string & Pick<{
+import { ModalInner } from "./ModalInner";
+import { ModalHeader } from "./ModalHeader";
+import { ModalActions } from "./ModalActions";
+declare const ReactModalAdapter: {
     ({ className, ...props }: ReactModal.Props): React.JSX.Element;
     setAppElement(id: string): void;
-}, "setAppElement">;
+};
+declare type IReactModalAdapter = typeof ReactModalAdapter;
+interface IModal extends IReactModalAdapter {
+    Header: typeof ModalHeader;
+    Inner: typeof ModalInner;
+    Actions: typeof ModalActions;
+}
+export declare const Modal: IModal;
+export {};

dist/ui-components.cjs.development.js

@@ -200,9 +200,69 @@ 'use strict';
 
+var _excluded$1 = ["onChange"];
+
 var _templateObject$5;
+var Wrapper$2 = /*#__PURE__*/styled__default.input(function (_ref) {
+  var theme = _ref.theme;
+  return styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-size: 14px;\n    color: ", ";\n    border: 1px solid ", ";\n    border-radius: 4px;\n    padding: 8px;\n    width: 100%;\n  "])), theme.font.family, theme.font.color, theme.colors.grey);
+});
+var Input = function Input(props) {
+  var onChange = props.onChange,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-var _excluded$1 = ["className"];
+  var handleChange = function handleChange(event) {
+    onChange(event.target.value);
+  };
 
+  return /*#__PURE__*/React.createElement(Wrapper$2, Object.assign({
+    onChange: handleChange,
+    type: "text"
+  }, rest));
+};
+
+var _templateObject$6;
+var ModalInner = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 20px;\n"])));
+
+var _templateObject$7;
+var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var ModalHeader = function ModalHeader(props) {
+  var children = "children" in props ? props.children : null;
+  var onClose = "onClose" in props ? props.onClose : null;
+  return /*#__PURE__*/React.createElement(Wrapper$3, null, children, /*#__PURE__*/React.createElement("div", null), onClose && /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Close",
+    size: 30,
+    onClick: onClose
+  }));
+};
+
+var _excluded$2 = ["align"];
+
+var _templateObject$8;
+var alignMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+
+var _ModalActions = /*#__PURE__*/styled__default.div(function (_ref) {
+  var $align = _ref.$align;
+  return styled.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: ", ";\n    gap: 10px;\n    margin-top: 15px;\n  "])), alignMap[$align]);
+});
+
+var ModalActions = function ModalActions(_ref2) {
+  var _ref2$align = _ref2.align,
+      align = _ref2$align === void 0 ? "end" : _ref2$align,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(_ModalActions, Object.assign({
+    "$align": align
+  }, rest));
+};
+
+var _templateObject$9;
+
+var _excluded$3 = ["className"];
+
 var ReactModalAdapter = function ReactModalAdapter(_ref) {
   var className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
@@ -222,4 +282,7 @@ return /*#__PURE__*/React.createElement(ReactModal, Object.assign({
   var colors = _ref2.theme.colors;
-  return styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
+  return styled.css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
 });
+Modal.Inner = ModalInner;
+Modal.Header = ModalHeader;
+Modal.Actions = ModalActions;
 
@@ -233,2 +296,3 @@ exports.Button = Button;
 exports.IconButton = IconButton;
+exports.Input = Input;
 exports.Modal = Modal;
@@ -235,0 +299,0 @@ exports.iconNames = iconNames;

dist/ui-components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t,o,r=require("@quoll/ui-primitives"),i=require("styled-components"),a=n(i),s=require("polished"),l=n(require("react-calendar")),c=n(require("react")),u=require("react-icons/md"),d=n(require("react-modal"));function p(){return(p=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n}).apply(this,arguments)}function f(n,e){if(null==n)return{};var t,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)e.indexOf(t=i[o])>=0||(r[t]=n[t]);return r}function m(n,e){return e||(e=n.slice(0)),n.raw=e,n}var b,x={default:{colors:r.colorPalette,font:{family:"Roboto, sans-serif",color:r.colorPalette.mineShaft},media:p({},r.breakpoints,{breakpointBetweenAny:function(n,e){return function(t){return i.css(o||(o=m(["\n    @media (min-width: ","px) and (max-width: ","px) {\n      ",";\n    }\n  "])),n,e-1,t)}},breakpointUp:function(n){return function(t){return i.css(e||(e=m(["\n  @media (min-width: ","px) {\n    ",";\n  }\n"])),n,t)}},breakpointDown:function(n){return function(e){return i.css(t||(t=m(["\n  @media (max-width: ","px) {\n    ",";\n  }\n"])),n-1,e)}}})}},h=function(n){var e=n.fontFamily,t=n.fontColor,o=n.backgroundColor,r=n.bold,a=n.disabled,l=n.noHitbox;return i.css(b||(b=m(["\n  border: none;\n  border-radius: 4px;\n\n  font-family: ",";\n  font-size: 14px;\n  font-weight: ",";\n\n  height: ",";\n  min-width: ",";\n  padding: ",";\n\n  background-color: ",";\n  color: ",";\n  cursor: ",";\n\n  &:hover {\n    background-color: ",";\n  }\n"])),e,r?500:null,l?"unset":"36px",l?"unset":"120px",l?0:"0 15px",a?s.lighten(.1,o):o,a?s.lighten(.4,t):t,a?"unset":"pointer",!a&&s.darken(.05,o))},g=a.button((function(n){var e=n.theme,t=e.font;return h({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.whiteSmoke,disabled:n.disabled})}));g.displayName="Button";var v=a.button((function(n){var e=n.theme,t=e.font;return h({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.mediumAquamarine,disabled:n.disabled})}));v.displayName="ButtonPrimary";var y,k=a.button((function(n){var e=n.theme,t=e.font;return h({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.transparent,bold:!0,disabled:n.disabled,noHitbox:!0})}));k.displayName="ButtonPlain";var w,N,C,O,j=a(l)((function(n){var e=n.theme.font;return i.css(y||(y=m(["\n    &.react-calendar {\n      border: none;\n      max-width: 300px;\n\n      * {\n        font-family: ",";\n      }\n    }\n  "])),e.family)})),q=a.div(w||(w=m(["\n  position: relative;\n  height: 4px;\n"]))),M=a.div((function(n){var e=n.theme.colors;return i.css(N||(N=m(["\n    position: absolute;\n    width: 10%;\n    height: 100%;\n    background-color: ",";\n    animation: 1s linear 0s slide infinite;\n\n    @keyframes slide {\n      from {\n        left: 0;\n      }\n      to {\n        left: 100%;\n        width: 50%;\n        transform: translateX(-100%);\n      }\n    }\n  "])),e.mediumAquamarine)})),_={Close:u.MdClose,Help:u.MdHelp,Map:u.MdMap,Next:u.MdNavigateNext,Previous:u.MdNavigateBefore,Settings:u.MdSettings},B=Object.keys(_),P=function(n){var e=n.size;return c.createElement(_[n.icon],{size:void 0===e?40:e})},z=["icon","size"],E=a.button((function(n){var e=n.theme.colors,t=n.disabled;return i.css(C||(C=m(["\n    display: block;\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: ",";\n    cursor: ",";\n  "])),t?e.grey:"unset",t?"unset":"pointer")})),A=["className"],H=function(n){var e=n.className,t=f(n,A);return c.createElement(d,Object.assign({className:e,overlayClassName:e+"__overlay",bodyOpenClassName:e+"__body-open"},t))};H.setAppElement=function(n){return d.setAppElement(n)};var S=a(H)((function(n){var e=n.theme.colors;return i.css(O||(O=m(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ",";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])),e.white)}));exports.Button=g,exports.ButtonPlain=k,exports.ButtonPrimary=v,exports.Calendar=j,exports.HorizontalLoader=function(){return c.createElement(q,null,c.createElement(M,null))},exports.Icon=P,exports.IconButton=function(n){var e=n.icon,t=n.size,o=f(n,z);return c.createElement(E,Object.assign({},o),c.createElement(P,{icon:e,size:t}))},exports.Modal=S,exports.iconNames=B,exports.themes=x;
+"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t,o,r=require("@quoll/ui-primitives"),i=require("styled-components"),a=n(i),l=require("polished"),s=n(require("react-calendar")),c=n(require("react")),u=require("react-icons/md"),d=n(require("react-modal"));function p(){return(p=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n}).apply(this,arguments)}function f(n,e){if(null==n)return{};var t,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)e.indexOf(t=i[o])>=0||(r[t]=n[t]);return r}function m(n,e){return e||(e=n.slice(0)),n.raw=e,n}var b,x={default:{colors:r.colorPalette,font:{family:"Roboto, sans-serif",color:r.colorPalette.mineShaft},media:p({},r.breakpoints,{breakpointBetweenAny:function(n,e){return function(t){return i.css(o||(o=m(["\n    @media (min-width: ","px) and (max-width: ","px) {\n      ",";\n    }\n  "])),n,e-1,t)}},breakpointUp:function(n){return function(t){return i.css(e||(e=m(["\n  @media (min-width: ","px) {\n    ",";\n  }\n"])),n,t)}},breakpointDown:function(n){return function(e){return i.css(t||(t=m(["\n  @media (max-width: ","px) {\n    ",";\n  }\n"])),n-1,e)}}})}},g=function(n){var e=n.fontFamily,t=n.fontColor,o=n.backgroundColor,r=n.bold,a=n.disabled,s=n.noHitbox;return i.css(b||(b=m(["\n  border: none;\n  border-radius: 4px;\n\n  font-family: ",";\n  font-size: 14px;\n  font-weight: ",";\n\n  height: ",";\n  min-width: ",";\n  padding: ",";\n\n  background-color: ",";\n  color: ",";\n  cursor: ",";\n\n  &:hover {\n    background-color: ",";\n  }\n"])),e,r?500:null,s?"unset":"36px",s?"unset":"120px",s?0:"0 15px",a?l.lighten(.1,o):o,a?l.lighten(.4,t):t,a?"unset":"pointer",!a&&l.darken(.05,o))},h=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.whiteSmoke,disabled:n.disabled})}));h.displayName="Button";var v=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.mediumAquamarine,disabled:n.disabled})}));v.displayName="ButtonPrimary";var y,w=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.transparent,bold:!0,disabled:n.disabled,noHitbox:!0})}));w.displayName="ButtonPlain";var k,C,j,N,E,O,q,z,M=a(s)((function(n){var e=n.theme.font;return i.css(y||(y=m(["\n    &.react-calendar {\n      border: none;\n      max-width: 300px;\n\n      * {\n        font-family: ",";\n      }\n    }\n  "])),e.family)})),_=a.div(k||(k=m(["\n  position: relative;\n  height: 4px;\n"]))),B=a.div((function(n){var e=n.theme.colors;return i.css(C||(C=m(["\n    position: absolute;\n    width: 10%;\n    height: 100%;\n    background-color: ",";\n    animation: 1s linear 0s slide infinite;\n\n    @keyframes slide {\n      from {\n        left: 0;\n      }\n      to {\n        left: 100%;\n        width: 50%;\n        transform: translateX(-100%);\n      }\n    }\n  "])),e.mediumAquamarine)})),P={Close:u.MdClose,Help:u.MdHelp,Map:u.MdMap,Next:u.MdNavigateNext,Previous:u.MdNavigateBefore,Settings:u.MdSettings},A=Object.keys(P),H=function(n){var e=n.size;return c.createElement(P[n.icon],{size:void 0===e?40:e})},S=["icon","size"],F=a.button((function(n){var e=n.theme.colors,t=n.disabled;return i.css(j||(j=m(["\n    display: block;\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: ",";\n    cursor: ",";\n  "])),t?e.grey:"unset",t?"unset":"pointer")})),I=function(n){var e=n.icon,t=n.size,o=f(n,S);return c.createElement(F,Object.assign({},o),c.createElement(H,{icon:e,size:t}))},$=["onChange"],D=a.input((function(n){var e=n.theme;return i.css(N||(N=m(["\n    font-family: ",";\n    font-size: 14px;\n    color: ",";\n    border: 1px solid ",";\n    border-radius: 4px;\n    padding: 8px;\n    width: 100%;\n  "])),e.font.family,e.font.color,e.colors.grey)})),L=a.div(E||(E=m(["\n  padding: 20px;\n"]))),R=a.div(O||(O=m(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"]))),U=["align"],X={start:"flex-start",center:"center",end:"flex-end"},G=a.div((function(n){var e=n.$align;return i.css(q||(q=m(["\n    display: flex;\n    justify-content: ",";\n    gap: 10px;\n    margin-top: 15px;\n  "])),X[e])})),J=["className"],K=function(n){var e=n.className,t=f(n,J);return c.createElement(d,Object.assign({className:e,overlayClassName:e+"__overlay",bodyOpenClassName:e+"__body-open"},t))};K.setAppElement=function(n){return d.setAppElement(n)};var Q=a(K)((function(n){var e=n.theme.colors;return i.css(z||(z=m(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ",";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])),e.white)}));Q.Inner=L,Q.Header=function(n){var e="onClose"in n?n.onClose:null;return c.createElement(R,null,"children"in n?n.children:null,c.createElement("div",null),e&&c.createElement(I,{icon:"Close",size:30,onClick:e}))},Q.Actions=function(n){var e=n.align,t=void 0===e?"end":e,o=f(n,U);return c.createElement(G,Object.assign({$align:t},o))},exports.Button=h,exports.ButtonPlain=w,exports.ButtonPrimary=v,exports.Calendar=M,exports.HorizontalLoader=function(){return c.createElement(_,null,c.createElement(B,null))},exports.Icon=H,exports.IconButton=I,exports.Input=function(n){var e=n.onChange,t=f(n,$);return c.createElement(D,Object.assign({onChange:function(n){e(n.target.value)},type:"text"},t))},exports.Modal=Q,exports.iconNames=A,exports.themes=x;
 //# sourceMappingURL=ui-components.cjs.production.min.js.map

dist/ui-components.esm.js

@@ -193,9 +193,69 @@ import { colorPalette, breakpoints } from '@quoll/ui-primitives';
 
+var _excluded$1 = ["onChange"];
+
 var _templateObject$5;
+var Wrapper$2 = /*#__PURE__*/styled.input(function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n    font-family: ", ";\n    font-size: 14px;\n    color: ", ";\n    border: 1px solid ", ";\n    border-radius: 4px;\n    padding: 8px;\n    width: 100%;\n  "])), theme.font.family, theme.font.color, theme.colors.grey);
+});
+var Input = function Input(props) {
+  var onChange = props.onChange,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-var _excluded$1 = ["className"];
+  var handleChange = function handleChange(event) {
+    onChange(event.target.value);
+  };
 
+  return /*#__PURE__*/React.createElement(Wrapper$2, Object.assign({
+    onChange: handleChange,
+    type: "text"
+  }, rest));
+};
+
+var _templateObject$6;
+var ModalInner = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 20px;\n"])));
+
+var _templateObject$7;
+var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var ModalHeader = function ModalHeader(props) {
+  var children = "children" in props ? props.children : null;
+  var onClose = "onClose" in props ? props.onClose : null;
+  return /*#__PURE__*/React.createElement(Wrapper$3, null, children, /*#__PURE__*/React.createElement("div", null), onClose && /*#__PURE__*/React.createElement(IconButton, {
+    icon: "Close",
+    size: 30,
+    onClick: onClose
+  }));
+};
+
+var _excluded$2 = ["align"];
+
+var _templateObject$8;
+var alignMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+
+var _ModalActions = /*#__PURE__*/styled.div(function (_ref) {
+  var $align = _ref.$align;
+  return css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: ", ";\n    gap: 10px;\n    margin-top: 15px;\n  "])), alignMap[$align]);
+});
+
+var ModalActions = function ModalActions(_ref2) {
+  var _ref2$align = _ref2.align,
+      align = _ref2$align === void 0 ? "end" : _ref2$align,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(_ModalActions, Object.assign({
+    "$align": align
+  }, rest));
+};
+
+var _templateObject$9;
+
+var _excluded$3 = ["className"];
+
 var ReactModalAdapter = function ReactModalAdapter(_ref) {
   var className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
@@ -215,6 +275,9 @@ return /*#__PURE__*/React.createElement(ReactModal, Object.assign({
   var colors = _ref2.theme.colors;
-  return css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
+  return css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
 });
+Modal.Inner = ModalInner;
+Modal.Header = ModalHeader;
+Modal.Actions = ModalActions;
 
-export { Button, ButtonPlain, ButtonPrimary, Calendar, HorizontalLoader, Icon, IconButton, Modal, iconNames, themes };
+export { Button, ButtonPlain, ButtonPrimary, Calendar, HorizontalLoader, Icon, IconButton, Input, Modal, iconNames, themes };
 //# sourceMappingURL=ui-components.esm.js.map

package.json

 {
   "name": "@quoll/ui-components",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "UI components for the web apps",
@@ -84,3 +84,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "6e9bce352627c1a9816146a43537f5589e6d9acc"
+  "gitHead": "d267f762546548120ece157477d0bbed6fa517f8"
 }

src/index.ts

@@ -8,2 +8,3 @@ export * from "./themes";
 export * from "./IconButton";
+export * from "./Input";
 export * from "./Modal";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109066

increased by32.05%

Number of package files

53

increased by39.47%

Lines of code

1320

increased by34.83%

No dependency changes