@sellout/ui 0.0.300 → 0.0.301

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\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};\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      text-indent: 15px;\n      transition: all 0.2s;\n      color: ${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: ${Colors.White};\n      border: 1px solid ${Colors.Grey5};\n      border-radius: 0px 10px 10px 0px;\n      height: ${(props) => props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '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      &.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: ${Colors.Grey5};\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: ${Colors.Grey6};\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: ${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: #f1f1f1;\n        }\n        &.highlight {\n          background-color: #f1f1f1;\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: #fff;\n        padding: 5px 0 6px 10px;\n      }\n      .search-emoji {\n        display: none;\n        font-size: ${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};\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}) => {\n  return (\n    <Container margin={margin}>\n      {label && <Label text={label} subText={subLabel} tip={tip} />}\n      <InnerContainer\n        isMobile={useMobileMedia()}\n        phoneNumberInputSize={phoneNumberInputSize}\n        disabled={disabled}\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":["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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"}

package/build/components/Product.d.ts

@@ -1,7 +1,12 @@
 import React from "react";
-import { CounterProps } from './Counter';
+import { CounterProps } from "./Counter";
+export declare enum TicketsEnum {
+    Tickets = "Tickets",
+    AddOns = "AddOns"
+}
 export declare type ProductProps = {
     title: string;
+    isTicketScreen: string;
     price: number;
     isRSVP?: boolean;
     subtitle?: string;
@@ -12,4 +17,4 @@ export declare type ProductProps = {
     timeZone?: string;
     remainingQty?: number;
 } & CounterProps;
-export default function Product({ title, price, subtitle, description, isRSVP, value, minValue, maxValue, onIncrement, onDecrement, eventDays, isMultiDaysEvent, timeZone, remainingQty }: ProductProps): React.JSX.Element;
+export default function Product({ title, price, subtitle, description, isRSVP, isTicketScreen, value, minValue, maxValue, onIncrement, onDecrement, eventDays, isMultiDaysEvent, timeZone, remainingQty, }: ProductProps): React.JSX.Element;

package/build/components/Product.js

@@ -8,58 +8,71 @@ 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 Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n"])), function (props) { return props.justify; });
-var Column = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
-var Title = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"], ["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"])), Colors.Grey1);
-var Price = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 1.6rem;\n  font-weight: 500;\n  color: ", ";\n  margin:5px 0;\n"], ["\n  font-size: 1.6rem;\n  font-weight: 500;\n  color: ", ";\n  margin:5px 0;\n"])), Colors.Grey2);
-var Subtitle = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"])), Colors.Grey3);
-var Description = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  margin-top: 5px;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  margin-top: 5px;\n"])), Colors.Grey2);
-var Tag = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"], ["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"])), Colors.Orange);
-var Ellipsis = styled.div(templateObject_9 || (templateObject_9 = __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_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n"])), Colors.Orange);
-var ShowMoreInner = styled.span(templateObject_11 || (templateObject_11 = __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 DateText = styled.span(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  padding-right: 5px;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n  padding-right: 5px;\n"])), Colors.Grey2);
+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"], ["\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"])), 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 DateTextWrapper = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin: 7px 0px;\n"], ["\n  margin: 7px 0px;\n"])));
+var DateText = styled.span(templateObject_16 || (templateObject_16 = __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, 
+    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;
     var _h = useState(false), showMore = _h[0], setShowMore = _h[1];
     var _j = useState(true), showEllipsis = _j[0], setShowEllipsis = _j[1];
     var descModified = description;
     if (descModified.length > 210 && !showMore) {
-        descModified = descModified.substring(0, 210) + '...';
+        descModified = descModified.substring(0, 210) + "...";
     }
     var toggle = function () {
         setShowEllipsis(!showEllipsis);
         setShowMore(!showMore);
     };
+    var ticketsAddOns = isTicketScreen === TicketsEnum.Tickets ? "Tickets" : "Add-Ons";
     return (React.createElement(Container, null,
-        React.createElement(Row, { justify: "space-between" },
-            React.createElement(Column, null,
+        React.createElement(Column, null,
+            React.createElement(LeftWrapper, null,
                 React.createElement(Title, null, title),
-                isMultiDaysEvent && React.createElement("div", null, eventDays && eventDays.length > 0 && (eventDays === null || eventDays === void 0 ? void 0 : eventDays.map(function (day, i) {
+                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 && ","));
-                }))),
-                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))),
-            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)),
-        (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 > 210 ?
-                    React.createElement(ShowMore, null,
-                        React.createElement(ShowMoreInner, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More"))
-                    : ""));
-        })()));
+                })))),
+                (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 ? "Show Less" : "Show More"))) : ("")));
+                })()),
+            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)))),
+        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;
+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;
 
-export { Product as default };
+export { TicketsEnum, Product as default };
 //# sourceMappingURL=Product.js.map

package/build/components/Product.js.map

