@sellout/ui 0.0.398 → 0.0.400

package/build/components/PhoneNumberInput.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import { __makeTemplateObject } from '../node_modules/tslib/tslib.es6.js';
 import React from 'react';
 import styled from 'styled-components';
 import PhoneInput from 'react-phone-input-2';
@@ -8,45 +8,42 @@ import ValidationError from './ValidationError.js';
 import { useMobileMedia } from '../utils/MediaQuery.js';
 import Label from './Label.js';
 
-var PhoneNumberInputSizes;
-(function (PhoneNumberInputSizes) {
-    PhoneNumberInputSizes["Large"] = "Large";
-    PhoneNumberInputSizes["Regular"] = "Regular";
-})(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return props.margin; });
-// 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      background-color: ", ";\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      border-color:", ";\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      border-color:", ";\n\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: ", ";\n        }\n        &.highlight {\n          background-color: ", ";\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n        color:", ";\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: ", ";\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      background-color: ",
-    ";\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      border-color:", ";\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      border-color:", ";\n\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: ", ";\n        }\n        &.highlight {\n          background-color: ", ";\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n        color:", ";\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: ", ";\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"); }, function (props) {
-    return props.disabled ? Colors.Grey6 + " !important" : null;
-}, function (props) { return props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed + " !important" : ""; }, function (props) { return props.typeTextColor || Colors.Grey1; }, function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); }, function (props) { return props.bgColor || 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, function (props) { return props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed : ""; }, Colors.Grey6, Colors.Grey6, function (props) {
-    return props.selectedflaghover || Colors.White;
-}, function (props) { return props.selectedflagbg || Colors.White; }, Colors.Grey5, function (props) { return props.countryList || Colors.White; }, function (props) { return (props.isMobile ? "180px" : "200px"); }, function (props) { return props.searchColor || "#f1f1f1"; }, function (props) { return props.highlightColor || "#fff"; }, function (props) { return props.countryName || "#6b6b6b"; }, function (props) { return props.searchColor || Colors.Green; }, 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, autoFocus = _a.autoFocus, _b = _a.disabled, disabled = _b === void 0 ? false : _b, bgColor = _a.bgColor, labeltextColor = _a.labeltextColor, typedTextColor = _a.typedTextColor, selectedflagbg = _a.selectedflagbg, countryList = _a.countryList, countryName = _a.countryName, highlightColor = _a.highlightColor, selectedflaghover = _a.selectedflaghover, searchColor = _a.searchColor, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, fontSize = _a.fontSize, letterSpacing = _a.letterSpacing, validationDarkThemeBorderColor = _a.validationDarkThemeBorderColor;
-    return (React.createElement(Container, { margin: margin },
-        label && (React.createElement(Label, { text: label, subText: subLabel, tip: tip, labelColor: labeltextColor, fontFamily: fontFamily, fontWeight: fontWeight, fontSize: fontSize, letterSpacing: letterSpacing })),
-        React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize, disabled: disabled, bgColor: bgColor, selectedflagbg: selectedflagbg, selectedflaghover: selectedflaghover, labelTextColor: labeltextColor, typeTextColor: typedTextColor, countryList: countryList, countryName: countryName, highlightColor: highlightColor, searchColor: searchColor, validationError: validationError, validationDarkThemeBorderColor: validationDarkThemeBorderColor },
-            React.createElement(PhoneInput, { country: "us", disabled: disabled, placeholder: "Enter your mobile phone number", preferredCountries: ["us", "ca"], value: value, onKeyDown: function (e) {
-                    // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
-                    if ((e.which === 8 || e.which === 46) && value.length <= 1) {
-                        e.preventDefault();
-                    }
-                    else if (e.which === 13 && onEnter) {
-                        onEnter();
-                    }
-                }, onChange: function (value) {
-                    onChange(value);
-                }, countryCodeEditable: false, inputProps: {
-                    autoFocus: autoFocus,
-                } }),
-            validationError && (React.createElement(ValidationError, { validationError: validationError })))));
-};
+var PhoneNumberInputSizes;
+(function (PhoneNumberInputSizes) {
+    PhoneNumberInputSizes["Large"] = "Large";
+    PhoneNumberInputSizes["Regular"] = "Regular";
+})(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (props) { return props.margin; });
+// 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      background-color: ", ";\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      border-color:", ";\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      border-color:", ";\n\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: ", ";\n        }\n        &.highlight {\n          background-color: ", ";\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n        color:", ";\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: ", ";\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      background-color: ", ";\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      border-color:", ";\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      border-color:", ";\n\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: ", ";\n        }\n        &.highlight {\n          background-color: ", ";\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n        color:", ";\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: ", ";\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"); }, function (props) {
+    return props.disabled ? "".concat(Colors.Grey6, " !important") : null;
+}, function (props) { return props.validationError && props.validationDarkThemeBorderColor ? "".concat(Colors.ErrorRed, " !important") : ""; }, function (props) { return props.typeTextColor || Colors.Grey1; }, function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); }, function (props) { return props.bgColor || 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, function (props) { return props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed : ""; }, Colors.Grey6, Colors.Grey6, function (props) {
+    return props.selectedflaghover || Colors.White;
+}, function (props) { return props.selectedflagbg || Colors.White; }, Colors.Grey5, function (props) { return props.countryList || Colors.White; }, function (props) { return (props.isMobile ? "180px" : "200px"); }, function (props) { return props.searchColor || "#f1f1f1"; }, function (props) { return props.highlightColor || "#fff"; }, function (props) { return props.countryName || "#6b6b6b"; }, function (props) { return props.searchColor || Colors.Green; }, 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, autoFocus = _a.autoFocus, _b = _a.disabled, disabled = _b === void 0 ? false : _b, bgColor = _a.bgColor, labeltextColor = _a.labeltextColor, typedTextColor = _a.typedTextColor, selectedflagbg = _a.selectedflagbg, countryList = _a.countryList, countryName = _a.countryName, highlightColor = _a.highlightColor, selectedflaghover = _a.selectedflaghover, searchColor = _a.searchColor, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, fontSize = _a.fontSize, letterSpacing = _a.letterSpacing, validationDarkThemeBorderColor = _a.validationDarkThemeBorderColor;
+    return (React.createElement(Container, { margin: margin },
+        label && (React.createElement(Label, { text: label, subText: subLabel, tip: tip, labelColor: labeltextColor, fontFamily: fontFamily, fontWeight: fontWeight, fontSize: fontSize, letterSpacing: letterSpacing })),
+        React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize, disabled: disabled, bgColor: bgColor, selectedflagbg: selectedflagbg, selectedflaghover: selectedflaghover, labelTextColor: labeltextColor, typeTextColor: typedTextColor, countryList: countryList, countryName: countryName, highlightColor: highlightColor, searchColor: searchColor, validationError: validationError, validationDarkThemeBorderColor: validationDarkThemeBorderColor },
+            React.createElement(PhoneInput, { country: "us", disabled: disabled, placeholder: "Enter your mobile phone number", preferredCountries: ["us", "ca"], value: value, onKeyDown: function (e) {
+                    // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
+                    if ((e.which === 8 || e.which === 46) && value.length <= 1) {
+                        e.preventDefault();
+                    }
+                    else if (e.which === 13 && onEnter) {
+                        onEnter();
+                    }
+                }, onChange: function (value) {
+                    onChange(value);
+                }, countryCodeEditable: false, inputProps: {
+                    autoFocus: autoFocus,
+                } }),
+            validationError && (React.createElement(ValidationError, { validationError: validationError })))));
+};
 var templateObject_1, templateObject_2;
 
 export { PhoneNumberInputSizes, PhoneNumberInput as default };

