PBDialog(
            title: "This is some informative text",
            message: infoMessage,
            cancelButton: ("Cancel", closeToast),
            confirmButton: ("Okay", closeToast)
          )

VStack(alignment: .leading) {
  PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
  PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
}

VStack(alignment: .leading, spacing: Spacing.small) {
   PBButton(
     title: "Button Primary",
     action: {}
    )
    PBButton(
      variant: .secondary,
      title: "Button Secondary",
      action: {})
    PBButton(
      variant: .link,
      title: "Button Link",
      action: {}
    )
    PBButton(
      variant: .disabled,
      title: "Button Disabled"
    )
 }

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDate(
    Date(),
    variant: .short
  )
  PBDate(
    Date().makeDate(year: 2012, month: 8, day: 3),
    variant: .standard
  )
  PBDate(
    Date().makeDate(year: 2017, month: 12, day: 3),
    variant: .dayDate(showYear: true)
  )
  Spacer()
  PBDate(
    Date(),
    variant: .short, 
    typography: .title4
  )
  PBDate(
    Date().makeDate(year: 2012, month: 8, day: 3),
    variant: .standard, 
    typography: .title4
  )
  PBDate(
    Date().makeDate(year: 2017, month: 12, day: 3),
    variant: .dayDate(showYear: true),
    typography: .title4
  )
}

VStack(alignment: .leading, spacing: Spacing.large) {
  VStack(alignment: .leading, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption,
      iconSize: .xSmall,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
  VStack(alignment: .center, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .center)
  VStack(alignment: .trailing, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateRangeStacked(
    startDate: Date().makeDate(year: 2019, month: 6, day: 18),
    endDate: Date().makeDate(year: 2020, month: 3, day: 20),
    startAlignment: .trailing,
    endAlignment: .leading,
    startVariant: .short(showIcon: false),
    endVariant: .short(showIcon: false)
  )
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title4,
    isMonthStacked: true
  )
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title3,
    isMonthStacked: true
  )
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateTime(
    dateVariant: .dayDate(showYear: true),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    timeZoneIdentifier: "EST"
  )
  PBDateTime(
    dateVariant: .dayDate(showYear: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .standard,
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    showTimeZone: true,
    timeZoneIdentifier: "GMT+9"
  )
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateTimeStacked(
    timeZoneIdentifier: "EDT",
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true
  )
  PBDateTimeStacked(
    timeZoneIdentifier: "EDT",
    isYearDisplayed: true,
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true,
    isYearBold: true,
    dateVariant: .standard
  )
  PBDateTimeStacked(
    timeZoneIdentifier: "GMT+9",
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true
  )
  PBDateTimeStacked(
    timeZoneIdentifier: "MDT",
    isLowercase: true,
    isMonthStacked: true,
    isMonthBold: true
  )
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTimestamp(
    Date(),
    showDate: false
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date()
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(addThreeYear)
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(subOneYear)
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBContact(type: .cell, value: "3491859988")
  PBContact(value: "5555555555")
  PBContact(type: .email, value: "email@example.com")
  PBContact(type: .work, value: "3245627482")
  PBContact(type: .workCell, value: "3245627482")
}

VStack(alignment: .leading, spacing: Spacing.small) {
  PBCurrency(
    amount: "2,000",
    decimalAmount: ".50",
    label: "small",
    size: .title4,
    symbol: "en_US",
    isEmphasized: true
  )
  PBCurrency(
    amount: "342",
    decimalAmount: ".00",
    label: "medium",
    size: .title3,
    symbol: "en_EU",
    isEmphasized: true
  )
  PBCurrency(
    amount: "45",
    label: "large",
    size: .title1,
    symbol: "en_US",
    unit: "/mo",
    isEmphasized: true,
    hasUnit: true
  )
}

PBHomeAddressStreet(
  address: "70 Prospect Ave",
  withBullet: true,
  houseStyle: "Colonial",
  addressCont: "Apt M18",
  city: "West Chester",
  homeId: "8250263",
  homeUrl: "https://powerhrg.com/",
  state: "PA",
  territory: "PHL",
  zipcode: "19382"
)

VStack(alignment: .leading, spacing: Spacing.small) {
  PBLabelValue("Role", "Administrator, Moderator")
  PBLabelValue("Email", "anna.black@powerhrg.com")
  PBLabelValue("Bio", longText)
}

PBPerson(firstName: "Timothy", lastName: "Wenhold")

VStack(spacing: Spacing.small) {
  PBToggle(checked: true)
  PBToggle(checked: false)
}

@State private var textFirstName: String = ""
@State private var textLastName: String = ""
@State private var textPhone: String = ""

PBTextInput(
  "First name",
  text: $textFirstName,
  placeholder: "Enter first name"
)

PBTextInput(
  "Last name",
  text: $textLastName,
  placeholder: "Enter last name"
)

PBTextInput(
  "Phone number",
  text: $textPhone,
  placeholder: "Enter phone number",
  keyboardType: .phonePad
)

@State var defaultText = ""
@State var placeholderText = ""
@State var customText = "Default value text"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTextArea(
    "Label",
    text: $defaultText
  )

  PBTextArea(
    "Label",
    text: $placeholderText,
    placeholder: "Placeholder with text"
  )

  PBTextArea(
    "Label",
    text: $customText
  )
}

let defaultOptions = [
    (value: "1", text: "Burgers"),
    (value: "2", text: "Pizza"),
    (value: "3", text: "Tacos")
  ]
@State private var defaultState = ""

 PBSelect(title: "Favorite Food", options: defaultOptions, style: .default) { selected in
            defaultState = selected
          }

VStack(alignment: .leading) {
  PBRadio(
    items: [
      PBRadioItem("Power"),
      .init("Nitro"),
      .init("Google")
    ],
    orientation: .vertical,
    selected: $selectedDefault
  )
}

  PBCheckbox(checked: false, text: "Unchecked", action: {})
    .padding(.bottom, Spacing.small)

  PBCheckbox(checked: true, text: "Checked", action: {})

PBIcon.fontAwesome(.user, size: .x1)

PBIconCircle(FontAwesome.rocket)

VStack(alignment: .leading, spacing: Spacing.small) {
  Text("xSmall").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .xSmall,
    rounded: .sharp
  )

  Text("small").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .small,
    rounded: .sharp
  )

  Text("medium").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .medium,
    rounded: .sharp
  )

  Text("large").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .large,
    rounded: .sharp
  )

  Text("xLarge").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .xLarge,
    rounded: .sharp
  )
}

