@sellout/ui 0.0.68 → 0.0.70

package/build/components/Button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Colors } from '../Colors';
 export declare enum ButtonTypes {
     Next = "Next",

package/build/components/Button.js

@@ -34,7 +34,7 @@ var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
     ";\n    background-color: ",
     ";\n  }\n"])), function (props) {
     if (props.type === ButtonTypes.Next) {
-        return "50px";
+        return "48px";
     }
     if (props.type === ButtonTypes.Regular) {
         return "40px";

package/build/components/Counter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type CounterProps = {
     value: number;
     maxValue?: number;

package/build/components/Counter.js

@@ -18,10 +18,10 @@ function Counter(_a) {
     return (React.createElement(Container, null,
         value > 0 && (React.createElement(Fragment, null,
             React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
-                React.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? Colors.Orange : Colors.Grey5 })),
+                React.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? Colors.Orange : Colors.Grey5, size: 24 })),
             React.createElement(Value, null, value))),
         React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
-            React.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5 }))));
+            React.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5, size: 24 }))));
 }
 var templateObject_1, templateObject_2, templateObject_3;
 

package/build/components/Dropdown.js

@@ -8,8 +8,8 @@ import Label from './Label.js';
 import Flex from './Flex.js';
 
 var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 65px;\n  width: ", ";\n"], ["\n  position: relative;\n  height: 65px;\n  width: ", ";\n"])), function (props) { return props.width; });
-var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"], ["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ",
-    ";\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"])), function (props) { return (props.open ? props.height : "38px"); }, function (props) { return props.width; }, Colors.White, Colors.Grey5, function (props) { return (props.open ? 100 : 0); }, function (props) {
+var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer;\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"], ["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ",
+    ";\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer;\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"])), function (props) { return (props.open ? props.height : "38px"); }, function (props) { return props.width; }, Colors.White, Colors.Grey5, function (props) { return (props.open ? 100 : 0); }, function (props) {
     return props.open ? "0px 4px 16px rgba(0, 0, 0, 0.05)" : "";
 }, darken(0.05, Colors.Grey5), Colors.Grey4);
 var TopRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: 38px;\n  padding: 0 15px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: 38px;\n  padding: 0 15px;\n"])));

package/build/components/PhoneNumberInput.d.ts

@@ -15,6 +15,7 @@ declare type PhoneNumberInputProps = {
     label?: string;
     phoneNumberInputSize?: string;
     margin?: string;
+    autoFocus?: boolean;
 };
 declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;
 export default PhoneNumberInput;

package/build/components/PhoneNumberInput.js