package/build/components/PhoneNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/components/PhoneNumberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport PhoneInput from \"react-phone-input-2\";\nimport \"react-phone-input-2/lib/semantic-ui.css\";\nimport { Colors } from \"../Colors\";\nimport ValidationError from \"./ValidationError\";\nimport { useMobileMedia } from \"../utils/MediaQuery\";\nimport Label from \"./Label\";\n\nexport enum PhoneNumberInputSizes {\n  Large = \"Large\",\n  Regular = \"Regular\",\n}\n\ntype ContainerProps = {\n  margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n  margin: ${(props) => props.margin};\n`;\n\ntype InnerContainerProps = {\n  isMobile: boolean;\n  phoneNumberInputSize?: string;\n  disabled?: boolean;\n  bgColor?: string;\n  typeTextColor?: string;\n  labelTextColor?: string;\n  selectedflagbg?: string;\n  selectedflaghover?: string;\n  countryList?: string;\n  countryName?: string;\n  highlightColor?: string;\n  searchColor?: string;\n  validationError?: string;\n  validationDarkThemeBorderColor?:boolean;\n\n};\n// overwrite the preset style imports\nconst InnerContainer = styled.div<InnerContainerProps>`\n  .react-tel-input {\n    font-family: \"neue-haas-grotesk-display\", sans-serif;\n    font-size: ${(props) => (props.isMobile ? \"1.6rem\" : \"1.4rem\")};\n    position: relative;\n    width: 100%;\n    :disabled {\n      cursor: not-allowed;\n      background-color: ${(props) =>\n        props.disabled ? `${Colors.Grey6} !important` : null};\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      border-color:${(props) => props.validationError && props.validationDarkThemeBorderColor ? `${Colors.ErrorRed} !important`:\"\"};\n      text-indent: 15px;\n      transition: all 0.2s;\n      color: ${(props) => props.typeTextColor || Colors.Grey1};\n      font-weight: 500;\n      position: relative;\n      font-size: ${(props) => (props.isMobile ? \"1.6rem\" : \"1.4rem\")};\n      margin-top: 0 !important;\n      margin-bottom: 0 !important;\n      margin-left: 50px;\n      padding-left: 0;\n      background: ${(props) => props.bgColor || Colors.White};\n      border: 1px solid ${Colors.Grey5};\n      border-radius: 0px 10px 10px 0px;\n      height: ${(props) =>\n        props.phoneNumberInputSize === PhoneNumberInputSizes.Regular\n          ? \"38px\"\n          : \"48px\"};\n      width: calc(100% - 50px);\n      z-index: 1;\n      outline: none;\n      &:hover {\n        border: 1px solid ${Colors.Grey5};\n      }\n      &.invalid-number {\n        border: 1px solid ${Colors.Grey5};\n        background-color: ${Colors.White};\n        border-left-color: ${Colors.Grey5};\n        &:focus {\n          border: 1px solid ${Colors.Grey4};\n          border-left-color: ${Colors.Grey5};\n          background-color: ${Colors.White};\n        }\n      }\n      &.open {\n        border-color: ${Colors.Grey5};\n        border-radius: 0px 10px 0 0;\n        /* border-bottom: none; */\n        box-shadow: none;\n      }\n      ::placeholder {\n        color: ${Colors.Grey4};\n      }\n      &:focus {\n        border: 1px solid ${Colors.Grey4};\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: ${Colors.Grey6};\n      border: 1px solid ${Colors.Grey5};\n      border-radius: 10px;\n      border-color:${(props) => props.validationError&& props.validationDarkThemeBorderColor ? Colors.ErrorRed:\"\"};\n\n      &.open {\n        background: ${Colors.Grey6};\n        border-radius: 10px 10px 0 0;\n        .selected-flag {\n          background: ${Colors.Grey6};\n          border-radius: 10px 0 0 0;\n        }\n      }\n      &:hover, &:focus {\n        cursor: pointer;\n        .selected-flag {\n          background-color:${(props) =>\n            props.selectedflaghover || Colors.White};;\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: ${(props) => props.selectedflagbg || Colors.White};\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 ${Colors.Grey5};\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: ${(props) => props.countryList || Colors.White};\n      width: calc(100% + 2px);\n      max-height: ${(props) => (props.isMobile ? \"180px\" : \"200px\")};\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: ${(props) => props.searchColor || \"#f1f1f1\"};\n        }\n        &.highlight {\n          background-color: ${(props) => props.highlightColor || \"#fff\"};\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n        color:${(props) => props.countryName || \"#6b6b6b\"};\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: ${(props) => props.searchColor || Colors.Green};\n        padding: 5px 0 6px 10px;\n      }\n      .search-emoji {\n        display: none;\n        font-size: ${(props) => (props.isMobile ? \"1.6rem\" : \"1.4rem\")};\n      }\n      .search-box {\n        border: 1px solid #cacaca;\n        border-radius: 3px;\n        font-size: ${(props) => (props.isMobile ? \"1.6rem\" : \"1.4rem\")};\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: ${(props) => (props.isMobile ? \"1.6rem\" : \"1.4rem\")};\n      left: 46px;\n      top: -8px;\n      background: #fff;\n      padding: 0 2px;\n      color: #de0000;\n    }\n  }\n`;\n\ntype PhoneNumberInputProps = {\n  value: string;\n  onChange: any;\n  onEnter?: any;\n  validationError?: string;\n  subLabel?: string;\n  tip?: string;\n  placeholder?: string;\n  label?: string;\n  phoneNumberInputSize?: string;\n  margin?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  bgColor?: string;\n  labeltextColor?: string;\n  typedTextColor?: string;\n  selectedflagbg?: string;\n  selectedflaghover?: string;\n  countryList?: string;\n  countryName?: string;\n  highlightColor?: string;\n  searchColor?: string;\n  fontWeight?: string;\n  fontFamily?: string;\n  fontSize?: string;\n  letterSpacing?: string;\n  validationDarkThemeBorderColor?:boolean;\n\n};\nconst PhoneNumberInput: React.FC<PhoneNumberInputProps> = ({\n  value,\n  onChange,\n  onEnter,\n  validationError,\n  phoneNumberInputSize,\n  subLabel,\n  tip,\n  label,\n  margin,\n  autoFocus,\n  disabled = false,\n  bgColor,\n  labeltextColor,\n  typedTextColor,\n  selectedflagbg,\n  countryList,\n  countryName,\n  highlightColor,\n  selectedflaghover,\n  searchColor,\n  fontWeight,\n  fontFamily,\n  fontSize,\n  letterSpacing,\n  validationDarkThemeBorderColor\n}) => {\n  return (\n    <Container margin={margin}>\n      {label && (\n        <Label\n          text={label}\n          subText={subLabel}\n          tip={tip}\n          labelColor={labeltextColor}\n          fontFamily={fontFamily}\n          fontWeight={fontWeight}\n          fontSize={fontSize}\n          letterSpacing={letterSpacing}\n        />\n      )}\n      <InnerContainer\n        isMobile={useMobileMedia()}\n        phoneNumberInputSize={phoneNumberInputSize}\n        disabled={disabled}\n        bgColor={bgColor}\n        selectedflagbg={selectedflagbg}\n        selectedflaghover={selectedflaghover}\n        labelTextColor={labeltextColor}\n        typeTextColor={typedTextColor}\n        countryList={countryList}\n        countryName={countryName}\n        highlightColor={highlightColor}\n        searchColor={searchColor}\n        validationError={validationError}\n        validationDarkThemeBorderColor={validationDarkThemeBorderColor}\n      >\n        <PhoneInput\n          country=\"us\"\n          disabled={disabled}\n          placeholder=\"Enter your mobile phone number\"\n          preferredCountries={[\"us\", \"ca\"]}\n          value={value} //TODO: fix issue where this causes a switch to US from CA when typing, doesn't happen when not there\n          onKeyDown={(e) => {\n            // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222\n            if ((e.which === 8 || e.which === 46) && value.length <= 1) {\n              e.preventDefault();\n            } else if (e.which === 13 && onEnter) {\n              onEnter();\n            }\n          }}\n          onChange={(value) => {\n            onChange(value);\n          }}\n          countryCodeEditable={false}\n          inputProps={{\n            autoFocus,\n          }}\n        />\n        {validationError && (\n          <ValidationError validationError={validationError} />\n        )}\n      </InnerContainer>\n    </Container>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/components/PhoneNumberInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/components/Product.d.ts

