@sellout/ui 0.0.300 → 0.0.301

package/build/components/TextButton.d.ts

@@ -14,6 +14,8 @@ declare type TextButtonProps = {
     iconRotation?: number;
     color?: Colors;
     textWithoutLink?: string | React.ReactNode;
+    fontFamily?: string;
+    iconMargin?: string;
 };
 declare const TextButton: React.FC<TextButtonProps>;
 export default TextButton;

package/build/components/TextButton.js

@@ -11,8 +11,8 @@ var TextButtonSizes;
     TextButtonSizes["Small"] = "Small";
 })(TextButtonSizes || (TextButtonSizes = {}));
 var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: ", ";\n"])), function (props) { return props.margin; });
-var Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  &:hover {\n    text-decoration: none;\n  }\n"], ["\n  font-size: ",
-    ";\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
+var Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  font-family:", ";\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  &:hover {\n    text-decoration: none;\n  }\n"], ["\n  font-size: ",
+    ";\n  color: ", ";\n  font-family:", ";\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
     if (props.size === TextButtonSizes.Large)
         return "1.8rem";
     if (props.size === TextButtonSizes.Regular)
@@ -20,11 +20,11 @@ var Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObje
     if (props.size === TextButtonSizes.Small)
         return "1.2rem";
     return "1.4rem";
-}, function (props) { return props.color; });
+}, function (props) { return props.color; }, function (props) { return props.fontFamily; });
 var TextWithoutLink = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 2px;\n"], ["\n  padding-right: 2px;\n"])));
 var InnerContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n}"], ["\n  display: flex;\n  align-items: center;\n}"])));
 var TextButton = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? TextButtonSizes.Regular : _b, onClick = _a.onClick, margin = _a.margin, icon = _a.icon, iconRotation = _a.iconRotation, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, textWithoutLink = _a.textWithoutLink;
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? TextButtonSizes.Regular : _b, onClick = _a.onClick, margin = _a.margin, icon = _a.icon, iconRotation = _a.iconRotation, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, textWithoutLink = _a.textWithoutLink, fontFamily = _a.fontFamily, iconMargin = _a.iconMargin;
     var iconSize = (function () {
         if (size === TextButtonSizes.Large) {
             return 14;
@@ -39,9 +39,9 @@ var TextButton = function (_a) {
     })();
     return (React.createElement(Container, { margin: margin },
         React.createElement(InnerContainer, { onClick: onClick ? onClick : function () { } },
-            icon && (React.createElement(Icon, { icon: icon, size: iconSize, color: color, margin: "0 7px 0 0", rotation: iconRotation })),
+            icon && (React.createElement(Icon, { icon: icon, size: iconSize, color: color, margin: iconMargin || "0 7px 0 0", rotation: iconRotation })),
             React.createElement(TextWithoutLink, null, textWithoutLink),
-            React.createElement(Text, { size: size, color: color }, children))));
+            React.createElement(Text, { size: size, color: color, fontFamily: fontFamily }, children))));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 