PBCard {
  Text("Card Content").pbFont(.body)
 }

PBSectionSeparator()

let iconSize: PBIcon.IconSize
let iconColor: CollapsibleIconColor
let text: String
@State private var isCollapsed = true
let lorem =
      "
      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
      "

PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
        CollapsibleDoc(text: "Main Section")
      } content: {
        Text(lorem).pbFont(.body)
      }

VStack(alignment: .leading, spacing: Spacing.small) {
  PBMessage(
    avatar: AnyView(picAnna),
    label: "Anna Black",
    message: "How can we assist you today?",
    timestamp: Date().addingTimeInterval(-20)
  )

  PBMessage(
    avatar: AnyView(picPatric),
    label: "Patrick Welch",
    message: "We will escalate this issue to a Senior Support agent.",
    timestamp: Date().addingTimeInterval(-540),
    timestampAlignment: .leading
  )

  PBMessage(
    avatar: AnyView(picLuccile),
    label: "Lucille Sanchez",
    message: "Application for Kate Smith is waiting for your approval",
    timestamp: Date().addingTimeInterval(-200000)
  )

  PBMessage(
    avatar: AnyView(PBAvatar(name: "Beverly Reyes", size: .xSmall)),
    label: "Beverly Reyes",
    message: "We are so sorry you had a bad experience!",
    timestamp: Date().addingTimeInterval(-200000)
  )

  PBMessage(
    label: "Keith Craig",
    message: "Please hold for one moment, I will check with my manager.",
    timestamp: Date().addingTimeInterval(-200000)
  ) {}

  PBMessage(
    label: "Keith Craig",
    timestamp: Date().addingTimeInterval(-200000)
  ) {
    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
  }

  PBMessage(
    label: "Keith Craig",
    message: "Please hold for one moment, I will check with my manager.",
    timestamp: Date().addingTimeInterval(-200000)
  ) {
    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
  }
}

@State private var selectedVDefault: Int = 1

PBNav(
        selected: $selectedVDefault,
        variant: .normal,
        orientation: .vertical,
        title: "Menu"
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

HStack {
  PBBadge(text: "+1", variant: .primary)
  PBBadge(text: "+4", variant: .primary)
  PBBadge(text: "+1000", variant: .primary)
 }

PBPill("default")

VStack(alignment: .leading, spacing: Spacing.small) {
  PBAvatar(image: Image("andrew", bundle: .module), size: .xxSmall, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall, status: .away)
  PBAvatar(image: Image("andrew", bundle: .module), size: .small, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away)
  PBAvatar(image: Image("andrew", bundle: .module), size: .large, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .xLarge, status: .offline)
 }

let twoUsers = [andrew, picAndrew]

PBDoc(title: "xSmall") {
  PBMultipleUsers(users: twoUsers, size: .xSmall)
}

let oneUser = [andrew]
let twoUsers = [andrew, picAndrew]
let multipleUsers = [andrew, picAndrew, andrew, andrew]

HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser, size: .default)
  PBMultipleUsersStacked(users: twoUsers, size: .default)
  PBMultipleUsersStacked(users: multipleUsers, size: .default)
}

let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small
  )
}