@sellout/ui 0.0.29 → 0.0.31

package/build/components/Icon.d.ts

@@ -1,52 +1,12 @@
 /// <reference types="react" />
 import { Colors } from "../Colors";
 export declare const Icons: {
-    LeftArrowSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CancelCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cash: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CopySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CreditCardBack: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CrownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cursor: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    DeleteSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    MobileSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    RightChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    TicketSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Underline: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UserCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UserSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
     AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BoxOfficeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CheckLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     EnvelopeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -77,6 +37,7 @@ export declare const Icons: {
     SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
     AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BoldRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CheckRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -91,22 +52,64 @@ export declare const Icons: {
     FilterRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     GlobeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     GraphGrowth: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ItalicRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     KeyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    LeftChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Link: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LinkRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Settings: import("@fortawesome/fontawesome-common-types").IconDefinition;
     SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
     TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UnderlineRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UnlockRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CancelCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cash: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CopySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CreditCardBack: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CrownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cursor: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    DeleteSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    InfotipSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftArrowSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftChevronSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    MobileSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    RightChevronSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    TicketSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UserCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UserSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -128,5 +131,6 @@ export declare type IconProps = {
     right?: string | number | undefined;
     zIndex?: number | void;
     margin?: string | number | undefined;
+    tip?: string;
 };
-export default function Icon({ icon, color, hoverColor, onClick, size, top, left, right, position, zIndex, margin, }: IconProps): JSX.Element;
+export default function Icon({ icon, color, hoverColor, onClick, size, top, left, right, position, zIndex, margin, tip, }: IconProps): JSX.Element;

package/build/components/Icons.d.ts

@@ -1,50 +1,10 @@
 export declare const IconEnum: {
-    LeftArrowSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CancelCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cash: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CopySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CreditCardBack: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CrownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cursor: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    DeleteSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    MobileSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    RightChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    TicketSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Underline: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UserCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UserSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
     AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BoxOfficeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CheckLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     EnvelopeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -75,6 +35,7 @@ export declare const IconEnum: {
     SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
     AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BoldRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CheckRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -89,22 +50,64 @@ export declare const IconEnum: {
     FilterRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     GlobeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     GraphGrowth: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ItalicRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     KeyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    LeftChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Link: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LinkRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Settings: import("@fortawesome/fontawesome-common-types").IconDefinition;
     SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
     TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UnderlineRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UnlockRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CancelCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cash: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CopySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CreditCardBack: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CrownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cursor: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    DeleteSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    InfotipSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftArrowSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftChevronSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    MobileSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    RightChevronSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    TicketSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UserCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UserSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;

package/build/index.d.ts

@@ -7,52 +7,12 @@ import Loader, { LoaderSizes } from "./components/Loader";
 import Product from "./components/Product";
 import makeEventHandler from './utils/makeEventHandler';
 declare const Icons: {
-    LeftArrowSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Bold: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CancelCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cash: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CopySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CreditCardBack: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    CrownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Cursor: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    DeleteSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Italic: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    MobileSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    RightChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    TicketSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Underline: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UserCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UserSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
     AnalyticsLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BellLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BoxOfficeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BullHornLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalendarDayLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalendarStarLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CheckLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     EnvelopeLight: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -83,6 +43,7 @@ declare const Icons: {
     SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
     AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BoldRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CalculatorRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CheckRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Cheers: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -97,22 +58,64 @@ declare const Icons: {
     FilterRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     GlobeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     GraphGrowth: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ItalicRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     KeyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    LeftChevron: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Link: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftChevronRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LinkRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     PrintRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     ReportRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     SearchRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Settings: import("@fortawesome/fontawesome-common-types").IconDefinition;
     SignOut: import("@fortawesome/fontawesome-common-types").IconDefinition;
     TicketRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UnderlineRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UnlockRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Update: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UsersRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    Calendar: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    AudienceSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BackArrow: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BoxOfficeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    BullhornSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalculatorSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarDaySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cancel: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CancelCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CaretDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cash: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CopySolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CreditCardBack: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CrownSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Cursor: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    DeleteSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    EnvelopeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    EyeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    HelpSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    HomeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    InfotipSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftArrowSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    LeftChevronSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    MicrophoneSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    MobileSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    PlusCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    PrintSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ReceiptSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    RightChevronCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    RightChevronSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    SearchSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Sort: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    TicketSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UserCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UserSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    UsersSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    VenueSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    Warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    CalendarRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Clock: import("@fortawesome/fontawesome-common-types").IconDefinition;
     CopyRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     Edit: import("@fortawesome/fontawesome-common-types").IconDefinition;

package/build/index.es.js

@@ -2,11 +2,11 @@ import React, { Fragment, useState } from 'react';
 import styled from 'styled-components';
 import { lighten, darken } from 'polished';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft, faUserFriends, faBold, faCashRegister, faBullhorn, faCalculator, faCalendarDay, faTimes, faTimesCircle, faCaretDown, faMoneyBill, faCheckCircle, faCopy, faCreditCard, faCrown, faICursor, faTrash, faEnvelope, faEye, faQuestionCircle, faHome, faItalic, faBars, faMicrophoneAlt, faMobileAlt, faPlus, faPlusCircle, faPrint, faReceipt, faChevronRight, faChevronCircleRight, faSearch, faSort, faTicketAlt, faUnderline, faUserCircle, faUser, faUsers, faLandmark, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { faAnalytics, faBell, faCashRegister as faCashRegister$1, faBullhorn as faBullhorn$1, faCalendarDay as faCalendarDay$1, faCalendarStar, faCheck, faEnvelope as faEnvelope$1, faFileExport, faFilter, faQuestionCircle as faQuestionCircle$1, faHome as faHome$1, faLock, faMapMarkerAlt, faMicrophoneAlt as faMicrophoneAlt$1, faMinusCircle, faMobileAlt as faMobileAlt$1, faPlusCircle as faPlusCircle$1, faReceipt as faReceipt$1, faSearch as faSearch$1, faSortAlt, faUnlock, faUser as faUser$1, faUsers as faUsers$1, faLandmark as faLandmark$1 } from '@fortawesome/pro-light-svg-icons';
-import { faAnalytics as faAnalytics$1, faCalendarStar as faCalendarStar$1, faCreditCardFront, faUsdSquare, faKeySkeleton, faLongArrowRight, faFileChartLine, faSortAlt as faSortAlt$1, faArrowAltSquareUp } from '@fortawesome/pro-solid-svg-icons';
-import { faUserFriends as faUserFriends$1, faCalculator as faCalculator$1, faCheck as faCheck$1, faGlassCheers, faClipboardList, faCrown as faCrown$1, faTrash as faTrash$1, faDollarSign, faArrowAltDown, faFileDownload, faCode, faUsdSquare as faUsdSquare$1, faFilter as faFilter$1, faGlobeAmericas, faChartLine, faKeySkeleton as faKeySkeleton$1, faChevronLeft, faLink, faPrint as faPrint$1, faFileChartLine as faFileChartLine$1, faSearch as faSearch$2, faCog, faSignOut, faTicketAlt as faTicketAlt$1, faUnlock as faUnlock$1, faArrowAltUp, faMegaphone, faArrowAltSquareUp as faArrowAltSquareUp$1, faUpload, faUsers as faUsers$2 } from '@fortawesome/pro-regular-svg-icons';
-import { faCalendarAlt, faClock, faCopy as faCopy$1, faEdit, faEye as faEye$1, faEyeSlash, faLifeRing, faSadTear, faUser as faUser$2 } from '@fortawesome/free-regular-svg-icons';
+import { faAnalytics, faBell, faCashRegister, faBullhorn, faCalendarDay, faCalendarAlt, faCalendarStar, faCheck, faEnvelope, faFileExport, faFilter, faQuestionCircle, faHome, faLock, faMapMarkerAlt, faMicrophoneAlt, faMinusCircle, faMobileAlt, faPlusCircle, faReceipt, faSearch, faSortAlt, faUnlock, faUser, faUsers, faLandmark } from '@fortawesome/pro-light-svg-icons';
+import { faAnalytics as faAnalytics$1, faCalendarStar as faCalendarStar$1, faCreditCardFront, faUsdSquare, faKey, faLongArrowRight, faFileChartLine, faSortAlt as faSortAlt$1, faArrowAltSquareUp } from '@fortawesome/pro-solid-svg-icons';
+import { faUserFriends, faBold, faCalculator, faCheck as faCheck$1, faGlassCheers, faClipboardList, faCrown, faTrash, faDollarSign, faArrowAltDown, faFileDownload, faCode, faUsdSquare as faUsdSquare$1, faFilter as faFilter$1, faGlobeAmericas, faChartLine, faItalic, faKey as faKey$1, faChevronLeft, faLink, faPrint, faFileChartLine as faFileChartLine$1, faSearch as faSearch$1, faCog, faSignOut, faTicketAlt, faUnderline, faUnlock as faUnlock$1, faArrowAltUp, faMegaphone, faArrowAltSquareUp as faArrowAltSquareUp$1, faUpload, faUsers as faUsers$1 } from '@fortawesome/pro-regular-svg-icons';
+import { faUserFriends as faUserFriends$1, faArrowLeft, faCashRegister as faCashRegister$1, faBullhorn as faBullhorn$1, faCalculator as faCalculator$1, faCalendarDay as faCalendarDay$1, faTimes, faTimesCircle, faCaretDown, faMoneyBill, faCheckCircle, faCopy, faCreditCard, faCrown as faCrown$1, faICursor, faTrash as faTrash$1, faEnvelope as faEnvelope$1, faEye, faQuestionCircle as faQuestionCircle$1, faHome as faHome$1, faInfoCircle, faChevronLeft as faChevronLeft$1, faBars, faMicrophoneAlt as faMicrophoneAlt$1, faMobileAlt as faMobileAlt$1, faPlus, faPlusCircle as faPlusCircle$1, faPrint as faPrint$1, faReceipt as faReceipt$1, faChevronCircleRight, faChevronRight, faSearch as faSearch$2, faSort, faTicketAlt as faTicketAlt$1, faUserCircle, faUser as faUser$1, faUsers as faUsers$2, faLandmark as faLandmark$1, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt as faCalendarAlt$1, faClock, faCopy as faCopy$1, faEdit, faEye as faEye$1, faEyeSlash, faLifeRing, faSadTear, faUser as faUser$2 } from '@fortawesome/free-regular-svg-icons';
 import AnimateHeight from 'react-animate-height';
 import { output } from '@sellout/utils/.dist/price';
 
@@ -84,88 +84,49 @@ function Loader(_a) {
 var templateObject_1;
 
 var IconEnum = {
-    LeftArrowSolid: faArrowLeft,
-    AudienceSolid: faUserFriends,
-    BackArrow: faArrowLeft,
-    Bold: faBold,
-    BoxOfficeSolid: faCashRegister,
-    BullhornSolid: faBullhorn,
-    CalculatorSolid: faCalculator,
-    CalendarDaySolid: faCalendarDay,
-    Cancel: faTimes,
-    CancelCircle: faTimesCircle,
-    CaretDown: faCaretDown,
-    Cash: faMoneyBill,
-    CheckCircle: faCheckCircle,
-    CopySolid: faCopy,
-    CreditCardBack: faCreditCard,
-    CrownSolid: faCrown,
-    Cursor: faICursor,
-    DeleteSolid: faTrash,
-    EnvelopeSolid: faEnvelope,
-    EyeSolid: faEye,
-    HelpSolid: faQuestionCircle,
-    HomeSolid: faHome,
-    Italic: faItalic,
-    Menu: faBars,
-    MicrophoneSolid: faMicrophoneAlt,
-    MobileSolid: faMobileAlt,
-    Plus: faPlus,
-    PlusCircle: faPlusCircle,
-    PrintSolid: faPrint,
-    ReceiptSolid: faReceipt,
-    RightChevron: faChevronRight,
-    RightChevronCircle: faChevronCircleRight,
-    SearchSolid: faSearch,
-    Sort: faSort,
-    TicketSolid: faTicketAlt,
-    Underline: faUnderline,
-    UserCircle: faUserCircle,
-    UserSolid: faUser,
-    UsersSolid: faUsers,
-    VenueSolid: faLandmark,
-    Warning: faExclamationTriangle,
     AnalyticsLight: faAnalytics,
     BellLight: faBell,
-    BoxOfficeLight: faCashRegister$1,
-    BullHornLight: faBullhorn$1,
-    CalendarDayLight: faCalendarDay$1,
+    BoxOfficeLight: faCashRegister,
+    BullHornLight: faBullhorn,
+    CalendarDayLight: faCalendarDay,
+    CalendarLight: faCalendarAlt,
     CalendarStarLight: faCalendarStar,
     CheckLight: faCheck,
-    EnvelopeLight: faEnvelope$1,
+    EnvelopeLight: faEnvelope,
     ExportLight: faFileExport,
     FilterLight: faFilter,
-    HelpLight: faQuestionCircle$1,
-    HomeLight: faHome$1,
+    HelpLight: faQuestionCircle,
+    HomeLight: faHome,
     Lock: faLock,
     mapPinLight: faMapMarkerAlt,
-    MicrophoneLight: faMicrophoneAlt$1,
+    MicrophoneLight: faMicrophoneAlt,
     MinusCircleLight: faMinusCircle,
-    MobileLight: faMobileAlt$1,
-    PlusCircleLight: faPlusCircle$1,
-    ReceiptLight: faReceipt$1,
-    SearchLight: faSearch$1,
+    MobileLight: faMobileAlt,
+    PlusCircleLight: faPlusCircle,
+    ReceiptLight: faReceipt,
+    SearchLight: faSearch,
     SortByLight: faSortAlt,
     UnlockLight: faUnlock,
-    UserLight: faUser$1,
-    UsersLight: faUsers$1,
-    VenueLight: faLandmark$1,
+    UserLight: faUser,
+    UsersLight: faUsers,
+    VenueLight: faLandmark,
     AnalyticsSolid: faAnalytics$1,
     CalendarStarSolid: faCalendarStar$1,
     CreditCardFront: faCreditCardFront,
     FeeSolid: faUsdSquare,
-    KeySolid: faKeySkeleton,
+    KeySolid: faKey,
     LongRightArrow: faLongArrowRight,
     ReportSolid: faFileChartLine,
     SortBy: faSortAlt$1,
     UpgradeSolid: faArrowAltSquareUp,
-    AudienceRegular: faUserFriends$1,
-    CalculatorRegular: faCalculator$1,
+    AudienceRegular: faUserFriends,
+    BoldRegular: faBold,
+    CalculatorRegular: faCalculator,
     CheckRegular: faCheck$1,
     Cheers: faGlassCheers,
     Clipboard: faClipboardList,
-    CrownRegular: faCrown$1,
-    DeleteRegular: faTrash$1,
+    CrownRegular: faCrown,
+    DeleteRegular: faTrash,
     Dollar: faDollarSign,
     DownArrow: faArrowAltDown,
     DownloadReport: faFileDownload,
@@ -174,22 +135,64 @@ var IconEnum = {
     FilterRegular: faFilter$1,
     GlobeRegular: faGlobeAmericas,
     GraphGrowth: faChartLine,
-    KeyRegular: faKeySkeleton$1,
-    LeftChevron: faChevronLeft,
-    Link: faLink,
-    PrintRegular: faPrint$1,
+    ItalicRegular: faItalic,
+    KeyRegular: faKey$1,
+    LeftChevronRegular: faChevronLeft,
+    LinkRegular: faLink,
+    PrintRegular: faPrint,
     ReportRegular: faFileChartLine$1,
-    SearchRegular: faSearch$2,
+    SearchRegular: faSearch$1,
     Settings: faCog,
     SignOut: faSignOut,
-    TicketRegular: faTicketAlt$1,
+    TicketRegular: faTicketAlt,
+    UnderlineRegular: faUnderline,
     UnlockRegular: faUnlock$1,
     UpArrow: faArrowAltUp,
     Update: faMegaphone,
     UpgradeRegular: faArrowAltSquareUp$1,
     Upload: faUpload,
-    UsersRegular: faUsers$2,
-    Calendar: faCalendarAlt,
+    UsersRegular: faUsers$1,
+    AudienceSolid: faUserFriends$1,
+    BackArrow: faArrowLeft,
+    BoxOfficeSolid: faCashRegister$1,
+    BullhornSolid: faBullhorn$1,
+    CalculatorSolid: faCalculator$1,
+    CalendarDaySolid: faCalendarDay$1,
+    Cancel: faTimes,
+    CancelCircle: faTimesCircle,
+    CaretDown: faCaretDown,
+    Cash: faMoneyBill,
+    CheckCircle: faCheckCircle,
+    CopySolid: faCopy,
+    CreditCardBack: faCreditCard,
+    CrownSolid: faCrown$1,
+    Cursor: faICursor,
+    DeleteSolid: faTrash$1,
+    EnvelopeSolid: faEnvelope$1,
+    EyeSolid: faEye,
+    HelpSolid: faQuestionCircle$1,
+    HomeSolid: faHome$1,
+    InfotipSolid: faInfoCircle,
+    LeftArrowSolid: faArrowLeft,
+    LeftChevronSolid: faChevronLeft$1,
+    Menu: faBars,
+    MicrophoneSolid: faMicrophoneAlt$1,
+    MobileSolid: faMobileAlt$1,
+    Plus: faPlus,
+    PlusCircle: faPlusCircle$1,
+    PrintSolid: faPrint$1,
+    ReceiptSolid: faReceipt$1,
+    RightChevronCircle: faChevronCircleRight,
+    RightChevronSolid: faChevronRight,
+    SearchSolid: faSearch$2,
+    Sort: faSort,
+    TicketSolid: faTicketAlt$1,
+    UserCircle: faUserCircle,
+    UserSolid: faUser$1,
+    UsersSolid: faUsers$2,
+    VenueSolid: faLandmark$1,
+    Warning: faExclamationTriangle,
+    CalendarRegular: faCalendarAlt$1,
     Clock: faClock,
     CopyRegular: faCopy$1,
     Edit: faEdit,
@@ -200,17 +203,17 @@ var IconEnum = {
     UserRegular: faUser$2,
 };
 
-var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  color: ", ";\n  /* transition: all 0.2s; */\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  /* transition: all 0.2s; */\n\n  &:hover {\n    color: ",
+var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  &:hover {\n    color: ",
     ";\n  }\n"])), function (props) { return props.color; }, function (props) {
-    if (props.color === 'inherit')
+    if (props.color === "inherit")
         return null;
     return props.hoverColor;
 });
 var Icons = IconEnum;
 function Icon(_a) {
-    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? 'relative' : _f, zIndex = _a.zIndex, margin = _a.margin;
-    var cursor = onClick ? 'pointer' : '';
-    return (React.createElement(Container, { color: color, hoverColor: hoverColor },
+    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? "relative" : _f, zIndex = _a.zIndex, margin = _a.margin, tip = _a.tip;
+    var cursor = onClick ? "pointer" : "";
+    return (React.createElement(Container, { color: color, hoverColor: hoverColor, "data-tip": tip },
         React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
                 top: top,
                 left: left,