package/build/components/TextButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextButton.js","sources":["../../src/components/TextButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from '../Colors';\nimport Icon from './Icon';\n\nexport enum TextButtonSizes {\n  Large = \"Large\",\n  Regular = \"Regular\",\n  Small = \"Small\",\n}\n\ntype ContainerProps = {\n  margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: ${(props) => props.margin};\n`;\n\ntype TextProps = {\n  size: TextButtonSizes;\n  color: Colors;\n};\n\nconst Text = styled.div<TextProps>`\n  font-size: ${(props) => {\n    if (props.size === TextButtonSizes.Large) return \"1.8rem\";\n    if (props.size === TextButtonSizes.Regular) return \"1.4rem\";\n    if (props.size === TextButtonSizes.Small) return \"1.2rem\";\n    return \"1.4rem\";\n  }};\n  color: ${props => props.color};\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  &:hover {\n    text-decoration: none;\n  }\n`;\n\nconst TextWithoutLink = styled.span`\n  padding-right: 2px;\n`;\n\nconst InnerContainer = styled.div`\n  display: flex;\n  align-items: center;\n}`;\n\ntype TextButtonProps = {\n  children: string | React.ReactNode;\n  size?: TextButtonSizes;\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  margin?: string;\n  icon?: any;\n  iconRotation?: number;\n  color?: Colors;\n  textWithoutLink?:string| React.ReactNode;\n};\n\nconst TextButton: React.FC<TextButtonProps> = ({\n  children,\n  size = TextButtonSizes.Regular,\n  onClick,\n  margin,\n  icon,\n  iconRotation,\n  color = Colors.Orange,\n  textWithoutLink,\n}) => {\n\n  const iconSize = (() => {\n    if (size === TextButtonSizes.Large) {\n      return 14;\n    }\n    if (size === TextButtonSizes.Regular) {\n      return 12;\n    }\n    if (size === TextButtonSizes.Small) {\n      return 10;\n    }\n    return 12;\n  })();\n\n  return (\n    <Container margin={margin}>\n      <InnerContainer onClick={onClick ? onClick : () => { }}>\n        {icon && (\n          <Icon\n            icon={icon}\n            size={iconSize}\n            color={color}\n            margin=\"0 7px 0 0\"\n            rotation={iconRotation}\n          />\n        )}\n        <TextWithoutLink>{textWithoutLink}</TextWithoutLink>\n        <Text size={size} color={color}>\n          {children}\n        </Text>\n      </InnerContainer>\n    </Container>\n  );\n};\n\nexport default TextButton;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextButton.js","sources":["../../src/components/TextButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from '../Colors';\nimport Icon from './Icon';\n\nexport enum TextButtonSizes {\n  Large = \"Large\",\n  Regular = \"Regular\",\n  Small = \"Small\",\n}\n\ntype ContainerProps = {\n  margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: ${(props) => props.margin};\n`;\n\ntype TextProps = {\n  size: TextButtonSizes;\n  color: Colors;\n  fontFamily?:string;\n};\n\nconst Text = styled.div<TextProps>`\n  font-size: ${(props) => {\n    if (props.size === TextButtonSizes.Large) return \"1.8rem\";\n    if (props.size === TextButtonSizes.Regular) return \"1.4rem\";\n    if (props.size === TextButtonSizes.Small) return \"1.2rem\";\n    return \"1.4rem\";\n  }};\n  color: ${props => props.color};\n  font-family:${props => props.fontFamily};\n  text-decoration: underline;\n  cursor: pointer;\n  font-weight: 500;\n  &:hover {\n    text-decoration: none;\n  }\n`;\n\nconst TextWithoutLink = styled.span`\n  padding-right: 2px;\n`;\n\nconst InnerContainer = styled.div`\n  display: flex;\n  align-items: center;\n}`;\n\ntype TextButtonProps = {\n  children: string | React.ReactNode;\n  size?: TextButtonSizes;\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  margin?: string;\n  icon?: any;\n  iconRotation?: number;\n  color?: Colors;\n  textWithoutLink?:string| React.ReactNode;\n  fontFamily?:string;\n  iconMargin?:string;\n};\n\nconst TextButton: React.FC<TextButtonProps> = ({\n  children,\n  size = TextButtonSizes.Regular,\n  onClick,\n  margin,\n  icon,\n  iconRotation,\n  color = Colors.Orange,\n  textWithoutLink,\n  fontFamily,\n  iconMargin\n}) => {\n\n  const iconSize = (() => {\n    if (size === TextButtonSizes.Large) {\n      return 14;\n    }\n    if (size === TextButtonSizes.Regular) {\n      return 12;\n    }\n    if (size === TextButtonSizes.Small) {\n      return 10;\n    }\n    return 12;\n  })();\n\n  return (\n    <Container margin={margin}>\n      <InnerContainer onClick={onClick ? onClick : () => { }}>\n        {icon && (\n          <Icon\n            icon={icon}\n            size={iconSize}\n            color={color}\n            margin={iconMargin ||\"0 7px 0 0\"}\n            rotation={iconRotation}\n          />\n        )}\n        <TextWithoutLink>{textWithoutLink}</TextWithoutLink>\n        <Text size={size} color={color} fontFamily={fontFamily}>\n          {children}\n        </Text>\n      </InnerContainer>\n    </Container>\n  );\n};\n\nexport default TextButton;\n"],"names":[],"mappings":"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"}

