@sellout/ui 0.0.62 → 0.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/components/Button.d.ts +2 -1
  2. package/build/components/Button.js +11 -9
  3. package/build/components/PhoneNumberInput.d.ts +1 -0
  4. package/build/components/PhoneNumberInput.js +7 -6
  5. package/build/utils/MediaQuery.js +1 -1
  6. package/package.json +4 -3
package/build/components/Button.d.ts CHANGED
@@ -18,6 +18,7 @@ export declare type ButtonProps = {
18
18
  type?: ButtonTypes;
19
19
  state?: ButtonStates;
20
20
  bgColor?: Colors;
21
+ textColor?: Colors;
21
22
  text?: string;
22
23
  onClick?: any;
23
24
  icon?: any;
@@ -29,4 +30,4 @@ export declare type ButtonProps = {
29
30
  tip?: string;
30
31
  subLabel?: string;
31
32
  };
32
- export default function Button({ type, state, bgColor, text, onClick, icon, iconPosition, iconSize, margin, loading, }: ButtonProps): JSX.Element;
33
+ export default function Button({ type, state, bgColor, textColor, text, onClick, icon, iconPosition, iconSize, margin, loading, }: ButtonProps): JSX.Element;
package/build/components/Button.js CHANGED
@@ -93,7 +93,7 @@ var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
93
93
  if (props.state === ButtonStates.Warning) {
94
94
  return Colors.White;
95
95
  }
96
- return lighten(0.05, props.bgColor || Colors.Orange);
96
+ return lighten(0.025, props.bgColor || Colors.Orange);
97
97
  }, function (props) {
98
98
  if (props.state === ButtonStates.Disabled) {
99
99
  return null;
@@ -106,7 +106,7 @@ var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
106
106
  if (props.state === ButtonStates.Warning) {
107
107
  return Colors.White;
108
108
  }
109
- return darken(0.05, props.bgColor || Colors.Orange);
109
+ return darken(0.025, props.bgColor || Colors.Orange);
110
110
  });
111
111
  var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n font-size: ", ";\n font-weight: ", ";\n text-transform: uppercase;\n margin: ", ";\n color: ", ";\n top: ", ";\n"], ["\n position: relative;\n font-size: ",
112
112
  ";\n font-weight: ",
@@ -132,7 +132,8 @@ var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObj
132
132
  return "700";
133
133
  }
134
134
  if (props.type === ButtonTypes.Regular) {
135
- return "700";
135
+ return "600";
136
+ // return "700";
136
137
  }
137
138
  if (props.type === ButtonTypes.Thin) {
138
139
  return "600";
@@ -162,13 +163,14 @@ var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObj
162
163
  }
163
164
  return null;
164
165
  }, function (props) {
165
- if (props.state === ButtonStates.Disabled) {
166
- return Colors.Grey3;
167
- }
166
+ if (props.state)
167
+ if (props.state === ButtonStates.Disabled) {
168
+ return Colors.Grey3;
169
+ }
168
170
  if (props.state === ButtonStates.Warning) {
169
171
  return Colors.Grey3;
170
172
  }
171
- return Colors.White;
173
+ return props.textColor || Colors.White;
172
174
  }, function (props) {
173
175
  if (props.type === ButtonTypes.Thin) {
174
176
  if (props.icon) {
@@ -179,7 +181,7 @@ var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObj
179
181
  return null;
180
182
  });
181
183
  function Button(_a) {
182
- var _b = _a.type, type = _b === void 0 ? ButtonTypes.Next : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, bgColor = _a.bgColor, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, iconPosition = _a.iconPosition, _e = _a.iconSize, iconSize = _e === void 0 ? 14 : _e,
184
+ var _b = _a.type, type = _b === void 0 ? ButtonTypes.Next : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, bgColor = _a.bgColor, textColor = _a.textColor, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, iconPosition = _a.iconPosition, _e = _a.iconSize, iconSize = _e === void 0 ? 14 : _e,
183
185
  // label,
184
186
  // tip,
185
187
  // subLabel,
@@ -198,7 +200,7 @@ function Button(_a) {
198
200
  }
199
201
  return (React.createElement(Fragment, null,
200
202
  icon && iconPosition === ButtonIconPosition.Left && iconEl,
201
- text && (React.createElement(Text, { type: type, state: state, icon: Boolean(icon), iconPosition: iconPosition }, text)),
203
+ text && (React.createElement(Text, { type: type, state: state, icon: Boolean(icon), iconPosition: iconPosition, textColor: textColor }, text)),
202
204
  icon &&
203
205
  iconPosition === ButtonIconPosition.Right && iconEl));
204
206
  })()));