@@ -1,35 +1,35 @@
-import React from "react";
-import { CounterProps } from "./Counter";
-export declare enum TicketsEnum {
-    Tickets = "Tickets",
-    AddOns = "AddOns"
-}
-export declare enum FeeAppliedToEnum {
-    Order = "Order",
-    Ticket = "Ticket",
-    Upgrade = "Upgrade",
-    AddOns = "Add-Ons"
-}
-export declare enum AdvanceOptionsEnum {
-    ShowLess = "Show Less",
-    ShowMore = "Show More",
-    HideFees = "Hide Fees",
-    ShowFees = "Show Fees"
-}
-export declare type ProductProps = {
-    title: string;
-    isTicketScreen: string;
-    price: number;
-    isRSVP?: boolean;
-    subtitle?: string;
-    description?: string;
-    imageUrl?: string;
-    eventDays?: string[];
-    isMultiDaysEvent?: boolean;
-    timeZone?: string;
-    remainingQty?: number;
-    isTicketType?: boolean;
-    isFees?: any;
-    isUpgradeType?: boolean;
-} & CounterProps;
-export default function Product({ title, price, subtitle, description, isRSVP, isTicketScreen, value, minValue, maxValue, onIncrement, onDecrement, eventDays, isMultiDaysEvent, timeZone, remainingQty, isTicketType, isFees, isUpgradeType, }: ProductProps): React.JSX.Element;
+import React from "react";
+import { CounterProps } from "./Counter";
+export declare enum TicketsEnum {
+    Tickets = "Tickets",
+    AddOns = "AddOns"
+}
+export declare enum FeeAppliedToEnum {
+    Order = "Order",
+    Ticket = "Ticket",
+    Upgrade = "Upgrade",
+    AddOns = "Add-Ons"
+}
+export declare enum AdvanceOptionsEnum {
+    ShowLess = "Show Less",
+    ShowMore = "Show More",
+    HideFees = "Hide Fees",
+    ShowFees = "Show Fees"
+}
+export type ProductProps = {
+    title: string;
+    isTicketScreen: string;
+    price: number;
+    isRSVP?: boolean;
+    subtitle?: string;
+    description?: string;
+    imageUrl?: string;
+    eventDays?: string[];
+    isMultiDaysEvent?: boolean;
+    timeZone?: string;
+    remainingQty?: number;
+    isTicketType?: boolean;
+    isFees?: any;
+    isUpgradeType?: boolean;
+} & CounterProps;
+export default function Product({ title, price, subtitle, description, isRSVP, isTicketScreen, value, minValue, maxValue, onIncrement, onDecrement, eventDays, isMultiDaysEvent, timeZone, remainingQty, isTicketType, isFees, isUpgradeType, }: ProductProps): React.JSX.Element;