package/build/components/UserInfo.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Details: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Name: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Email: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Name: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NameProps>> & string;
+export declare const Email: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EmailProps>> & string;
 export declare enum UserInfoSizeEnum {
     Regular = "Regular",
     Large = "Large"
@@ -11,6 +11,14 @@ declare type UserInfoPropTypes = {
     user?: any;
     size?: UserInfoSizeEnum;
     invert?: boolean;
+    nameColor?: string;
+    fontFamily?: string;
+};
+declare type NameProps = {
+    fontFamily?: string;
+};
+declare type EmailProps = {
+    fontFamily?: string;
 };
 declare const UserInfo: React.FC<UserInfoPropTypes>;
 export default UserInfo;

package/build/components/UserInfo.js

@@ -6,24 +6,26 @@ import UserImage from './UserImage.js';
 
 var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var Details = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var Name = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  color: ", ";\n  font-weight: 600;\n"], ["\n  font-size: 1.4rem;\n  color: ", ";\n  font-weight: 600;\n"])), Colors.Grey1);
-var Email = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  color: ", ";\n"])), Colors.Grey2);
-var PhoneNumber = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  color: ", ";\n"])), Colors.Grey2);
+var Name = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  color: ", ";\n  font-weight: 600;\n  font-family:", ";\n"], ["\n  font-size: 1.4rem;\n  color: ", ";\n  font-weight: 600;\n  font-family:", ";\n"])), function (props) { return props.color || Colors.Grey1; }, function (props) { return props.fontFamily; });
+var Email = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  color: ", ";\n  font-family:", ";\n"], ["\n  font-size: 1.2rem;\n  color: ", ";\n  font-family:", ";\n"])), function (props) { return props.color || Colors.Grey1; }, function (props) { return props.fontFamily; });
+var PhoneNumber = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  color: ", ";\n  font-family:", ";\n"], ["\n  font-size: 1.2rem;\n  color: ", ";\n  font-family:", ";\n"])), function (props) { return props.color || Colors.Grey1; }, function (props) { return props.fontFamily; });
 var UserInfoSizeEnum;
 (function (UserInfoSizeEnum) {
     UserInfoSizeEnum["Regular"] = "Regular";
     UserInfoSizeEnum["Large"] = "Large";
 })(UserInfoSizeEnum || (UserInfoSizeEnum = {}));
 var UserInfo = function (_a) {
-    var _b = _a.user, user = _b === void 0 ? {} : _b, _c = _a.size, size = _c === void 0 ? UserInfoSizeEnum.Regular : _c, _d = _a.invert, invert = _d === void 0 ? false : _d;
+    var _b = _a.user, user = _b === void 0 ? {} : _b, _c = _a.size, size = _c === void 0 ? UserInfoSizeEnum.Regular : _c, _d = _a.invert, invert = _d === void 0 ? false : _d, nameColor = _a.nameColor, fontFamily = _a.fontFamily;
     var firstName = user.firstName, lastName = user.lastName, email = user.email, phoneNumber = user.phoneNumber, _e = user.userProfile, _f = (_e === void 0 ? {} : _e).imageUrl, imageUrl = _f === void 0 ? '' : _f;
     var isLarge = size === UserInfoSizeEnum.Large;
-    var UserName = React.memo(function () { return React.createElement(Name, null,
+    var UserName = React.memo(function () { return React.createElement(Name, { color: nameColor, fontFamily: fontFamily },
         firstName,
         "\u00A0",
         lastName); });
-    var UserEmail = React.memo(function () { return React.createElement(Email, null, email); });
-    var UserPhoneNumber = React.memo(function () { return React.createElement(PhoneNumber, null, phoneNumber); });
+    var UserEmail = React.memo(function () { return React.createElement(Email, { color: nameColor, fontFamily: fontFamily }, email); });
+    var UserPhoneNumber = React.memo(function () { return React.createElement(PhoneNumber, { fontFamily: fontFamily, color: nameColor },
+        phoneNumber,
+        " "); });
     var height = isLarge ? '50px' : '36px';
     return (React.createElement(Container, null,
         React.createElement(UserImage, { imageUrl: imageUrl, height: height, size: isLarge ? "1.8rem" : "1.4rem", firstName: firstName, lastName: lastName, invert: invert }),

package/build/components/UserInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserInfo.js","sources":["../../src/components/UserInfo.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Colors } from \"../Colors\";\nimport UserImage from './UserImage';\n\nexport const Container = styled.div`\n  display: flex;\n`;\n\nexport const Details = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n`;\n\nexport const Name = styled.div`\n  font-size: 1.4rem;\n  color: ${Colors.Grey1};\n  font-weight: 600;\n`;\n\nexport const Email = styled.div`\n  font-size: 1.2rem;\n  color: ${Colors.Grey2};\n`;\n\nconst PhoneNumber = styled.div`\n  font-size: 1.2rem;\n  color: ${Colors.Grey2};\n`;\n\nexport enum UserInfoSizeEnum {\n  Regular = 'Regular',\n  Large = 'Large',\n};\n\ntype UserInfoPropTypes = {\n  user?: any;\n  size?: UserInfoSizeEnum;\n  invert?: boolean;\n};\n\nconst UserInfo: React.FC<UserInfoPropTypes> = ({\n  user = {},\n  size = UserInfoSizeEnum.Regular,\n  invert = false,\n}) => {\n  const {\n    firstName,\n    lastName,\n    email,\n    phoneNumber,\n    userProfile: {\n      imageUrl = '',\n    } = {},\n  } = user;\n  const isLarge = size === UserInfoSizeEnum.Large;\n  const UserName = React.memo(() => <Name>{firstName}&nbsp;{lastName}</Name>);\n  const UserEmail = React.memo(() => <Email>{email}</Email>);\n  const UserPhoneNumber = React.memo(() => <PhoneNumber>{phoneNumber}</PhoneNumber>);\n  const height = isLarge ? '50px' : '36px';\n  return (\n    <Container>\n      <UserImage\n        imageUrl={imageUrl}\n        height={height}\n        size={isLarge ? \"1.8rem\" : \"1.4rem\"}\n        firstName={firstName}\n        lastName={lastName}\n        invert={invert}\n      />\n      <Details>\n        {firstName && lastName && <UserName />}\n        {email && <UserEmail />}\n        {isLarge && phoneNumber && <UserPhoneNumber />}\n      </Details>\n    </Container>\n  );\n}\n\nexport default UserInfo;\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserInfo.js","sources":["../../src/components/UserInfo.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Colors } from \"../Colors\";\nimport UserImage from './UserImage';\n\nexport const Container = styled.div`\n  display: flex;\n`;\n\nexport const Details = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n`;\n\nexport const Name = styled.div<NameProps>`\n  font-size: 1.4rem;\n  color: ${(props) => props.color || Colors.Grey1};\n  font-weight: 600;\n  font-family:${(props) => props.fontFamily};\n`;\n\nexport const Email = styled.div<EmailProps>`\n  font-size: 1.2rem;\n  color: ${(props) => props.color || Colors.Grey1};\n  font-family:${(props) => props.fontFamily};\n`;\n\nconst PhoneNumber = styled.div<PhoneNumberProps>`\n  font-size: 1.2rem;\n  color: ${(props) => props.color || Colors.Grey1};\n  font-family:${(props) => props.fontFamily};\n`;\n\nexport enum UserInfoSizeEnum {\n  Regular = 'Regular',\n  Large = 'Large',\n};\n\ntype UserInfoPropTypes = {\n  user?: any;\n  size?: UserInfoSizeEnum;\n  invert?: boolean;\n  nameColor?:string;\n  fontFamily?:string;\n};\ntype NameProps = {\n  fontFamily?:string;\n};\ntype EmailProps = {\n  fontFamily?:string;\n};\ntype PhoneNumberProps = {\n  fontFamily?:string;\n};\nconst UserInfo: React.FC<UserInfoPropTypes> = ({\n  user = {},\n  size = UserInfoSizeEnum.Regular,\n  invert = false,\n  nameColor,\n  fontFamily\n}) => {\n  const {\n    firstName,\n    lastName,\n    email,\n    phoneNumber,\n    userProfile: {\n      imageUrl = '',\n    } = {},\n  } = user;\n  const isLarge = size === UserInfoSizeEnum.Large;\n  const UserName = React.memo(() => <Name color={nameColor} fontFamily={fontFamily}>{firstName}&nbsp;{lastName}</Name>);\n  const UserEmail = React.memo(() => <Email color={nameColor} fontFamily={fontFamily}>{email}</Email>);\n  const UserPhoneNumber = React.memo(() => <PhoneNumber fontFamily={fontFamily} color={nameColor}>{phoneNumber} </PhoneNumber>);\n  const height = isLarge ? '50px' : '36px';\n  return (\n    <Container>\n      <UserImage\n        imageUrl={imageUrl}\n        height={height}\n        size={isLarge ? \"1.8rem\" : \"1.4rem\"}\n        firstName={firstName}\n        lastName={lastName}\n        invert={invert}\n      />\n      <Details>\n        {firstName && lastName && <UserName />}\n        {email && <UserEmail />}\n        {isLarge && phoneNumber && <UserPhoneNumber />}\n      </Details>\n    </Container>\n  );\n}\n\nexport default UserInfo;\n\n"],"names":[],"mappings":"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"}

package/build/components/ValidationError.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare type ValidationErrorProps = {
     validationError: string;
+    disableValidationErrorBox?: boolean;
 };
 declare const ValidationError: React.FC<ValidationErrorProps>;
 export default ValidationError;

package/build/components/ValidationError.js

@@ -10,7 +10,10 @@ var ValidationErrorAbsolute = styled.div(templateObject_2 || (templateObject_2 =
 var ValidationErrorBox = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n  padding:  10px 15px;\n  width: fit-content;\n  justify-content: center;\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n  padding:  10px 15px;\n  width: fit-content;\n  justify-content: center;\n"])), Colors.White, Colors.Grey5);
 var ValidationErrorText = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 10px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  margin-left: 10px;\n  font-weight: 500;\n  color: ", ";\n"])), Colors.Grey2);
 var ValidationError = function (_a) {
-    var validationError = _a.validationError;
+    var validationError = _a.validationError, disableValidationErrorBox = _a.disableValidationErrorBox;
+    if (disableValidationErrorBox) {
+        return null;
+    }
     return (React.createElement(ValidationErrorRelative, null,
         React.createElement(ValidationErrorAbsolute, null,
             React.createElement(FadeIn, null,

package/build/components/ValidationError.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationError.js","sources":["../../src/components/ValidationError.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from './Icon';\nimport { FadeIn } from './Motion';\n\nconst ValidationErrorRelative = styled.div`\n  position: relative;\n`;\n\nconst ValidationErrorAbsolute = styled.div`\n  position: absolute;\n  z-index: 700;\n  width: fit-content;\n  height: 50px;\n`;\n\nconst ValidationErrorBox = styled.div`\n  background: ${Colors.White};\n  border: 1px solid ${Colors.Grey5};\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n  padding:  10px 15px;\n  width: fit-content;\n  justify-content: center;\n`;\n\nconst ValidationErrorText = styled.div`\n  margin-left: 10px;\n  font-weight: 500;\n  color: ${Colors.Grey2};\n`;\n\ntype ValidationErrorProps = {\n  validationError: string;\n}\n\nconst ValidationError: React.FC<ValidationErrorProps> = ({ validationError}) => {\n  return (\n    <ValidationErrorRelative>\n      <ValidationErrorAbsolute>\n        <FadeIn>\n          <ValidationErrorBox>\n            <Icon icon={Icons.Warning} size={16} color={Colors.Yellow} />\n            <ValidationErrorText>{validationError}</ValidationErrorText>\n          </ValidationErrorBox>\n        </FadeIn>\n      </ValidationErrorAbsolute>\n    </ValidationErrorRelative>\n  );\n};\n\nexport default ValidationError;\n"],"names":[],"mappings":";;;;;;;AAMA,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,2BAAA,CAAA,EAAA,CAAA,2BAEzC,IAAA,CAAC;AAEF,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,oFAAA,CAAA,EAAA,CAAA,oFAKzC,IAAA,CAAC;AAEF,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,kBAAA,EAAA,yBAAA,EAAA,iPAAA,CAAA,EAAA,CAAA,kBACrB,EAAY,yBACN,EAAY,iPAUjC,CAXe,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,EACN,MAAM,CAAC,KAAK,CAUjC,CAAC;AAEF,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,wDAAA,EAAA,KAAA,CAAA,EAAA,CAAA,wDAG3B,EAAY,KACtB,CADU,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,CACtB,CAAC;AAMI,IAAA,eAAe,GAAmC,UAAC,EAAkB,EAAA;AAAhB,IAAA,IAAA,eAAe,GAAA,EAAA,CAAA,eAAA,CAAA;IACxE,QACE,oBAAC,uBAAuB,EAAA,IAAA;AACtB,QAAA,KAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,IAAA;AACtB,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,gBAAA,KAAA,CAAA,aAAA,CAAC,kBAAkB,EAAA,IAAA;AACjB,oBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAI,CAAA;oBAC7D,KAAC,CAAA,aAAA,CAAA,mBAAmB,QAAE,eAAe,CAAuB,CACzC,CACd,CACe,CACF,EAC1B;AACJ,EAAE;;;;;"}
+{"version":3,"file":"ValidationError.js","sources":["../../src/components/ValidationError.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from './Icon';\nimport { FadeIn } from './Motion';\n\nconst ValidationErrorRelative = styled.div`\n  position: relative;\n`;\n\nconst ValidationErrorAbsolute = styled.div`\n  position: absolute;\n  z-index: 700;\n  width: fit-content;\n  height: 50px;\n`;\n\nconst ValidationErrorBox = styled.div`\n  background: ${Colors.White};\n  border: 1px solid ${Colors.Grey5};\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n  padding:  10px 15px;\n  width: fit-content;\n  justify-content: center;\n`;\n\nconst ValidationErrorText = styled.div`\n  margin-left: 10px;\n  font-weight: 500;\n  color: ${Colors.Grey2};\n`;\n\ntype ValidationErrorProps = {\n  validationError: string;\n  disableValidationErrorBox?:boolean;\n}\n\nconst ValidationError: React.FC<ValidationErrorProps> = ({ validationError,disableValidationErrorBox}) => {\n  if (disableValidationErrorBox) {\n    return null;\n  }\n  return (\n    <ValidationErrorRelative>\n      <ValidationErrorAbsolute>\n        <FadeIn>\n          <ValidationErrorBox>\n            <Icon icon={Icons.Warning} size={16} color={Colors.Yellow} />\n            <ValidationErrorText>{validationError}</ValidationErrorText>\n          </ValidationErrorBox>\n        </FadeIn>\n      </ValidationErrorAbsolute>\n    </ValidationErrorRelative>\n  );\n};\n\nexport default ValidationError;\n"],"names":[],"mappings":";;;;;;;AAMA,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,2BAAA,CAAA,EAAA,CAAA,2BAEzC,IAAA,CAAC;AAEF,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,oFAAA,CAAA,EAAA,CAAA,oFAKzC,IAAA,CAAC;AAEF,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,kBAAA,EAAA,yBAAA,EAAA,iPAAA,CAAA,EAAA,CAAA,kBACrB,EAAY,yBACN,EAAY,iPAUjC,CAXe,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,EACN,MAAM,CAAC,KAAK,CAUjC,CAAC;AAEF,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,wDAAA,EAAA,KAAA,CAAA,EAAA,CAAA,wDAG3B,EAAY,KACtB,CADU,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,CACtB,CAAC;AAOI,IAAA,eAAe,GAAmC,UAAC,EAA4C,EAAA;QAA1C,eAAe,GAAA,EAAA,CAAA,eAAA,EAAC,yBAAyB,GAAA,EAAA,CAAA,yBAAA,CAAA;AAClG,IAAA,IAAI,yBAAyB,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;IACD,QACE,oBAAC,uBAAuB,EAAA,IAAA;AACtB,QAAA,KAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,IAAA;AACtB,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,gBAAA,KAAA,CAAA,aAAA,CAAC,kBAAkB,EAAA,IAAA;AACjB,oBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAI,CAAA;oBAC7D,KAAC,CAAA,aAAA,CAAA,mBAAmB,QAAE,eAAe,CAAuB,CACzC,CACd,CACe,CACF,EAC1B;AACJ,EAAE;;;;;"}

package/build/index.d.ts

@@ -21,8 +21,9 @@ import UserInfo from './components/UserInfo';
 import ValidationError from './components/ValidationError';
 import AddressSearchDropdown from './components/AddressSearchDropdown';
 import SearchDropdown from './components/SearchDropdown';
+import SvgRenderer from "./components/SvgRendrer";
 import * as ErrorUtil from './utils/ErrorUtil';
 import makeEventHandler from './utils/makeEventHandler';
 import * as MediaQuery from './utils/MediaQuery';
 import * as Validation from './utils/Validation';
-export { Colors, Button, CodeInput, Counter, Dropdown, Flex, FormattedInput, InputFormats, FormattedfullInput, InputfullFormats, Icon, Icons, Input, Label, MaxLength, Loader, LoaderSizes, Motion, PhoneNumberInput, Product, TextButton, Tip, UserImage, UserInfo, ValidationError, ErrorUtil, makeEventHandler, MediaQuery, Validation, AddressSearchDropdown, SearchDropdown };
+export { Colors, Button, CodeInput, Counter, Dropdown, Flex, FormattedInput, InputFormats, FormattedfullInput, InputfullFormats, Icon, Icons, Input, Label, MaxLength, Loader, LoaderSizes, Motion, PhoneNumberInput, Product, TextButton, Tip, UserImage, UserInfo, ValidationError, SvgRenderer, ErrorUtil, makeEventHandler, MediaQuery, Validation, AddressSearchDropdown, SearchDropdown };

package/build/index.js

@@ -22,6 +22,7 @@ export { default as UserInfo } from './components/UserInfo.js';
 export { default as ValidationError } from './components/ValidationError.js';
 export { default as AddressSearchDropdown } from './components/AddressSearchDropdown.js';
 export { default as SearchDropdown } from './components/SearchDropdown.js';
+export { default as SvgRenderer } from './components/SvgRendrer.js';
 import * as ErrorUtil from './utils/ErrorUtil.js';
 export { ErrorUtil };
 export { default as makeEventHandler } from './utils/makeEventHandler.js';

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.300",
+  "version": "0.0.301",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
@@ -53,7 +53,7 @@
     "@fortawesome/pro-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@hapi/joi": "^17.1.1",
-    "@sellout/utils": "^0.0.300",
+    "@sellout/utils": "^0.0.301",
     "csvtojson": "^2.0.10",
     "framer-motion": "^2.9.5",
     "polished": "^3.7.2",
@@ -62,7 +62,7 @@
     "rollup-plugin-url": "^3.0.1",
     "use-places-autocomplete": "^1.11.0"
   },
-  "gitHead": "e73972ee50919505b500b14042f936350aa93e2b",
+  "gitHead": "f8b64fc7e1745271b78083b72f772d0eb52787fe",
   "peerDependencies": {
     "react": "16.14.0",
     "react-dom": "16.14.0",