@@ -1 +1 @@
-{"version":3,"file":"Product.js","sources":["../../src/components/Product.tsx"],"sourcesContent":["import React, { Fragment, useState } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport AnimateHeight from \"react-animate-height\";\nimport { Colors } from \"../Colors\";\nimport Counter, { CounterProps } from './Counter';\nimport * as PriceUtil from '@sellout/utils/.dist/price';\nimport * as Time from '@sellout/utils/.dist/time';\n// import Icon from \"./Icon\";\n\ntype RowProps = {\n  justify?: string;\n};\n\nconst Row = styled.div<RowProps>`\n  display: flex;\n  flex-direction: row;\n  justify-content: ${props => props.justify};\n`;\n\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Container = styled.div`\n  background-color: ${Colors.White};\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ${Colors.Grey6};\n`;\n\nconst Title = styled.div`\n  font-size: 1.8rem;\n  color: ${Colors.Grey1};\n  font-weight: 600;\n  margin-bottom: 5px;\n`;\n\nconst Price = styled.div`\n  font-size: 1.6rem;\n  font-weight: 500;\n  color: ${Colors.Grey2};\n  margin:5px 0;\n`;\n\nconst Subtitle = styled.div`\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ${Colors.Grey3};\n`;\n\nconst Description = styled.div`\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ${Colors.Grey2};\n  margin-top: 5px;\n`;\n\nconst Tag = styled.div`\n  font-size: 1.8rem;\n  color: ${Colors.Orange};\n  font-weight: 600;\n  margin-bottom: 5px;\n`;\n\ntype EllipsisProps = {\n  active: boolean\n};\n\nconst Ellipsis = styled.div<EllipsisProps>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${props => props.active ? 3 : null};\n  -webkit-box-orient: ${props => props.active ? 'vertical' : null};\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst ShowMore = styled.div`\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ${Colors.Orange};\n  transition: all 0.2s;\n`;\n\n\nconst ShowMoreInner = styled.span`\n  &:hover {\n    cursor: pointer;\n    color: ${Polished.lighten(0.025, Colors.Orange)};\n  }\n\n  &:active {\n    color: ${Polished.darken(0.025, Colors.Orange)};\n  }\n`;\n\nconst DateText = styled.span`\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ${Colors.Grey2};\n  margin-bottom: 5px;\n  padding-right: 5px;\n`;\n\nexport type ProductProps = {\n  title: string;\n  price: number;\n  isRSVP?: boolean;\n  subtitle?: string;\n  description?: string;\n  imageUrl?: string;\n  eventDays?: string[];\n  isMultiDaysEvent?: boolean;\n  timeZone?:string;\n  remainingQty?: number;\n} & CounterProps\n\nexport default function Product({\n  title = '',\n  price = 0,\n  subtitle = '',\n  description = '',\n  isRSVP = false,\n  // Counter Props\n  value,\n  minValue,\n  maxValue,\n  onIncrement,\n  onDecrement,\n  eventDays,\n  isMultiDaysEvent,\n  timeZone,\n  remainingQty=0\n}: ProductProps) {\n  const [showMore, setShowMore] = useState(false);\n  const [showEllipsis, setShowEllipsis] = useState(true);\n\n  let descModified = description;\n  if (descModified.length > 210 && !showMore) {\n    descModified = descModified.substring(0, 210) + '...';\n  }\n\n  const toggle = () => {\n    setShowEllipsis(!showEllipsis);\n    setShowMore(!showMore)\n  }\n\n  return (\n    <Container>\n      <Row justify=\"space-between\">\n        <Column>\n          <Title>{title}</Title>\n          {isMultiDaysEvent && <div>{eventDays && eventDays.length > 0 && eventDays?.map((day: any,i) => {\n            return (<DateText key={i}>{Time.format(\n              day,\n              \"MMM Do\",\n              timeZone\n            )}{eventDays.length !== i+1 && \",\"}</DateText>)\n          })}</div>}\n          {isRSVP ? ((PriceUtil.output(price, true) === \"0.00\" || 0) ? <Price>{\"RSVP\"}</Price> : <Price>{`$${PriceUtil.output(price, true)}` + \" (Ticket value)\"}</Price>) : <Price>{`$${PriceUtil.output(price, true)}`}</Price>}\n        </Column>\n\n        {remainingQty > 0 ? <Counter\n          value={value}\n          minValue={minValue}\n          maxValue={maxValue}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n        /> : <Tag> Sold out</Tag>}\n      </Row>\n      <Row>{subtitle && <Subtitle>{subtitle}</Subtitle>}</Row>\n      {(() => {\n        if (!description) return;\n\n        return (\n          <Fragment>\n            <AnimateHeight height=\"auto\">\n              <Ellipsis active={showEllipsis}>\n                <Description>{description}</Description>\n              </Ellipsis>\n            </AnimateHeight>\n            {descModified.length>210 ? \n            <ShowMore >\n              <ShowMoreInner onClick={() => toggle()}>\n                {showMore ? \"Show Less\" : \"Show More\"}\n              </ShowMoreInner>\n            </ShowMore>\n           :\"\"}\n          </Fragment>\n        );\n      })()}\n    </Container>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Product.js","sources":["../../src/components/Product.tsx"],"sourcesContent":["import React, { Fragment, useState } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport AnimateHeight from \"react-animate-height\";\nimport { Colors } from \"../Colors\";\nimport Counter, { CounterProps } from \"./Counter\";\nimport * as PriceUtil from \"@sellout/utils/.dist/price\";\nimport * as Time from \"@sellout/utils/.dist/time\";\n\ntype RowProps = {\n  justify?: string;\n};\nexport enum TicketsEnum {\n  Tickets = \"Tickets\",\n  AddOns = \"AddOns\",\n}\nconst Row = styled.div<RowProps>`\n  display: flex;\n  flex-direction: row;\n  justify-content: ${(props) => props.justify};\n`;\n\nconst Column = styled.div`\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n`;\nconst LeftWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst Container = styled.div`\n  background-color: ${Colors.SurfaceTertiary};\n  margin: 0 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid ${Colors.SecondaryStroke};\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\nconst Title = styled.div`\n  font-size: 16px;\n  color: ${Colors.HeadingSecondary};\n  font-weight: 500;\n  font-family: \"Inter\";\n  line-height: 20px;\n`;\n\nconst Price = styled.div`\n  font-size: 16px;\n  color: ${Colors.HeadingSecondary};\n  font-weight: 500;\n  margin: 5px 0;\n  line-height: 90%;\n`;\n\nconst Subtitle = styled.div`\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ${Colors.White};\n  font-family: \"inter\";\n`;\n\nconst Description = styled.div`\n  color: ${Colors.SupportTertiary};\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`;\n\nconst Tickets = styled.div`\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ${Colors.SupportTertiary};\n  font-family: \"inter\";\n`;\n\nconst Tag = styled.div`\n  font-size: 16px;\n  color: ${Colors.HeadingPrimary};\n  font-weight: 500;\n  margin-bottom: 5px;\n  line-height: 90%;\n`;\n\nconst Value = styled.div`\n  font-size: 28px;\n  min-width: 20px;\n  color: ${Colors.HeadingPrimary};\n  line-height: 90%;\n  font-weight: 500;\n`;\n\ntype EllipsisProps = {\n  active: boolean;\n};\n\nconst Ellipsis = styled.div<EllipsisProps>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${(props) => (props.active ? 3 : null)};\n  -webkit-box-orient: ${(props) => (props.active ? \"vertical\" : null)};\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst ShowMore = styled.div`\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 160%;\n  color: ${Colors.InteractiveBGPrimary};\n  transition: all 0.2s;\n  font-family: \"Inter\";\n`;\n\nconst ShowMoreInner = styled.span`\n  &:hover {\n    cursor: pointer;\n    color: ${Polished.lighten(0.025, Colors.Orange)};\n  }\n\n  &:active {\n    color: ${Polished.darken(0.025, Colors.Orange)};\n  }\n`;\nconst DateTextWrapper = styled.span`\n  margin: 7px 0px;\n`;\nconst DateText = styled.span`\n  font-size: 15px;\n  font-weight: 500;\n  color: ${Colors.HeadingSecondary};\n  margin-bottom: 5px;\n  padding-right: 5px;\n`;\n\nexport type ProductProps = {\n  title: string;\n  isTicketScreen: string;\n  price: number;\n  isRSVP?: boolean;\n  subtitle?: string;\n  description?: string;\n  imageUrl?: string;\n  eventDays?: string[];\n  isMultiDaysEvent?: boolean;\n  timeZone?: string;\n  remainingQty?: number;\n} & CounterProps;\n\nexport default function Product({\n  title = \"\",\n  price = 0,\n  subtitle = \"\",\n  description = \"\",\n  isRSVP = false,\n  isTicketScreen,\n  // Counter Props\n  value,\n  minValue,\n  maxValue,\n  onIncrement,\n  onDecrement,\n  eventDays,\n  isMultiDaysEvent,\n  timeZone,\n  remainingQty = 0,\n}: ProductProps) {\n  const [showMore, setShowMore] = useState(false);\n  const [showEllipsis, setShowEllipsis] = useState(true);\n\n  let descModified = description;\n  if (descModified.length > 210 && !showMore) {\n    descModified = descModified.substring(0, 210) + \"...\";\n  }\n  \n\n  const toggle = () => {\n    setShowEllipsis(!showEllipsis);\n    setShowMore(!showMore);\n  };\n  const ticketsAddOns =\n    isTicketScreen === TicketsEnum.Tickets ? \"Tickets\" : \"Add-Ons\";\n  return (\n    <Container>\n      <Column>\n        <LeftWrapper>\n          <Title>{title}</Title>\n          {isMultiDaysEvent && (\n            <DateTextWrapper>\n              {eventDays &&\n                eventDays.length > 0 &&\n                eventDays?.map((day: any, i) => {\n                  return (\n                    <DateText key={i}>\n                      {Time.format(day, \"MMM Do\", timeZone)}\n                      {eventDays.length !== i + 1 && \",\"}\n                    </DateText>\n                  );\n                })}\n            </DateTextWrapper>\n          )}\n          {(() => {\n            if (!description) return;\n\n            return (\n              <Fragment>\n                <AnimateHeight height=\"auto\">\n                  <Ellipsis active={showEllipsis}>\n                    <Description>{description}</Description>\n                  </Ellipsis>\n                </AnimateHeight>\n                {descModified.length > 115 ? (\n                  <ShowMore>\n                    <ShowMoreInner onClick={() => toggle()}>\n                      {showMore ? \"Show Less\" : \"Show More\"}\n                    </ShowMoreInner>\n                  </ShowMore>\n                ) : (\n                  \"\"\n                )}\n              </Fragment>\n            );\n          })()}\n        </LeftWrapper>\n        {isRSVP ? (\n          PriceUtil.output(price, true) === \"0.00\" || 0 ? (\n            <Price>{\"RSVP\"}</Price>\n          ) : (\n            <Price>\n              {`$${PriceUtil.output(price, true)}` + \" (Ticket value)\"}\n            </Price>\n          )\n        ) : (\n          <Price>{`$${PriceUtil.output(price, true)}`}</Price>\n        )}\n      </Column>\n      <Column>\n        <Value>\n          {value}\n          <Tickets>{ticketsAddOns}</Tickets>\n        </Value>\n\n        {remainingQty > 0 ? (\n          <Counter\n            value={value}\n            minValue={minValue}\n            maxValue={maxValue}\n            onIncrement={onIncrement}\n            onDecrement={onDecrement}\n          />\n        ) : (\n          <Tag> Sold out</Tag>\n        )}\n      </Column>\n      <Row>{subtitle && <Subtitle>{subtitle}</Subtitle>}</Row>\n    </Container>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/components/SearchDropdown.d.ts

@@ -8,6 +8,7 @@ export declare type ItemsContainerProps = {
 };
 export declare type ItemProps = {
     selected: boolean;
+    darkThemeProps?: string;
 };
 export declare enum SearchDropdownTypes {
     MultiSelect = "Multi-Select",
@@ -28,6 +29,12 @@ export declare type SearchDropdownProps = {
     tip?: string;
     subLabel?: string;
     icon?: any;
+    fontSize?: string;
+    fontWeight?: string;
+    fontFamily?: string;
+    labelColor?: string;
+    darkThemeProps?: string;
+    borderColor?: string;
 };
-export default function SearchDropdown({ type, value, onChange, placeholder, width, searchQuery, setSearchQuery, items, footer, onClear, label, tip, subLabel, icon, }: SearchDropdownProps): React.JSX.Element;
+export default function SearchDropdown({ type, value, onChange, placeholder, width, searchQuery, setSearchQuery, items, footer, onClear, label, tip, subLabel, icon, fontSize, fontWeight, fontFamily, labelColor, darkThemeProps, borderColor }: SearchDropdownProps): React.JSX.Element;
 export {};

package/build/components/SearchDropdown.js

@@ -7,15 +7,12 @@ import Icon from './Icon.js';
 import Label from './Label.js';
 
 var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n"])), function (props) { return (props.hasLabel ? "65px" : "40px"); });
-var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  &:focus, &:active {\n    /* border: 0px; */\n    outline: 0px;\n  }\n"], ["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  &:focus, &:active {\n    /* border: 0px; */\n    outline: 0px;\n  }\n"])), function (props) { return (props.open ? "187px" : "38px"); }, function (props) { return props.width; }, Colors.White, Colors.Grey5, function (props) { return props.open ? 100 : 0; }, function (props) { return props.open ? '0px 4px 16px rgba(0, 0, 0, 0.05)' : ''; });
-var TopRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 38px;\n  padding: 0 16px;\n  z-index: 100;\n  background-color: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 38px;\n  padding: 0 16px;\n  z-index: 100;\n  background-color: ", ";\n"])), Colors.White);
-var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  border: 0px;\n  outline: 0px;\n  width: calc(100% - 30px);\n  margin-left: 8px;\n  height: 38px;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0;\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  border: 0px;\n  outline: 0px;\n  width: calc(100% - 30px);\n  margin-left: 8px;\n  height: 38px;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), Colors.Grey1, Colors.Grey4);
+var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n   &:focus,&:active {\n    /* border: 0px; */\n    outline: 0px;\n  }\n  //   &:hover {border: ", ";\n  // }\n"], ["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n   &:focus,&:active {\n    /* border: 0px; */\n    outline: 0px;\n  }\n  //   &:hover {border: ", ";\n  // }\n"])), function (props) { return (props.open ? "187px" : "38px"); }, function (props) { return props.width; }, function (props) { return (props.darkThemeProps ? Colors.SurfaceTertiary : Colors.White); }, function (props) { return props.borderColor || Colors.Grey5; }, function (props) { return props.open ? 100 : 0; }, function (props) { return props.open ? '0px 4px 16px rgba(0, 0, 0, 0.05)' : ''; }, function (props) { return props.borderColor ? "1px solid " + Colors.Grey5 : "none"; });
+var TopRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 38px;\n  padding: 0 16px;\n  z-index: 100;\n  background-color: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 38px;\n  padding: 0 16px;\n  z-index: 100;\n  background-color: ", ";\n"])), function (props) { return (props.darkThemeProps || Colors.White); });
+var Input = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  border: 0px;\n  outline: 0px;\n  width: calc(100% - 30px);\n  margin-left: 8px;\n  height: 38px;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0;\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n background-color: ", ";\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  border: 0px;\n  outline: 0px;\n  width: calc(100% - 30px);\n  margin-left: 8px;\n  height: 38px;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) { return (props.darkThemeProps); }, function (props) { return (props.darkThemeProps ? Colors.HeadingSecondary : Colors.Grey1); }, Colors.Grey4);
 var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  max-height: ", ";\n  overflow: scroll;\n\n"], ["\n  position: relative;\n  max-height: ", ";\n  overflow: scroll;\n\n"])), function (props) { return props.footer ? '108px' : '158px'; });