@@ -17,7 +17,7 @@ var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplat
 // overwrite the preset style imports
 var InnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .react-tel-input {\n    font-family: \"neue-haas-grotesk-display\", sans-serif;\n    font-size: ", ";\n    position: relative;\n    width: 100%;\n    :disabled {\n      cursor: not-allowed;\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      text-indent: 15px;\n      transition: all 0.2s;\n      color: ", ";\n      font-weight: 500;\n      position: relative;\n      font-size: ", ";\n      margin-top: 0 !important;\n      margin-bottom: 0 !important;\n      margin-left: 50px;\n      padding-left: 0;\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: 0px 10px 10px 0px;\n      height: ", ";\n      width: calc(100% - 50px);\n      z-index: 1;\n      outline: none;\n      &:hover {\n        border: 1px solid ", ";\n      }\n      &.invalid-number {\n        border: 1px solid ", ";\n        background-color: ", ";\n        border-left-color: ", ";\n        &:focus {\n          border: 1px solid ", ";\n          border-left-color: ", ";\n          background-color: ", ";\n        }\n      }\n      &.open {\n        border-color: ", ";\n        border-radius: 0px 10px 0 0;\n        /* border-bottom: none; */\n        box-shadow: none;\n      }\n      ::placeholder {\n        color: ", ";\n      }\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n\n    .flag-dropdown {\n      outline: none;\n      position: absolute;\n      width: 100%;\n      top: 0;\n      bottom: 0;\n      padding: 0;\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: 10px;\n      &.open {\n        background: ", ";\n        border-radius: 10px 10px 0 0;\n        .selected-flag {\n          background: ", ";\n          border-radius: 10px 0 0 0;\n        }\n      }\n      &:hover, &:focus {\n        cursor: pointer;\n        .selected-flag {\n          background-color: ", ";\n        }\n      }\n    }\n\n    input[disabled] {\n      &+.flag-dropdown {\n        &:hover {\n          cursor: default;\n          .selected-flag {\n            background-color: transparent;\n          }\n        }\n      }\n    }\n\n    .selected-flag {\n      transition: all 0.2s;\n      background: ", ";\n      position: relative;\n      width: 50px;\n      height: 100%;\n      padding: 0 0 0 10px;\n      border-radius: 10px 0 0 10px;\n      .flag {\n        position: absolute;\n        top: 50%;\n        margin-top: -5px;\n      }\n      .arrow {\n        position: relative;\n        top: 50%;\n        margin-top: -2px;\n        left: 25px;\n        width: 0;\n        height: 0;\n        border-left: 3px solid transparent;\n        border-right: 3px solid transparent;\n        border-top: 4px solid #555;\n        &.up {\n          border-top: none;\n          border-bottom: 4px solid #555;\n        }\n      }\n      &.open {\n        z-index: 2;\n      }\n    }\n\n    .country-list {\n      z-index: 2;\n      border-radius: 0 0 10px 10px;\n      border: 1px solid ", ";\n      border-top: none;\n      list-style: none;\n      position: absolute;\n      padding: 0;\n      margin: 0px 0 10px -1px;\n      box-shadow: unset;\n      background-color: ", ";\n      width: calc(100% + 2px);\n      max-height: ", ";\n      overflow-y: scroll;\n      .flag {\n        display: inline-block;\n      }\n      .divider {\n        padding-bottom: 5px;\n        margin-bottom: 5px;\n        border-bottom: 1px solid #ccc;\n      }\n      .country {\n        padding: 7px 9px;\n        .dial-code {\n          color: #6b6b6b;\n        }\n        &:hover {\n          background-color: #f1f1f1;\n        }\n        &.highlight {\n          background-color: #f1f1f1;\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: #fff;\n        padding: 5px 0 6px 10px;\n      }\n      .search-emoji {\n        display: none;\n        font-size: ", ";\n      }\n      .search-box {\n        border: 1px solid #cacaca;\n        border-radius: 3px;\n        font-size: ", ";\n        line-height: 15px;\n        padding: 3px 8px 5px;\n        outline: none;\n      }\n      .no-entries-message {\n        padding: 7px 10px 11px;\n        opacity: .7;\n      }\n      &::-webkit-scrollbar { width: 12px; }\n      &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n      &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n    }\n\n    .invalid-number-message {\n      position: absolute;\n      z-index: 1;\n      font-size: ", ";\n      left: 46px;\n      top: -8px;\n      background: #fff;\n      padding: 0 2px;\n      color: #de0000;\n    }\n  }\n"], ["\n  .react-tel-input {\n    font-family: \"neue-haas-grotesk-display\", sans-serif;\n    font-size: ", ";\n    position: relative;\n    width: 100%;\n    :disabled {\n      cursor: not-allowed;\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      text-indent: 15px;\n      transition: all 0.2s;\n      color: ", ";\n      font-weight: 500;\n      position: relative;\n      font-size: ", ";\n      margin-top: 0 !important;\n      margin-bottom: 0 !important;\n      margin-left: 50px;\n      padding-left: 0;\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: 0px 10px 10px 0px;\n      height: ", ";\n      width: calc(100% - 50px);\n      z-index: 1;\n      outline: none;\n      &:hover {\n        border: 1px solid ", ";\n      }\n      &.invalid-number {\n        border: 1px solid ", ";\n        background-color: ", ";\n        border-left-color: ", ";\n        &:focus {\n          border: 1px solid ", ";\n          border-left-color: ", ";\n          background-color: ", ";\n        }\n      }\n      &.open {\n        border-color: ", ";\n        border-radius: 0px 10px 0 0;\n        /* border-bottom: none; */\n        box-shadow: none;\n      }\n      ::placeholder {\n        color: ", ";\n      }\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n\n    .flag-dropdown {\n      outline: none;\n      position: absolute;\n      width: 100%;\n      top: 0;\n      bottom: 0;\n      padding: 0;\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: 10px;\n      &.open {\n        background: ", ";\n        border-radius: 10px 10px 0 0;\n        .selected-flag {\n          background: ", ";\n          border-radius: 10px 0 0 0;\n        }\n      }\n      &:hover, &:focus {\n        cursor: pointer;\n        .selected-flag {\n          background-color: ", ";\n        }\n      }\n    }\n\n    input[disabled] {\n      &+.flag-dropdown {\n        &:hover {\n          cursor: default;\n          .selected-flag {\n            background-color: transparent;\n          }\n        }\n      }\n    }\n\n    .selected-flag {\n      transition: all 0.2s;\n      background: ", ";\n      position: relative;\n      width: 50px;\n      height: 100%;\n      padding: 0 0 0 10px;\n      border-radius: 10px 0 0 10px;\n      .flag {\n        position: absolute;\n        top: 50%;\n        margin-top: -5px;\n      }\n      .arrow {\n        position: relative;\n        top: 50%;\n        margin-top: -2px;\n        left: 25px;\n        width: 0;\n        height: 0;\n        border-left: 3px solid transparent;\n        border-right: 3px solid transparent;\n        border-top: 4px solid #555;\n        &.up {\n          border-top: none;\n          border-bottom: 4px solid #555;\n        }\n      }\n      &.open {\n        z-index: 2;\n      }\n    }\n\n    .country-list {\n      z-index: 2;\n      border-radius: 0 0 10px 10px;\n      border: 1px solid ", ";\n      border-top: none;\n      list-style: none;\n      position: absolute;\n      padding: 0;\n      margin: 0px 0 10px -1px;\n      box-shadow: unset;\n      background-color: ", ";\n      width: calc(100% + 2px);\n      max-height: ", ";\n      overflow-y: scroll;\n      .flag {\n        display: inline-block;\n      }\n      .divider {\n        padding-bottom: 5px;\n        margin-bottom: 5px;\n        border-bottom: 1px solid #ccc;\n      }\n      .country {\n        padding: 7px 9px;\n        .dial-code {\n          color: #6b6b6b;\n        }\n        &:hover {\n          background-color: #f1f1f1;\n        }\n        &.highlight {\n          background-color: #f1f1f1;\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: #fff;\n        padding: 5px 0 6px 10px;\n      }\n      .search-emoji {\n        display: none;\n        font-size: ", ";\n      }\n      .search-box {\n        border: 1px solid #cacaca;\n        border-radius: 3px;\n        font-size: ", ";\n        line-height: 15px;\n        padding: 3px 8px 5px;\n        outline: none;\n      }\n      .no-entries-message {\n        padding: 7px 10px 11px;\n        opacity: .7;\n      }\n      &::-webkit-scrollbar { width: 12px; }\n      &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n      &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n    }\n\n    .invalid-number-message {\n      position: absolute;\n      z-index: 1;\n      font-size: ", ";\n      left: 46px;\n      top: -8px;\n      background: #fff;\n      padding: 0 2px;\n      color: #de0000;\n    }\n  }\n"])), function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.Grey1, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.White, Colors.Grey5, function (props) { return props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '48px'; }, Colors.Grey5, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey4, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey5, Colors.White, function (props) { return props.isMobile ? '180px' : '200px'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; });
 var PhoneNumberInput = function (_a) {
-    var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label, margin = _a.margin;
+    var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label, margin = _a.margin, autoFocus = _a.autoFocus;
     return (React.createElement(Container, { margin: margin },
         label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
         React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize },
@@ -31,7 +31,9 @@ var PhoneNumberInput = function (_a) {
                     }
                 }, onChange: function (value) {
                     onChange(value);
-                }, countryCodeEditable: false }),
+                }, countryCodeEditable: false, inputProps: {
+                    autoFocus: autoFocus,
+                } }),
             validationError && (React.createElement(ValidationError, { validationError: validationError })))));
 };
 var templateObject_1, templateObject_2;