package/build/components/Product.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import { __makeTemplateObject } from '../node_modules/tslib/tslib.es6.js';
 import React, { useState, Fragment } from 'react';
 import styled from 'styled-components';
 import * as Polished from 'polished';
@@ -9,115 +9,116 @@ import Counter from './Counter.js';
 import * as PriceUtil from '@sellout/utils/.dist/price';
 import * as Time from '@sellout/utils/.dist/time';
 
-var TicketsEnum;
-(function (TicketsEnum) {
-    TicketsEnum["Tickets"] = "Tickets";
-    TicketsEnum["AddOns"] = "AddOns";
-})(TicketsEnum || (TicketsEnum = {}));
-var FeeAppliedToEnum;
-(function (FeeAppliedToEnum) {
-    FeeAppliedToEnum["Order"] = "Order";
-    FeeAppliedToEnum["Ticket"] = "Ticket";
-    FeeAppliedToEnum["Upgrade"] = "Upgrade";
-    FeeAppliedToEnum["AddOns"] = "Add-Ons";
-})(FeeAppliedToEnum || (FeeAppliedToEnum = {}));
-var AdvanceOptionsEnum;
-(function (AdvanceOptionsEnum) {
-    AdvanceOptionsEnum["ShowLess"] = "Show Less";
-    AdvanceOptionsEnum["ShowMore"] = "Show More";
-    AdvanceOptionsEnum["HideFees"] = "Hide Fees";
-    AdvanceOptionsEnum["ShowFees"] = "Show Fees";
-})(AdvanceOptionsEnum || (AdvanceOptionsEnum = {}));
-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  align-items: flex-start;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
-var LeftWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var Container = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])), Colors.SurfaceTertiary, Colors.SecondaryStroke);
-var Title = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  font-family: \"Inter\";\n  line-height: 20px;\n"], ["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  font-family: \"Inter\";\n  line-height: 20px;\n"])), Colors.HeadingSecondary);
-var Price = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin: 5px 0;\n  line-height: 90%;\n"], ["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin: 5px 0;\n  line-height: 90%;\n"])), Colors.HeadingSecondary);
-var Subtitle = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"])), Colors.White);
-var Description = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 21px;\n  font-family: \"Inter\";\n  letter-spacing: -0.08px;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  max-width: 88%;\n"], ["\n  color: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 21px;\n  font-family: \"Inter\";\n  letter-spacing: -0.08px;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  max-width: 88%;\n"])), Colors.SupportTertiary);
-var Tickets = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"])), Colors.SupportTertiary);
-var Tag = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin-bottom: 5px;\n  line-height: 90%;\n"], ["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin-bottom: 5px;\n  line-height: 90%;\n"])), Colors.HeadingPrimary);
-var Value = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 28px;\n  min-width: 20px;\n  color: ", ";\n  line-height: 90%;\n  font-weight: 500;\n"], ["\n  font-size: 28px;\n  min-width: 20px;\n  color: ", ";\n  line-height: 90%;\n  font-weight: 500;\n"])), Colors.HeadingPrimary);
-var Ellipsis = styled.div(templateObject_12 || (templateObject_12 = __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_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n  font-family: \"Inter\";\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n  font-family: \"Inter\";\n"])), Colors.InteractiveBGPrimary);
-var ShowMoreInner = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"], ["\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), Polished.lighten(0.025, Colors.Orange), Polished.darken(0.025, Colors.Orange));
-var RightWrapperCol = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n"])));
-var HideShowContent = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: 12px;\n  color: #fff;\n  letter-spacing: 0.5px;\n  margin-top: 10px;\n  cursor: pointer;\n  border-bottom: 1px solid #fff;\n  opacity: 0.7;\n  white-space: nowrap;\n"], ["\n  font-size: 12px;\n  color: #fff;\n  letter-spacing: 0.5px;\n  margin-top: 10px;\n  cursor: pointer;\n  border-bottom: 1px solid #fff;\n  opacity: 0.7;\n  white-space: nowrap;\n"])));
-var FeeList = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
-var FeeItem = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  color: ", ";\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  color: ", ";\n  font-size: 14px;\n"])), Colors.White);
-var Label = styled.span(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])));
-var Amount = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
-var DateTextWrapper = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 7px 0px;\n"], ["\n  margin: 7px 0px;\n"])));
-var DateText = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 15px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  padding-right: 5px;\n"], ["\n  font-size: 15px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  padding-right: 5px;\n"])), Colors.HeadingSecondary);
-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, _f = _a.isRSVP, isRSVP = _f === void 0 ? false : _f, isTicketScreen = _a.isTicketScreen, 
-    // Counter Props
-    value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, eventDays = _a.eventDays, isMultiDaysEvent = _a.isMultiDaysEvent, timeZone = _a.timeZone, _g = _a.remainingQty, remainingQty = _g === void 0 ? 0 : _g, isTicketType = _a.isTicketType, isFees = _a.isFees, isUpgradeType = _a.isUpgradeType;
-    var _h = useState(false), showMore = _h[0], setShowMore = _h[1];
-    var _j = useState(true), showEllipsis = _j[0], setShowEllipsis = _j[1];
-    var _k = useState(false), showFees = _k[0], setShowFees = _k[1];
-    var descModified = description;
-    if (descModified.length > 210 && !showMore) {
-        descModified = descModified.substring(0, 210) + "...";
-    }
-    var toggle = function () {
-        setShowEllipsis(!showEllipsis);
-        setShowMore(!showMore);
-    };
-    var toggleFees = function () {
-        setShowFees(!showFees);
-    };
-    var ticketsAddOns = isTicketScreen === TicketsEnum.Tickets
-        ? FeeAppliedToEnum.Ticket
-        : FeeAppliedToEnum.AddOns;
-    var applicableFees = isFees
-        ? PaymentUtil.getApplicableFees({
-            price: price,
-            fees: isFees,
-            isTicketType: isTicketType,
-            isUpgradeType: isUpgradeType,
-        })
-        : [];
-    return (React.createElement(Container, null,
-        React.createElement(Column, null,
-            React.createElement(LeftWrapper, null,
-                React.createElement(Title, null, title),
-                isMultiDaysEvent && (React.createElement(DateTextWrapper, null, eventDays &&
-                    eventDays.length > 0 && (eventDays === null || eventDays === void 0 ? void 0 : eventDays.map(function (day, i) {
-                    return (React.createElement(DateText, { key: i },
-                        Time.format(day, "MMM Do", timeZone),
-                        eventDays.length !== i + 1 && ","));
-                })))),
-                (function () {
-                    if (!description)
-                        return;
-                    return (React.createElement(Fragment, null,
-                        React.createElement(AnimateHeight, { height: "auto" },
-                            React.createElement(Ellipsis, { active: showEllipsis },
-                                React.createElement(Description, null, description))),
-                        descModified.length > 115 ? (React.createElement(ShowMore, null,
-                            React.createElement(ShowMoreInner, { onClick: function () { return toggle(); } }, showMore
-                                ? AdvanceOptionsEnum.ShowLess
-                                : AdvanceOptionsEnum.ShowMore))) : ("")));
-                })()),
-            React.createElement(RightWrapperCol, null,
-                isRSVP ? (PriceUtil.output(price, true) === "0.00" || 0 ? (React.createElement(Price, null, "RSVP")) : (React.createElement(Price, null, "$" + PriceUtil.output(price, true) + " (Ticket value)"))) : (React.createElement(Price, null, "$" + PriceUtil.output(price, true))),
-                (applicableFees === null || applicableFees === void 0 ? void 0 : applicableFees.length) > 0 && (React.createElement(HideShowContent, { onClick: function () { return toggleFees(); } }, showFees
-                    ? AdvanceOptionsEnum.HideFees
-                    : AdvanceOptionsEnum.ShowFees)))),
-        showFees && (applicableFees === null || applicableFees === void 0 ? void 0 : applicableFees.length) > 0 && (React.createElement(FeeList, null, applicableFees === null || applicableFees === void 0 ? void 0 : applicableFees.map(function (fee, idx) { return (React.createElement(FeeItem, { key: idx },
-            React.createElement(Label, null, fee.label),
-            React.createElement(Amount, null,
-                "$",
-                fee.amount.toFixed(2)))); }))),
-        React.createElement(Column, null,
-            React.createElement(Value, null,
-                value,
-                React.createElement(Tickets, null, ticketsAddOns)),
-            remainingQty > 0 ? (React.createElement(Counter, { value: value, minValue: minValue, maxValue: maxValue, onIncrement: onIncrement, onDecrement: onDecrement })) : (React.createElement(Tag, null, " Sold out"))),
-        React.createElement(Row, null, subtitle && React.createElement(Subtitle, null, subtitle))));
-}
+var TicketsEnum;
+(function (TicketsEnum) {
+    TicketsEnum["Tickets"] = "Tickets";
+    TicketsEnum["AddOns"] = "AddOns";
+})(TicketsEnum || (TicketsEnum = {}));
+var FeeAppliedToEnum;
+(function (FeeAppliedToEnum) {
+    FeeAppliedToEnum["Order"] = "Order";
+    FeeAppliedToEnum["Ticket"] = "Ticket";
+    FeeAppliedToEnum["Upgrade"] = "Upgrade";
+    FeeAppliedToEnum["AddOns"] = "Add-Ons";
+})(FeeAppliedToEnum || (FeeAppliedToEnum = {}));
+var AdvanceOptionsEnum;
+(function (AdvanceOptionsEnum) {
+    AdvanceOptionsEnum["ShowLess"] = "Show Less";
+    AdvanceOptionsEnum["ShowMore"] = "Show More";
+    AdvanceOptionsEnum["HideFees"] = "Hide Fees";
+    AdvanceOptionsEnum["ShowFees"] = "Show Fees";
+})(AdvanceOptionsEnum || (AdvanceOptionsEnum = {}));
+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  align-items: flex-start;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
+var LeftWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Container = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])), Colors.SurfaceTertiary, Colors.SecondaryStroke);
+var Title = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  font-family: \"Inter\";\n  line-height: 20px;\n"], ["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  font-family: \"Inter\";\n  line-height: 20px;\n"])), Colors.HeadingSecondary);
+var Price = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin: 5px 0;\n  line-height: 90%;\n"], ["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin: 5px 0;\n  line-height: 90%;\n"])), Colors.HeadingSecondary);
+var Subtitle = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"])), Colors.White);
+var Description = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 21px;\n  font-family: \"Inter\";\n  letter-spacing: -0.08px;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  max-width: 88%;\n"], ["\n  color: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 21px;\n  font-family: \"Inter\";\n  letter-spacing: -0.08px;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  max-width: 88%;\n"])), Colors.SupportTertiary);
+var Tickets = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  font-family: \"inter\";\n"])), Colors.SupportTertiary);
+var Tag = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin-bottom: 5px;\n  line-height: 90%;\n"], ["\n  font-size: 16px;\n  color: ", ";\n  font-weight: 500;\n  margin-bottom: 5px;\n  line-height: 90%;\n"])), Colors.HeadingPrimary);
+var Value = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 28px;\n  min-width: 20px;\n  color: ", ";\n  line-height: 90%;\n  font-weight: 500;\n"], ["\n  font-size: 28px;\n  min-width: 20px;\n  color: ", ";\n  line-height: 90%;\n  font-weight: 500;\n"])), Colors.HeadingPrimary);
+var Ellipsis = styled.div(templateObject_12 || (templateObject_12 = __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_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n  font-family: \"Inter\";\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n  font-family: \"Inter\";\n"])), Colors.InteractiveBGPrimary);
+var ShowMoreInner = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"], ["\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), Polished.lighten(0.025, Colors.Orange), Polished.darken(0.025, Colors.Orange));
+var RightWrapperCol = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n"])));
+var HideShowContent = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: 12px;\n  color: #fff;\n  letter-spacing: 0.5px;\n  margin-top: 10px;\n  cursor: pointer;\n  border-bottom: 1px solid #fff;\n  opacity: 0.7;\n  white-space: nowrap;\n"], ["\n  font-size: 12px;\n  color: #fff;\n  letter-spacing: 0.5px;\n  margin-top: 10px;\n  cursor: pointer;\n  border-bottom: 1px solid #fff;\n  opacity: 0.7;\n  white-space: nowrap;\n"])));
+var FeeList = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var FeeItem = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  color: ", ";\n  font-size: 14px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  color: ", ";\n  font-size: 14px;\n"])), Colors.White);
+var Label = styled.span(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])));
+var Amount = styled.span(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
+var DateTextWrapper = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 7px 0px;\n"], ["\n  margin: 7px 0px;\n"])));
+var DateText = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 15px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  padding-right: 5px;\n"], ["\n  font-size: 15px;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  padding-right: 5px;\n"])), Colors.HeadingSecondary);
+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, _f = _a.isRSVP, isRSVP = _f === void 0 ? false : _f, isTicketScreen = _a.isTicketScreen, 
+    // Counter Props
+    value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, eventDays = _a.eventDays, isMultiDaysEvent = _a.isMultiDaysEvent, timeZone = _a.timeZone, _g = _a.remainingQty, remainingQty = _g === void 0 ? 0 : _g, isTicketType = _a.isTicketType, isFees = _a.isFees, isUpgradeType = _a.isUpgradeType;
+    var _h = useState(false), showMore = _h[0], setShowMore = _h[1];
+    var _j = useState(true), showEllipsis = _j[0], setShowEllipsis = _j[1];
+    var _k = useState(false), showFees = _k[0], setShowFees = _k[1];
+    var descModified = description;
+    if (descModified.length > 210 && !showMore) {
+        descModified = descModified.substring(0, 210) + "...";
+    }
+    var toggle = function () {
+        setShowEllipsis(!showEllipsis);
+        setShowMore(!showMore);
+    };
+    var toggleFees = function () {
+        setShowFees(!showFees);
+    };
+    var ticketsAddOns = isTicketScreen === TicketsEnum.Tickets
+        ? FeeAppliedToEnum.Ticket
+        : FeeAppliedToEnum.AddOns;
+    var applicableFees = isFees
+        ? PaymentUtil.getApplicableFees({
+            price: price,
+            fees: isFees,
+            isTicketType: isTicketType,
+            isUpgradeType: isUpgradeType,
+        })
+        : [];
+    return (React.createElement(Container, null,
+        React.createElement(Column, null,
+            React.createElement(LeftWrapper, null,
+                React.createElement(Title, null, title),
+                isMultiDaysEvent && (React.createElement(DateTextWrapper, null, eventDays &&
+                    eventDays.length > 0 &&
+                    (eventDays === null || eventDays === void 0 ? void 0 : eventDays.map(function (day, i) {
+                        return (React.createElement(DateText, { key: i },
+                            Time.format(day, "MMM Do", timeZone),
+                            eventDays.length !== i + 1 && ","));
+                    })))),
+                (function () {
+                    if (!description)
+                        return;
+                    return (React.createElement(Fragment, null,
+                        React.createElement(AnimateHeight, { height: "auto" },
+                            React.createElement(Ellipsis, { active: showEllipsis },
+                                React.createElement(Description, null, description))),
+                        descModified.length > 115 ? (React.createElement(ShowMore, null,
+                            React.createElement(ShowMoreInner, { onClick: function () { return toggle(); } }, showMore
+                                ? AdvanceOptionsEnum.ShowLess
+                                : AdvanceOptionsEnum.ShowMore))) : ("")));
+                })()),
+            React.createElement(RightWrapperCol, null,
+                isRSVP ? (PriceUtil.output(price, true) === "0.00" || 0 ? (React.createElement(Price, null, "RSVP")) : (React.createElement(Price, null, "$".concat(PriceUtil.output(price, true)) + " (Ticket value)"))) : (React.createElement(Price, null, "$".concat(PriceUtil.output(price, true)))),
+                (applicableFees === null || applicableFees === void 0 ? void 0 : applicableFees.length) > 0 && (React.createElement(HideShowContent, { onClick: function () { return toggleFees(); } }, showFees
+                    ? AdvanceOptionsEnum.HideFees
+                    : AdvanceOptionsEnum.ShowFees)))),
+        showFees && (applicableFees === null || applicableFees === void 0 ? void 0 : applicableFees.length) > 0 && (React.createElement(FeeList, null, applicableFees === null || applicableFees === void 0 ? void 0 : applicableFees.map(function (fee, idx) { return (React.createElement(FeeItem, { key: idx },
+            React.createElement(Label, null, fee.label),
+            React.createElement(Amount, null,
+                "$",
+                fee.amount.toFixed(2)))); }))),
+        React.createElement(Column, null,
+            React.createElement(Value, null,
+                value,
+                React.createElement(Tickets, null, ticketsAddOns)),
+            remainingQty > 0 ? (React.createElement(Counter, { value: value, minValue: minValue, maxValue: maxValue, onIncrement: onIncrement, onDecrement: onDecrement })) : (React.createElement(Tag, null, " Sold out"))),
+        React.createElement(Row, null, subtitle && React.createElement(Subtitle, null, subtitle))));
+}
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
 
 export { AdvanceOptionsEnum, FeeAppliedToEnum, TicketsEnum, Product as default };