-var NoItems = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  height: 30px;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  height: 30px;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n"])), Colors.Grey3);
-var Item = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 16px;\n  background-color: ", ";\n  font-size: 1.2rem;\n  color: ", ";\n  transition: all 0.2s;\n  z-index: 100;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 16px;\n  background-color: ",
-    ";\n  font-size: 1.2rem;\n  color: ", ";\n  transition: all 0.2s;\n  z-index: 100;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (props) {
-    return props.selected ? Colors.Grey7 : Colors.White;
-}, Colors.Grey1, Colors.Grey7);
+var NoItems = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n  padding: 0 16px;\n  display: flex;\n  align-items: ", ";\n  background-color: ", ";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n  padding: 0 16px;\n  display: flex;\n  align-items: ", ";\n  background-color: ", ";\n"])), function (props) { return (props.darkThemeProps ? Colors.HeadingSecondary : Colors.Grey3); }, function (props) { return (props.darkThemeProps ? '148px' : '30px'); }, function (props) { return (props.darkThemeProps ? 'start' : 'center'); }, function (props) { return (props.darkThemeProps); });
+var Item = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 16px;\n  background-color: ", ";\n  font-size: 1.2rem;\n  color:", ";\n  transition: all 0.2s;\n  z-index: 100;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 16px;\n  background-color: ", ";\n  font-size: 1.2rem;\n  color:", ";\n  transition: all 0.2s;\n  z-index: 100;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (props) { return props.darkThemeProps ? Colors.SurfaceTertiary : (props.selected ? Colors.Grey7 : Colors.White); }, function (props) { return props.darkThemeProps ? Colors.HeadingSecondary : Colors.Grey1; }, function (props) { return props.darkThemeProps ? Colors.SupportTertiary : Colors.Grey7; });
 var Footer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0px;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 16px;\n  border-top: 1px solid ", ";\n  width: fill-available;\n"], ["\n  position: absolute;\n  bottom: 0px;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 16px;\n  border-top: 1px solid ", ";\n  width: fill-available;\n"])), Colors.Grey7);
 var SearchDropdownTypes;
 (function (SearchDropdownTypes) {
@@ -23,14 +20,14 @@ var SearchDropdownTypes;
     SearchDropdownTypes["SingleSelect"] = "Single-Select";
 })(SearchDropdownTypes || (SearchDropdownTypes = {}));
 function SearchDropdown(_a) {
-    var _b = _a.type, type = _b === void 0 ? SearchDropdownTypes.SingleSelect : _b, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, _c = _a.width, width = _c === void 0 ? '400px' : _c, searchQuery = _a.searchQuery, setSearchQuery = _a.setSearchQuery, items = _a.items, footer = _a.footer, onClear = _a.onClear, label = _a.label, tip = _a.tip, subLabel = _a.subLabel, _d = _a.icon, icon = _d === void 0 ? IconEnum.SearchLight : _d;
+    var _b = _a.type, type = _b === void 0 ? SearchDropdownTypes.SingleSelect : _b, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, _c = _a.width, width = _c === void 0 ? '400px' : _c, searchQuery = _a.searchQuery, setSearchQuery = _a.setSearchQuery, items = _a.items, footer = _a.footer, onClear = _a.onClear, label = _a.label, tip = _a.tip, subLabel = _a.subLabel, _d = _a.icon, icon = _d === void 0 ? IconEnum.SearchLight : _d, fontSize = _a.fontSize, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, labelColor = _a.labelColor, darkThemeProps = _a.darkThemeProps, borderColor = _a.borderColor;
     var _e = React.useState(false), open = _e[0], setOpen = _e[1];
     return (React.createElement(Container, { hasLabel: Boolean(label) },
-        label && React.createElement(Label, { text: label, tip: tip, subText: subLabel }),
-        React.createElement(Inner, { tabIndex: 1, open: open, width: width, onFocus: function () { return setOpen(true); }, onBlur: function () { return setOpen(false); } },
-            React.createElement(TopRow, null,
+        label && React.createElement(Label, { fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, text: label, tip: tip, subText: subLabel, labelColor: labelColor }),
+        React.createElement(Inner, { tabIndex: 1, open: open, width: width, onFocus: function () { return setOpen(true); }, onBlur: function () { return setOpen(false); }, darkThemeProps: darkThemeProps, borderColor: borderColor },
+            React.createElement(TopRow, { darkThemeProps: darkThemeProps },
                 React.createElement(Icon, { icon: icon, size: 14, color: Colors.Grey4 }),
-                React.createElement(Input, { placeholder: placeholder, value: (function () {
+                React.createElement(Input, { darkThemeProps: darkThemeProps, placeholder: placeholder, value: (function () {
                         var _a;
                         switch (type) {
                             case SearchDropdownTypes.SingleSelect:
@@ -59,12 +56,12 @@ function SearchDropdown(_a) {
                 onClear && value && React.createElement(Icon, { icon: IconEnum.CancelCircle, size: 14, color: Colors.Grey5, onClick: function () { return onClear(); } })),
             React.createElement(ItemsContainer, { footer: Boolean(footer) },
                 items && (items === null || items === void 0 ? void 0 : items.map(function (item) {
-                    return (React.createElement(Item, { key: item.value, selected: item.value === value, onClick: function () {
+                    return (React.createElement(Item, { key: item.value, darkThemeProps: darkThemeProps, selected: item.value === value, onClick: function () {
                             setOpen(false);
                             onChange(item.value);
                         } }, item.text));
                 })),
-                !items || (!items.length && React.createElement(NoItems, null, "No results found..."))),
+                !items || (!items.length && React.createElement(NoItems, { darkThemeProps: darkThemeProps }, "No results found..."))),
             footer && React.createElement(Footer, null, footer))));
 }
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/build/components/SearchDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchDropdown.js","sources":["../../src/components/SearchDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport { IconEnum } from \"./Icons\";\nimport Icon from \"./Icon\";\nimport Label from './Label';\n\ntype ContainerProps = {\n  hasLabel: boolean;\n}\n\ninterface ISearchDropdownItem {\n  text: string;\n  value: any;\n}\n\n\nconst Container = styled.div<ContainerProps>`\n  position: relative;\n  height: ${(props) => (props.hasLabel ? \"65px\" : \"40px\")};\n`;\n\ntype InnerProps = {\n  open: boolean;\n  width: string;\n};\n\nconst Inner = styled.div<InnerProps>`\n  position: absolute;\n  height: ${(props) => (props.open ? \"187px\" : \"38px\")};\n  width: ${(props) => props.width};\n  background-color: ${Colors.White};\n  border: 1px solid ${Colors.Grey5};\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ${props => props.open ? 100 : 0};\n  box-shadow: ${props => props.open ? '0px 4px 16px rgba(0, 0, 0, 0.05)' : ''};\n  overflow: hidden;\n\n  &:focus, &:active {\n    /* border: 0px; */\n    outline: 0px;\n  }\n`;\n\nconst TopRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 38px;\n  padding: 0 16px;\n  z-index: 100;\n  background-color: ${Colors.White};\n`;\n\nconst Input = styled.input`\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ${Colors.Grey1};\n  border: 0px;\n  outline: 0px;\n  width: calc(100% - 30px);\n  margin-left: 8px;\n  height: 38px;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0;\n\n  ::placeholder {\n    color: ${Colors.Grey4};\n  }\n`;\n\nexport type ItemsContainerProps = {\n  footer: boolean;\n};\n\nconst ItemsContainer = styled.div<ItemsContainerProps>`\n  position: relative;\n  max-height: ${props => props.footer ? '108px' : '158px'};\n  overflow: scroll;\n\n`;\n\nconst NoItems = styled.div`\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ${Colors.Grey3};\n  height: 30px;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n`;\n\nexport type ItemProps = {\n  selected: boolean;\n}\n\nconst Item = styled.div<ItemProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 16px;\n  background-color: ${(props) =>\n    props.selected ? Colors.Grey7 : Colors.White};\n  font-size: 1.2rem;\n  color: ${Colors.Grey1};\n  transition: all 0.2s;\n  z-index: 100;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ${Colors.Grey7};\n  }\n`;\n\nconst Footer = styled.div`\n  position: absolute;\n  bottom: 0px;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 16px;\n  border-top: 1px solid ${Colors.Grey7};\n  width: fill-available;\n`;\n\nexport enum SearchDropdownTypes {\n  MultiSelect = 'Multi-Select',\n  SingleSelect = 'Single-Select',\n};\n\nexport type SearchDropdownProps = {\n  type?: SearchDropdownTypes;\n  value?: string;\n  onChange: Function;\n  placeholder?: string;\n  width?: string;\n  searchQuery?: string;\n  setSearchQuery?: (value: string) => void;\n  items: ISearchDropdownItem[];\n  footer?: React.ReactNode;\n  onClear?: () => void;\n  label?: string;\n  tip?: string;\n  subLabel?: string;\n  icon?: any;\n};\n\nexport default function SearchDropdown({\n  type = SearchDropdownTypes.SingleSelect,\n  value,\n  onChange,\n  placeholder,\n  width = '400px',\n  searchQuery,\n  setSearchQuery,\n  items,\n  footer,\n  onClear,\n  label,\n  tip,\n  subLabel,\n  icon = IconEnum.SearchLight,\n}: SearchDropdownProps) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Container hasLabel={Boolean(label)}>\n      {label && <Label text={label} tip={tip} subText={subLabel} />}\n      <Inner\n        tabIndex={1}\n        open={open}\n        width={width}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n      >\n        <TopRow>\n          <Icon icon={icon} size={14} color={Colors.Grey4} />\n          <Input\n            placeholder={placeholder}\n            value={(() => {\n              switch (type) {\n                case SearchDropdownTypes.SingleSelect:\n                  if (open) return searchQuery ?? \"\";\n                  else {\n                    const itemValue = items.find((item) => item.value === value)?.text;\n                    if (itemValue) return itemValue;\n                    else if (Boolean(value)) return 'Loading...';\n                    else return '';\n                  }\n\n                case SearchDropdownTypes.MultiSelect:\n                  if (open) return searchQuery ?? \"\";\n                  else return \"\";\n              }\n            })()}\n            onChange={(e) => {\n              if (open && setSearchQuery) {\n                setSearchQuery(e.target.value);\n              }\n            }}\n          />\n          {onClear && value && <Icon icon={IconEnum.CancelCircle} size={14} color={Colors.Grey5} onClick={() => onClear()} />}\n        </TopRow>\n        <ItemsContainer footer={Boolean(footer)}>\n          {items &&\n            items?.map((item) => {\n              return (\n                <Item\n                  key={item.value}\n                  selected={item.value === value}\n                  onClick={() => {\n                    setOpen(false);\n                    onChange(item.value);\n                  }}\n                >\n                  {item.text}\n                </Item>\n              );\n            })}\n          {!items || (!items.length && <NoItems>No results found...</NoItems>)}\n        </ItemsContainer>\n        {footer && <Footer>{footer}</Footer>}\n      </Inner>\n    </Container>\n  );\n};"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchDropdown.js","sources":["../../src/components/SearchDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport { IconEnum } from \"./Icons\";\nimport Icon from \"./Icon\";\nimport Label from './Label';\n\ntype ContainerProps = {\n  hasLabel: boolean;\n}\n\ninterface ISearchDropdownItem {\n  text: string;\n  value: any;\n}\n\n\nconst Container = styled.div<ContainerProps>`\n  position: relative;\n  height: ${(props) => (props.hasLabel ? \"65px\" : \"40px\")};\n`;\n\ntype InnerProps = {\n  open: boolean;\n  width: string;\n  darkThemeProps?: string;\n  borderColor?:string;\n};\ntype InputProps = {\n  darkThemeProps?: string;\n};\ntype InputRowProps = {\n  darkThemeProps?: string;\n};\ntype NoItemProps = {\n  darkThemeProps?: string;\n};\n\nconst Inner = styled.div<InnerProps>`\n  position: absolute;\n  height: ${(props) => (props.open ? \"187px\" : \"38px\")};\n  width: ${(props) => props.width};\n  background-color: ${(props)=>(props.darkThemeProps? Colors.SurfaceTertiary :Colors.White)};\n  border: 1px solid ${(props) => props.borderColor || Colors.Grey5};\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ${props => props.open ? 100 : 0};\n  box-shadow: ${props => props.open ? '0px 4px 16px rgba(0, 0, 0, 0.05)' : ''};\n  overflow: hidden;\n\n   &:focus,&:active {\n    /* border: 0px; */\n    outline: 0px;\n  }\n  //   &:hover {border: ${(props) =>props.borderColor? `1px solid ${Colors.Grey5}`: \"none\"};\n  // }\n`;\n\nconst TopRow = styled.div<InputRowProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 38px;\n  padding: 0 16px;\n  z-index: 100;\n  background-color: ${(props) => (props.darkThemeProps || Colors.White)};\n`;\n\nconst Input = styled.input<InputProps>`\n background-color: ${(props) => (props.darkThemeProps)};\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ${(props) => (props.darkThemeProps ? Colors.HeadingSecondary : Colors.Grey1)};\n  border: 0px;\n  outline: 0px;\n  width: calc(100% - 30px);\n  margin-left: 8px;\n  height: 38px;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0;\n\n  ::placeholder {\n    color: ${Colors.Grey4};\n  }\n`;\n\nexport type ItemsContainerProps = {\n  footer: boolean;\n};\n\nconst ItemsContainer = styled.div<ItemsContainerProps>`\n  position: relative;\n  max-height: ${props => props.footer ? '108px' : '158px'};\n  overflow: scroll;\n\n`;\n\nconst NoItems = styled.div<NoItemProps>`\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ${(props) => (props.darkThemeProps ? Colors.HeadingSecondary: Colors.Grey3)};\n  height: ${(props) => (props.darkThemeProps ? '148px': '30px')};\n  padding: 0 16px;\n  display: flex;\n  align-items: ${(props) => (props.darkThemeProps ? 'start': 'center')};\n  background-color: ${(props) => (props.darkThemeProps)};\n`;\n\nexport type ItemProps = {\n  selected: boolean;\n  darkThemeProps?:string;\n}\n\nconst Item = styled.div<ItemProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 16px;\n  background-color: ${(props) =>props.darkThemeProps ? Colors.SurfaceTertiary : (props.selected ? Colors.Grey7 : Colors.White)};\n  font-size: 1.2rem;\n  color:${(props) =>props.darkThemeProps ? Colors.HeadingSecondary : Colors.Grey1};\n  transition: all 0.2s;\n  z-index: 100;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ${(props) =>props.darkThemeProps ? Colors.SupportTertiary : Colors.Grey7};\n  }\n`;\n\nconst Footer = styled.div`\n  position: absolute;\n  bottom: 0px;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 16px;\n  border-top: 1px solid ${Colors.Grey7};\n  width: fill-available;\n`;\n\nexport enum SearchDropdownTypes {\n  MultiSelect = 'Multi-Select',\n  SingleSelect = 'Single-Select',\n};\n\nexport type SearchDropdownProps = {\n  type?: SearchDropdownTypes;\n  value?: string;\n  onChange: Function;\n  placeholder?: string;\n  width?: string;\n  searchQuery?: string;\n  setSearchQuery?: (value: string) => void;\n  items: ISearchDropdownItem[];\n  footer?: React.ReactNode;\n  onClear?: () => void;\n  label?: string;\n  tip?: string;\n  subLabel?: string;\n  icon?: any;\n  fontSize?:string;\n  fontWeight?:string;\n  fontFamily?:string;\n  labelColor?:string\n  darkThemeProps?:string;\n  borderColor?:string;\n};\n\nexport default function SearchDropdown({\n  type = SearchDropdownTypes.SingleSelect,\n  value,\n  onChange,\n  placeholder,\n  width = '400px',\n  searchQuery,\n  setSearchQuery,\n  items,\n  footer,\n  onClear,\n  label,\n  tip,\n  subLabel,\n  icon = IconEnum.SearchLight,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  labelColor,\n  darkThemeProps,\n  borderColor\n}: SearchDropdownProps) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Container hasLabel={Boolean(label)}>\n      {label && <Label fontFamily={fontFamily} fontSize ={fontSize} fontWeight= {fontWeight} text={label} tip={tip} subText={subLabel} labelColor={labelColor} />}\n      <Inner\n        tabIndex={1}\n        open={open}\n        width={width}\n        onFocus={() => setOpen(true)}\n        onBlur={() => setOpen(false)}\n        darkThemeProps={darkThemeProps}\n        borderColor={borderColor}\n      >\n        <TopRow darkThemeProps={darkThemeProps} >\n          <Icon icon={icon} size={14} color={Colors.Grey4} />\n          <Input\n            darkThemeProps={darkThemeProps}\n            placeholder={placeholder}\n            value={(() => {\n              switch (type) {\n                case SearchDropdownTypes.SingleSelect:\n                  if (open) return searchQuery ?? \"\";\n                  else {\n                    const itemValue = items.find((item) => item.value === value)?.text;\n                    if (itemValue) return itemValue;\n                    else if (Boolean(value)) return 'Loading...';\n                    else return '';\n                  }\n\n                case SearchDropdownTypes.MultiSelect:\n                  if (open) return searchQuery ?? \"\";\n                  else return \"\";\n              }\n            })()}\n            onChange={(e) => {\n              if (open && setSearchQuery) {\n                setSearchQuery(e.target.value);\n              }\n            }}\n          />\n          {onClear && value && <Icon icon={IconEnum.CancelCircle} size={14} color={Colors.Grey5} onClick={() => onClear()} />}\n        </TopRow>\n        <ItemsContainer footer={Boolean(footer)}>\n          {items &&\n            items?.map((item) => {\n              return (\n                <Item\n                  key={item.value}\n                  darkThemeProps={darkThemeProps}\n                  selected={item.value === value}\n                  onClick={() => {\n                    setOpen(false);\n                    onChange(item.value);\n                  }}\n                >\n                  {item.text}\n                </Item>\n              );\n            })}\n          {!items || (!items.length && <NoItems darkThemeProps={darkThemeProps}>No results found...</NoItems>)}\n        </ItemsContainer>\n        {footer && <Footer>{footer}</Footer>}\n      </Inner>\n    </Container>\n  );\n};"],"names":[],"mappings":";;;;;;;;AAiBA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,qCAAA,EAAA,KAAA,CAAA,EAAA,CAAgB,qCAEhC,EAA6C,KACxD,CAAA,CAAA,CAAA,EADW,UAAC,KAAK,IAAK,QAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,EAAjC,EAAkC,CACxD,CAAC;AAkBF,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAY,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,qCAAA,EAAA,cAAA,EAAA,yBAAA,EAAA,yBAAA,EAAA,2FAAA,EAAA,mBAAA,EAAA,2HAAA,EAAA,aAAA,CAAA,EAAA,CAAA,qCAExB,EAA0C,cAC3C,EAAsB,yBACX,EAAqE,yBACrE,EAA4C,2FAIrD,EAA6B,mBAC1B,EAA6D,2HAOnD,EAAgE,aAEzF,CAAA,CAAA,CAAA,EAjBW,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EAA9B,EAA+B,EAC3C,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,KAAK,CAAX,EAAW,EACX,UAAC,KAAK,EAAG,EAAA,QAAC,KAAK,CAAC,cAAc,GAAE,MAAM,CAAC,eAAe,GAAE,MAAM,CAAC,KAAK,EAA3D,EAA4D,EACrE,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,WAAW,IAAI,MAAM,CAAC,KAAK,CAAjC,EAAiC,EAIrD,UAAA,KAAK,EAAI,EAAA,OAAA,KAAK,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAA,EAAA,EAC1B,UAAA,KAAK,EAAA,EAAI,OAAA,KAAK,CAAC,IAAI,GAAG,kCAAkC,GAAG,EAAE,CAApD,EAAoD,EAOnD,UAAC,KAAK,EAAI,EAAA,OAAA,KAAK,CAAC,WAAW,GAAE,eAAa,MAAM,CAAC,KAAO,GAAE,MAAM,CAAtD,EAAsD,CAEzF,CAAC;AAEF,IAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAe,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,uKAAA,EAAA,KAAA,CAAA,EAAA,CAAA,uKAQlB,EAAiD,KACtE,CADqB,CAAA,CAAA,EAAA,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,cAAc,IAAI,MAAM,CAAC,KAAK,EAAC,EAAA,CACtE,CAAC;AAEF,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,2YAAY,uBACjB,EAAiC,yDAG3C,EAA0E,wOAWxE,EAAY,UAExB,CAhBoB,CAAA,CAAA,EAAA,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,cAAc,EAArB,EAAsB,EAG3C,UAAC,KAAK,EAAK,EAAA,QAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAC,EAAA,EAWxE,MAAM,CAAC,KAAK,CAExB,CAAC;AAMF,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,yCAAA,EAAA,4BAAA,CAAA,EAAA,CAAqB,yCAEtC,EAAyC,4BAGxD,CAAA,CAAA,CAAA,EAHe,UAAA,KAAK,EAAI,EAAA,OAAA,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA,EAAA,CAGxD,CAAC;AAEF,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAa,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,wDAAA,EAAA,eAAA,EAAA,0DAAA,EAAA,yBAAA,EAAA,KAAA,CAAA,EAAA,CAAA,wDAG5B,EAAyE,eACxE,EAAmD,0DAG9C,EAAqD,yBAChD,EAAiC,KACtD,CAAA,CAAA,CAAA,EANU,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,gBAAgB,GAAE,MAAM,CAAC,KAAK,IAAC,EACxE,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,cAAc,GAAG,OAAO,GAAE,MAAM,EAAC,EAAA,EAG9C,UAAC,KAAK,EAAK,EAAA,QAAC,KAAK,CAAC,cAAc,GAAG,OAAO,GAAE,QAAQ,EAAzC,EAA0C,EAChD,UAAC,KAAK,IAAK,QAAC,KAAK,CAAC,cAAc,EAArB,EAAsB,CACtD,CAAC;AAOF,IAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAW,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,8HAAA,EAAA,mCAAA,EAAA,0GAAA,EAAA,UAAA,CAAA,EAAA,CAAA,8HAMZ,EAAwG,mCAEpH,EAAuE,0GAMzD,EAAsE,UAE7F,KAVqB,UAAC,KAAK,IAAI,OAAA,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,eAAe,IAAI,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,GAAA,EAEpH,UAAC,KAAK,EAAA,EAAI,OAAA,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAA7D,EAA6D,EAMzD,UAAC,KAAK,IAAI,OAAA,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,eAAe,GAAG,MAAM,CAAC,KAAK,CAAA,EAAA,CAE7F,CAAC;AAEF,IAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,kJAAA,EAAA,+BAAA,CAAA,EAAA,CAAA,kJAOC,EAAY,+BAErC,CAFyB,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,CAErC,CAAC;IAEU,oBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,aAAA,CAAA,GAAA,cAA4B,CAAA;AAC5B,IAAA,mBAAA,CAAA,cAAA,CAAA,GAAA,eAA8B,CAAA;AAChC,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA,CAAA;AAyBuB,SAAA,cAAc,CAAC,EAqBjB,EAAA;AApBpB,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAuC,EAAvC,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,mBAAmB,CAAC,YAAY,GAAA,EAAA,EACvC,KAAK,WAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,EAAe,GAAA,EAAA,CAAA,KAAA,EAAf,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,OAAO,GAAA,EAAA,EACf,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,cAAc,oBAAA,EACd,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAA2B,GAAA,EAAA,CAAA,IAAA,EAA3B,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,CAAC,WAAW,GAAA,EAAA,EAC3B,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,gBAAA,EACV,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA;AAEL,IAAA,IAAA,EAAkB,GAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,QAAyB,CAAC;IAE9C,QACE,oBAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAAA;AAChC,QAAA,KAAK,IAAI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAG,QAAQ,EAAE,UAAU,EAAG,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAI,CAAA;AAC3J,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAM,EAAA,OAAA,OAAO,CAAC,IAAI,CAAC,CAAA,EAAA,EAC5B,MAAM,EAAE,YAAM,EAAA,OAAA,OAAO,CAAC,KAAK,CAAC,CAAd,EAAc,EAC5B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EAAA;AAExB,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;AACpC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAI,CAAA;AACnD,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,CAAC,YAAA;;AACN,wBAAA,QAAQ,IAAI;4BACV,KAAK,mBAAmB,CAAC,YAAY;AACnC,gCAAA,IAAI,IAAI;AAAE,oCAAA,OAAO,WAAW,KAAX,IAAA,IAAA,WAAW,cAAX,WAAW,GAAI,EAAE,CAAC;AAC9B,qCAAA;oCACH,IAAM,SAAS,SAAG,KAAK,CAAC,IAAI,CAAC,UAAC,IAAI,EAAK,EAAA,OAAA,IAAI,CAAC,KAAK,KAAK,KAAK,CAAA,EAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI,CAAC;AACnE,oCAAA,IAAI,SAAS;AAAE,wCAAA,OAAO,SAAS,CAAC;yCAC3B,IAAI,OAAO,CAAC,KAAK,CAAC;AAAE,wCAAA,OAAO,YAAY,CAAC;;AACxC,wCAAA,OAAO,EAAE,CAAC;AAChB,iCAAA;4BAEH,KAAK,mBAAmB,CAAC,WAAW;AAClC,gCAAA,IAAI,IAAI;AAAE,oCAAA,OAAO,WAAW,KAAX,IAAA,IAAA,WAAW,cAAX,WAAW,GAAI,EAAE,CAAC;;AAC9B,oCAAA,OAAO,EAAE,CAAC;AAClB,yBAAA;AACH,qBAAC,GAAG,EACJ,QAAQ,EAAE,UAAC,CAAC,EAAA;wBACV,IAAI,IAAI,IAAI,cAAc,EAAE;AAC1B,4BAAA,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAChC,yBAAA;AACH,qBAAC,EACD,CAAA;AACD,gBAAA,OAAO,IAAI,KAAK,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,YAAM,EAAA,OAAA,OAAO,EAAE,CAAT,EAAS,GAAI,CAC5G;AACT,YAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAC,EAAA,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAA;gBACpC,KAAK,KACJ,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,GAAG,CAAC,UAAC,IAAI,EAAA;oBACd,QACE,oBAAC,IAAI,EAAA,EACH,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,EAC9B,OAAO,EAAE,YAAA;4BACP,OAAO,CAAC,KAAK,CAAC,CAAC;AACf,4BAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACvB,yBAAC,IAEA,IAAI,CAAC,IAAI,CACL,EACP;AACJ,iBAAC,CAAC,CAAA;AACH,gBAAA,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,cAAc,EAAE,cAAc,EAAA,EAAA,qBAAA,CAA+B,CAAC,CACrF;YAChB,MAAM,IAAI,oBAAC,MAAM,EAAA,IAAA,EAAE,MAAM,CAAU,CAC9B,CACE,EACZ;AACJ,CAAC;;;;;"}

package/build/components/SvgIcons.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface IconProps {
+    width?: string;
+    height?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const DiscountIcon: React.FC<IconProps>;
+export declare const ServiceFeeIcon: React.FC<IconProps>;
+export declare const StripeProcessingFeeIcon: React.FC<IconProps>;
+export declare const SalesTaxFeeIcon: React.FC<IconProps>;
+export declare const CashIcon: React.FC<IconProps>;
+export declare const ConfirmIcon: React.FC<IconProps>;
+export declare const GuestCheckoutIcon: React.FC<IconProps>;
+export {};

package/build/components/SvgIcons.js

@@ -0,0 +1,41 @@
+import { __rest, __assign } from '../_virtual/_tslib.js';
+import React from 'react';
+
+var DiscountIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M2.08389 10.8334H7.08389M12.9172 10.8334H17.9172M10.0006 5.83341V17.5001M10.0006 5.83341C11.1512 5.83341 12.0839 4.90067 12.0839 3.75008M10.0006 5.83341C8.84996 5.83341 7.91722 4.90068 7.91722 3.75008M3.33389 17.5001L16.6672 17.5001M3.33389 3.75009L7.91722 3.75008M7.91722 3.75008C7.91722 2.59949 8.84996 1.66675 10.0006 1.66675C11.1512 1.66675 12.0839 2.59949 12.0839 3.75008M12.0839 3.75008L16.6672 3.75008M7.40092 11.947C7.06701 13.2256 5.93231 14.1667 4.58389 14.1667C3.23547 14.1667 2.10077 13.2256 1.76686 11.947C1.73958 11.8426 1.72594 11.7903 1.72462 11.5816C1.72381 11.4537 1.77136 11.1587 1.81232 11.0375C1.87915 10.8398 1.95148 10.7282 2.09615 10.505L4.58389 6.66675L7.07163 10.505C7.2163 10.7282 7.28864 10.8398 7.35546 11.0375C7.39642 11.1587 7.44397 11.4537 7.44316 11.5816C7.44185 11.7903 7.42821 11.8426 7.40092 11.947ZM18.2343 11.947C17.9003 13.2256 16.7656 14.1667 15.4172 14.1667C14.0688 14.1667 12.9341 13.2256 12.6002 11.947C12.5729 11.8426 12.5593 11.7903 12.558 11.5816C12.5571 11.4537 12.6047 11.1587 12.6457 11.0375C12.7125 10.8398 12.7848 10.7282 12.9295 10.505L15.4172 6.66675L17.905 10.505C18.0496 10.7282 18.122 10.8398 18.1888 11.0375C18.2298 11.1587 18.2773 11.4537 18.2765 11.5816C18.2752 11.7903 18.2615 11.8426 18.2343 11.947Z", stroke: "#424242", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+var ServiceFeeIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M12.917 12.5001L15.417 10.0001L12.917 7.50008M7.08366 7.50008L4.58366 10.0001L7.08366 12.5001M10.8337 5.83341L9.16699 14.1667M18.3337 10.0001C18.3337 14.6025 14.6027 18.3334 10.0003 18.3334C5.39795 18.3334 1.66699 14.6025 1.66699 10.0001C1.66699 5.39771 5.39795 1.66675 10.0003 1.66675C14.6027 1.66675 18.3337 5.39771 18.3337 10.0001Z", stroke: "#424242", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+var StripeProcessingFeeIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M11.2749 6.95996C10.7979 7.30004 10.2141 7.50008 9.58366 7.50008C7.97283 7.50008 6.66699 6.19425 6.66699 4.58341C6.66699 2.97258 7.97283 1.66675 9.58366 1.66675C10.6278 1.66675 11.5438 2.21543 12.0591 3.0402M5.00033 16.7394H7.17557C7.45918 16.7394 7.74106 16.7731 8.016 16.8406L10.3144 17.3991C10.8131 17.5206 11.3326 17.5325 11.8366 17.4346L14.3778 16.9402C15.0491 16.8094 15.6666 16.488 16.1506 16.0172L17.9486 14.2682C18.462 13.7695 18.462 12.9604 17.9486 12.461C17.4863 12.0113 16.7543 11.9607 16.2313 12.342L14.1358 13.8708C13.8357 14.0902 13.4706 14.2083 13.095 14.2083H11.0716L12.3595 14.2082C13.0855 14.2082 13.6735 13.6362 13.6735 12.93V12.6744C13.6735 12.088 13.2633 11.5767 12.6787 11.435L10.6908 10.9515C10.3673 10.8731 10.036 10.8334 9.70294 10.8334C8.89894 10.8334 7.44357 11.4991 7.44357 11.4991L5.00033 12.5208M16.667 5.41675C16.667 7.02758 15.3612 8.33342 13.7503 8.33342C12.1395 8.33342 10.8337 7.02758 10.8337 5.41675C10.8337 3.80592 12.1395 2.50008 13.7503 2.50008C15.3612 2.50008 16.667 3.80592 16.667 5.41675ZM1.66699 12.1667L1.66699 17.0001C1.66699 17.4668 1.66699 17.7001 1.75782 17.8784C1.83771 18.0352 1.9652 18.1627 2.122 18.2426C2.30026 18.3334 2.53361 18.3334 3.00033 18.3334H3.66699C4.1337 18.3334 4.36706 18.3334 4.54532 18.2426C4.70212 18.1627 4.8296 18.0352 4.9095 17.8784C5.00033 17.7001 5.00033 17.4668 5.00033 17.0001V12.1667C5.00033 11.7 5.00033 11.4667 4.9095 11.2884C4.8296 11.1316 4.70212 11.0041 4.54532 10.9242C4.36706 10.8334 4.1337 10.8334 3.66699 10.8334L3.00033 10.8334C2.53362 10.8334 2.30026 10.8334 2.122 10.9242C1.9652 11.0041 1.83771 11.1316 1.75782 11.2884C1.66699 11.4667 1.66699 11.7 1.66699 12.1667Z", stroke: "#424242", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+var SalesTaxFeeIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 20 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M2.08389 10.8334H7.08389M12.9172 10.8334H17.9172M10.0006 5.83341V17.5001M10.0006 5.83341C11.1512 5.83341 12.0839 4.90067 12.0839 3.75008M10.0006 5.83341C8.84996 5.83341 7.91722 4.90068 7.91722 3.75008M3.33389 17.5001L16.6672 17.5001M3.33389 3.75009L7.91722 3.75008M7.91722 3.75008C7.91722 2.59949 8.84996 1.66675 10.0006 1.66675C11.1512 1.66675 12.0839 2.59949 12.0839 3.75008M12.0839 3.75008L16.6672 3.75008M7.40092 11.947C7.06701 13.2256 5.93231 14.1667 4.58389 14.1667C3.23547 14.1667 2.10077 13.2256 1.76686 11.947C1.73958 11.8426 1.72594 11.7903 1.72462 11.5816C1.72381 11.4537 1.77136 11.1587 1.81232 11.0375C1.87915 10.8398 1.95148 10.7282 2.09615 10.505L4.58389 6.66675L7.07163 10.505C7.2163 10.7282 7.28864 10.8398 7.35546 11.0375C7.39642 11.1587 7.44397 11.4537 7.44316 11.5816C7.44185 11.7903 7.42821 11.8426 7.40092 11.947ZM18.2343 11.947C17.9003 13.2256 16.7656 14.1667 15.4172 14.1667C14.0688 14.1667 12.9341 13.2256 12.6002 11.947C12.5729 11.8426 12.5593 11.7903 12.558 11.5816C12.5571 11.4537 12.6047 11.1587 12.6457 11.0375C12.7125 10.8398 12.7848 10.7282 12.9295 10.505L15.4172 6.66675L17.905 10.505C18.0496 10.7282 18.122 10.8398 18.1888 11.0375C18.2298 11.1587 18.2773 11.4537 18.2765 11.5816C18.2752 11.7903 18.2615 11.8426 18.2343 11.947Z", stroke: "#424242", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+var CashIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M7.08317 12.2221C7.08317 13.2959 7.95373 14.1665 9.02762 14.1665H10.8332C11.9838 14.1665 12.9165 13.2338 12.9165 12.0832C12.9165 10.9326 11.9838 9.99984 10.8332 9.99984H9.1665C8.01591 9.99984 7.08317 9.0671 7.08317 7.9165C7.08317 6.76591 8.01591 5.83317 9.1665 5.83317H10.9721C12.0459 5.83317 12.9165 6.70373 12.9165 7.77762M9.99984 4.58317V5.83317M9.99984 14.1665V15.4165M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z", stroke: "#D6D6D6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+var ConfirmIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M24.6668 11.9335V13.0068C24.6654 15.5227 23.8507 17.9706 22.3444 19.9856C20.838 22.0006 18.7207 23.4747 16.3081 24.1881C13.8955 24.9014 11.317 24.8157 8.95704 23.9439C6.59712 23.072 4.58226 21.4606 3.21295 19.3501C1.84364 17.2395 1.19325 14.7429 1.35879 12.2325C1.52432 9.72217 2.4969 7.33255 4.13149 5.42009C5.76607 3.50763 7.97508 2.17479 10.429 1.62034C12.883 1.0659 15.4505 1.31957 17.7485 2.34351M24.6668 3.66683L13.0002 15.3452L9.50016 11.8452", stroke: "#FCFCFC", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+var GuestCheckoutIcon = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React.createElement("svg", __assign({ width: width, height: height, viewBox: "0 0 24 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { d: "M1.5 21.3333C4.22509 18.443 7.92485 16.6667 12 16.6667C16.0751 16.6667 19.7749 18.443 22.5 21.3333M17.25 6.75C17.25 9.6495 14.8995 12 12 12C9.1005 12 6.75 9.6495 6.75 6.75C6.75 3.85051 9.1005 1.5 12 1.5C14.8995 1.5 17.25 3.85051 17.25 6.75Z", stroke: "#FCFCFC", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+
+export { CashIcon, ConfirmIcon, DiscountIcon, GuestCheckoutIcon, SalesTaxFeeIcon, ServiceFeeIcon, StripeProcessingFeeIcon };
+//# sourceMappingURL=SvgIcons.js.map

package/build/components/SvgIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgIcons.js","sources":["../../src/components/SvgIcons.tsx"],"sourcesContent":["import React from 'react';\n\ninterface IconProps {\n  width?: string;\n  height?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const DiscountIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M2.08389 10.8334H7.08389M12.9172 10.8334H17.9172M10.0006 5.83341V17.5001M10.0006 5.83341C11.1512 5.83341 12.0839 4.90067 12.0839 3.75008M10.0006 5.83341C8.84996 5.83341 7.91722 4.90068 7.91722 3.75008M3.33389 17.5001L16.6672 17.5001M3.33389 3.75009L7.91722 3.75008M7.91722 3.75008C7.91722 2.59949 8.84996 1.66675 10.0006 1.66675C11.1512 1.66675 12.0839 2.59949 12.0839 3.75008M12.0839 3.75008L16.6672 3.75008M7.40092 11.947C7.06701 13.2256 5.93231 14.1667 4.58389 14.1667C3.23547 14.1667 2.10077 13.2256 1.76686 11.947C1.73958 11.8426 1.72594 11.7903 1.72462 11.5816C1.72381 11.4537 1.77136 11.1587 1.81232 11.0375C1.87915 10.8398 1.95148 10.7282 2.09615 10.505L4.58389 6.66675L7.07163 10.505C7.2163 10.7282 7.28864 10.8398 7.35546 11.0375C7.39642 11.1587 7.44397 11.4537 7.44316 11.5816C7.44185 11.7903 7.42821 11.8426 7.40092 11.947ZM18.2343 11.947C17.9003 13.2256 16.7656 14.1667 15.4172 14.1667C14.0688 14.1667 12.9341 13.2256 12.6002 11.947C12.5729 11.8426 12.5593 11.7903 12.558 11.5816C12.5571 11.4537 12.6047 11.1587 12.6457 11.0375C12.7125 10.8398 12.7848 10.7282 12.9295 10.505L15.4172 6.66675L17.905 10.505C18.0496 10.7282 18.122 10.8398 18.1888 11.0375C18.2298 11.1587 18.2773 11.4537 18.2765 11.5816C18.2752 11.7903 18.2615 11.8426 18.2343 11.947Z\" stroke=\"#424242\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n);\n\n\nexport const ServiceFeeIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M12.917 12.5001L15.417 10.0001L12.917 7.50008M7.08366 7.50008L4.58366 10.0001L7.08366 12.5001M10.8337 5.83341L9.16699 14.1667M18.3337 10.0001C18.3337 14.6025 14.6027 18.3334 10.0003 18.3334C5.39795 18.3334 1.66699 14.6025 1.66699 10.0001C1.66699 5.39771 5.39795 1.66675 10.0003 1.66675C14.6027 1.66675 18.3337 5.39771 18.3337 10.0001Z\" stroke=\"#424242\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n);\n\nexport const StripeProcessingFeeIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M11.2749 6.95996C10.7979 7.30004 10.2141 7.50008 9.58366 7.50008C7.97283 7.50008 6.66699 6.19425 6.66699 4.58341C6.66699 2.97258 7.97283 1.66675 9.58366 1.66675C10.6278 1.66675 11.5438 2.21543 12.0591 3.0402M5.00033 16.7394H7.17557C7.45918 16.7394 7.74106 16.7731 8.016 16.8406L10.3144 17.3991C10.8131 17.5206 11.3326 17.5325 11.8366 17.4346L14.3778 16.9402C15.0491 16.8094 15.6666 16.488 16.1506 16.0172L17.9486 14.2682C18.462 13.7695 18.462 12.9604 17.9486 12.461C17.4863 12.0113 16.7543 11.9607 16.2313 12.342L14.1358 13.8708C13.8357 14.0902 13.4706 14.2083 13.095 14.2083H11.0716L12.3595 14.2082C13.0855 14.2082 13.6735 13.6362 13.6735 12.93V12.6744C13.6735 12.088 13.2633 11.5767 12.6787 11.435L10.6908 10.9515C10.3673 10.8731 10.036 10.8334 9.70294 10.8334C8.89894 10.8334 7.44357 11.4991 7.44357 11.4991L5.00033 12.5208M16.667 5.41675C16.667 7.02758 15.3612 8.33342 13.7503 8.33342C12.1395 8.33342 10.8337 7.02758 10.8337 5.41675C10.8337 3.80592 12.1395 2.50008 13.7503 2.50008C15.3612 2.50008 16.667 3.80592 16.667 5.41675ZM1.66699 12.1667L1.66699 17.0001C1.66699 17.4668 1.66699 17.7001 1.75782 17.8784C1.83771 18.0352 1.9652 18.1627 2.122 18.2426C2.30026 18.3334 2.53361 18.3334 3.00033 18.3334H3.66699C4.1337 18.3334 4.36706 18.3334 4.54532 18.2426C4.70212 18.1627 4.8296 18.0352 4.9095 17.8784C5.00033 17.7001 5.00033 17.4668 5.00033 17.0001V12.1667C5.00033 11.7 5.00033 11.4667 4.9095 11.2884C4.8296 11.1316 4.70212 11.0041 4.54532 10.9242C4.36706 10.8334 4.1337 10.8334 3.66699 10.8334L3.00033 10.8334C2.53362 10.8334 2.30026 10.8334 2.122 10.9242C1.9652 11.0041 1.83771 11.1316 1.75782 11.2884C1.66699 11.4667 1.66699 11.7 1.66699 12.1667Z\" stroke=\"#424242\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n);\n\nexport const SalesTaxFeeIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M2.08389 10.8334H7.08389M12.9172 10.8334H17.9172M10.0006 5.83341V17.5001M10.0006 5.83341C11.1512 5.83341 12.0839 4.90067 12.0839 3.75008M10.0006 5.83341C8.84996 5.83341 7.91722 4.90068 7.91722 3.75008M3.33389 17.5001L16.6672 17.5001M3.33389 3.75009L7.91722 3.75008M7.91722 3.75008C7.91722 2.59949 8.84996 1.66675 10.0006 1.66675C11.1512 1.66675 12.0839 2.59949 12.0839 3.75008M12.0839 3.75008L16.6672 3.75008M7.40092 11.947C7.06701 13.2256 5.93231 14.1667 4.58389 14.1667C3.23547 14.1667 2.10077 13.2256 1.76686 11.947C1.73958 11.8426 1.72594 11.7903 1.72462 11.5816C1.72381 11.4537 1.77136 11.1587 1.81232 11.0375C1.87915 10.8398 1.95148 10.7282 2.09615 10.505L4.58389 6.66675L7.07163 10.505C7.2163 10.7282 7.28864 10.8398 7.35546 11.0375C7.39642 11.1587 7.44397 11.4537 7.44316 11.5816C7.44185 11.7903 7.42821 11.8426 7.40092 11.947ZM18.2343 11.947C17.9003 13.2256 16.7656 14.1667 15.4172 14.1667C14.0688 14.1667 12.9341 13.2256 12.6002 11.947C12.5729 11.8426 12.5593 11.7903 12.558 11.5816C12.5571 11.4537 12.6047 11.1587 12.6457 11.0375C12.7125 10.8398 12.7848 10.7282 12.9295 10.505L15.4172 6.66675L17.905 10.505C18.0496 10.7282 18.122 10.8398 18.1888 11.0375C18.2298 11.1587 18.2773 11.4537 18.2765 11.5816C18.2752 11.7903 18.2615 11.8426 18.2343 11.947Z\" stroke=\"#424242\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n);\n\nexport const CashIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M7.08317 12.2221C7.08317 13.2959 7.95373 14.1665 9.02762 14.1665H10.8332C11.9838 14.1665 12.9165 13.2338 12.9165 12.0832C12.9165 10.9326 11.9838 9.99984 10.8332 9.99984H9.1665C8.01591 9.99984 7.08317 9.0671 7.08317 7.9165C7.08317 6.76591 8.01591 5.83317 9.1665 5.83317H10.9721C12.0459 5.83317 12.9165 6.70373 12.9165 7.77762M9.99984 4.58317V5.83317M9.99984 14.1665V15.4165M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z\" stroke=\"#D6D6D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n);\n\nexport const ConfirmIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M24.6668 11.9335V13.0068C24.6654 15.5227 23.8507 17.9706 22.3444 19.9856C20.838 22.0006 18.7207 23.4747 16.3081 24.1881C13.8955 24.9014 11.317 24.8157 8.95704 23.9439C6.59712 23.072 4.58226 21.4606 3.21295 19.3501C1.84364 17.2395 1.19325 14.7429 1.35879 12.2325C1.52432 9.72217 2.4969 7.33255 4.13149 5.42009C5.76607 3.50763 7.97508 2.17479 10.429 1.62034C12.883 1.0659 15.4505 1.31957 17.7485 2.34351M24.6668 3.66683L13.0002 15.3452L9.50016 11.8452\" stroke=\"#FCFCFC\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n);\n\nexport const GuestCheckoutIcon: React.FC<IconProps> = ({\n  width,\n  height,\n  ...props\n}) => (\n<svg width={width} height={height} viewBox=\"0 0 24 23\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n<path d=\"M1.5 21.3333C4.22509 18.443 7.92485 16.6667 12 16.6667C16.0751 16.6667 19.7749 18.443 22.5 21.3333M17.25 6.75C17.25 9.6495 14.8995 12 12 12C9.1005 12 6.75 9.6495 6.75 6.75C6.75 3.85051 9.1005 1.5 12 1.5C14.8995 1.5 17.25 3.85051 17.25 6.75Z\" stroke=\"#FCFCFC\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n\n);\n\n\n\n\n\n\n\n\n\n\n\n\n"],"names":[],"mappings":"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"}

package/build/components/SvgRendrer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function SvgRenderer({ iconName, ...props }: {
+    [x: string]: any;
+    iconName: any;
+}): React.JSX.Element | null;

package/build/components/SvgRendrer.js

@@ -0,0 +1,21 @@
+import { __rest, __assign } from '../_virtual/_tslib.js';
+import React from 'react';
+import { DiscountIcon, ServiceFeeIcon, StripeProcessingFeeIcon, SalesTaxFeeIcon, CashIcon, ConfirmIcon, GuestCheckoutIcon } from './SvgIcons.js';
+
+var iconsMap = {
+    discount: DiscountIcon,
+    serviceFee: ServiceFeeIcon,
+    stripeProcessingIcon: StripeProcessingFeeIcon,
+    salesTaxFeeIcon: SalesTaxFeeIcon,
+    cashIcon: CashIcon,
+    confirmIcon: ConfirmIcon,
+    guestCheckoutIcon: GuestCheckoutIcon
+};
+function SvgRenderer(_a) {
+    var iconName = _a.iconName, props = __rest(_a, ["iconName"]);
+    var IconComponent = iconsMap[iconName];
+    return IconComponent ? React.createElement(IconComponent, __assign({}, props)) : null;
+}
+
+export { SvgRenderer as default };
+//# sourceMappingURL=SvgRendrer.js.map

package/build/components/SvgRendrer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgRendrer.js","sources":["../../src/components/SvgRendrer.tsx"],"sourcesContent":["import React from 'react';\nimport { CashIcon, ConfirmIcon, DiscountIcon, GuestCheckoutIcon, SalesTaxFeeIcon, ServiceFeeIcon, StripeProcessingFeeIcon } from './SvgIcons';\n\nconst iconsMap = {\n  discount: DiscountIcon,\n  serviceFee: ServiceFeeIcon,\n  stripeProcessingIcon: StripeProcessingFeeIcon,\n  salesTaxFeeIcon: SalesTaxFeeIcon,\n  cashIcon:CashIcon,\n  confirmIcon:ConfirmIcon,\n  guestCheckoutIcon:GuestCheckoutIcon\n};\n\nexport default function SvgRenderer ({ iconName, ...props }) {\n  const IconComponent = iconsMap[iconName];\n  return IconComponent ? <IconComponent {...props} /> : null;\n};\n\n\n"],"names":[],"mappings":";;;;AAGA,IAAM,QAAQ,GAAG;AACf,IAAA,QAAQ,EAAE,YAAY;AACtB,IAAA,UAAU,EAAE,cAAc;AAC1B,IAAA,oBAAoB,EAAE,uBAAuB;AAC7C,IAAA,eAAe,EAAE,eAAe;AAChC,IAAA,QAAQ,EAAC,QAAQ;AACjB,IAAA,WAAW,EAAC,WAAW;AACvB,IAAA,iBAAiB,EAAC,iBAAiB;CACpC,CAAC;AAEsB,SAAA,WAAW,CAAE,EAAsB,EAAA;AAApB,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAK,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF,CAAA;AACvD,IAAA,IAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACzC,IAAA,OAAO,aAAa,GAAG,KAAC,CAAA,aAAA,CAAA,aAAa,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,CAAI,CAAA,GAAG,IAAI,CAAC;AAC7D;;;;"}