package/build/components/PhoneNumberInput.d.ts CHANGED
@@ -14,6 +14,7 @@ declare type PhoneNumberInputProps = {
14
14
  placeholder?: string;
15
15
  label?: string;
16
16
  phoneNumberInputSize?: string;
17
+ margin?: string;
17
18
  };
18
19
  declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;
19
20
  export default PhoneNumberInput;
package/build/components/PhoneNumberInput.js CHANGED
@@ -13,14 +13,15 @@ var PhoneNumberInputSizes;
13
13
  PhoneNumberInputSizes["Large"] = "Large";
14
14
  PhoneNumberInputSizes["Regular"] = "Regular";
15
15
  })(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
16
+ var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.margin; });
16
17
  // overwrite the preset style imports
17
- var Container = styled.div(templateObject_1 || (templateObject_1 = __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'; });
18
+ 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'; });
18
19
  var PhoneNumberInput = function (_a) {
19
- 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;
20
- return (React.createElement(React.Fragment, null,
20
+ 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;
21
+ return (React.createElement(Container, { margin: margin },
21
22
  label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
22
- React.createElement(Container, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize },
23
- React.createElement(PhoneInput, { country: 'us', placeholder: "Enter your mobile phone number", preferredCountries: ['us', 'ca'], value: value, onKeyDown: function (e) {
23
+ React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize },
24
+ React.createElement(PhoneInput, { country: "us", placeholder: "Enter your mobile phone number", preferredCountries: ["us", "ca"], value: value, onKeyDown: function (e) {
24
25
  // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
25
26
  if ((e.which === 8 || e.which === 46) && value.length <= 1) {
26
27
  e.preventDefault();
@@ -33,7 +34,7 @@ var PhoneNumberInput = function (_a) {
33
34
  }, countryCodeEditable: false }),
34
35
  validationError && (React.createElement(ValidationError, { validationError: validationError })))));
35
36
  };
36
- var templateObject_1;
37
+ var templateObject_1, templateObject_2;
37
38
 
38
39
  export default PhoneNumberInput;
39
40
  export { PhoneNumberInputSizes };
package/build/utils/MediaQuery.js CHANGED
@@ -18,7 +18,7 @@ var mediaQuery = function (queryTemplate) {
18
18
  var sizes = {
19
19
  tablet: 768,
20
20
  desktop: 992,
21
- largeDesktop: 1200,
21
+ largeDesktop: 1281,
22
22
  extraLargeDesktop: 1536,
23
23
  giant: 1920,
24
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellout/ui",
3
- "version": "0.0.62",
3
+ "version": "0.0.64",
4
4
  "main": "build/index.js",
5
5
  "module": "build/index.es.js",
6
6
  "files": [
@@ -36,6 +36,7 @@
36
36
  "rollup-plugin-multi-input": "^1.1.1",
37
37
  "rollup-plugin-node-resolve": "^5.2.0",
38
38
  "rollup-plugin-peer-deps-external": "^2.2.0",
39
+ "rollup-plugin-svg": "^2.0.0",
39
40
  "rollup-plugin-typescript2": "^0.25.3",
40
41
  "standard": "^14.3.1",
41
42
  "ts-jest": "^24.2.0",
@@ -51,7 +52,7 @@
51
52
  "@fortawesome/pro-solid-svg-icons": "^5.12.1",
52
53
  "@fortawesome/react-fontawesome": "^0.1.9",
53
54
  "@hapi/joi": "^17.1.1",
54
- "@sellout/utils": "^0.0.62",
55
+ "@sellout/utils": "^0.0.64",
55
56
  "@types/escape-html": "^1.0.0",
56
57
  "@types/hapi__joi": "^16.0.12",
57
58
  "csvtojson": "^2.0.10",
@@ -60,7 +61,7 @@
60
61
  "react-animate-height": "^2.0.20",
61
62
  "react-phone-input-2": "^2.13.7"
62
63
  },
63
- "gitHead": "ef82386b2ae4a2bdcb987b3a2cc6fbe951d05cef",
64
+ "gitHead": "33349f3d3da7633d43b091f233c5de22b6df6ee1",
64
65
  "peerDependencies": {
65
66
  "react": "^16.13.0",
66
67
  "react-dom": "^16.13.0",