package/build/components/Product.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 import { CounterProps } from './Counter';
 export declare type ProductProps = {
     title: string;
     price: number;
+    isRSVP?: boolean;
     subtitle?: string;
     description?: string;
     imageUrl?: string;
 } & CounterProps;
-export default function Product({ title, price, subtitle, description, value, minValue, maxValue, onIncrement, onDecrement, }: ProductProps): JSX.Element;
+export default function Product({ title, price, isRSVP, subtitle, description, value, minValue, maxValue, onIncrement, onDecrement, }: ProductProps): JSX.Element;

package/build/components/Product.js

@@ -9,7 +9,7 @@ import { output } from '@sellout/utils/.dist/price';
 
 var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n"])), function (props) { return props.justify; });
 var Column = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0 30px;\n  padding: 25px 0;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  margin: 0 30px;\n  padding: 25px 0;\n  border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
+var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
 var Title = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"], ["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"])), Colors.Grey1);
 var Price = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n"], ["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n"])), Colors.Grey2);
 var Subtitle = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"])), Colors.Grey3);
@@ -17,11 +17,11 @@ var Description = styled.div(templateObject_7 || (templateObject_7 = __makeTempl
 var Ellipsis = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) { return props.active ? 3 : null; }, function (props) { return props.active ? 'vertical' : null; });
 var ShowMore = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), Colors.Orange, lighten(0.025, Colors.Orange), darken(0.025, Colors.Orange));
 function Product(_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.price, price = _c === void 0 ? 0 : _c, _d = _a.subtitle, subtitle = _d === void 0 ? '' : _d, _e = _a.description, description = _e === void 0 ? '' : _e, 
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.price, price = _c === void 0 ? 0 : _c, _d = _a.isRSVP, isRSVP = _d === void 0 ? false : _d, _e = _a.subtitle, subtitle = _e === void 0 ? '' : _e, _f = _a.description, description = _f === void 0 ? '' : _f, 
     // Counter Props
     value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
-    var _f = useState(false), showMore = _f[0], setShowMore = _f[1];
-    var _g = useState(true), showEllipsis = _g[0], setShowEllipsis = _g[1];
+    var _g = useState(false), showMore = _g[0], setShowMore = _g[1];
+    var _h = useState(true), showEllipsis = _h[0], setShowEllipsis = _h[1];
     var descModified = description;
     if (descModified.length > 210 && !showMore) {
         descModified = descModified.substring(0, 210) + '...';
@@ -34,9 +34,7 @@ function Product(_a) {
         React.createElement(Row, { justify: "space-between" },
             React.createElement(Column, null,
                 React.createElement(Title, null, title),
-                React.createElement(Price, null,
-                    "$",
-                    output(price))),
+                React.createElement(Price, null, isRSVP ? 'RSVP' : "$" + output(price))),
             React.createElement(Counter, { value: value, minValue: minValue, maxValue: maxValue, onIncrement: onIncrement, onDecrement: onDecrement })),
         React.createElement(Row, null, subtitle && React.createElement(Subtitle, null, subtitle)),
         (function () {

package/build/components/UserImage.js

@@ -2,16 +2,17 @@ import { Colors } from '../Colors.js';
 import { __makeTemplateObject } from '../_virtual/_tslib.js';
 import React from 'react';
 import styled from 'styled-components';
+import Icon, { Icons } from './Icon.js';
 
 var UserImageDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  border-radius: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: ", ";\n  background-image: ", ";\n  background-position: center;\n  background-size: cover;\n"], ["\n  background-color: ", ";\n  height: ", ";\n  width: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  border-radius: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: ", ";\n  background-image: ", ";\n  background-position: center;\n  background-size: cover;\n"])), function (props) { return (props.invert ? Colors.White : Colors.Grey1); }, function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return (props.circle ? '50%' : '0'); }, function (props) { return (props.invert ? Colors.Grey1 : Colors.White); }, function (props) { return props.size; }, function (props) { return props.margin || '0px 10px 0px 0px'; }, function (props) { return "url(" + props.src + ")"; });
 var UserImage = function (_a) {
     var imageUrl = _a.imageUrl, _b = _a.height, height = _b === void 0 ? '45px' : _b, _c = _a.size, size = _c === void 0 ? '1.8rem' : _c, firstName = _a.firstName, lastName = _a.lastName, margin = _a.margin, invert = _a.invert, _d = _a.circle, circle = _d === void 0 ? true : _d;
     if (!imageUrl) {
-        var userInitials = '?';
+        var userInitials = '';
         if (firstName && lastName) {
             userInitials = "" + firstName.split('')[0] + lastName.split('')[0];
         }
-        return (React.createElement(UserImageDiv, { height: height, margin: margin, invert: invert, size: size, circle: circle }, userInitials));
+        return (React.createElement(UserImageDiv, { height: height, margin: margin, invert: invert, size: size, circle: circle }, userInitials ? userInitials : (React.createElement(Icon, { icon: Icons.UserSolid, color: invert ? Colors.Grey1 : Colors.White, size: 16 }))));
     }
     return (React.createElement(UserImageDiv, { src: imageUrl, height: height, margin: margin, circle: circle }));
 };

package/build/components/UserInfo.js

@@ -28,9 +28,9 @@ var UserInfo = function (_a) {
     return (React.createElement(Container, null,
         React.createElement(UserImage, { imageUrl: imageUrl, height: height, size: isLarge ? "1.8rem" : "1.4rem", firstName: firstName, lastName: lastName, invert: invert }),
         React.createElement(Details, null,
-            React.createElement(UserName, null),
-            React.createElement(UserEmail, null),
-            isLarge && React.createElement(UserPhoneNumber, null))));
+            firstName && lastName && React.createElement(UserName, null),
+            email && React.createElement(UserEmail, null),
+            isLarge && phoneNumber && React.createElement(UserPhoneNumber, null))));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 

package/build/utils/MediaQuery.d.ts

@@ -12,6 +12,7 @@ export declare const media: {
 };
 export declare const useMedia: (query: any) => boolean;
 export declare const useMobileMedia: () => boolean;
+export declare const useTabletMedia: () => boolean;
 export declare const useDesktopMedia: () => boolean;
 export declare const useLargeDesktopMedia: () => boolean;
 export declare const useGiantMedia: () => boolean;

package/build/utils/MediaQuery.js

@@ -56,9 +56,10 @@ var useMedia = function (query) {
     return isMatch;
 };
 var useMobileMedia = function () { return useMedia("" + queryStrings.mobile); };
+var useTabletMedia = function () { return useMedia("" + queryStrings.tablet); };
 var useDesktopMedia = function () { return useMedia("" + queryStrings.desktop); };
 var useLargeDesktopMedia = function () { return useMedia("" + queryStrings.largeDesktop); };
 var useGiantMedia = function () { return useMedia("" + queryStrings.giant); };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
-export { media, useDesktopMedia, useGiantMedia, useLargeDesktopMedia, useMedia, useMobileMedia };
+export { media, useDesktopMedia, useGiantMedia, useLargeDesktopMedia, useMedia, useMobileMedia, useTabletMedia };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
@@ -56,8 +56,8 @@
     "@hapi/joi": "^17.1.1",
     "@react-pdf/primitives": "^2.0.0-beta.11",
     "@react-pdf/renderer": "^2.0.0-beta.14",
-    "@sellout/models": "^0.0.68",
-    "@sellout/utils": "^0.0.68",
+    "@sellout/models": "^0.0.70",
+    "@sellout/utils": "^0.0.70",
     "@types/escape-html": "^1.0.0",
     "@types/hapi__joi": "^16.0.12",
     "@types/react-pdf": "^4.0.6",
@@ -70,7 +70,7 @@
     "rollup-plugin-url": "^3.0.1",
     "shortid": "^2.2.15"
   },
-  "gitHead": "d5ab7b3e09d308e963b68a107762880f17f4fbbc",
+  "gitHead": "d92f4201d8d3d210acac2de571282768c95e8303",
   "peerDependencies": {
     "react": "^16.13.0",
     "react-dom": "^16.13.0",