@saasquatch/mint-components 2.0.8-7 → 2.0.8

package/dist/mint-components/{p-68e1dd26.entry.js → p-e115d0a2.entry.js}

@@ -6,4 +6,4 @@ import{h as e,r as t,c as n}from"./p-c7c11325.js";import"./p-027c0b10.js";import
       }
     }
   }
-`;function yu(){const e="testestest",t=e;return window.widgetIdent={tenantAlias:"test_a8b41jotf8a1v",appDomain:"https://staging.referralsaasquatch.com",programId:"sam-partner-test-2"},s((()=>(u({accountId:t,id:e,jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs"}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:e,accountId:t}}function vu(){const{id:e,accountId:t}=yu(),[n,a]=o(10),[r,i]=o(100),[s,{data:l,errors:d}]=h(wu);return{states:{points:n,rate:r},data:{id:e,accountId:t,data:l,errors:d},callbacks:{exchange:s,setPoints:a,setRate:i}}}const qu=t=>{const{states:n,data:a,callbacks:r}=t;return e("div",null,e("div",null,e("label",null,"Rate:"),e("input",{value:n.rate,onInput:e=>r.setRate(e.target.value)})),e("input",{value:n.points,onInput:e=>r.setPoints(e.target.value)}),e("button",{onClick:()=>r.exchange(t.input)},"Exchange"),e("details",null,e("summary",null,"response"),e("h4",null,"data"),e("div",{style:{maxWidth:"500px"}},e("pre",{style:{width:"500px",whiteSpace:"pre-wrap"}},JSON.stringify(a.data))),e("h4",null,"errors"),e("div",{style:{maxWidth:"500px"}},e("pre",{style:{maxWidth:"500px",whiteSpace:"pre-wrap"}},JSON.stringify(a.errors)))))},Eu=na((()=>(yu(),e("sqm-reward-exchange-list",{"list-type":"something"})))),Cu=na((()=>{const{states:t,data:n,callbacks:a}=vu();return e(qu,{states:t,data:n,callbacks:a,input:{exchangeRewardInput:{userId:n.id,accountId:n.accountId,redeemCreditInput:{amount:t.points,unit:"POINT"},globalRewardKey:"gc1"}}})})),Tu=na((()=>{const{states:t,data:n,callbacks:a}=vu();return e(qu,{states:t,data:n,callbacks:a,input:{exchangeRewardInput:{userId:n.id,accountId:n.accountId,redeemCreditInput:{amount:t.points,unit:"POINT"},globalRewardKey:"gc1",rewardInput:{valueInCents:Math.ceil(t.points*t.rate)}}}})})),Au=na((()=>{const{states:t,data:n,callbacks:a}=vu();return e(qu,{states:t,data:n,callbacks:a,input:{exchangeRewardInput:{userId:n.id,accountId:n.accountId,redeemCreditInput:{amount:t.points,unit:"POINT"},rewardInput:{type:"CREDIT",unit:"foo",assignedCredit:Math.ceil(t.points*t.rate)}}}})})),Du=Object.freeze({__proto__:null,default:{title:"Hooks / useRewardExchange"},RewardList:Eu,FixedGlobalReward:Cu,VariableGlobalReward:Tu,VariableCreditReward:Au}),ku={id:"61c100117a82a376d8804166",type:"CREDIT",value:19,unit:"Points",name:null,dateGiven:1640038417468,meta:{message:"***CUSTOMER NOTE MESSAGE***"},dateExpires:null,dateCancelled:null,dateRedeemed:null,dateScheduledFor:null,fuelTankCode:null,fuelTankType:null,currency:null,prettyValue:"19 Points",prettyValueNumber:"19",prettyAvailableNumber:"19",prettyRedeemedNumber:"0",statuses:["AVAILABLE","PENDING"],pendingReasons:["US_TAX","MISSING_PAYOUT_CONFIGURATION"],globalRewardKey:null,rewardSource:"MANUAL",prettyRedeemedCredit:"0 Points",prettyAssignedCredit:"19 Points",prettyAvailableValue:"19 Points",exchangedRewardRedemptionTransaction:null,referral:null,rewardRedemptionTransactions:{data:null}},Su={connected:!0,taxHandlingEnabled:!0,publisher:{requiredTaxDocumentType:"W8BEN",currentTaxDocument:{status:"NOT_VERIFIED",type:"W8BEN",dateCreated:321321487},withdrawalSettings:{paymentMethod:"BANK_TRANSFER"},payoutsAccount:null}},Ru=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku},availableText:"{availableAmount} remaining"}),Pu={prettyAvailableValue:"10 Points",prettyRedeemedCredit:"9 Points",prettyRedeemedNumber:"9",dateRedeemed:1640038417468},Iu=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Pu},availableText:"{availableAmount} remaining"}),Nu=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...ac},redeemedText:"{redeemedAmount} redeemed"}),Fu={prettyAvailableValue:"0 Points",prettyAvailableNumber:"0",prettyRedeemedCredit:"19 Points",prettyRedeemedNumber:"19",dateRedeemed:1640038417468},Ou=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Fu},availableText:"{availableAmount} remaining"}),Lu={prettyValue:"1 Point",prettyValueNumber:"1"},Bu={prettyValue:"19 Points with a really really super duper longest name ever in the world wide web",prettyValueNumber:"19"},_u=()=>e("div",{style:{maxWidth:"222px"}},e("sqm-rewards-table-reward-cell",{reward:{...ku,...Bu},availableText:"{availableAmount} remaining"})),Gu=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,type:"FUELTANK",prettyValue:"Fueltank Reward",fuelTankCode:"AFUELTANKCODE"},copyText:"Copied"}),ju=()=>e("div",{style:{maxWidth:"222px"}},e("sqm-rewards-table-reward-cell",{reward:{...ku,type:"FUELTANK",prettyValue:"Long Fueltank Reward",fuelTankCode:"AFUELTANKCODE123456789123456789123456789123456789"},copyText:"Copied"})),Wu=()=>e("sqm-rewards-table-source-cell",{reward:ku,rewardSourceText:"Manual"}),Uu={exchangedRewardRedemptionTransaction:{id:"61c100117a82a376d88041196",creditRedeemed:1,prettyRedeemedCredit:"1 Money",unit:"TESTUNIT",dateRedeemed:1640038417173,redeemedRewards:null,exchangedRewards:null}},Mu={firstName:"Bartholomew",lastName:"Christopher-Johnston Wallace",imageUrl:null},Vu={firstName:"John",lastName:"Doe",imageUrl:null},Hu={firstName:"",lastName:"",imageUrl:null},zu=(e=null)=>({rewardSource:"FRIEND_SIGNUP",referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:e,referredUser:e}}),Yu=(e=null)=>({rewardSource:"REFERRED",referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:e,referredUser:e}}),$u=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(Vu)},referralText:"Referral to"}),Xu=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...Yu(Vu)},referralText:"Referred by"}),Ju=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(null)},referralText:"Referral to",deletedUserText:"Deleted User"}),Ku=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,rewardSource:"REFERRED",referral:null},referralText:"Referral to",deletedReferralText:"Deleted Referral"}),Zu=()=>e("sqm-rewards-table-status-cell",{statusText:"Available",reward:ku}),Qu={dateExpires:1640038417468},ec=()=>e("sqm-rewards-table-status-cell",{statusText:"Available",reward:{...ku,...Qu},expiryText:"Expires"}),tc={statuses:["REDEEMED"],dateRedeemed:1640038417468},nc=()=>e("sqm-rewards-table-status-cell",{statusText:"Redeemed",reward:{...ku,...tc}}),ac={statuses:["CANCELLED"],dateCancelled:1640038417468},rc=()=>e("sqm-rewards-table-status-cell",{statusText:"Cancelled",reward:{...ku,...ac}}),oc={statuses:["EXPIRED"],dateExpires:1640038417468},ic={statuses:["PENDING"]},sc={statuses:["PAYOUT_SENT"]},lc={statuses:["PAYOUT_FAILED"]},dc={statuses:["PAYOUT_CANCELLED"],dateCancelled:1355612521321},uc={pendingReasons:["US_TAX"]},cc={pendingReasons:["SCHEDULED"],dateScheduledFor:1640038417468},mc={pendingReasons:["UNHANDLED_ERROR"]},pc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic}}),hc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku},taxConnection:{...Su,publisher:{requiredTaxDocumentType:"W8BEN",currentTaxDocument:{status:""},...Su.publisher}}}),gc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku},taxConnection:{...Su,publisher:{...Su.publisher,requiredTaxDocumentType:"W8BEN",currentTaxDocument:{status:"INACTIVE",type:"W8BEN",dateCreated:321321487}}}}),fc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku},taxConnection:{...Su,publisher:{...Su.publisher,requiredTaxDocumentType:"W8BEN",currentTaxDocument:null}}}),bc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,pendingReasons:["MISSING_PAYOUT_CONFIGURATION"]}}),xc=()=>e("sqm-rewards-table-status-cell",{statusText:"Payout Sent",reward:{...ku,...sc},taxConnection:Su}),wc=()=>e("sqm-rewards-table-status-cell",{statusText:"Payout Failed",reward:{...ku,...lc}}),yc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic,...mc}}),vc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:null,referredUser:null,fraudData:{moderationStatus:"PENDING",autoModerationStatus:"PENDING",manualModerationStatus:"PENDING"}}}}),qc=()=>e("sqm-rewards-table-status-cell",{statusText:"Denied",reward:{...ku,dateCancelled:1e4,referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:null,referredUser:null,fraudData:{moderationStatus:"DENIED",autoModerationStatus:"DENIED",manualModerationStatus:"DENIED"}}}}),Ec=()=>e("sqm-rewards-table-date-cell",{date:1640038417468}),Cc=Object.freeze({__proto__:null,default:{title:"Components/Rewards Table Cell",parameters:{scenario:'@author:derek\n@owner:derek\nFeature: Reward Table Date Column\n\n    Shows the date of each reward\n\n    Background:\n        Given the date column is included in the reward table\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the date column is configurable\n        Given the "column-title" prop is set to <value>\n        Then the date column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Date received   |                 |\n            | My column title | My column title |\n\n    @motivating\n    Scenario Outline: A configurable date associated with the reward is shown for each reward\n        Given the "date-shown" prop is set to <dateType>\n        And a user with rewards\n        When they view the date column\n        Then for each reward the <rewardDate> is shown in the table\n        And the date is localized to the users locale\n        Examples:\n            | dateType         | rewardDate         |\n            | dateGiven        | date given         |\n            | dateExpires      | date expires       |\n            | dateCancelled    | date cancelled     |\n            | dateRedeemed     | date redeemed      |\n            | dateScheduledFor | date scheduled for |\n            |                  | date given         |@author:derek\n@owner:derek\nFeature: Reward Table reward Column\n\n    Shows the exact reward\n\n    Background:\n        Given the reward column is included in the reward table\n        And rewards with translations exist\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the reward column is configurable\n        Given the "column-title" prop is set to <value>\n        Then the reward column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Reward          |                 |\n            | My column title | My column title |\n\n    @motivating\n    Scenario: The reward column displays the prettyValue of the reward given\n        Given a user with a reward\n        When they view the rewards table\n        Then they see the name of their reward in the reward column\n        And the name is the prettyValue translated for the users locale\n\n    @motivating\n    @ui\n    Scenario: The reward column displays an availability bar if the reward is redeemable\n        Given a user with a <status> credit reward of <value>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <availabilityText>\n        Examples:\n            | status    | value     | percentage | availableAmount | availabilityText    |\n            | AVAILABLE | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | AVAILABLE | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | AVAILABLE | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n            | PENDING   | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | PENDING   | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | PENDING   | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column displays an availability bar if the reward was redeemable but had been cancelled or expired\n        Given a user with a credit reward of <value>\n        And the reward has <status>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <redeemedText>\n        Examples:\n            | status    | value     | percentage | redeemedAmount | redeemedText     |\n            | EXPIRED   | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | EXPIRED   | 10 Points | 80%        | 2 Point        | 2 Point redeemed |\n            | CANCELLED | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | CANCELLED | 10 Points | 20%        | 8 Point        | 8 Point redeemed |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn\'t display the availability bar if the reward is not redeemable\n        Given a user with a non credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column doesn\'t display the availability bar if the reward is only 1 reward unit\n        Given a user with a credit reward for 1 of a reward unit\n        And it has <status>\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n        Examples:\n            | status    |\n            | AVAILABLE |\n            | PENDING   |\n            | EXPIRED   |\n            | CANCELLED |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn\'t display the availability bar for redeemed credit rewards\n        Given a user with a "REDEEMED" credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario: Users can copy their fuel tank codes\n        Given a user with a fuel tank reward\n        When they view the rewards table\n        Then they see their fuel tank reward\n        And they see their fuel tank code bolded in blue\n        When they click on their code\n        Then a tool tip appears saying it has been copied to their clipboard\n        And their code is copied to their clipboard@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background:\n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the "column-title" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples:\n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format "Month-Day-Year"                                 |\n      | redeemed reward                                              | localized redemption date in format "Month-Day-Year"                             |\n      | expired reward                                               | localized expired date in format "Month-Day-Year"                                |\n      | cancelled reward                                             | localized cancelled date in format "Month-Day-Year"                              |\n      | pending reward with a end date                               | localized pending for date in format "Month-Day-Year"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user\'s Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward\'s pending reasons include "MISSING_PAYOUT_CONFIGURATION"\n    Then the status description will be\n      """\n      Complete your tax and cash payout setup to receive your rewards.\n      """\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the "status-text" prop is "{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the "expiry-text" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples:\n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the "column-title" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a "MANUAL" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as "Manual"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a "AUTOMATED" program reward\n    And the program has name "Loyalty Program"\n    When they view the rewards table\n    Then the source of their reward is displayed as "Loyalty Program"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the "reward-exchange-text" prop is <propValue>\n    And a user with a "MANUAL" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the "reward-source-text" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user\'s name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as "Anonymous User" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays "Anonymous User"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as "Deleted User" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays "Deleted User"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | "FRIEND_SIGNUP" | referrer | Referral to |\n      | "REFERRED"      | referred | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as "Deleted referral" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays "Deleted referral"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | "FRIEND_SIGNUP" | referrer | Referral to |\n      | "REFERRED"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the "reward-source-text" prop is "{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n'}},RewardsCellCreditSingle:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Lu}}),RewardsCellCreditFull:Ru,RewardsCellCreditPartial:Iu,RewardsCellCreditCancelled:Nu,RewardsCellCreditExpired:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Pu,...oc},redeemedText:"{redeemedAmount} redeemed"}),RewardsCellCreditPending:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...ic},availableText:"{availableAmount} remaining"}),RewardsCellCreditRedeemed:Ou,RewardsCellCreditLong:_u,RewardsCellNonCredit:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,type:"GIFTCARD",prettyValue:"SaaSquatch Giftcard"}}),RewardsCellFueltank:Gu,RewardsCellFueltankLong:ju,SourceCellManual:Wu,SourceCellProgram:()=>e("sqm-rewards-table-source-cell",{reward:{...ku,rewardSource:"AUTOMATED",program:{name:"Klip Loyalty"}},rewardSourceText:"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"}),SourceCellExchange:()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...Uu},rewardExchangeText:"Reward Exchange"}),SourceCellReferral:$u,SourceCellWithLongText:()=>e("div",{style:{width:"200px"}},e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(Mu)},referralText:"Referral to"})),SourceCellReferred:Xu,SourceCellAnonymousUser:()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(Hu)},referralText:"Referral to",anonymousUserText:"Anonymous User"}),SourceCellDeletedUser:Ju,SourceCellDeletedReferral:Ku,StatusCellAvailable:Zu,StatusCellAvailableExpiry:ec,StatusCellRedeemed:nc,StatusCellCancelled:rc,StatusCellExpired:()=>e("sqm-rewards-table-status-cell",{statusText:"Expired",reward:{...ku,...oc}}),StatusCellPending:pc,StatusCellPendingTaxReview:hc,StatusCellPendingNewTaxForm:gc,StatusCellPendingTaxSubmission:fc,StatusCellPendingPartnerCreation:bc,StatusCellPayoutSent:xc,StatusCellPayoutFailed:wc,StatusCellPayoutCancelled:()=>e("sqm-rewards-table-status-cell",{statusText:"Payout Cancelled",reward:{...ku,...dc}}),StatusCellPendingWithLongText:()=>e("div",{style:{width:"200px"}},e("sqm-rewards-table-status-cell",{statusText:"Pending for 300,000,000 months and some change",reward:{...ku,...ic}})),StatusCellPendingUsTax:()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic,...uc}}),StatusCellPendingScheduled:()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic,...cc}}),StatusCellPendingUnhandled:yc,StatusCellPendingReview:vc,StatusCellDenied:qc,DateCell:Ec,CustomerNoteCell:()=>e("sqm-rewards-table-customer-note-cell",{note:ku.meta.message}),EmptyCell:()=>e("sqm-rewards-table-date-cell",null)}),Tc=e("div",{slot:"loading",style:{display:"contents"}},e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null)))),Ac=e("sqm-empty",{"empty-state-image":"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png","empty-state-header":"View your rewards","empty-state-text":"See all the rewards you have earned from referring friends and completing tasks"}),Dc=(e,t=!1,n=!1,a="Prev",r="Next",o="")=>({states:{hasPrev:!1,hasNext:!0,show:t?"empty":n?"loading":"rows",namespace:"sqm-rewards-table"},data:{textOverrides:{showLabels:!0,prevLabel:a,moreLabel:r},hiddenColumns:o,mdBreakpoint:799,smBreakpoint:599},callbacks:{prevPage:()=>console.log("Prev"),nextPage:()=>console.log("Next")},elements:{columns:["Rewards","Status","Source","Date received"],rows:e,emptyElement:Ac,loadingElement:Tc}}),kc=[e(Ru,null),e(Zu,null),e($u,null),e(Ec,null)],Sc=[e(Iu,null),e(ec,null),e(Xu,null),e(Ec,null)],Rc=[e(Nu,null),e(rc,null),e(Ku,null),e(Ec,null)],Pc=[e(Nu,null),e(rc,null),e(Ju,null),e(Ec,null)],Ic=[e(Ou,null),e(nc,null),e(Wu,null),e(Ec,null)],Nc=[e(Ou,null),e(qc,null),e(Wu,null),e(Ec,null)],Fc=[e(Ou,null),e(vc,null),e(Wu,null),e(Ec,null)],Oc=[e(_u,null),e(ec,null),e(Xu,null),e(Ec,null)],Lc=[e(Gu,null),e(pc,null),e(Wu,null),e(Ec,null)],Bc=[e(ju,null),e(yc,null),e(Wu,null),e(Ec,null)],_c=[e(Ou,null),e(xc,null),e($u,null),e(Ec,null)],Gc=[e(Ou,null),e(wc,null),e($u,null),e(Ec,null)],jc=[e(Ou,null),e(gc,null),e($u,null),e(Ec,null)],Wc=[e(Ou,null),e(bc,null),e($u,null),e(Ec,null)],Uc=[e(Ou,null),e(hc,null),e($u,null),e(Ec,null)],Mc=[e(Ou,null),e(fc,null),e($u,null),e(Ec,null)],Vc=Object.freeze({__proto__:null,default:{title:"Components/Rewards Table",parameters:{scenario:'@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And "View your rewards" in bold\n        And "See all the rewards you have earned from referring friends and completing tasks" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the "empty" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutia\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the "loading" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than "799px"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than "599px"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than "799px"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than "599px"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop "hidden-columns" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by "program-id" are shown\n        Given the table is configured with "program-id"\n        Then only rewards from the program with "program-id" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for "classic" programs,\n        thus we are filtering for rewards without programId\'s.\n\n        Given the "program-id" of the table is set to "classic"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutia\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with "hide-labels" set to "true"\n        Then the table is displayed without column headings'}},RewardsTable:()=>e(b,Object.assign({},Dc([kc,Ic,Pc,Rc,Sc,Nc,Fc,_c,Gc,jc,Wc,Mc,Uc]))),RewardsTableSingle:()=>e(b,Object.assign({},Dc([Lc]))),RewardsTableLong:()=>e(b,Object.assign({},Dc([Bc,Oc]))),RewardsTableEmpty:()=>e(b,Object.assign({},Dc([],!0))),RewardsTableLoading:()=>e(b,Object.assign({},Dc([],!1,!0))),CustomButtonTextTable:()=>e(b,Object.assign({},Dc([kc,Ic,Pc,Sc],!1,!1,"CUSTOM PREVIOUS TEXT","CUSTOM NEXT TEXT"))),ColumnsMobileHidden:()=>e(b,Object.assign({},Dc([kc,Ic,Pc,Sc],!1,!1,void 0,void 0,"0,1,2,3")))});function Hc(){const e="testestest",t=e;return window.widgetIdent={tenantAlias:"test_a8b41jotf8a1v",appDomain:"https://staging.referralsaasquatch.com"},s((()=>(u({accountId:t,id:e,jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs"}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:e,accountId:t}}function zc({token:e,id:t}){const n=t;return window.widgetIdent={tenantAlias:"test_a74miwdpofztj",appDomain:"https://staging.referralsaasquatch.com"},s((()=>(u({accountId:n,id:t,jwt:e}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:t,accountId:n}}const Yc=na((()=>e("sqm-rewards-table",{"per-page":"4"},e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-date-column",null)))),$c=na((()=>(Hc(),c("sam-partner-test-2"),e("sqm-rewards-table",null,e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-date-column",null))))),Xc=na((()=>(Hc(),c(void 0),e("sqm-rewards-table",null,e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-date-column",null))))),Jc=na((()=>(zc({token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",id:"samenglish"}),c(void 0),e("sqm-rewards-table",{"per-page":"4"},e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-date-column",null))))),Kc=na((()=>(zc({token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",id:"samturkey"}),c(void 0),e("sqm-rewards-table",{"per-page":"4","more-label":"Daha","prev-label":"Öncesi","empty-state-text":"Henüz Referans Yok"},e("sqm-rewards-table-reward-column",{"column-title":"Ödüller","redeemed-text":"{redeemedAmount} kullanıldı","available-text":"{availableAmount} mevcut"}),e("sqm-rewards-table-source-column",{"column-title":"Kullanıcılar","anonymous-user":"Anonim Kullanıcı","deleted-user":"Silinmiş Kullanıcı","reward-exchange-text":"Ödülleri Kulannın","referral-text":"{rewardSource, select, FRIEND_SIGNUP {Referans} REFERRED {Yönlendiren} other {}}","reward-source-text":"{rewardSource, select, MANUAL {Manuel} AUTOMATED {Otomatik} other {}}"}),e("sqm-rewards-table-status-column",{"column-title":"Statut","status-text":"{status, select, AVAILABLE {Mevcut} PENDING {Bekleniyor} EXPIRED {Geçmiş} REDEEMED {Kullanılmış} CANCELED {İptal Edildi} other {Kullanılamaz} }","expiry-text":"Bitiyor "}),e("sqm-rewards-table-date-column",{"column-title":"Tarih"}))))),Zc=na((()=>(zc({token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",id:"samfrench"}),c(void 0),e("sqm-rewards-table",{"per-page":"4","more-label":"Plus","prev-label":"Précédent","empty-state-text":"Aucune Récompenses Maintenant"},e("sqm-rewards-table-reward-column",{"column-title":"Récompenses","redeemed-text":"{redeemedAmount} rachetée","available-text":"{availableAmount} disponible"}),e("sqm-rewards-table-source-column",{"column-title":"Utilisateur","anonymous-user":"Utilisateur Anonyme","deleted-user":"Utilisateur Supprimé","reward-exchange-text":"Échange de Récompenses","referral-text":"{rewardSource, select, FRIEND_SIGNUP {Référence à} REFERRED {Référencé par} other {}}","reward-source-text":"{rewardSource, select, MANUAL {Manuel} AUTOMATED {Automatique} other {}}"}),e("sqm-rewards-table-status-column",{"column-title":"Statut","status-text":"{status, select, AVAILABLE {Disponible} PENDING {Pendant} EXPIRED {Expiré} REDEEMED {Racheté} CANCELED {Annulé} other {Indisponible} }","expiry-text":"Expire sur "}),e("sqm-rewards-table-date-column",{"column-title":"Date de Réception"}))))),Qc=Object.freeze({__proto__:null,default:{title:"Hooks / useRewardsTable"},RewardTableDemoHook:Yc,RewardsTableWithProgram:$c,RewardsTableNoProgram:Xc,RewardsTableEn:Jc,RewardsTableTr:Kc,RewardsTableFr:Zc}),em=na((()=>e("div",null,e("button",{onClick:()=>d.push("/")},"/"),e("button",{onClick:()=>d.push("/foo")},"/foo"),e("button",{onClick:()=>d.push("/bar")},"/bar"),e("button",{onClick:()=>d.push("/baz/bang")},"/baz/bang"),e("button",{onClick:()=>d.push("/refer")},"/refer"),e("button",{onClick:()=>d.push("/refer/1")},"/refer/1"),e("button",{onClick:()=>d.push("/refer/2")},"/refer/2"),e("button",{onClick:()=>d.back()},"Back"),e("button",{onClick:()=>d.forward()},"Forward"),e("hr",null),e("sqm-router",{innerHTML:'\n    <template path="/foo"><h1>foo</h1>\n    \n    <p>These elements don\'t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.\n\n    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what\'s inside. See the Accessibility concerns section below for more details.</p>\n    </template>\n    <template path="/bar"><h2>bar</h2>\n    \n    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.\n    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>\n    </template>\n    <template path="/baz/bang"><h3>baz/bang</h3>\n    <pre>\n    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄\n    ░░▀███░░░░▀██░░░░██▀░░░░██░░\n    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░\n    ░░░░███░░░░░▀██▄█░░░░░░█░░░░\n    ░░░░░███░░░░░▀██░░░░░░█▀░░░░\n    ░░░░░░███░░░░▄███░░░░█▀░░░░░\n    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░\n    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░\n    ░░░░░░░░▀██▀░░░░░███░░░░░░░░\n    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░\n    </pre>\n    </template>\n    <template path="/refer/:page"><h3>/refer/:page</h3>\n    <pre>\n      refer/:page\n    </pre>\n    </template>\n'})))),tm=na((()=>e("div",null,e("button",{onClick:()=>d.push("/")},"/"),e("button",{onClick:()=>d.push("/foo")},"/foo"),e("button",{onClick:()=>d.push("/bar")},"/bar"),e("button",{onClick:()=>d.push("/baz/bang")},"/baz/bang"),e("button",{onClick:()=>d.push("/refer")},"/refer"),e("button",{onClick:()=>d.push("/refer/1")},"/refer/1"),e("button",{onClick:()=>d.push("/refer/2")},"/refer/2"),e("button",{onClick:()=>d.back()},"Back"),e("button",{onClick:()=>d.forward()},"Forward"),e("hr",null),e("sqm-router",{innerHTML:'\n    <sqm-route path="/foo"><h1>foo</h1>\n    \n    <p>These elements don\'t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.\n\n    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what\'s inside. See the Accessibility concerns section below for more details.</p>\n    </sqm-route>\n    <sqm-route path="/bar"><h2>bar</h2>\n    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.\n    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>\n    </sqm-route>\n    <sqm-route path="/baz/bang"><h3>baz/bang</h3>\n    <pre>\n    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄\n    ░░▀███░░░░▀██░░░░██▀░░░░██░░\n    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░\n    ░░░░███░░░░░▀██▄█░░░░░░█░░░░\n    ░░░░░███░░░░░▀██░░░░░░█▀░░░░\n    ░░░░░░███░░░░▄███░░░░█▀░░░░░\n    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░\n    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░\n    ░░░░░░░░▀██▀░░░░░███░░░░░░░░\n    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░\n    </pre>\n    </sqm-route>\n    <sqm-route path="/refer/:page"><h3>/refer/:page</h3>\n    <pre>\n      refer/:page\n    </pre>\n    </sqm-route>\n'})))),nm=na((()=>e("div",null,e("button",{onClick:()=>d.push("/")},"/"),e("button",{onClick:()=>d.push("/foo")},"/foo"),e("hr",null),e("div",{style:{display:"flex",justifyContent:"space-around"}},e("sqm-router",{innerHTML:'<template path="/">\n      \n      <div>Column 1</div>\n      <div>Column 2 </div>\n      </template>'})))));function am(t){const{states:n,callbacks:a}=t;return[e("textarea",{style:{width:"100%",height:"300px"},onChange:e=>a.setEditedTemplate(e.target.value)},n.editedTemplate),e("button",{onClick:()=>a.setPreviewTemplate(n.editedTemplate)},"Update Preview"),e("label",null,"Current path:",e("input",{onInput:a.setPath,value:"/"})),e("div",{innerHTML:n.previewTemplate})]}const rm=na((()=>{const{states:t,callbacks:n}=function(e){const[t,n]=o(e),[a,r]=o(e);return{states:{previewTemplate:a,editedTemplate:t},callbacks:{setEditedTemplate:n,setPreviewTemplate:r,setPath:function(e){d.push(e.target.value)}}}}('\n<sqm-router>\n  <template path="/">\n  <div>hello world</div>\n  </template>\n</sqm-router>\n');return e(am,{states:t,callbacks:n})})),om=Object.freeze({__proto__:null,default:{title:"Tests/Router"},TemplateNavigation:em,RouteNavigation:tm,Styling:nm,RouterPlayground:rm}),im=Object.freeze({__proto__:null,default:{title:"Components/Scroll"},ScrollTag:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"scroll-tag-name":"sqm-text","button-text":"Scroll","scroll-animation":"smooth"}),e("div",{style:{position:"absolute",bottom:"0"}},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),ScrollId:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Scroll","scroll-id":"my-id","scroll-animation":"smooth"}),e("div",{style:{position:"absolute",bottom:"0"}},e("sqm-text",{slot:"label",id:"my-id"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),ScrollAutoAnimation:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Scroll","scroll-id":"my-id","scroll-animation":"auto"}),e("div",{style:{position:"absolute",bottom:"0"}},e("sqm-text",{slot:"label",id:"my-id"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),ScrollTabGroup:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Redeem rewards","scroll-id":"tab-3","scroll-animation":"smooth"}),e("div",{style:{position:"absolute",bottom:"0"},innerHTML:'\n              <sqm-tabs>\n              <sqm-tab header="Leaderboard">\n                <sqm-hero-image\n                  image-url="https://i.imgur.com/MVgOJn7.png"\n                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n                  layout="columns"\n                  image-percentage="33%"\n                  padding-image="large"\n                  padding-text="large"\n                  background-color=""\n                ></sqm-hero-image>\n                <sqm-leaderboard></sqm-leaderboard>\n              </sqm-tab>\n              <sqm-tab header="Referral history"\n              >\n                <sqm-referral-table></sqm-referral-table>\n              </sqm-tab>\n              <sqm-tab header="Reward history">\n                <sqm-rewards-table></sqm-rewards-table>\n              </sqm-tab>\n              <sqm-tab header="Redeem">\n                <sqm-reward-exchange-list></sqm-reward-exchange-list>\n              </sqm-tab>\n            </sqm-tabs>\n      '})),ScrollTabGroupInner:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Redeem rewards","scroll-tag-name":"sqm-reward-exchange-list"}),e("div",{style:{position:"absolute",bottom:"0"},innerHTML:'\n              <sqm-tabs>\n              <sqm-tab header="Leaderboard">\n                <sqm-hero-image\n                  image-url="https://i.imgur.com/MVgOJn7.png"\n                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n                  layout="columns"\n                  image-percentage="33%"\n                  padding-image="large"\n                  padding-text="large"\n                  background-color=""\n                ></sqm-hero-image>\n                <sqm-leaderboard></sqm-leaderboard>\n              </sqm-tab>\n              <sqm-tab header="Referral history"\n              >\n                <sqm-referral-table></sqm-referral-table>\n              </sqm-tab>\n              <sqm-tab header="Reward history">\n                <sqm-rewards-table></sqm-rewards-table>\n              </sqm-tab>\n              <sqm-tab header="Redeem">\n                <sqm-reward-exchange-list></sqm-reward-exchange-list>\n              </sqm-tab>\n            </sqm-tabs>\n      '})),ShoelaceProps:()=>e("div",null,e("div",{style:{display:"flex",gap:"60px"}},e("div",{style:{textAlign:"center"}},e("h3",null,"Type:"),e("sqm-scroll",{"button-type":"primary"},"Primary"),e("br",null),e("sqm-scroll",{"button-type":"success"},"Success"),e("br",null),e("sqm-scroll",{"button-type":"neutral"},"Neutral"),e("br",null),e("sqm-scroll",{"button-type":"warning"},"Warning"),e("br",null),e("sqm-scroll",{"button-type":"danger"},"Danger")),e("div",{style:{textAlign:"center"}},e("h3",null,"Outline:"),e("sqm-scroll",{outline:!0,"button-type":"primary"},"Primary"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"success"},"Success"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"neutral"},"Neutral"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"warning"},"Warning"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"danger"},"Danger"))),e("br",null)," ",e("hr",null),e("h3",null,"Text:"),e("sqm-scroll",{"button-type":"text"},"Text"),e("br",null)," ",e("hr",null),e("h3",null,"Size:"),e("sqm-scroll",{size:"small"},"Small"),e("br",null),e("sqm-scroll",{size:"medium"},"Medium"),e("br",null),e("sqm-scroll",{size:"large"},"Large"),e("br",null)," ",e("hr",null),e("h3",null,"Pill:"),e("sqm-scroll",{pill:!0},"Button"),e("br",null)," ",e("hr",null),e("h3",null,"Icon:"),e("sqm-scroll",{"button-type":"primary",iconName:"facebook"},"Icon Name"),e("br",null),e("sqm-scroll",{iconName:"gear",iconSlot:"prefix"},"Icon Slot Prefix"),e("br",null),e("sqm-scroll",{iconName:"gear",iconSlot:"suffix"},"Icon Slot Suffix"),e("br",null)," ",e("hr",null),e("h3",null,"Circle:"),e("sqm-scroll",{circle:!0},"X"),e("br",null)," ",e("hr",null),e("h3",null,"Mobile Friendly:"),e("sqm-scroll",{mobile:!0},"Button"),e("br",null)," ",e("hr",null))}),sm=Object.freeze({__proto__:null,default:{title:"Components/Share Button",parameters:{scenario:'@author:noah\n@owner:noah\nFeature: Share Button\n\n  The share button redirects users to a platform where they can share their referral link\n\n  @motivating\n  @ui\n  Scenario Outline: Share button displays for various platforms\n    Given the share button\'s medium prop is "<medium>"\n    And the button\'s child is text saying "BUTTON_TEXT"\n    When the share button is rendered\n    Then the button has text "BUTTON_TEXT"\n    And the button is <colour>\n    And it displays an <icon> beside the text\n    And clicking the button redirects to an appropriate link\n    Examples:\n      | medium        | colour       | icon               |\n      | facebook      | #1877f2      | facebook logo      |\n      | twitter       | #000000      | twitter x logo     |\n      | email         | #666666      | envelope           |\n      | direct        | brand colour | paper plane        |\n      | linkedin      | #0077b5      | linkedIn logo      |\n      | sms           | #34DA50      | chat bubble        |\n      | fbmessenger   | #0084ff      | messenger logo     |\n      | whatsapp      | #25d366      | whatsapp logo      |\n      | linemessenger | #00B300      | linemessenger logo |\n      | pinterest     | #e60023      | pinterest logo     |\n\n  @minutia\n  @ui\n  Scenario Outline: Default icons can be overwritten\n    Given a share button for any medium with <iconPropValue>\n    When the share button is rendered\n    Then it displays a <iconPropValue> instead of the share mediums default icon\n    Examples:\n      | iconPropValue |\n      | basket        |\n      | bluetooth     |\n      | bandaid       |\n\n  @motivating\n  @ui\n  Scenario Outline: Default share medium colours can be overwritten\n    Given a share button for any medium with <backgroundColourPropValue>\n    When the share button is rendered\n    Then the share button is <backgroundColourPropValue>\n    Examples:\n      | backgroundColourPropValue |\n      | blue                      |\n      | black                     |\n      | green                     |\n\n  @minutia\n  @ui\n  Scenario Outline: Share medium icons and text can be hidden\n    Given a share button with <prop> <value>\n    When the share button is rendered\n    Then <element> is hidden\n    Examples:\n      | prop     | value | element |\n      | hideicon | true  | icon    |\n      | hidetext | true  | text    |\n\n  @minutia\n  @ui\n  Scenario Outline: Icons can be on either side of the text\n    Given a share button with <iconslotPropValue>\n    When the share button is rendered\n    Then the icon is displayed to the <direction> of the text\n    Examples:\n      | iconslotPropValue | direction |\n      | suffix            | right     |\n      | prefix            | left      |\n      | prefix            | left      |\n\n  @minutia\n  Scenario: Unsupported browsers hide native share buttons\n    Given the share button\'s medium prop is "direct"\n    And your browser does not support the Web Share API\n    Then the share button is hidden\n\n  @minutia\n  Scenario: SMS share buttons are hidden on non Android and iOS devices\n    Given the share button\'s medium is "sms"\n    And the share button is being viewed on a device which is not an Android or iOS device\n    Then the share button is hidden\n\n  @motivating\n  Scenario: Facebook share buttons uses SquatchAndroid sharing features\n    Given the share button\'s medium is "facebook"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is available\n    Then tapping the share button opens the phone\'s Facebook app\n    And a share activity is opened with the share link prefilled\n\n  @motivating\n  Scenario: SquatchAndroid falls back to the Facebook website if no app is available\n    Given the share button\'s medium is "facebook"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is not available\n    Then tapping the share button opens the the Facebook mobile site in the device\'s browser\n    And a share activity is opened with the share link prefilled\n\n  @minutia\n  Scenario: A supplied program ID is used if available\n    Given the program id is supplied to the component in the "programId" prop\n    Then the program ID in the "programId" prop is used to retrieve share links\n\n  @minutia\n  Scenario: The program ID is automatically fetched from context\n    Given the program id is not supplied to the component in the "programId" prop\n    Then the program ID is retrieved from context'}},WithIconPrefix:()=>e(L,Object.assign({},{medium:"whatsapp",iconslot:"prefix"}),"Share"),WithIconSuffix:()=>e(L,Object.assign({},{medium:"whatsapp",iconslot:"suffix"}),"Share"),WithIconOverride:()=>e(L,Object.assign({},{medium:"facebook",icon:"person-badge"}),"Share"),TextStyle:()=>e(L,Object.assign({},{medium:"facebook",type:"text"}),"Share"),WithoutIcon:()=>e(L,Object.assign({},{medium:"facebook",hideicon:!0}),"Share"),WithoutText:()=>e(L,Object.assign({},{medium:"facebook",hidetext:!0}),"Share"),TextStyleWithoutIcon:()=>e(L,Object.assign({},{medium:"facebook",type:"text",hideicon:!0}),"Share"),WithCustomColorsAndBranding:()=>e(L,Object.assign({},{medium:"facebook",type:"text",backgroundcolor:"red",textcolor:"yellow",iconslot:"prefix",border:"2px solid yellow",borderradius:30}),"Facebook"),WithCustomBorderRadius:()=>e(L,Object.assign({},{medium:"facebook",type:"text",borderradius:8,iconslot:"prefix"}),"Facebook"),LinkLocationTest:()=>e(L,Object.assign({},{medium:"facebook",type:"text",onClick:void 0,messageLink:"https://www.example.com"}),"Click me"),FullStackIcon:()=>e("div",null,e("sqm-share-button",{medium:"facebook"},e("span",null,"Facebook")),e("br",null),e("sqm-share-button",{medium:"email"},e("span",null,"Email"))),AllMediums:()=>e("div",null,e("sqm-share-button",{medium:"facebook"},e("span",null,"Facebook")),e("br",null),e("sqm-share-button",{medium:"email"},e("span",null,"Email")),e("br",null),e("sqm-share-button",{medium:"whatsapp"},e("span",null,"WhatsApp")),e("br",null),e("sqm-share-button",{medium:"linkedin"},e("span",null,"Linkedin")),e("br",null),e("sqm-share-button",{medium:"twitter"},e("span",null,"Post on X")),e("br",null),e("sqm-share-button",{medium:"pinterest"},e("span",null,"Pinterest")),e("br",null),e("sqm-share-button",{medium:"fbmessenger"},e("span",null,"Messenger")),e("br",null),e("sqm-share-button",{medium:"sms"},e("span",null,"SMS")),e("br",null),e("sqm-share-button",{medium:"linemessenger"},e("span",null,"Line Messenger")),e("br",null),e("sqm-share-button",{medium:"direct"},e("span",null,"Share")))});function lm(){window.widgetIdent={tenantAlias:"test_a8b41jotf8a1v",appDomain:"https://staging.referralsaasquatch.com",programId:"sam-partner-test-2"},s((()=>(u({accountId:"testestest",id:"testestest",jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs"}),()=>{window.widgetIdent=void 0,u(void 0)})),[])}const dm=na((()=>{lm();const t="sam-partner-test-2",n=[ve({programId:t,medium:"facebook"}),ve({programId:t,medium:"twitter"}),ve({programId:t,medium:"email"}),ve({programId:t,medium:"direct"}),ve({programId:t,medium:"sms"})];return e("div",null,n.map((t=>e("div",null,e("button",{onClick:t.onClick},"Share link (",t.medium,")")))))})),um=na((()=>(lm(),e("div",null,["facebook","twitter","email","direct","sms"].map((t=>e("div",null,e("sqm-share-button",Object.assign({},{programId:"sam-partner-test-2",medium:t}),"BUTTON_TEXT")))))))),cm=Object.freeze({__proto__:null,default:{title:"Hooks / useShareButton"},BareBonesView:dm,RegularView:um}),mm=Object.freeze({__proto__:null,default:{title:"Components/Share Code",parameters:{scenario:'@author:johan\n@owner:johan\nFeature: Share Code\n\n  The share code component is a box that allows users to see and copy their referral code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code can be copied to their clipboard\n    Given tooltiptext is "hello tooltip"\n    When the component renders\n    Then there is a textbox with the user\'s share code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip\'s lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is "SHARECODE001"\n    And the component won\'t be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to "program-a"\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share code is for "program-a"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share code is for "program-b"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the share code component\n    And the component is rendered for "program-a"\n    When they click to copy their code\n    Then an "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic event is fired\n    And it is for "program-a"\n    And it has share medium "DIRECT"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the share code component\n    Then they see "Align text" props\n    And the default value is "left"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the share code component\n    Then they see "Style" props\n    And the default value is "icon"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n'}},ShareCode:()=>e("sqm-share-code",{tooltiptext:"Copied to Clipboard"}),CustomTooltipText:()=>e("sqm-share-code",{tooltiptext:"CUSTOM TOOLTIP TEXT"}),TextAlignCenter:()=>e("sqm-share-code",{textAlign:"center"}),TextAlignRight:()=>e("sqm-share-code",{textAlign:"right"}),CustomTooltipDuration:()=>e("sqm-share-code",{tooltiplifespan:5e3,tooltiptext:"CUSTOM TOOLTIP TEXT"}),CopyButton:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",isCopyIcon:!1})),CopyButtonBelow:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",buttonStyle:"button-below"})),Error:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",disabled:!0,open:!0,tooltiptext:"Copied!",error:!0}))}),pm=Object.freeze({__proto__:null,default:{title:"Components/Share Link",parameters:{scenario:'@author:johan\n@owner:johan\nFeature: Share Link\n\n  The share link component is a box that allows users to see and copy their share link for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users sharelink can be copied to their clipboard\n    Given tooltipText is "hello tooltip"\n    When the component renders\n    Then there is a textbox with the user\'s share link\n    When the clipboard icon is clicked\n    Then the link is copied to clipboard\n    And a tooltip appears for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip\'s lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share link is "https://www.example.com/sharelink/abc"\n    And the component won\'t be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to "program-a"\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share link is for "program-a"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share link is for "program-b"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their sharelink\n    Given a user viewing the share link component\n    And the component is rendered for "program-a"\n    When they click to copy their link\n    Then an "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic event is fired\n    And it is for "program-a"\n    And it has share medium "DIRECT"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share link text\n    Given a user is editing the share link component\n    Then they see "Align text" props\n    And the default value is "left"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the share link component\n    Then they see "Style" props\n    And the default value is "icon"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n'}},Default:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!"})),Tooltip:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",tooltiptext:"Some text for the tooltip",open:!0})),Disabled:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",disabled:!0,open:!0,tooltiptext:"Copied!"})),Error:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",disabled:!0,open:!0,tooltiptext:"Copied!",error:!0})),TextAlignCenter:()=>e("sqm-share-link",{textAlign:"center"}),TextAlignRight:()=>e("sqm-share-link",{textAlign:"right"}),CopyButton:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",isCopyIcon:!1})),CopyButtonBelow:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",buttonStyle:"button-below"})),CustomStyles:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",backgroundColor:"#1ed760",borderRadius:"30px",textColor:"#121212",buttonType:"primary"})),CustomStylesWithDemoHooks:()=>e("sqm-share-link",{demoData:{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",backgroundColor:"#1ed760",borderRadius:"30px",textColor:"red",buttonType:"primary",borderColor:"#121212"},backgroundColor:"#1ed760"}),FullStack:()=>e("sqm-share-link",null)});function hm(){window.widgetIdent={tenantAlias:"test_a74miwdpofztj",appDomain:"https://staging.referralsaasquatch.com",programId:"klip-referral-program"},s((()=>(u({accountId:"zach.harrison@referralsaasquatch.com",id:"zach.harrison@referralsaasquatch.com",jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiemFjaC5oYXJyaXNvbkByZWZlcnJhbHNhYXNxdWF0Y2guY29tIiwiYWNjb3VudElkIjoiemFjaC5oYXJyaXNvbkByZWZlcnJhbHNhYXNxdWF0Y2guY29tIn19.Wi8Vd5r64g5n8VNhiY-v5cqFcLwGxPG3Wi3dVSfkFZI"}),()=>{window.widgetIdent=void 0,u(void 0)})),[])}const gm=na((()=>{hm();const t=qe({programId:"klip-referral-program",tooltiplifespan:0,tooltiptext:""});return e("div",null,"Sharelink:"," ",e("code",{style:{borderStyle:"solid",borderWidth:"1px",padding:"2px"}},t.copyString))})),fm=na((()=>(hm(),e(f,Object.assign({},qe({programId:"klip-referral-program",tooltiptext:"Copied to clipboard",tooltiplifespan:1e3})))))),bm=na((()=>(hm(),e(f,Object.assign({},qe({programId:"klip-referral-program",tooltiptext:"⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",tooltiplifespan:500})))))),xm=Object.freeze({__proto__:null,default:{title:"Hooks / useShareLink"},BareBonesView:gm,RegularView:fm,FastTooltip:bm}),wm=Object.freeze({__proto__:null,default:{title:"Components/Tabs",parameters:{scenario:'@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id "test123"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the "sq:program-id" event listener for the program section is removed\n    And the component does not use program-id "test123" to source its data\n    And falls back to the global program id'}},SimpleTabs:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n      </sqm-tabs>\n    '}),CustomColor:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs text-color="red">\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n      </sqm-tabs>\n    '}),ManyTabs:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> \n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n      </sqm-tabs>\n    '}),SingleTab:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs>\n        <sqm-tab header="Redeem">\n          <sqm-reward-exchange-list></sqm-reward-exchange-list>\n        </sqm-tab>\n      </sqm-tabs>\n    '}),ReferralProgram:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n    <sqm-tabs>\n    <sqm-tab header="Leaderboard">\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table>\n        <sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),LoyaltyProgram:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="top">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table>\n        <sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),BottomTabs:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="bottom">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table\n        ><sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),LeftTabs:()=>e("div",{style:{maxWidth:"900px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="left">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table\n        ><sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),RightTabs:()=>e("div",{style:{maxWidth:"900px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="right">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table\n        ><sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '})});function ym({matrix:t,props:n,Component:a}){return function(...e){var t=[],n=e.length-1;return function a(r,o){for(var i=0,s=e[o].length;i<s;i++){var l=r.slice(0);l.push(e[o][i]),o==n?t.push(l):a(l,o+1)}}([],0),t}(...Object.keys(t).map((e=>t[e].map((t=>({[e]:t})))))).map((e=>e.reduce(((e,t)=>({...e,...t})),{}))).map((t=>{const r={...n,...t};return e("div",null,e(vm,{values:r}),e("hr",null)," ",e("br",null),e(a,Object.assign({},r)),e("br",null))}))}function vm({values:t}){return e("table",null,e("tbody",null,Object.keys(t).map((n=>e("tr",null,e("th",null,n),e("td",null,JSON.stringify(t[n])))))))}const qm=(t,n)=>e("div",{class:"resizer"},n),Em={display:"inline-flex",gap:"32px"},Cm={width:"347px",minWidth:"347px",resize:"horizontal",height:"fit-content",overflow:"hidden"},Tm={callbacks:{sendEvent:()=>{},onClick:()=>{}},content:{rewardAmount:"20",rewardUnit:"SaaSquatch Points",cardTitle:"Complete a survey",description:"Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",repeatable:!1,showProgressBar:!1,steps:!1,buttonText:"Take survey",buttonLink:"https://example.com/",openNewTab:!1,rewardDuration:null,completedText:"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",expiryMessage:"Ends {endDate}",startsOnMessage:"Starts {startDate}",endedMessage:"Ended {endDate}",finite:0,goal:1,locale:"en"},states:{progress:0,loading:!1,loadingEvent:!1}},Am={callbacks:{sendEvent:()=>{},onClick:()=>{}},content:{rewardAmount:"40",rewardUnit:"SaaSquatch Points",cardTitle:"Comment on 5 articles",description:"Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",repeatable:!1,showProgressBar:!0,steps:!0,buttonText:"Take survey",buttonLink:"https://example.com/",openNewTab:!1,completedText:"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",rewardDuration:null,expiryMessage:"Ends {endDate}",startsOnMessage:"Starts {startDate}",endedMessage:"Ended {endDate}",finite:0,goal:5,locale:"en"},states:{progress:1,loading:!1,loadingEvent:!1}},Dm={callbacks:{sendEvent:()=>{},onClick:()=>{}},content:{rewardAmount:"150",rewardUnit:"SaaSquatch Points",cardTitle:"Spend $500 at our Store",description:"Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",repeatable:!1,completedText:"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",showProgressBar:!0,steps:!1,progressBarUnit:"$",buttonText:"Take survey",buttonLink:"https://example.com/",openNewTab:!1,rewardDuration:null,expiryMessage:"Ends {endDate}",startsOnMessage:"Starts {startDate}",endedMessage:"Ended {endDate}",finite:0,goal:500,locale:"en"},states:{progress:100,loading:!1,loadingEvent:!1}},km=Object.freeze({__proto__:null,default:{title:"Components/Task Card/",parameters:{scenario:'@author:derek\n@owner:kutay\nFeature: Task Card\n\n\t@motivating\n\t@ui\n\tScenario: A header, body title and a CTA button are always displayed\n\t\tGiven the Task Card is configured with the following props\n\t\t\t| prop         | value             |\n\t\t\t| rewardAmount | "40"              |\n\t\t\t| rewardUnit   | "Points"          |\n\t\t\t| cardTitle    | Complete a survey |\n\t\t\t| buttonText   | Take Survey       |\n\t\tWhen a user views the Task Card\n\t\tThen they see "40 Points" as the heading\n\t\tAnd the "40" is bolded\n\t\tAnd they see "Complete a survey" bolded in the body\n\t\tAnd a details icon in the top right hand corner\n\t\tAnd a button with text "Take Survey" in the bottom right hand corner\n\t\tWhen they click the button\n\t\tThen they are redirected to "example.com" in a new window\n\n\t@motivating\n\t@ui\n\tScenario Outline: A Task Card description can be included but is not required\n\t\tGiven a Task Card\n\t\tAnd it has <descriptionPropValue>\n\t\tWhen a user views the Task card\n\t\tThen they <maySee> a chevron icon in the top right\n\t\tWhen they attempt to click the chevron\n\t\tThen they <maySee> the card description\n\t\tExamples:\n\t\t\t| descriptionPropValue             | maySee    |\n\t\t\t| This is my task card description | see       |\n\t\t\t|                                  | don\'t see |\n\n\t@motivating\n\tScenario Outline: CTA links can open in a new tab or the same tab\n\t\tGiven a Task Card\n\t\tAnd it has <openNewTabPropValue>\n\t\tWhen a user views the Task card\n\t\tAnd they click on the CTA\n\t\tThen they are redirected to the CTA link in <tab>\n\t\tExamples:\n\t\t\t| openNewTabPropValue | tab          |\n\t\t\t| true                | a new tab    |\n\t\t\t| false               | the same tab |\n\t\t\t| N/A                 | the same tab |\n\n\t@minutia\n\t@ui\n\tScenario: A loading state is displayed while the Task Card is loading\n\t\tGiven a Task Card component\n\t\tWhen a user views the Task Card\n\t\tThen a loading state is displayed\n\t\tWhen the Task Card has loaded\n\t\tThen the loading state disapears\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\n\t\tGiven a Task Card\n\t\tAnd it has <showProgressBarPropValue>\n\t\tWhen a user views the Task Card\n\t\tThen the progress bar <mayBe> displayed\n\t\tExamples:\n\t\t\t| showProgressBarPropValue | mayBe |\n\t\t\t| true                     | is    |\n\t\t\t| false                    | isn\'t |\n\t\t\t| N/A                      | isn\'t |\n\n\t@motivating\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\n\t\tGiven a Task card\n\t\tAnd it is configured to send an "test" event\n\t\tWhen a user views the Task card\n\t\tAnd clicks on the CTA\n\t\tThen a "test" event is sent to SSQT on the users behalf\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\n\n\t@motivating\n\t@ui\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\n\t\tGiven a Task Card\n\t\tAnd it has <repeatablePropValue>\n\t\tAnd a user who has already completed the task\n\t\tWhen they view the Task Card\n\t\tThen they see a brand colour checkmark icon beside the card heading\n\t\tAnd the card <mayBe> brand colour\n\t\tAnd the CTA button <mayBe> disabled\n\t\tAnd the CTA button <mayBe> grey\n\t\tExamples:\n\t\t\t| repeatablePropValue | mayBe |\n\t\t\t| true                | isn\'t |\n\t\t\t| false               | is    |\n\t\t\t| N/A                 | is    |\n\n\t@motivating\n\tScenario Outline: Display duration hides or shows a task\n\t\tGiven a Task Card\n\t\tAnd it has a "display-duration" interval\n\t\tWhen a user views the Card on <day>\n\t\tThen card <mayBeHidden>\n\t\tExamples:\n\t\t\t| day                       | mayBeHidden   |\n\t\t\t| a day before the interval | is hidden     |\n\t\t\t| a day during the interval | is not hidden |\n\t\t\t| a day after the interval  | is hidden     |\n\n\t@motivating\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\n\t\tGiven a Task Card\n\t\tAnd it has an "reward-duration" interval\n\t\tWhen a user views the card on <day>\n\t\tThen the card <mayBeDisabled>\n\t\tAnd it <mayHaveAlert>\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\n\t\tExamples:\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn\'t have expiry text                            |\n\t\t\t| a day during the expiry interval | isn\'t disabled | doesn\'t have an alert                                             | has the month, date, year and time the task expires |\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn\'t have expiry text                            |\n\n\t@motivating\n\tScenario Outline: Task Card dates support localization\n\t\tGiven a Task Card\n\t\tAnd it\'s configured with a expiry duration interval\n\t\tWhen a user with <locale> views the task card <atTime>\n\t\tThen they <seeDate> translated for <locale>\n\t\tExamples:\n\t\t\t| atTime              | locale | seeDate         |\n\t\t\t| before the interval | en     | Task Start Date |\n\t\t\t| during the interval | en     | Task End Date   |\n\t\t\t| after the interval  | en     | Task Ended Date |\n\t\t\t| before the interval | fr     | Task Start Date |\n\t\t\t| during the interval | fr     | Task End Date   |\n\t\t\t| after the interval  | fr     | Task Ended Date |\n\n\t@motivating\n\t@ui\n\tScenario Outline: A task completion count is displayed for repeatable tasks\n\t\tGiven a Task Card\n\t\tAnd it is configured for a repeatable task\n\t\tAnd has it has <goalValue>\n\t\tAnd a user with <userGoalProgress>\n\t\tWhen the user views the task card\n\t\tThen they see a repeat icon\n\t\tAnd the <text> in the bottom left hand corner\n\t\tAnd the <text> is brand colour\n\t\tExamples:\n\t\t\t| goalValue | userGoalProgress | text              |\n\t\t\t| 2         | 0                | Completed 0 times |\n\t\t\t| 2         | 1                | Completed 0 times |\n\t\t\t| 2         | 2                | Completed 1 times |\n\t\t\t| 2         | 4                | Completed 2 times |\n\n\t@motivating\n\tScenario Outline: The source of a user\'s progress can be a custom field or a program goal\n\t\tGiven a Task Card\n\t\tAnd it is configured <progressSourcePath>\n\t\tWhen a user views the Task card\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the "Goal Completion Count"\n\t\tExamples:\n\t\t\t| progressSourcePath                               |\n\t\t\t| /customFields/activityCount                      |\n\t\t\t| /customFields/purchaseTotal                      |\n\t\t\t| /programGoals/count%2FComment-on-Article         |\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\n\n\t@motivating\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\n\t\tGiven a Task Card\n\t\tAnd it is configured for <goalValue>\n\t\tAnd a user who has <progressValue>\n\t\tWhen they view the Task Card\n\t\tThen they are shown to have <progressValue> towards <goalValue>\n\t\tWhen their progress grows larger than <goalValue>\n\t\tThen the task is marked as completed\n\t\tExamples:\n\t\t\t| goalValue | progressValue |\n\t\t\t| 1         | 0             |\n\t\t\t| 10        | 9             |\n\t\t\t| 5         | 2             |\n\n\t@motivating\n\tScenario: The Goal Completion Number defaults to 1\n\t\tGiven a Task Card without a configured "goal" value\n\t\tAnd a user who has <progressValue>\n\t\tWhen they view the Task Card\n\t\tThen it <mayBe> marked as completed\n\t\tExamples:\n\t\t\t| progressValue | mayBe |\n\t\t\t| 0             | isn\'t |\n\t\t\t| 1             | is    |\n\t\t\t| 2             | is    |\n\n\t@motivating\n\tScenario: CTA Button can be hidden on the task card\n\t\tGiven a Task Card\n\t\tAnd it has default prop values set\n\t\tAnd "hideButton" is true\n\t\tThen the task card is shown\n\t\tAnd the button is hidden\n@author:kutay\n@owner:kutay\nFeature: The progress bar can be shown as a continuous line with progress and end goal. \n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\n\t\tGiven a Task Card component\n\t\tAnd the users progress is <progress>\n\t\tAnd the task goal is "500"\n\t\tAnd the task is not repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows "500" with <unit> below\n\t\tExamples:\n\t\t\t| progress | progressBar           | unit | color |\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is "5"\n\t\tAnd steps are enabled\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to "5" in increments of 1\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows "5" below\n\t\tExamples:\n\t\t\t| progress | progressBar           | color |\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is "500"\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tExamples:\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is "5"\n\t\tAnd steps are enabled\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to "5" in increments of 1\n\t\tAnd the first <icon1> is <color1>\n\t\tAnd the second <icon2> is <color2>\n\t\tAnd the third <icon3> is <color3>\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tExamples:\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |'}},TaskCard:()=>{const t={rewardDuration:"2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",repeatable:!0};return e("div",{style:Em},e(qm,null,e("h4",null,"Not Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,description:""},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,description:""},states:{...Am.states,progress:0}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,description:""},states:{...Dm.states,progress:230}}))),e(qm,null,e("h4",null,"Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0},states:{...Tm.states,progress:2}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:7}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:650}}))),e(qm,null,e("h4",null,"Complete"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500}}))),e(qm,null,e("h4",null,"Unavailable"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0}},t)),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:3}},t)),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:250}},t))))},TaskCardNotRepeatable:()=>e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{states:{...Am.states,progress:1}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:5}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:230}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500}})),e("h5",null))),TaskCardRepeatable:()=>e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0},states:{...Tm.states,progress:1}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:0}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:7}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:10}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:500}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:650}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:1e3}})),e("h5",null))),TaskCardRepeatableFinite:()=>e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,finite:2},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,finite:2},states:{...Tm.states,progress:1}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,finite:2},states:{...Tm.states,progress:2}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:2},states:{...Am.states,progress:2}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:2},states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:2},states:{...Am.states,progress:10}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:3},states:{...Am.states,progress:12}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:3},states:{...Am.states,progress:15}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:2},states:{...Dm.states,progress:200}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:3},states:{...Dm.states,progress:500}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:2},states:{...Dm.states,progress:1e3}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:3},states:{...Dm.states,progress:1200}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:3},states:{...Dm.states,progress:1500}})),e("h5",null))),TaskCardEndDate:()=>{const t={rewardDuration:x.DateTime.now().minus({days:1}).toISO()+"/"+x.DateTime.now().plus({days:1}).toISO()},n={...t,repeatable:!0};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,...n},states:{...Tm.states,progress:1}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Tm,{content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Am.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Am.content,...n},states:{...Am.states,progress:5}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Tm,{content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Dm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Dm.content,...n},states:{...Dm.states,progress:1e3}})),e("h5",null)))},TaskCardLoading:()=>{const t={states:{loading:!0,progress:0,loadingEvent:!1}};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,t))," ",e("h5",null),e(j,Object.assign({},Tm,t))," ",e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,t))," ",e("h5",null),e(j,Object.assign({},Am,t))," ",e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,t))," ",e("h5",null),e(j,Object.assign({},Dm,t))," ",e("h5",null)))},TaskCardNotStarted:()=>{const t={rewardDuration:x.DateTime.now().plus({days:1}).toISO()+"/"+x.DateTime.now().plus({days:2}).toISO()},n={...t,repeatable:!0};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...n}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...n}})),e("h5",null)))},TaskCardEnded:()=>{const t={rewardDuration:x.DateTime.now().minus({days:2}).toISO()+"/"+x.DateTime.now().minus({days:1}).toISO()},n={...t,repeatable:!0};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...n}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...n}})),e("h5",null)))},TaskCardButtonHidden:()=>{const t={rewardDuration:"2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",repeatable:!0};return e("div",{style:Em},e(qm,null,e("h4",null,"Not Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,description:"",hideButton:!0},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,description:"",hideButton:!0},states:{...Am.states,progress:0}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,description:"",hideButton:!0},states:{...Dm.states,progress:230}}))),e(qm,null,e("h4",null,"Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,hideButton:!0},states:{...Tm.states,progress:2}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,hideButton:!0},states:{...Am.states,progress:7}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,hideButton:!0},states:{...Dm.states,progress:650}}))),e(qm,null,e("h4",null,"Complete"),e(j,Object.assign({},Tm,{content:{...Tm.content,hideButton:!0},states:{...Tm.states,progress:1}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,hideButton:!0},states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,hideButton:!0},states:{...Dm.states,progress:500}}))),e(qm,null,e("h4",null,"Unavailable"),e(j,Object.assign({},Tm,{content:{...Tm.content,hideButton:!0},states:{...Tm.states,progress:0}},t)),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,hideButton:!0},states:{...Am.states,progress:3}},t)),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,hideButton:!0},states:{...Dm.states,progress:250}},t))))},ProgressBar:()=>e("div",null,e(ym,{matrix:{progress:[0,100,500,650,1200]},props:{progress:0,goal:500,progressBarUnit:"$"},Component:Ee})),ProgressBarSteps:()=>e("div",null,e(ym,{matrix:{progress:[0,1,5,7,12]},props:{progress:0,steps:!0,goal:5},Component:Ee})),ProgressBarRepeatable:()=>e("div",null,e(ym,{matrix:{progress:[0,250,500,750,1e3,1250]},props:{progress:0,goal:500,progressBarUnit:"$",repeatable:!0},Component:Ee})),ProgressBarStepsRepeatable:()=>e("div",null,e(ym,{matrix:{progress:[0,1,5,7,12]},props:{progress:0,steps:!0,goal:5,repeatable:!0},Component:Ee})),ProgressBarFinite:()=>e("div",null,e(ym,{matrix:{progress:[0,250,500,750,1e3,1250]},props:{progress:0,goal:500,progressBarUnit:"$",repeatable:!0,finite:2},Component:Ee})),ProgressBarStepsFinite:()=>e("div",null,e(ym,{matrix:{progress:[0,1,5,7,10,12]},props:{progress:0,steps:!0,goal:5,repeatable:!0,finite:2},Component:Ee}))});function Sm(){const e="sam+klip@saasquat.ch",t=e;return window.widgetIdent={tenantAlias:"test_a74miwdpofztj",appDomain:"https://staging.referralsaasquatch.com",programId:"klip-referral-program"},s((()=>(u({accountId:t,id:e,jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg"}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:e,accountId:t}}const Rm=na((()=>(Sm(),e("sqm-task-card",{"card-title":"Comment on 5 articles","button-text":"Start reading",goal:5,steps:!0,"show-progress-bar":!0,"event-key":"testEvent","open-new-tab":!0})))),Pm=na((()=>(Sm(),e("sqm-card-feed",null,e("sqm-task-card",{"reward-amount":"75","card-title":"Refer a Friend",description:"Invite a friend to Klip and get 75 points when they signup for a free trial or contact our us about an enterprise license.","button-text":"Start referring","button-link":"https://klip-staging.vercel.app/app/klip-rewards",goal:1,repeatable:!0,"completed-text":"",demoData:"","ended-message":"","event-key":"","expiry-message":"","progress-bar-unit":"","reward-duration":"2022-01-04T08:00:00.000Z/2022-01-20T08:00:00.000Z","reward-unit":"","starts-on-message":"","stat-type":"","display-duration":"2022-01-04T08:00:00.000Z/2022-01-05T08:00:00.000Z"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"50","card-title":"Follow Us on X",description:"Earn 50 points when you Follow Us on X!","button-text":"Follow","button-link":"https://twitter.com/",goal:1,"stat-type":"/programGoals/count/Follow-on-Social-Media","open-new-tab":"true","event-key":"socialFollow"})),e("sqm-task-card",{"reward-amount":"250",goal:500,"show-progress-bar":"true","card-title":"Spend $500 on Klip Products",description:"Earn 250 points when you spend $500 or more on Klip products.","button-text":"See plans","button-link":"https://klip-staging.vercel.app/app/plans","stat-type":"/customFields/purchaseTotal","open-new-tab":"false"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"25",goal:1,"card-title":"Upload Your First Video",description:"Earn 25 points for exploring the Klip platform when you upload your first video.","button-text":"Upload","button-link":"https://klip-staging.vercel.app/app","stat-type":"/programGoals/count/Record-First-Video","open-new-tab":"false"})),e("sqm-task-card",{"reward-amount":"100",goal:5,repeatable:!0,"show-progress-bar":"true",steps:!0,"card-title":"Share 5 Videos",description:"Earn 100 points for collaborating each time you share 5 videos.","button-text":"Share","button-link":"https://klip-staging.vercel.app/app","stat-type":"/customFields/videosShared","open-new-tab":"false"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"1","reward-unit":"Free Month",goal:1,"card-title":"Upgrade Your Plan",description:"Buy a Business or Enterprise plan and get 1 free month of Klip for being a committed customer.","button-text":"Upgrade","button-link":"https://klip-staging.vercel.app/app/plans","stat-type":"/programGoals/count/Upgrade-Plan","open-new-tab":"false"})),e("sqm-task-card",{"reward-amount":"200",goal:5,"show-progress-bar":"","card-title":"Purchase 5 Seats",description:"Earn 200 points when you expand your Klip Team by purchasing 5 or more seats.","button-text":"Purchase seats","button-link":"https://klip-staging.vercel.app/app/plans","stat-type":"/customFields/seatCount"}),e("sqm-task-card",{"reward-amount":"250",goal:1,"show-progress-bar":"","card-title":"Upload 1 Hour of Video",description:"Record and upload an hour of video and get 250 points for being a super user.","button-text":"Upload","button-link":"https://klip-staging.vercel.app/app","stat-type":"/customFields/videoHoursCount","progress-bar-unit":"","reward-unit":"Points"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"100",goal:1,"card-title":"Complete an NPS Survey",description:"Fill out our NPS survey and get 100 points for giving us honest feedback. Be sure to use your Klip account email when completing the survey.","button-text":"Complete survey","button-link":"https://y5tqgj96plv.typeform.com/to/p6N7lHUk","stat-type":"/programGoals/count/NPS-Survey","reward-unit":"Points","open-new-tab":"true"})),e("sqb-conditional-section",{condition:"'champion' in user.segments"},e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"$100",goal:1,"card-title":"Complete a Case Study",description:"Write a Klip case study and earn a $100 Visa Gift Card for letting us know how Klip has helped your team succeed.","button-text":"Complete case study","button-link":"https://y5tqgj96plv.typeform.com/to/CPhkFBBW","stat-type":"/programGoals/count/Case-Study","reward-unit":"Visa Gift Card","open-new-tab":"true"}))))))),Im=Object.freeze({__proto__:null,default:{title:"Hooks / useTaskCard"},TaskCard:Rm,TaskCardFeed:Pm}),Nm={progress:2,goal:4,steps:!0},Fm=Object.freeze({__proto__:null,default:{title:"Components/Progress Bar"},TaxAndPayoutsProgressBar:()=>e(Ce,Object.assign({},Nm,{stageCount:4,currentStage:2}))}),Om=Object.freeze({__proto__:null,default:{title:"Components/Text"},PurpleText:()=>e("sqm-text",{textColor:"slateblue"},e("p",null,"This is the text component")),CustomFontSize:()=>e("sqm-text",{fontSize:36},e("p",null,"This is the text component"))}),Lm=Object.freeze({__proto__:null,default:{title:"Components/Timeline",parameters:{scenario:'@author:derek\n@owner:kutay\nFeature: Timeline\n\n    @motivating\n    @ui\n    Scenario: The timeline adds lines between timeline entries\n        Given a timeline\n        And it has many timeline entries as children\n        When a user views the timeline\n        Then they see all timeline entries are connected by brand colour lines\n        And see that the last entry does not have a line\n\n    @motivating\n    @ui\n    Scenario Outline: The timeline can set the icons used by its timeline entries\n        Given a timeline with "icon" <iconPropValue>\n        And it has many timeline entries as children\n        When a user views the timeline\n        Then they see the timeline entries have a <icon>\n        Examples:\n            | iconPropValue | icon                |\n            | gift          | gift icon           |\n            | gift          | gift icon           |\n            | circle        | brand colour circle |\n@author:derek\n@owner:kutay\nFeature: Timeline Entry\n\n    @motivating\n    @ui\n    Scenario: Timeline entries have an icon, a reward and an entry desciption\n        Given an timeline entry with the following props\n            | prop   | value                                               |\n            | unit   | Visa Giftcard                                       |\n            | reward | 50$                                                 |\n            | desc   | Earn a 50$ Visa Giftcard for each referral you make |\n        When a user views the entry\n        Then they see a gift icon\n        And see "$50 VISA GIFTCARRD" to the right\n        And "$50" is bolded with x-large font size\n        And below they see "Earn a 50$ Visa Giftcard for each referral you make"\n\n    @motivating\n    @ui\n    Scenario Outline: Icon can either be a gift or a brand colour cirle\n        Given a timeline entry with "icon" <iconPropValue>\n        When a user views the entry\n        Then they see an <icon>\n        Examples:\n            | iconPropValue 1 | icon                |\n            | gift            | gift                |\n            | circle          | brand colour circle |\n            |                 | gift                |\n\n    @motivating\n    @ui\n    Scenario: A timeline entry can display a line to connect it to another entry\n        Given a timeline entry with "line" "true"\n        When a user views the entry\n        Then they see the entry\n        But it has a brand colour line connecting it to the next timeline entry\n'}},TimelineWith1Reward:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{textColor:"red",lineColor:"red",reward:"75",unit:"points",desc:"Your friends signs up for a free trial"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}))),TimelineWith2Rewards:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}))),TimelineWith3Rewards:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}))),TimelineWith4Rewards:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}),e("sqm-timeline-entry",{reward:"$1000",unit:"visa giftcard",desc:"Your friend purchases Klip Team"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}),e("sqm-timeline-entry",{reward:"$1000",unit:"visa giftcard",desc:"Your friend purchases Klip Team"}))),TimelineWithCustomColors:()=>e("sqm-timeline",null,e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}),e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"$1000",unit:"visa giftcard",desc:"Your friend purchases Klip Team"}))}),Bm=Object.freeze({__proto__:null,default:{title:"Components/Titled Section",parameters:{scenario:'@author:derek\n@owner:noah\nFeature: Titled Section\n\n    Background: The titled section has a label and content\n        Given a titled section\n        And it has a label\n        And it has content in the content slot\n\n    @motivating\n    @ui\n    Scenario: Text alignment defaults to left align but can be configured\n        Given the titled section has "text-align" <textAlignPropValue>\n        When a user views the titled section\n        Then the text in the label is <aligned>\n        And the text in the content is <aligned>\n        Examples:\n            | textAlignPropValue | aligned |\n            | center             | center  |\n            | left               | left    |\n            | right              | right   |\n            |                    | left    |\n\n    @minutia\n    @ui\n    Scenario: Label margin is configurable\n        Given the titled section has "label-margin" <marginPropValue>\n        When a user views the titled section\n        Then <marginPropValue> margin is between the label and content\n        Examples:\n            | marginPropValue | margin     |\n            | none            | no         |\n            | xxx-small       | xxx-small  |\n            | xx-small        | xx-small   |\n            | x-small         | x-small    |\n            | small           | small      |\n            | medium          | medium     |\n            | large           | large      |\n            | x-large         | x-large    |\n            | xx-large        | xx-large   |\n            | xxx-large       | xxx-large  |\n            | xxxx-large      | xxxx-large |\n            |                 | no         |\n\n    @minutia\n    @ui\n    Scenario Outline: Titled section padding is configurable\n        Given the titled section has "padding" <paddingPropValue>\n        When a user views the titled section\n        Then <paddingPropValue> padding is applied around the titled section\n        Examples:\n            | paddingPropValue | padding    |\n            | none             | no         |\n            | xxx-small        | xxx-small  |\n            | xx-small         | xx-small   |\n            | x-small          | x-small    |\n            | small            | small      |\n            | medium           | medium     |\n            | large            | large      |\n            | x-large          | x-large    |\n            | xx-large         | xx-large   |\n            | xxx-large        | xxx-large  |\n            | xxxx-large       | xxxx-large |\n            |                  | no         |'}},AlignLeft:()=>e("sqm-titled-section",{"text-align":"left"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),AlignCenter:()=>e("sqm-titled-section",{"text-align":"center"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),AlignRight:()=>e("sqm-titled-section",{"text-align":"right"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),Padding:()=>e("div",null,e("h3",null,"None"),e("sqm-titled-section",{padding:"none"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-small"),e("sqm-titled-section",{padding:"xxx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-small"),e("sqm-titled-section",{padding:"xx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-small"),e("sqm-titled-section",{padding:"x-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"small"),e("sqm-titled-section",{padding:"small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"medium"),e("sqm-titled-section",{padding:"medium"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"large"),e("sqm-titled-section",{padding:"large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-large"),e("sqm-titled-section",{padding:"x-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-large"),e("sqm-titled-section",{padding:"xx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-large"),e("sqm-titled-section",{padding:"xxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxxx-large"),e("sqm-titled-section",{padding:"xxxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),LabelMargin:()=>e("div",null,e("h3",null,"None"),e("sqm-titled-section",{"label-margin":"none"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-small"),e("sqm-titled-section",{"label-margin":"xxx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-small"),e("sqm-titled-section",{"label-margin":"xx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-small"),e("sqm-titled-section",{"label-margin":"x-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"small"),e("sqm-titled-section",{"label-margin":"small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"medium"),e("sqm-titled-section",{"label-margin":"medium"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"large"),e("sqm-titled-section",{"label-margin":"large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-large"),e("sqm-titled-section",{"label-margin":"x-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-large"),e("sqm-titled-section",{"label-margin":"xx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-large"),e("sqm-titled-section",{"label-margin":"xxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxxx-large"),e("sqm-titled-section",{"label-margin":"xxxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))))}),_m=Object.freeze({__proto__:null,default:{title:"Tests/User Name"},DemoData:()=>e("sqm-user-name",{demoData:{loading:!1,loadingText:"...",username:"Test Testerson"}}),Username:()=>e("sqm-user-name",null)}),Gm={initialiseLoading:!1,email:"testemail@example.com",loading:!1,verifyFailed:!1,emailResent:!1},jm=Object.freeze({__proto__:null,default:{title:"Components/Widget Code Verification"},Default:()=>e("sqm-code-verification",{demoData:{states:Gm}}),InitialLoading:()=>e("sqm-code-verification",{demoData:{states:{...Gm,initialiseLoading:!0}}}),Loading:()=>e("sqm-code-verification",{demoData:{states:{...Gm,loading:!0}}}),CodeResent:()=>e("sqm-code-verification",{demoData:{states:{...Gm,emailResent:!0}}}),VerificationFailed:()=>e("sqm-code-verification",{demoData:{states:{...Gm,verifyFailed:!0}}})}),Wm={email:"",error:!1,loading:!1,initialLoading:!1,sendCodeError:!1},Um=Object.freeze({__proto__:null,default:{title:"Components/Widget Email Verification"},Default:()=>e("sqm-email-verification",{demoData:{}}),EmailIsPrefilled:()=>e("div",null,e("sqm-text",null,e("h4",null,"Verify your email")),e("sqm-text",null,e("sub",null,"To get your cash paid out directly to your bank account, please complete your account setup")),e("sqm-email-verification",{demoData:{states:{...Wm,email:"test@example.com"}}})),Loading:()=>e("sqm-email-verification",{demoData:{states:{...Wm,initialLoading:!0}}}),SaveLoading:()=>e("sqm-email-verification",{demoData:{states:{...Wm,loading:!0}}}),WithHeader:()=>e("div",null,e("sqm-text",null,e("h4",null,"Verify your email")),e("sqm-text",null,e("sub",null,"To get your cash paid out directly to your bank account, please complete your account setup")),e("sqm-email-verification",{demoData:{states:{...Wm,email:"test@example.com"}}})),InvalidEmail:()=>e("sqm-email-verification",{demoData:{states:{...Wm,error:!0}}}),SendCodeError:()=>e("sqm-email-verification",{demoData:{states:{...Wm,sendCodeError:!0}}})}),Mm={states:{showVerification:!1,hideSteps:!1,disabled:!1,loading:!1,hideBackButton:!1,formState:{bankCountry:"US",paymentMethodChecked:"toBankAccount"},hasPayPal:!1,isPartner:!1,saveDisabled:!1,thresholds:[],currency:"USD",loadingError:!1,email:"test@example.com",showModal:!1},callbacks:{onVerificationHide:()=>{},onVerification:()=>{},onSubmit:async()=>console.log("Submit"),setPaymentMethodChecked:()=>{},setPaymentScheduleChecked:()=>{},setCountrySearch:()=>{},onBack:async()=>console.log("back"),onModalOpen:()=>{},onModalClose:()=>{}},refs:{formRef:{current:null}}},Vm=Object.freeze({__proto__:null,default:{title:"Components/Banking Information Form"},BankingInfoFormDefault:()=>e("sqm-banking-info-form",null),BankingInfoFormDefaultLoading:()=>e("sqm-banking-info-form",{demoData:{states:{...Mm.states,loading:!0}}}),BankingInfoFormDefaultWithLoadingError:()=>e("sqm-banking-info-form",{demoData:{states:{...Mm.states,loading:!0,loadingError:!0}}}),BankingInfoFormDefaultWithValidationErrors:()=>e("sqm-banking-info-form",{demoData:{states:{...Mm.states,formState:{...Mm.states.formState,errors:{inputErrors:{beneficiaryAccountName:{type:"required"},bankAccountType:{type:"required"},bankAccountNumber:{type:"required"},iban:{type:"required"},swiftCode:{type:"required"},routingCode:{type:"required"},bankName:{type:"required"},beneficiaryClassification:{type:"required"},patronymicName:{type:"required"},voCode:{type:"required"},agencyCode:{type:"required"},bankAddress:{type:"required"},bankCity:{type:"required"},bankCountry:{type:"required"},bankState:{type:"required"},bankPostalCode:{type:"required"},branchCode:{type:"required"},balanceThreshold:{type:"required"},fixedDay:{type:"required"}}}}}}}),BankingInfoFormCountryUSCurrencyUSD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{bankCountry:"US"},currency:"USD"}}}),BankingInfoFormGeneralError:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,errors:{general:!0}}}}}),BankingInfoFormCountryUSCurrencyUSDLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{bankCountry:"US"},loading:!0,currency:"USD"}}}),BankingInfoFormCountryARCurrencyARS:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"AR",paymentScheduleChecked:"FIXED_DAY",paymentMethodChecked:"toBankAccount"},currency:"ARS"}}}),BankingInfoFormCountryMXCurrencyMXN:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"MX",paymentScheduleChecked:"FIXED_DAY",paymentMethodChecked:"toBankAccount"},currency:"MXN"}}}),BankingInfoFormCountryUSCurrencyGBP:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"US"},currency:"GBP"}}}),BankingInfoFormCountryCanadaCurrencyCAD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"CA"},currency:"CAD"}}}),BankingInfoFormCountryCanadaCurrencyUSD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"CA"},currency:"USD"}}}),BankingInfoFormCountrySpainCurrencyUSD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"ES"},currency:"USD"}}}),BankingInfoFormIsPartner:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,isPartner:!0,currency:"USD"}}}),BankingInfoFormPaypalChecked:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),BankingInfoFormPaypalCheckedLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,loading:!0,formState:{...Mm.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),BankingInfoFormWithBalanceThresholdPaymentSchedule:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"BALANCE_THRESHOLD"},currency:"USD"}}}),BankingInfoFormWithBalanceThresholdPaymentScheduleWithError:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{errors:{inputErrors:{balanceThreshold:{type:"required"}}},...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"BALANCE_THRESHOLD"},currency:"USD"}}}),BankingInfoFormWithBalanceThresholdPaymentScheduleLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,loading:!0,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"BALANCE_THRESHOLD"},currency:"USD"}}}),BankingInfoFormWithFixedDayPaymentSchedule:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormWithFixedDayPaymentScheduleWithError:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{errors:{inputErrors:{fixedDay:{type:"required"}}},...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormWithFixedDayPaymentScheduleLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,loading:!0,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormVerififyIdentityModal:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,isPartner:!0,showVerification:!0,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormModalOpen:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,showModal:!0}}})}),Hm={states:{step:"1",hideSteps:!1,hideState:!1,loading:!1,disabled:!1,isPartner:!1,isUser:!1,loadingError:!1,formState:{firstName:"Bob",lastName:"Testerson",email:"bobtesterson@example.com",phoneNumberCountryCode:"US",phoneNumber:"555 555 5555",countryCode:"US",currency:"CAD",address:"2/1337 Johnson Street",city:"Vancouver",state:"BC",postalCode:"555 555",errors:{}}},data:{partnerData:{},regionLabelEnum:"STATE",regions:[],phoneCountries:[{countryCode:"CA",displayName:"Canada"}],countries:[{countryCode:"CA",displayName:"Canada"},{countryCode:"ES",displayName:"Spain"},{countryCode:"UK",displayName:"United Kingdom"},{countryCode:"US",displayName:"United States"},{countryCode:"AR",displayName:"Argentina"},{countryCode:"AU",displayName:"Australia"},{countryCode:"ZW",displayName:"Zimbabwe"}],currencies:[{currencyCode:"CAD",displayName:"CAD"},{currencyCode:"GBP",displayName:"GBP"},{currencyCode:"USD",displayName:"USD"}],allCountries:[{countryCode:"CA",displayName:"Canada"},{countryCode:"ES",displayName:"Spain"},{countryCode:"UK",displayName:"United Kingdom"},{countryCode:"US",displayName:"United States"}],allCurrencies:[{currencyCode:"CAD",displayName:"CAD"},{currencyCode:"GBP",displayName:"GBP"},{currencyCode:"USD",displayName:"USD"}],userData:{firstName:"",lastName:""}},refs:{formRef:{current:null},currencyRef:{current:null},phoneCountryRef:{current:null}}},zm={step:"2",hideSteps:!1,disabled:!1,loading:!1,isPartner:!1,loadingError:!1,formState:{checked:void 0,errors:{}}},Ym={states:{showVerification:!1,step:"4",hideSteps:!1,disabled:!1,loading:!1,hasPayPal:!1,isPartner:!1,hideBackButton:!1,saveDisabled:!1,thresholds:[],loadingError:!1,email:"test@example.com",formState:{paymentMethodChecked:"toBankAccount"},showModal:!1},callbacks:{onVerificationHide:()=>{},onVerification:()=>{},onSubmit:async()=>console.log("Submit"),setPaymentMethodChecked:()=>{},setPaymentScheduleChecked:()=>{},onBack:async()=>console.log("back"),setCountrySearch:()=>{},onModalOpen:()=>{},onModalClose:()=>{}},refs:{formRef:{current:null}}},$m={showExitButton:!0,step:"3",urlLoading:!1,docusignStatus:void 0,hideSteps:!1,documentType:"W9",documentTypeString:"W9",loading:!1,disabled:!1,participantTypeDisabled:!1,loadingError:!1,formState:{participantType:"individualParticipant",errors:{},taxFormExpired:!1},showModal:!1},Xm={states:{veriffLoading:!1,payoutStatus:"DONE",canEditPayoutInfo:!0,disabled:!1,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"United Kingdom",indirectTaxNumber:"123456",indirectTaxType:"VAT",showNewFormDialog:!1,hasHold:!1},slots:{payoutDetailsCardSlot:e("sqm-payout-details-card",{demoData:{states:{badgeStatus:"nextPayout"}}})}},Jm=Object.freeze({__proto__:null,default:{title:"Components/Tax Form"},GeneralLoadingView:()=>e(Le,null),GeneralErrorView:()=>e("sqm-form-message",{type:"error"},e("p",{part:"alert-title"},"There was a problem loading your form"),e("p",{part:"alert-description"},"Please refresh the page and try again. If this problem continues, contact our support team.")),StepOne:()=>e("sqm-user-info-form",{demoData:Hm}),StepOneLoading:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,loading:!0}}}),StepOneDisabled:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,disabled:!0}}}),StepOneIsUser:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,isUser:!0}}}),StepOneIsPartner:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,disabled:!0,isPartner:!0}}}),StepOneWithErrors:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,formState:{...Hm.states.formState,errors:{firstName:!0,lastName:!0,email:!0,countryCode:!0,currency:!0,participantType:!0,allowBankingCollection:!0}}}}}),StepOneWithGeneralError:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,formState:{...Hm.states.formState,errors:{general:!0}}}}}),StepOneWithLoadingError:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,loadingError:!0,loading:!0,formState:{...Hm.states.formState}}}}),StepTwoLoading:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,loading:!0}}}),StepTwoLoadingError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,loading:!0,loadingError:!0}}}),StepTwoDisabled:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,disabled:!0}}}),StepTwoIsPartner:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,isPartner:!0}}}),StepTwoWithGeneralError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,errors:{general:!0}}}}}),StepTwoOtherRegionChecked:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"UK",indirectTaxNumber:"123456",errors:{}}}}}),StepTwoOtherRegionCheckedCanada:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"BRITISHCOLUMBIA",indirectTaxNumber:"123456",errors:{}}}}}),StepTwoOtherRegionCheckedCanadaGST:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"QUEBEC",indirectTaxNumber:"123456",errors:{}}}}}),StepTwoOtherRegionCheckedCanadaGSTAndQST:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"QUEBEC",qstNumber:"654321",hasQst:!0,errors:{}}}}}),StepTwoOtherRegionCheckedOtherCountrySubRegion:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"ES",subRegion:"CANARYISLANDS",errors:{}}}}}),StepTwoOtherRegionCheckedOtherCountrySubRegionIncomeTax:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"ES",subRegion:"CANARYISLANDS",hasSubRegionTaxNumber:!0,subRegionTaxNumber:"654321",errors:{}}}}}),StepTwoOtherRegionCheckedWithInputErrors:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{checked:"otherRegion",errors:{}}},slotProps:{formState:{province:"",selectedRegion:"GB",errors:{selectedRegion:!0,indirectTaxNumber:!0}}}}}),StepTwoOtherRegionCheckedCanadaWithProvinceError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"BC",errors:{province:!0,indirectTaxNumber:!0}}}}}),StepTwoOtherRegionCheckedCanadaGSTAndQSTError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"QUEBEC",hasQst:!0,errors:{province:!0,indirectTaxNumber:!0,qstNumber:!0}}}}}),StepTwoOtherRegionCheckedOtherCountrySubRegionErrors:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"ES",hasSubRegionTaxNumber:!0,errors:{indirectTaxNumber:!0,subRegionTaxNumberError:!0,subRegion:!0}}}}}),StepTwoNotRegisteredChecked:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"notRegistered"}}}}),StepThreeWithDocusign:()=>e("sqm-docusign-form",{demoData:{states:{documentType:"W9",documentTypeString:Oe("W9"),...$m}}}),StepThreeWithDocusignW8BEN:()=>e("sqm-docusign-form",{demoData:{states:{...$m,documentType:"W8BEN",documentTypeString:Oe("W8BEN")}}}),StepThreeWithDocusignW8BENE:()=>e("sqm-docusign-form",{demoData:{states:{...$m,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),formState:{taxFormExpired:!1,participantType:"businessEntity",errors:{participantType:"",general:!1}}}}}),StepThreeWithDocusignExpired:()=>e("sqm-docusign-form",{demoData:{states:{...$m,docusignStatus:"ttl_expired",formState:{participantType:"individualParticipant",taxFormExpired:!0,errors:{}}}}}),StepThreeWithDocusignCompleted:()=>e("sqm-docusign-form",{demoData:{states:{...$m,docusignStatus:"signing_complete",formState:{participantType:"individualParticipant",taxFormExpired:!1,errors:{}}}}}),StepThreeDocusignWithError:()=>e("sqm-docusign-form",{demoData:{states:{...$m,docusignStatus:"exception",formState:{...$m.formState,errors:{formSubmission:!0}}}}}),StepThreeDocusignWithGeneralError:()=>e("sqm-docusign-form",{demoData:{states:{...$m,formState:{...$m.formState,errors:{general:!0}}}}}),StepThreeDocusignWithLoadingError:()=>e("sqm-docusign-form",{demoData:{states:{...$m,loadingError:!0,formState:{...$m.formState}}}}),StepThreeDocusignLoading:()=>e("sqm-docusign-form",{demoData:{states:{...$m,loading:!0}}}),StepThreeDocusignDisabled:()=>e("sqm-docusign-form",{demoData:{states:{...$m,disabled:!0}}}),StepThreeWithDocusignModalOpen:()=>e("sqm-docusign-form",{demoData:{states:{documentType:"W9",documentTypeString:Oe("W9"),...$m,showModal:!0}}}),StepFourDefault:()=>e("sqm-banking-info-form",null),StepFourIsPartner:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,isPartner:!0,formState:{...Ym.states.formState}}}}),StepFourDirectToBankChecked:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,formState:{...Ym.states.formState}}}}),StepFourToPaypalChecked:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,formState:{...Ym.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),StepFourReVerifyEmail:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,showVerification:!0,isPartner:!0,formState:{...Ym.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),TaxAndCashDashboardActiveW9Form:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm}}),TaxAndCashDashboardActiveW8BENForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,noFormNeeded:!1,canEditPayoutInfo:!0,documentType:"W8BEN",documentTypeString:Oe("W8BEN"),country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardActiveW8BENEForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,noFormNeeded:!1,canEditPayoutInfo:!0,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotActiveW9Form:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,noFormNeeded:!1,canEditPayoutInfo:!0,status:"INACTIVE",documentType:"W9",documentTypeString:Oe("W9"),country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotVerifiedW9Form:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",canEditPayoutInfo:!0,disabled:!1,status:"NOT_VERIFIED",documentType:"W9",documentTypeString:Oe("W9"),noFormNeeded:!1,country:"United States",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1,veriffLoading:!1}}}),TaxAndCashDashboardNotVerifiedW8BENForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"NOT_VERIFIED",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotVerifiedW8BENEForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"NOT_VERIFIED",documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotActiveW8BENEForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"NOT_ACTIVE",documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",indirectTaxType:"VAT",country:"United Kingdom",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNoFormNeeded:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!0,province:"Ontario",country:"Canada",indirectTaxNumber:"123456",indirectTaxType:"GST",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxCanada:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",disabled:!1,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,province:"Ontario",country:"Canada",indirectTaxType:"GST",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxCanadaQuebec:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",disabled:!1,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,province:"Quebec",country:"Canada",indirectTaxType:"GST",indirectTaxNumber:"123456",qstNumber:"44212",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxSpain:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",disabled:!1,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"Spain",subRegion:"Spain Proper",indirectTaxType:"VAT",indirectTaxNumber:"123456",subRegionTaxNumber:"44212",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxNotRegistered:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationRequired:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:REQUIRED",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationRequiredInternal:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:INTERNAL",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationReviewInternal:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:REVIEW",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationFailedInternal:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:FAILED",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardW9ThresholdReached:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"OVER_W9_THRESHOLD",veriffLoading:!1,canEditPayoutInfo:!0,status:null,documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!1,showNewFormDialog:!1,hasHold:!1,enforceUsTaxComplianceOption:"CASH_ONLY_DEFER_W9"}}}),TaxAndCashDashboardNewTaxForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!0,hasHold:!1}}}),TaxAndCashDashboardPayoutsOnHold:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"HOLD",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",country:"Slovania",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardLoading:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,loading:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardWithLoadingError:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,disabled:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,loading:!0,loadingError:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardWithGeneralError:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",indirectTaxType:"VAT",country:"Slovania",showNewFormDialog:!1,hasHold:!1,errors:{general:!0}}}}),TaxAndCashDashboardDisabled:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",country:"Slovania",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashTextProps:()=>e("sqm-tax-and-cash",{demoData:{showTextProps:!0}})}),Km=Object.freeze({__proto__:null,default:{title:"Components/Payout Details Card"},Loading:()=>e("sqm-payout-details-card",{demoData:{states:{loading:!0}}}),NextPayout:()=>e("sqm-payout-details-card",{demoData:{states:{badgeStatus:"nextPayout"}}}),PayoutToday:()=>e("sqm-payout-details-card",{demoData:{states:{badgeStatus:"payoutToday"}}}),ThresholdPayout:()=>e("sqm-payout-details-card",{demoData:{states:{thresholdBalance:"50 USD",badgeStatus:"thresholdPayout"}}}),PaypalPayout:()=>e("sqm-payout-details-card",{demoData:{states:{payoutType:"PAYPAL"}}})}),Zm={error:!1,status:"INFORMATION_REQUIRED",loading:!1,veriffLoading:!1},Qm=Object.freeze({__proto__:null,default:{title:"Components/Payout Status Alert"},Test:()=>e("sqm-payout-status-alert",null),InformationRequired:()=>e("sqm-payout-status-alert",{demoData:{states:Zm}}),VerifyIdentity:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:REQUIRED"}}}),VerifyIdentityRequiredInternal:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:INTERNAL"}}}),VerifyIdentityReviewInternal:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:REVIEW"}}}),VerifyIdentityFailedInternal:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:FAILED"}}}),W9ThresholdReached:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"OVER_W9_THRESHOLD"}}}),Hold:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"HOLD"}}}),Loading:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,loading:!0}}}),Error:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,error:!0}}}),NewPayeeReview:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"NEW_PAYEE_REVIEW"}}}),PaymentHoldOnChange:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"PAYMENT_HOLD_ON_CHANGE"}}}),BeneficiaryNameInvalid:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"BENEFICIARY_NAME_INVALID"}}}),BeneficiaryNameMismatch:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"BENEFICIARY_NAME_MISMATCH"}}}),BankTaxNameMismatch:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"BANK_TAX_NAME_MISMATCH"}}}),WithdrawalSettingsInvalid:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"WITHDRAWAL_SETTINGS_INVALID"}}}),PaymentReturned:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"PAYMENT_RETURNED"}}})}),ep={selectedRegion:"Country / Region of Indirect Tax",searchForCountryText:"",province:"Province",indirectTaxNumber:"Indirect Tax",isRegisteredQST:"I am registered for QST Tax",isRegisteredSubRegionIncomeTax:"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.",qstNumber:"QST Number",subRegion:"Sub-region",subRegionTaxNumberLabel:"Income tax number",error:{indirectTaxNumber:"Indirect Tax is required",fieldRequiredError:"{fieldName} is required"}},tp=g({Container:{width:"100%",display:"flex",flexDirection:"column",alignItems:"center",padding:"20px",gap:"10px",margin:"auto",textAlign:"center",border:"var(--sqm-border-thickness) solid var(--sqm-border-color)"}}),np=tp.toString(),ap=t=>{const{classes:n}=tp,{text:a}=t;return e("div",null,e("style",{type:"text/css"},np),e("div",{class:n.Container},e("sl-icon",{style:{width:"50px",height:"50px",color:"var(--sl-color-neutral-500)"},name:"clock"}),e("p",{style:{margin:"0"}},a.docusignExpired)))},rp={states:{loading:!1,hide:!1,formState:{selectedRegion:"United Kindom",vatNumber:12345,countryCode:"UK"}},data:{countries:[{countryCode:"CA",displayName:"Canada"}]},text:ep},op={states:{loading:!1,hide:!1,formState:{province:"British Columbia",indirectTaxNumber:1234}},data:{countries:[{countryCode:"CA",displayName:"Canada"}]},text:ep},ip=Object.freeze({__proto__:null,default:{title:"Components/Tax Form Slot Views"},RegisteredInOtherRegion:()=>e(Ne,Object.assign({},rp)),RegisteredInCanada:()=>e(IndirectDetailsSlotView,Object.assign({},op)),RegisteredInOtherRegionWithErrors:()=>e(Ne,Object.assign({},rp,{states:{...rp.states,formState:{...rp.states.formState,errors:{vatNumber:!0,selectedRegion:!0}}}})),RegisteredInCanadaWithErrors:()=>e(IndirectDetailsSlotView,Object.assign({},op,{states:{...op.states,formState:{...op.states.formState,errors:{province:!0,indirectTaxNumber:!0}}}})),DocusignExpired:()=>e(ap,null)}),sp={states:{error:"",loading:!1},callbacks:{submit:async e=>await e},content:{invalidEmailErrorMessage:"Must be a valid email address",requiredFieldErrorMessage:"Cannot be empty",paddingTop:"large",paddingRight:"large",paddingBottom:"large",paddingLeft:"large",fraudErrorMessage:"Our team will review this referral. If approved, you and your friend will receive your rewards. Need help? Reach out to our Support team.",fraudErrorMessageTitle:"Looks like you tried referring yourself"}},lp=Object.freeze({__proto__:null,default:{title:"Components/Email Registration",parameters:{}},Default:()=>e(y,Object.assign({},sp)),HasFirstNameLastName:()=>e(y,Object.assign({},{...sp,content:{...sp.content,includeName:!0}})),WithSlots:()=>e(y,Object.assign({},{...sp,content:{...sp.content,topSlot:e("div",null,"Hello this is the top slot"),bottomSlot:e("div",null,"Hello this is the bottom slot")}})),NoBorder:()=>e(y,Object.assign({},{...sp,content:{...sp.content,hideBorder:!0}})),BackgroundColor:()=>e(y,Object.assign({},{...sp,content:{...sp.content,backgroundColor:"aquamarine"}})),Loading:()=>e(y,Object.assign({},{...sp,states:{error:"",loading:!0}})),Error:()=>e(y,Object.assign({},{...sp,states:{error:"Something went wrong. Please try again.",loading:!1}})),FraudError:()=>e(y,Object.assign({},{...sp,states:{error:"FRAUD",loading:!1}})),EmptyEmailError:()=>e(y,Object.assign({},{...sp,states:{error:"Something went wrong. Please try again.",loading:!1,registrationFormState:{validationErrors:{email:"Email cannot be empty"}}}}))}),dp={states:{success:!1,leadFormState:{},error:"",loading:!1,referralCode:"ABC123"},callbacks:{submit:()=>console.log("Submit!"),inputFunction:()=>{},resetForm:()=>{}},refs:{formRef:{}},content:{submitLabel:"Submit",pageLabel:"Submit your information",resubmitFormLabel:"Refer Another Friend",requiredFieldErrorMessage:"Cannot be empty",invalidEmailErrorMessage:"Must be a valid email address",submitSuccessHeader:"Referral submitted",submitSuccessDescription:"Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.",submitErrorHeader:"An error occurred while submitting",submitErrorDescription:"Please try again later. If the problem continues, contact Support"}},up={...dp,states:{...dp.states,success:!0,error:null},content:{...dp.content,pageLabel:"Refer your friend"}},cp={...dp,states:{...dp.states,error:"Something went wrong. Please try again.",leadFormState:{validationErrors:{firstName:"Please enter a first name",lastName:"Please enter a last name",email:"Please enter a valid email"}}}},mp={...dp,states:{...dp.states,loading:!0}},pp={...dp,content:{...dp.content,formData:e("div",null,e("sqm-lead-input-field",{"field-name":"firstName","field-label":"First Name","field-type":"text","required-field-error-message":"Please enter a first name"}),e("sqm-lead-input-field",{"field-name":"lastName","field-label":"Last Name","field-type":"text","required-field-error-message":"Please enter a last name"}),e("sqm-lead-input-field",{"field-name":"email","field-label":"Email","field-type":"email","required-field-error-message":"Please enter a valid email address"}),e("sqm-lead-dropdown-field",null))}},hp=Object.freeze({__proto__:null,default:{title:"Components/Lead Form"},Default:()=>e(Te,Object.assign({},dp)),LeadSubmitSuccess:()=>e(Te,Object.assign({},up)),LeadSubmitWithError:()=>e(Te,Object.assign({},cp)),LeadSubmitLoading:()=>e(Te,Object.assign({},mp)),FieldsHidden:()=>e("sqm-lead-form",{demoData:{states:{leadFormState:{},error:"",success:!1,loading:!0,referralCode:"ABC123"}}}),SlottedInputs:()=>e(Te,Object.assign({},pp))}),gp={states:{leadFormState:{validationErrors:{},loading:!1,disabled:!1,initialData:{}}},content:{fieldName:"firstName",fieldLabel:"First Name",fieldType:"text",optionalLabel:"(Optional)",requiredFieldErrorMessage:"Please {fieldAction} a {fieldLabel}",fieldOptional:!1}},fp=Object.freeze({__proto__:null,default:{title:"Components/Lead Form Input Field"},Default:()=>e(Be,Object.assign({},gp)),WithError:()=>e(Be,Object.assign({},gp,{states:{...gp.states,leadFormState:{...gp.states.leadFormState,validationErrors:{firstName:"Please enter a first name"}}}})),Disabled:()=>e(Be,Object.assign({},gp,{states:{...gp.states,leadFormState:{...gp.states.leadFormState,disabled:!0}}})),WithInitialValue:()=>e(Be,Object.assign({},gp,{states:{...gp.states,leadFormState:{...gp.states.leadFormState,initialData:{firstName:"Jane"}}}}))}),bp={states:{leadFormState:{validationErrors:{},loading:!1,disabled:!1,initialData:{}}},content:{dropdownName:"country",dropdownLabel:"Country",requiredFieldErrorMessage:"Please select a country",optionalLabel:"(Optional)",dropdownOptional:!1,multiple:!1,selectOptions:[e("sl-menu-item",{value:"red"},"Canada"),e("sl-menu-item",{value:"blue"},"United States"),e("sl-menu-item",{value:"green"},"Mexico")]}},xp=Object.freeze({__proto__:null,default:{title:"Components/Lead Form Dropdown Field"},Default:()=>e(Ae,Object.assign({},bp)),Multiple:()=>e(Ae,Object.assign({},bp,{content:{...bp.content,multiple:!0}})),WithError:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,validationErrors:{country:"Please select a country"}}}})),Disabled:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,disabled:!0}}})),Loading:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,loading:!0}}})),WithInitialValue:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,initialData:{country:"Canada"}}}}))}),wp={states:{leadFormState:{validationErrors:{}}},content:{checkboxName:"terms",checkboxLabel:"By signing up you agree to the {labelLink}",checkboxLabelLink:"https://example.com",checkboxLabelLinkText:"Terms and Conditions",errorMessage:"{checkboxLabel} Must be checked"}},yp=na((()=>e(v,Object.assign({},wp)))),vp=na((()=>e(v,Object.assign({},wp,{content:{...wp.content,checkboxLabel:"I Agree"}})))),qp=na((()=>e(v,Object.assign({},wp,{states:{...wp.states,leadFormState:{validationErrors:{terms:"{checkboxLabel} Must be checked"}}}})))),Ep=na((()=>e(v,Object.assign({},wp,{states:{...wp.states,leadFormState:{validationErrors:{terms:"{checkboxLabel} Must be checked"}}},content:{...wp.content,errorMessage:"This checkbox must be checked to continue"}})))),Cp=Object.freeze({__proto__:null,default:{title:"Components/Lead Checkbox Field"},Default:yp,CustomLabel:vp,Error:qp,CustomError:Ep}),Tp=[{countryCode:"US",displayName:"United States"},{countryCode:"CA",displayName:"Canada"},{countryCode:"GB",displayName:"United Kingdom"},{countryCode:"AU",displayName:"Australia"},{countryCode:"DE",displayName:"Germany"},{countryCode:"FR",displayName:"France"},{countryCode:"ES",displayName:"Spain"}],Ap=[{currencyCode:"USD",displayName:"US Dollar"},{currencyCode:"CAD",displayName:"Canadian Dollar"},{currencyCode:"GBP",displayName:"British Pound"},{currencyCode:"EUR",displayName:"Euro"},{currencyCode:"AUD",displayName:"Australian Dollar"}],Dp={id:"partner-123",brandedSignup:!0,countryCode:"US",currency:"USD",billingAddress:"123 Main St",billingCity:"San Francisco",billingState:"CA",billingCountryCode:"US",billingPostalCode:"94102",phoneNumberCountryCode:"US",phoneNumber:"4155551234",currentTaxDocument:null,taxInformation:null,requiredTaxDocumentType:null,withdrawalSettings:{paymentMethod:"PAYPAL",paypalEmailAddress:null,bankCountry:null,bankAccountNumber:null,paymentSchedulingType:"BALANCE_THRESHOLD",paymentThreshold:null,paymentDay:null},payoutsAccount:{hold:!1,holdReasons:[],balance:"0"}},kp={states:{step:"1",hideState:!1,hideSteps:!1,disabled:!1,loadingError:!1,loading:!1,isPartner:!1,isUser:!1,formState:{firstName:"",lastName:"",email:"user@example.com",countryCode:"US",currency:"USD",phoneNumberCountryCode:"US",phoneNumber:"",address:"",city:"",state:"",postalCode:"",allowBankingCollection:!1,errors:{}}},data:{regionLabelEnum:"STATE",regions:[{label:"California",value:"CA"},{label:"New York",value:"NY"},{label:"Texas",value:"TX"},{label:"Florida",value:"FL"},{label:"Washington",value:"WA"}],countries:Tp,phoneCountries:Tp,allCountries:Tp,allCurrencies:Ap,currencies:Ap,partnerData:void 0,userData:void 0},callbacks:{setCurrencySearch:e=>console.log("setCurrencySearch",e),setCountrySearch:e=>console.log("setCountrySearch",e),setPhoneCountrySearch:e=>console.log("setPhoneCountrySearch",e),onSubmit:e=>console.log("onSubmit",e),onFormChange:(e,t)=>console.log("onFormChange",e,t)},text:{formStep:"Step {step} of {count}",firstName:"First Name",lastName:"Last Name",email:"Email",country:"Country",phoneNumber:"Phone Number",address:"Address",city:"City",state:"State",province:"Province",region:"Region",postalCode:"Postal Code",currency:"Currency",currencyHelpText:"Select your preferred currency for payouts",allowBankingCollection:"I agree to the {termsAndConditionsLink}",personalInformation:"Personal Information",continueButton:"Continue",isPartnerAlertHeader:"Partner Account Detected",isPartnerAlertDescription:"Some fields are pre-filled from your partner account. Contact {supportLink} if you need to make changes.",termsAndConditionsLabel:"Terms and Conditions",termsAndConditionsLink:"https://example.com/terms",taxAndPayoutsDescription:"Please provide your information for tax and payout purposes.",supportLink:"support@example.com",error:{generalTitle:"Error",generalDescription:"An error occurred. Please contact {supportLink} for assistance.",invalidCharacterError:"Invalid characters detected",fieldRequiredError:"{fieldName} is required",fieldInvalidError:"Invalid value",loadingErrorAlertHeader:"Loading Error",loadingErrorAlertDescription:"Failed to load form data. Please contact {supportLink}."},searchForCountryText:"Search for country...",searchForCurrencyText:"Search for currency..."},refs:{formRef:{current:null},currencyRef:{current:null},phoneCountryRef:{current:null}}},Sp=Object.freeze({__proto__:null,default:{title:"Components/User Info Form View"},Default:()=>e(Fe,Object.assign({},kp)),WithPrefilledData:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,firstName:"John",lastName:"Doe",email:"john.doe@example.com",countryCode:"US",currency:"USD",phoneNumberCountryCode:"US",phoneNumber:"4155551234",address:"123 Main St",city:"San Francisco",state:"CA",postalCode:"94102"}}})),Loading:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,loading:!0}})),LoadingError:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,loadingError:!0}})),WithValidationErrors:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,firstName:"John",lastName:"Doe",errors:{firstName:"First Name is required",lastName:"Last Name is required",phoneNumber:"Phone Number is required",address:"Address contains invalid characters",city:"City is required",state:"State is required",postalCode:"Postal Code is required",currency:"Currency is required",countryCode:"Country is required",allowBankingCollection:"You must accept the terms and conditions"}}}})),WithGeneralError:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,errors:{general:"An error occurred. Please contact support for assistance."}}}})),PartnerAccount:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,isPartner:!0,formState:{...kp.states.formState,firstName:"Jane",lastName:"Smith",email:"jane.smith@example.com",countryCode:"US",currency:"USD",phoneNumberCountryCode:"US",phoneNumber:"4155551234",address:"123 Main St",city:"San Francisco",state:"CA",postalCode:"94102"}},data:{...kp.data,partnerData:Dp}})),UserAccount:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,isUser:!0,formState:{...kp.states.formState,firstName:"Bob",lastName:"Johnson",email:"bob.johnson@example.com"}},data:{...kp.data,userData:{firstName:"Bob",lastName:"Johnson"}}})),UserAccountMissingLastName:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,isUser:!0,formState:{...kp.states.formState,firstName:"Bob",lastName:void 0,email:"bob.johnson@example.com"}},data:{...kp.data,userData:{firstName:"Bob",lastName:void 0}}})),CanadianAddress:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,firstName:"Alice",lastName:"Martin",countryCode:"CA",state:"BC"}},data:{...kp.data,regionLabelEnum:"PROVINCE",regions:[{label:"British Columbia",value:"BC"},{label:"Ontario",value:"ON"},{label:"Quebec",value:"QC"},{label:"Alberta",value:"AB"}]}})),NoStateRegion:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,hideState:!0,formState:{...kp.states.formState,firstName:"Pierre",lastName:"Dubois",countryCode:"FR"}},data:{...kp.data,regionLabelEnum:void 0,regions:[]}})),HideSteps:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,hideSteps:!0}})),DisabledForm:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,disabled:!0,formState:{...kp.states.formState,firstName:"Disabled",lastName:"User"}}}))});function Rp(e){return e instanceof Map?e.clear=e.delete=e.set=function(){throw new Error("map is read-only")}:e instanceof Set&&(e.add=e.clear=e.delete=function(){throw new Error("set is read-only")}),Object.freeze(e),Object.getOwnPropertyNames(e).forEach((function(t){var n=e[t];"object"!=typeof n||Object.isFrozen(n)||Rp(n)})),e}var Pp=Rp;Pp.default=Rp;class Ip{constructor(e){void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}ignoreMatch(){this.isMatchIgnored=!0}}function Np(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}function Fp(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t];return t.forEach((function(e){for(const t in e)n[t]=e[t]})),n}const Op=e=>!!e.kind;class Lp{constructor(e,t){this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){this.buffer+=Np(e)}openNode(e){if(!Op(e))return;let t=e.kind;e.sublanguage||(t=`${this.classPrefix}${t}`),this.span(t)}closeNode(e){Op(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){this.buffer+=`<span class="${e}">`}}class Bp{constructor(){this.rootNode={children:[]},this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){this.top.children.push(e)}openNode(e){const t={kind:e,children:[]};this.add(t),this.stack.push(t)}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{Bp._collapse(e)})))}}class _p extends Bp{constructor(e){super(),this.options=e}addKeyword(e,t){""!==e&&(this.openNode(t),this.addText(e),this.closeNode())}addText(e){""!==e&&this.add(e)}addSublanguage(e,t){const n=e.root;n.kind=t,n.sublanguage=!0,this.add(n)}toHTML(){return new Lp(this,this.options).value()}finalize(){return!0}}function Gp(e){return e?"string"==typeof e?e:e.source:null}const jp=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./,Wp="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",Up={begin:"\\\\[\\s\\S]",relevance:0},Mp={className:"string",begin:"'",end:"'",illegal:"\\n",contains:[Up]},Vp={className:"string",begin:'"',end:'"',illegal:"\\n",contains:[Up]},Hp={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},zp=function(e,t,n={}){const a=Fp({className:"comment",begin:e,end:t,contains:[]},n);return a.contains.push(Hp),a.contains.push({className:"doctag",begin:"(?:TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):",relevance:0}),a},Yp=zp("//","$"),$p=zp("/\\*","\\*/"),Xp=zp("#","$");var Jp=Object.freeze({__proto__:null,MATCH_NOTHING_RE:/\b\B/,IDENT_RE:"[a-zA-Z]\\w*",UNDERSCORE_IDENT_RE:"[a-zA-Z_]\\w*",NUMBER_RE:"\\b\\d+(\\.\\d+)?",C_NUMBER_RE:Wp,BINARY_NUMBER_RE:"\\b(0b[01]+)",RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",SHEBANG:(e={})=>{const t=/^#![ ]*\//;return e.binary&&(e.begin=function(...e){return e.map((e=>Gp(e))).join("")}(t,/.*\b/,e.binary,/\b.*/)),Fp({className:"meta",begin:t,end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},BACKSLASH_ESCAPE:Up,APOS_STRING_MODE:Mp,QUOTE_STRING_MODE:Vp,PHRASAL_WORDS_MODE:Hp,COMMENT:zp,C_LINE_COMMENT_MODE:Yp,C_BLOCK_COMMENT_MODE:$p,HASH_COMMENT_MODE:Xp,NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?",relevance:0},C_NUMBER_MODE:{className:"number",begin:Wp,relevance:0},BINARY_NUMBER_MODE:{className:"number",begin:"\\b(0b[01]+)",relevance:0},CSS_NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",relevance:0},REGEXP_MODE:{begin:/(?=\/[^/\n]*\/)/,contains:[{className:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[Up,{begin:/\[/,end:/\]/,relevance:0,contains:[Up]}]}]},TITLE_MODE:{className:"title",begin:"[a-zA-Z]\\w*",relevance:0},UNDERSCORE_TITLE_MODE:{className:"title",begin:"[a-zA-Z_]\\w*",relevance:0},METHOD_GUARD:{begin:"\\.\\s*[a-zA-Z_]\\w*",relevance:0},END_SAME_AS_BEGIN:function(e){return Object.assign(e,{"on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{t.data._beginMatch!==e[1]&&t.ignoreMatch()}})}});function Kp(e,t){"."===e.input[e.index-1]&&t.ignoreMatch()}function Zp(e,t){t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",e.__beforeBegin=Kp,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,void 0===e.relevance&&(e.relevance=0))}function Qp(e){Array.isArray(e.illegal)&&(e.illegal=function(...e){return"("+e.map((e=>Gp(e))).join("|")+")"}(...e.illegal))}function eh(e){if(e.match){if(e.begin||e.end)throw new Error("begin & end are not supported with match");e.begin=e.match,delete e.match}}function th(e){void 0===e.relevance&&(e.relevance=1)}const nh=["of","and","for","in","not","or","if","then","parent","list","value"];function ah(e,t,n="keyword"){const a={};return"string"==typeof e?r(n,e.split(" ")):Array.isArray(e)?r(n,e):Object.keys(e).forEach((function(n){Object.assign(a,ah(e[n],t,n))})),a;function r(e,n){t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((function(t){const n=t.split("|");a[n[0]]=[e,rh(n[0],n[1])]}))}}function rh(e,t){return t?Number(t):function(e){return nh.includes(e.toLowerCase())}(e)?0:1}function oh(e,{}){function t(t,n){return new RegExp(Gp(t),"m"+(e.case_insensitive?"i":"")+(n?"g":""))}class n{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(e,t){t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),this.matchAt+=function(e){return new RegExp(e.toString()+"|").exec("").length-1}(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null);const e=this.regexes.map((e=>e[1]));this.matcherRe=t(function(e,t="|"){let n=0;return e.map((e=>{n+=1;const t=n;let a=Gp(e),r="";for(;a.length>0;){const e=jp.exec(a);if(!e){r+=a;break}r+=a.substring(0,e.index),a=a.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?r+="\\"+String(Number(e[1])+t):(r+=e[0],"("===e[0]&&n++)}return r})).map((e=>`(${e})`)).join(t)}(e),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex;const t=this.matcherRe.exec(e);if(!t)return null;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),a=this.matchIndexes[n];return t.splice(0,n),Object.assign(t,a)}}class a{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex;let n=t.exec(e);if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}return n&&(this.regexIndex+=n.position+1,this.regexIndex===this.count&&this.considerAll()),n}}if(e.compilerExtensions||(e.compilerExtensions=[]),e.contains&&e.contains.includes("self"))throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");return e.classNameAliases=Fp(e.classNameAliases||{}),function n(r,o){const i=r;if(r.isCompiled)return i;[eh].forEach((e=>e(r,o))),e.compilerExtensions.forEach((e=>e(r,o))),r.__beforeBegin=null,[Zp,Qp,th].forEach((e=>e(r,o))),r.isCompiled=!0;let s=null;if("object"==typeof r.keywords&&(s=r.keywords.$pattern,delete r.keywords.$pattern),r.keywords&&(r.keywords=ah(r.keywords,e.case_insensitive)),r.lexemes&&s)throw new Error("ERR: Prefer `keywords.$pattern` to `mode.lexemes`, BOTH are not allowed. (see mode reference) ");return s=s||r.lexemes||/\w+/,i.keywordPatternRe=t(s,!0),o&&(r.begin||(r.begin=/\B|\b/),i.beginRe=t(r.begin),r.endSameAsBegin&&(r.end=r.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),r.end&&(i.endRe=t(r.end)),i.terminatorEnd=Gp(r.end)||"",r.endsWithParent&&o.terminatorEnd&&(i.terminatorEnd+=(r.end?"|":"")+o.terminatorEnd)),r.illegal&&(i.illegalRe=t(r.illegal)),r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((function(e){return function(e){return e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((function(t){return Fp(e,{variants:null},t)}))),e.cachedVariants?e.cachedVariants:ih(e)?Fp(e,{starts:e.starts?Fp(e.starts):null}):Object.isFrozen(e)?Fp(e):e}("self"===e?r:e)}))),r.contains.forEach((function(e){n(e,i)})),r.starts&&n(r.starts,o),i.matcher=function(e){const t=new a;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"}))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"}),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t}(i),i}(e)}function ih(e){return!!e&&(e.endsWithParent||ih(e.starts))}function sh(e){const t={props:["language","code","autodetect"],data:function(){return{detectedLanguage:"",unknownLanguage:!1}},computed:{className(){return this.unknownLanguage?"":"hljs "+this.detectedLanguage},highlighted(){if(!this.autoDetect&&!e.getLanguage(this.language))return console.warn(`The language "${this.language}" you specified could not be found.`),this.unknownLanguage=!0,Np(this.code);let t={};return this.autoDetect?(t=e.highlightAuto(this.code),this.detectedLanguage=t.language):(t=e.highlight(this.language,this.code,this.ignoreIllegals),this.detectedLanguage=this.language),t.value},autoDetect(){return!this.language||(e=this.autodetect,Boolean(e||""===e));var e},ignoreIllegals:()=>!0},render(e){return e("pre",{},[e("code",{class:this.className,domProps:{innerHTML:this.highlighted}})])}};return{Component:t,VuePlugin:{install(e){e.component("highlightjs",t)}}}}const lh={"after:highlightElement":({el:e,result:t,text:n})=>{const a=uh(e);if(!a.length)return;const r=document.createElement("div");r.innerHTML=t.value,t.value=function(e,t,n){let a=0,r="";const o=[];function i(){return e.length&&t.length?e[0].offset!==t[0].offset?e[0].offset<t[0].offset?e:t:"start"===t[0].event?e:t:e.length?e:t}function s(e){r+="<"+dh(e)+[].map.call(e.attributes,(function(e){return" "+e.nodeName+'="'+Np(e.value)+'"'})).join("")+">"}function l(e){r+="</"+dh(e)+">"}function d(e){("start"===e.event?s:l)(e.node)}for(;e.length||t.length;){let t=i();if(r+=Np(n.substring(a,t[0].offset)),a=t[0].offset,t===e){o.reverse().forEach(l);do{d(t.splice(0,1)[0]),t=i()}while(t===e&&t.length&&t[0].offset===a);o.reverse().forEach(s)}else"start"===t[0].event?o.push(t[0].node):o.pop(),d(t.splice(0,1)[0])}return r+Np(n.substr(a))}(a,uh(r),n)}};function dh(e){return e.nodeName.toLowerCase()}function uh(e){const t=[];return function e(n,a){for(let r=n.firstChild;r;r=r.nextSibling)3===r.nodeType?a+=r.nodeValue.length:1===r.nodeType&&(t.push({event:"start",offset:a,node:r}),a=e(r,a),dh(r).match(/br|hr|img|input/)||t.push({event:"stop",offset:a,node:r}));return a}(e,0),t}const ch={},mh=e=>{console.error(e)},ph=(e,...t)=>{console.log(`WARN: ${e}`,...t)},hh=(e,t)=>{ch[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),ch[`${e}/${t}`]=!0)},gh=Np,fh=Fp,bh=Symbol("nomatch");var xh=function(e){const t=Object.create(null),n=Object.create(null),a=[];let r=!0;const o=/(^(<[^>]+>|\t|)+|\n)/gm,i="Could not find the language '{}', did you forget to load/include a language module?",s={disableAutodetect:!0,name:"Plain text",contains:[]};let l={noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:null,__emitter:_p};function d(e){return l.noHighlightRe.test(e)}function u(e,t,n,a){let r="",o="";"object"==typeof t?(r=e,n=t.ignoreIllegals,o=t.language,a=void 0):(hh("10.7.0","highlight(lang, code, ...args) has been deprecated."),hh("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),o=e,r=t);const i={code:r,language:o};E("before:highlight",i);const s=i.result?i.result:c(i.language,i.code,n,a);return s.code=i.code,E("after:highlight",s),s}function c(e,n,o,s){function d(e,t){const n=w.case_insensitive?t[0].toLowerCase():t[0];return Object.prototype.hasOwnProperty.call(e.keywords,n)&&e.keywords[n]}function u(){null!=E.subLanguage?function(){if(""===A)return;let e=null;if("string"==typeof E.subLanguage){if(!t[E.subLanguage])return void T.addText(A);e=c(E.subLanguage,A,!0,C[E.subLanguage]),C[E.subLanguage]=e.top}else e=m(A,E.subLanguage.length?E.subLanguage:null);E.relevance>0&&(D+=e.relevance),T.addSublanguage(e.emitter,e.language)}():function(){if(!E.keywords)return void T.addText(A);let e=0;E.keywordPatternRe.lastIndex=0;let t=E.keywordPatternRe.exec(A),n="";for(;t;){n+=A.substring(e,t.index);const a=d(E,t);if(a){const[e,r]=a;T.addText(n),n="",D+=r,e.startsWith("_")?n+=t[0]:T.addKeyword(t[0],w.classNameAliases[e]||e)}else n+=t[0];e=E.keywordPatternRe.lastIndex,t=E.keywordPatternRe.exec(A)}n+=A.substr(e),T.addText(n)}(),A=""}function p(e){return e.className&&T.openNode(w.classNameAliases[e.className]||e.className),E=Object.create(e,{parent:{value:E}}),E}function h(e,t,n){let a=function(e,t){const n=e&&e.exec(t);return n&&0===n.index}(e.endRe,n);if(a){if(e["on:end"]){const n=new Ip(e);e["on:end"](t,n),n.isMatchIgnored&&(a=!1)}if(a){for(;e.endsParent&&e.parent;)e=e.parent;return e}}if(e.endsWithParent)return h(e.parent,t,n)}function g(e){return 0===E.matcher.regexIndex?(A+=e[0],1):(R=!0,0)}function f(e){const t=e[0],a=n.substr(e.index),r=h(E,e,a);if(!r)return bh;const o=E;o.skip?A+=t:(o.returnEnd||o.excludeEnd||(A+=t),u(),o.excludeEnd&&(A=t));do{E.className&&T.closeNode(),E.skip||E.subLanguage||(D+=E.relevance),E=E.parent}while(E!==r.parent);return r.starts&&(r.endSameAsBegin&&(r.starts.endRe=r.endRe),p(r.starts)),o.returnEnd?0:t.length}let b={};function x(t,a){const i=a&&a[0];if(A+=t,null==i)return u(),0;if("begin"===b.type&&"end"===a.type&&b.index===a.index&&""===i){if(A+=n.slice(a.index,a.index+1),!r){const t=new Error("0 width match regex");throw t.languageName=e,t.badRule=b.rule,t}return 1}if(b=a,"begin"===a.type)return function(e){const t=e[0],n=e.rule,a=new Ip(n),r=[n.__beforeBegin,n["on:begin"]];for(const n of r)if(n&&(n(e,a),a.isMatchIgnored))return g(t);return n&&n.endSameAsBegin&&(n.endRe=new RegExp(t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")),n.skip?A+=t:(n.excludeBegin&&(A+=t),u(),n.returnBegin||n.excludeBegin||(A=t)),p(n),n.returnBegin?0:t.length}(a);if("illegal"===a.type&&!o){const e=new Error('Illegal lexeme "'+i+'" for mode "'+(E.className||"<unnamed>")+'"');throw e.mode=E,e}if("end"===a.type){const e=f(a);if(e!==bh)return e}if("illegal"===a.type&&""===i)return 1;if(S>1e5&&S>3*a.index)throw new Error("potential infinite loop, way more iterations than matches");return A+=i,i.length}const w=y(e);if(!w)throw mh(i.replace("{}",e)),new Error('Unknown language: "'+e+'"');const v=oh(w,{plugins:a});let q="",E=s||v;const C={},T=new l.__emitter(l);!function(){const e=[];for(let t=E;t!==w;t=t.parent)t.className&&e.unshift(t.className);e.forEach((e=>T.openNode(e)))}();let A="",D=0,k=0,S=0,R=!1;try{for(E.matcher.considerAll();;){S++,R?R=!1:E.matcher.considerAll(),E.matcher.lastIndex=k;const e=E.matcher.exec(n);if(!e)break;const t=x(n.substring(k,e.index),e);k=e.index+t}return x(n.substr(k)),T.closeAllNodes(),T.finalize(),q=T.toHTML(),{relevance:Math.floor(D),value:q,language:e,illegal:!1,emitter:T,top:E}}catch(t){if(t.message&&t.message.includes("Illegal"))return{illegal:!0,illegalBy:{msg:t.message,context:n.slice(k-100,k+100),mode:t.mode},sofar:q,relevance:0,value:gh(n),emitter:T};if(r)return{illegal:!1,relevance:0,value:gh(n),emitter:T,language:e,top:E,errorRaised:t};throw t}}function m(e,n){n=n||l.languages||Object.keys(t);const a=function(e){const t={relevance:0,emitter:new l.__emitter(l),value:gh(e),illegal:!1,top:s};return t.emitter.addText(e),t}(e),r=n.filter(y).filter(q).map((t=>c(t,e,!1)));r.unshift(a);const o=r.sort(((e,t)=>{if(e.relevance!==t.relevance)return t.relevance-e.relevance;if(e.language&&t.language){if(y(e.language).supersetOf===t.language)return 1;if(y(t.language).supersetOf===e.language)return-1}return 0})),[i,d]=o,u=i;return u.second_best=d,u}const p={"before:highlightElement":({el:e})=>{l.useBR&&(e.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ /]*>/g,"\n"))},"after:highlightElement":({result:e})=>{l.useBR&&(e.value=e.value.replace(/\n/g,"<br>"))}},h=/^(<[^>]+>|\t)+/gm,g={"after:highlightElement":({result:e})=>{l.tabReplace&&(e.value=e.value.replace(h,(e=>e.replace(/\t/g,l.tabReplace))))}};function f(e){let t=null;const a=function(e){let t=e.className+" ";t+=e.parentNode?e.parentNode.className:"";const n=l.languageDetectRe.exec(t);if(n){const t=y(n[1]);return t||(ph(i.replace("{}",n[1])),ph("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}return t.split(/\s+/).find((e=>d(e)||y(e)))}(e);if(d(a))return;E("before:highlightElement",{el:e,language:a}),t=e;const r=t.textContent,o=a?u(r,{language:a,ignoreIllegals:!0}):m(r);E("after:highlightElement",{el:e,result:o,text:r}),e.innerHTML=o.value,function(e,t,a){const r=t?n[t]:a;e.classList.add("hljs"),r&&e.classList.add(r)}(e,a,o.language),e.result={language:o.language,re:o.relevance,relavance:o.relevance},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.relevance,relavance:o.second_best.relevance})}const b=()=>{b.called||(b.called=!0,hh("10.6.0","initHighlighting() is deprecated.  Use highlightAll() instead."),document.querySelectorAll("pre code").forEach(f))};let x=!1;function w(){"loading"!==document.readyState?document.querySelectorAll("pre code").forEach(f):x=!0}function y(e){return e=(e||"").toLowerCase(),t[e]||t[n[e]]}function v(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{n[e.toLowerCase()]=t}))}function q(e){const t=y(e);return t&&!t.disableAutodetect}function E(e,t){const n=e;a.forEach((function(e){e[n]&&e[n](t)}))}"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(function(){x&&w()}),!1),Object.assign(e,{highlight:u,highlightAuto:m,highlightAll:w,fixMarkup:function(e){return hh("10.2.0","fixMarkup will be removed entirely in v11.0"),hh("10.2.0","Please see https://github.com/highlightjs/highlight.js/issues/2534"),t=e,l.tabReplace||l.useBR?t.replace(o,(e=>"\n"===e?l.useBR?"<br>":e:l.tabReplace?e.replace(/\t/g,l.tabReplace):e)):t;var t},highlightElement:f,highlightBlock:function(e){return hh("10.7.0","highlightBlock will be removed entirely in v12.0"),hh("10.7.0","Please use highlightElement now."),f(e)},configure:function(e){e.useBR&&(hh("10.3.0","'useBR' will be removed entirely in v11.0"),hh("10.3.0","Please see https://github.com/highlightjs/highlight.js/issues/2559")),l=fh(l,e)},initHighlighting:b,initHighlightingOnLoad:function(){hh("10.6.0","initHighlightingOnLoad() is deprecated.  Use highlightAll() instead."),x=!0},registerLanguage:function(n,a){let o=null;try{o=a(e)}catch(e){if(mh("Language definition for '{}' could not be registered.".replace("{}",n)),!r)throw e;mh(e),o=s}o.name||(o.name=n),t[n]=o,o.rawDefinition=a.bind(null,e),o.aliases&&v(o.aliases,{languageName:n})},unregisterLanguage:function(e){delete t[e];for(const t of Object.keys(n))n[t]===e&&delete n[t]},listLanguages:function(){return Object.keys(t)},getLanguage:y,registerAliases:v,requireLanguage:function(e){hh("10.4.0","requireLanguage will be removed entirely in v11."),hh("10.4.0","Please see https://github.com/highlightjs/highlight.js/pull/2844");const t=y(e);if(t)return t;throw new Error("The '{}' language is required, but not loaded.".replace("{}",e))},autoDetection:q,inherit:fh,addPlugin:function(e){!function(e){e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{e["before:highlightBlock"](Object.assign({block:t.el},t))}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{e["after:highlightBlock"](Object.assign({block:t.el},t))})}(e),a.push(e)},vuePlugin:sh(e).VuePlugin}),e.debugMode=function(){r=!1},e.safeMode=function(){r=!0},e.versionString="10.7.3";for(const e in Jp)"object"==typeof Jp[e]&&Pp(Jp[e]);return Object.assign(e,Jp),e.addPlugin(p),e.addPlugin(lh),e.addPlugin(g),e}({});xh.registerLanguage("gherkin",(function(e){return{name:"Gherkin",aliases:["feature"],keywords:"Feature Background Ability Business Need Scenario Scenarios Scenario Outline Scenario Template Examples Given And Then But When",contains:[{className:"symbol",begin:"\\*",relevance:0},{className:"meta",begin:"@[^@\\s]+"},{begin:"\\|",end:"\\|\\w*$",contains:[{className:"string",begin:"[^|]+"}]},{className:"variable",begin:"<",end:">"},e.HASH_COMMENT_MODE,{className:"string",begin:'"""',end:'"""'},e.QUOTE_STRING_MODE]}}));const wh=({story:t},n)=>{var a;let r,o=null===(a=t.parent.parameters)||void 0===a?void 0:a.scenario;try{r=xh.highlight("gherkin",o)}catch(e){}return e("div",null,e("details",null,e("summary",null,"Specs"),r&&e("pre",{innerHTML:r.value})),n)},yh=[Sp,Ei,wi,Ai,sm,es,pm,$a,Ii,$o,Di,xm,cm,zr,Ho,Mi,vo,Wo,mi,om,Ps,Mo,Xo,ea,Zi,Qi,js,Zs,Ss,qs,ul,pl,Ro,ms,Ys,lu,$l,zd,_m,ts,km,ka,Va,yl,Sa,Cs,Ko,jl,Ki,po,$i,Lo,ni,xu,Du,Im,Qc,gl,hl,Xr,Qr,ps,Cc,Vc,fu,Jo,Pl,Lm,Zo,Bm,im,wm,mm,Ao,Il,_l,Yi,Hi,lp,Co,Jm,Dl,Fm,ip,Km,Vm,al,os,Ya,Os,Um,jm,as,Qm,ql,Om,hp,fp,xp,Cp],vh=class{constructor(e){t(this,e),this.ignored=!0,l(this)}disconnectedCallback(){}render(){const{class:t,children:a}=function(t,n){var a=n.h,i=void 0===a?e:a,s=n.title,l=void 0===s?"Stencilbook":s,d=n.homepage,u=void 0===d?i("h3",null,"Select a story!"):d,c=n.addons,m=void 0===c?[]:c,p=r((function(){return t.map(Yn).reduce(zn,{_:[]})}),t),h=decodeURIComponent(window.location.hash).replace("#",""),g=o($n(h,p)),f=g[0],b=g[1],x=null==f?void 0:f.key,w=o(!0),y=w[0],v=w[1],q=o(!1),E=q[0],C=q[1],T=function(){return i("div",{class:"dynamic-display-wrapper"},i("button",{class:E?"active":"",onClick:function(){return C((function(e){return!e}))}},"Toggle Dark Background"),i("button",{class:y?"active":"",onClick:function(){return v((function(e){return!e}))}},"Toggle Sidebar"))},A=Gn(Mn||(Mn=Wn(["\n    max-width: ",";\n    margin-left: ",";\n  "])),"1124px",y?"250px":"0px"),D=Gn(Vn||(Vn=Wn(["\n    display: none;\n  "])));document.body.style.backgroundColor=E?"#232323":"#fafafa";var k=function(e){var t=e.selected,n=m.reduce((function(e,n){return function(){return i(n,{story:jn({},t)},i(e,null))}}),null==t?void 0:t.story);return i(n,null)},S=function(){return i("div",{class:"story-book-outer-div"},i("div",{class:"story-div "+(y?"":D)},i("div",{class:"header",onClick:function(){b(void 0)}},i("h2",null,l)),i("ul",{class:"parentStoryList"},Object.keys(p).sort().map((function(e){return i("div",{class:"group-wrapper"},"_"!==e&&i("h4",{class:"group-header"},e),p[e].map((function(t){return i("li",{class:"parentStory"},i("details",{style:{marginBottom:"10px"}},i("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map((function(n){var a=e+"-"+t.story.title+"-"+n,r=t.subs[n].storyName||qt(n);return i("div",{class:"subStory "+(x===a?"selected":"")},i("a",{onClick:function(){return function(e){window.location.hash=encodeURIComponent(e),b($n(e,p))}(a)}},r))}))))})))})))),i(T,null),i("div",{class:"component "+A},!x&&u,x&&i("div",null,i("h3",null,f.label),i(k,{selected:f}))))};return{class:Hn,children:i(S,null),View:S,selected:f}}(yh,{h:e,title:"Mint Components",addons:[ta,De,wh]}),[i,s]=o("Default"),[l,d]=o(!0);return e(n,{class:t,onClick:{}},e("sqm-brand-selector",null),a)}};export{vh as sqm_stencilbook}
+`;function yu(){const e="testestest",t=e;return window.widgetIdent={tenantAlias:"test_a8b41jotf8a1v",appDomain:"https://staging.referralsaasquatch.com",programId:"sam-partner-test-2"},s((()=>(u({accountId:t,id:e,jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs"}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:e,accountId:t}}function vu(){const{id:e,accountId:t}=yu(),[n,a]=o(10),[r,i]=o(100),[s,{data:l,errors:d}]=h(wu);return{states:{points:n,rate:r},data:{id:e,accountId:t,data:l,errors:d},callbacks:{exchange:s,setPoints:a,setRate:i}}}const qu=t=>{const{states:n,data:a,callbacks:r}=t;return e("div",null,e("div",null,e("label",null,"Rate:"),e("input",{value:n.rate,onInput:e=>r.setRate(e.target.value)})),e("input",{value:n.points,onInput:e=>r.setPoints(e.target.value)}),e("button",{onClick:()=>r.exchange(t.input)},"Exchange"),e("details",null,e("summary",null,"response"),e("h4",null,"data"),e("div",{style:{maxWidth:"500px"}},e("pre",{style:{width:"500px",whiteSpace:"pre-wrap"}},JSON.stringify(a.data))),e("h4",null,"errors"),e("div",{style:{maxWidth:"500px"}},e("pre",{style:{maxWidth:"500px",whiteSpace:"pre-wrap"}},JSON.stringify(a.errors)))))},Eu=na((()=>(yu(),e("sqm-reward-exchange-list",{"list-type":"something"})))),Cu=na((()=>{const{states:t,data:n,callbacks:a}=vu();return e(qu,{states:t,data:n,callbacks:a,input:{exchangeRewardInput:{userId:n.id,accountId:n.accountId,redeemCreditInput:{amount:t.points,unit:"POINT"},globalRewardKey:"gc1"}}})})),Tu=na((()=>{const{states:t,data:n,callbacks:a}=vu();return e(qu,{states:t,data:n,callbacks:a,input:{exchangeRewardInput:{userId:n.id,accountId:n.accountId,redeemCreditInput:{amount:t.points,unit:"POINT"},globalRewardKey:"gc1",rewardInput:{valueInCents:Math.ceil(t.points*t.rate)}}}})})),Au=na((()=>{const{states:t,data:n,callbacks:a}=vu();return e(qu,{states:t,data:n,callbacks:a,input:{exchangeRewardInput:{userId:n.id,accountId:n.accountId,redeemCreditInput:{amount:t.points,unit:"POINT"},rewardInput:{type:"CREDIT",unit:"foo",assignedCredit:Math.ceil(t.points*t.rate)}}}})})),Du=Object.freeze({__proto__:null,default:{title:"Hooks / useRewardExchange"},RewardList:Eu,FixedGlobalReward:Cu,VariableGlobalReward:Tu,VariableCreditReward:Au}),ku={id:"61c100117a82a376d8804166",type:"CREDIT",value:19,unit:"Points",name:null,dateGiven:1640038417468,meta:{message:"***CUSTOMER NOTE MESSAGE***"},dateExpires:null,dateCancelled:null,dateRedeemed:null,dateScheduledFor:null,fuelTankCode:null,fuelTankType:null,currency:null,prettyValue:"19 Points",prettyValueNumber:"19",prettyAvailableNumber:"19",prettyRedeemedNumber:"0",statuses:["AVAILABLE","PENDING"],pendingReasons:["US_TAX","MISSING_PAYOUT_CONFIGURATION"],globalRewardKey:null,rewardSource:"MANUAL",prettyRedeemedCredit:"0 Points",prettyAssignedCredit:"19 Points",prettyAvailableValue:"19 Points",exchangedRewardRedemptionTransaction:null,referral:null,rewardRedemptionTransactions:{data:null}},Su={connected:!0,taxHandlingEnabled:!0,publisher:{requiredTaxDocumentType:"W8BEN",currentTaxDocument:{status:"NOT_VERIFIED",type:"W8BEN",dateCreated:321321487},withdrawalSettings:{paymentMethod:"BANK_TRANSFER"},payoutsAccount:null}},Ru=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku},availableText:"{availableAmount} remaining"}),Pu={prettyAvailableValue:"10 Points",prettyRedeemedCredit:"9 Points",prettyRedeemedNumber:"9",dateRedeemed:1640038417468},Iu=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Pu},availableText:"{availableAmount} remaining"}),Nu=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...ac},redeemedText:"{redeemedAmount} redeemed"}),Fu={prettyAvailableValue:"0 Points",prettyAvailableNumber:"0",prettyRedeemedCredit:"19 Points",prettyRedeemedNumber:"19",dateRedeemed:1640038417468},Ou=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Fu},availableText:"{availableAmount} remaining"}),Lu={prettyValue:"1 Point",prettyValueNumber:"1"},Bu={prettyValue:"19 Points with a really really super duper longest name ever in the world wide web",prettyValueNumber:"19"},_u=()=>e("div",{style:{maxWidth:"222px"}},e("sqm-rewards-table-reward-cell",{reward:{...ku,...Bu},availableText:"{availableAmount} remaining"})),Gu=()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,type:"FUELTANK",prettyValue:"Fueltank Reward",fuelTankCode:"AFUELTANKCODE"},copyText:"Copied"}),ju=()=>e("div",{style:{maxWidth:"222px"}},e("sqm-rewards-table-reward-cell",{reward:{...ku,type:"FUELTANK",prettyValue:"Long Fueltank Reward",fuelTankCode:"AFUELTANKCODE123456789123456789123456789123456789"},copyText:"Copied"})),Wu=()=>e("sqm-rewards-table-source-cell",{reward:ku,rewardSourceText:"Manual"}),Uu={exchangedRewardRedemptionTransaction:{id:"61c100117a82a376d88041196",creditRedeemed:1,prettyRedeemedCredit:"1 Money",unit:"TESTUNIT",dateRedeemed:1640038417173,redeemedRewards:null,exchangedRewards:null}},Mu={firstName:"Bartholomew",lastName:"Christopher-Johnston Wallace",imageUrl:null},Vu={firstName:"John",lastName:"Doe",imageUrl:null},Hu={firstName:"",lastName:"",imageUrl:null},zu=(e=null)=>({rewardSource:"FRIEND_SIGNUP",referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:e,referredUser:e}}),Yu=(e=null)=>({rewardSource:"REFERRED",referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:e,referredUser:e}}),$u=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(Vu)},referralText:"Referral to"}),Xu=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...Yu(Vu)},referralText:"Referred by"}),Ju=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(null)},referralText:"Referral to",deletedUserText:"Deleted User"}),Ku=()=>e("sqm-rewards-table-source-cell",{reward:{...ku,rewardSource:"REFERRED",referral:null},referralText:"Referral to",deletedReferralText:"Deleted Referral"}),Zu=()=>e("sqm-rewards-table-status-cell",{statusText:"Available",reward:ku}),Qu={dateExpires:1640038417468},ec=()=>e("sqm-rewards-table-status-cell",{statusText:"Available",reward:{...ku,...Qu},expiryText:"Expires"}),tc={statuses:["REDEEMED"],dateRedeemed:1640038417468},nc=()=>e("sqm-rewards-table-status-cell",{statusText:"Redeemed",reward:{...ku,...tc}}),ac={statuses:["CANCELLED"],dateCancelled:1640038417468},rc=()=>e("sqm-rewards-table-status-cell",{statusText:"Cancelled",reward:{...ku,...ac}}),oc={statuses:["EXPIRED"],dateExpires:1640038417468},ic={statuses:["PENDING"]},sc={statuses:["PAYOUT_SENT"]},lc={statuses:["PAYOUT_FAILED"]},dc={statuses:["PAYOUT_CANCELLED"],dateCancelled:1355612521321},uc={pendingReasons:["US_TAX"]},cc={pendingReasons:["SCHEDULED"],dateScheduledFor:1640038417468},mc={pendingReasons:["UNHANDLED_ERROR"]},pc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic}}),hc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku},taxConnection:{...Su,publisher:{requiredTaxDocumentType:"W8BEN",currentTaxDocument:{status:""},...Su.publisher}}}),gc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku},taxConnection:{...Su,publisher:{...Su.publisher,requiredTaxDocumentType:"W8BEN",currentTaxDocument:{status:"INACTIVE",type:"W8BEN",dateCreated:321321487}}}}),fc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku},taxConnection:{...Su,publisher:{...Su.publisher,requiredTaxDocumentType:"W8BEN",currentTaxDocument:null}}}),bc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,pendingReasons:["MISSING_PAYOUT_CONFIGURATION"]}}),xc=()=>e("sqm-rewards-table-status-cell",{statusText:"Payout Sent",reward:{...ku,...sc},taxConnection:Su}),wc=()=>e("sqm-rewards-table-status-cell",{statusText:"Payout Failed",reward:{...ku,...lc}}),yc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic,...mc}}),vc=()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:null,referredUser:null,fraudData:{moderationStatus:"PENDING",autoModerationStatus:"PENDING",manualModerationStatus:"PENDING"}}}}),qc=()=>e("sqm-rewards-table-status-cell",{statusText:"Denied",reward:{...ku,dateCancelled:1e4,referral:{id:"123",dateConverted:1640038417173,dateReferralStarted:1640038417173,dateReferralPaid:1640038417173,dateModerated:1640038417173,dateReferralEnded:null,moderationStatus:null,rewards:null,referrerUser:null,referredUser:null,fraudData:{moderationStatus:"DENIED",autoModerationStatus:"DENIED",manualModerationStatus:"DENIED"}}}}),Ec=()=>e("sqm-rewards-table-date-cell",{date:1640038417468}),Cc=Object.freeze({__proto__:null,default:{title:"Components/Rewards Table Cell",parameters:{scenario:'@author:derek\n@owner:derek\nFeature: Reward Table Date Column\n\n    Shows the date of each reward\n\n    Background:\n        Given the date column is included in the reward table\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the date column is configurable\n        Given the "column-title" prop is set to <value>\n        Then the date column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Date received   |                 |\n            | My column title | My column title |\n\n    @motivating\n    Scenario Outline: A configurable date associated with the reward is shown for each reward\n        Given the "date-shown" prop is set to <dateType>\n        And a user with rewards\n        When they view the date column\n        Then for each reward the <rewardDate> is shown in the table\n        And the date is localized to the users locale\n        Examples:\n            | dateType         | rewardDate         |\n            | dateGiven        | date given         |\n            | dateExpires      | date expires       |\n            | dateCancelled    | date cancelled     |\n            | dateRedeemed     | date redeemed      |\n            | dateScheduledFor | date scheduled for |\n            |                  | date given         |@author:derek\n@owner:derek\nFeature: Reward Table reward Column\n\n    Shows the exact reward\n\n    Background:\n        Given the reward column is included in the reward table\n        And rewards with translations exist\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the reward column is configurable\n        Given the "column-title" prop is set to <value>\n        Then the reward column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Reward          |                 |\n            | My column title | My column title |\n\n    @motivating\n    Scenario: The reward column displays the prettyValue of the reward given\n        Given a user with a reward\n        When they view the rewards table\n        Then they see the name of their reward in the reward column\n        And the name is the prettyValue translated for the users locale\n\n    @motivating\n    @ui\n    Scenario: The reward column displays an availability bar if the reward is redeemable\n        Given a user with a <status> credit reward of <value>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <availabilityText>\n        Examples:\n            | status    | value     | percentage | availableAmount | availabilityText    |\n            | AVAILABLE | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | AVAILABLE | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | AVAILABLE | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n            | PENDING   | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | PENDING   | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | PENDING   | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column displays an availability bar if the reward was redeemable but had been cancelled or expired\n        Given a user with a credit reward of <value>\n        And the reward has <status>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <redeemedText>\n        Examples:\n            | status    | value     | percentage | redeemedAmount | redeemedText     |\n            | EXPIRED   | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | EXPIRED   | 10 Points | 80%        | 2 Point        | 2 Point redeemed |\n            | CANCELLED | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | CANCELLED | 10 Points | 20%        | 8 Point        | 8 Point redeemed |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn\'t display the availability bar if the reward is not redeemable\n        Given a user with a non credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column doesn\'t display the availability bar if the reward is only 1 reward unit\n        Given a user with a credit reward for 1 of a reward unit\n        And it has <status>\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n        Examples:\n            | status    |\n            | AVAILABLE |\n            | PENDING   |\n            | EXPIRED   |\n            | CANCELLED |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn\'t display the availability bar for redeemed credit rewards\n        Given a user with a "REDEEMED" credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario: Users can copy their fuel tank codes\n        Given a user with a fuel tank reward\n        When they view the rewards table\n        Then they see their fuel tank reward\n        And they see their fuel tank code bolded in blue\n        When they click on their code\n        Then a tool tip appears saying it has been copied to their clipboard\n        And their code is copied to their clipboard@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background:\n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the "column-title" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples:\n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format "Month-Day-Year"                                 |\n      | redeemed reward                                              | localized redemption date in format "Month-Day-Year"                             |\n      | expired reward                                               | localized expired date in format "Month-Day-Year"                                |\n      | cancelled reward                                             | localized cancelled date in format "Month-Day-Year"                              |\n      | pending reward with a end date                               | localized pending for date in format "Month-Day-Year"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user\'s Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward\'s pending reasons include "MISSING_PAYOUT_CONFIGURATION"\n    Then the status description will be\n      """\n      Complete your tax and cash payout setup to receive your rewards.\n      """\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the "status-text" prop is "{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the "expiry-text" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples:\n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the "column-title" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a "MANUAL" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as "Manual"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a "AUTOMATED" program reward\n    And the program has name "Loyalty Program"\n    When they view the rewards table\n    Then the source of their reward is displayed as "Loyalty Program"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the "reward-exchange-text" prop is <propValue>\n    And a user with a "MANUAL" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the "reward-source-text" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user\'s name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as "Anonymous User" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays "Anonymous User"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as "Deleted User" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays "Deleted User"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | "FRIEND_SIGNUP" | referrer | Referral to |\n      | "REFERRED"      | referred | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as "Deleted referral" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays "Deleted referral"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | "FRIEND_SIGNUP" | referrer | Referral to |\n      | "REFERRED"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the "reward-source-text" prop is "{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n'}},RewardsCellCreditSingle:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Lu}}),RewardsCellCreditFull:Ru,RewardsCellCreditPartial:Iu,RewardsCellCreditCancelled:Nu,RewardsCellCreditExpired:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...Pu,...oc},redeemedText:"{redeemedAmount} redeemed"}),RewardsCellCreditPending:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,...ic},availableText:"{availableAmount} remaining"}),RewardsCellCreditRedeemed:Ou,RewardsCellCreditLong:_u,RewardsCellNonCredit:()=>e("sqm-rewards-table-reward-cell",{reward:{...ku,type:"GIFTCARD",prettyValue:"SaaSquatch Giftcard"}}),RewardsCellFueltank:Gu,RewardsCellFueltankLong:ju,SourceCellManual:Wu,SourceCellProgram:()=>e("sqm-rewards-table-source-cell",{reward:{...ku,rewardSource:"AUTOMATED",program:{name:"Klip Loyalty"}},rewardSourceText:"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"}),SourceCellExchange:()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...Uu},rewardExchangeText:"Reward Exchange"}),SourceCellReferral:$u,SourceCellWithLongText:()=>e("div",{style:{width:"200px"}},e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(Mu)},referralText:"Referral to"})),SourceCellReferred:Xu,SourceCellAnonymousUser:()=>e("sqm-rewards-table-source-cell",{reward:{...ku,...zu(Hu)},referralText:"Referral to",anonymousUserText:"Anonymous User"}),SourceCellDeletedUser:Ju,SourceCellDeletedReferral:Ku,StatusCellAvailable:Zu,StatusCellAvailableExpiry:ec,StatusCellRedeemed:nc,StatusCellCancelled:rc,StatusCellExpired:()=>e("sqm-rewards-table-status-cell",{statusText:"Expired",reward:{...ku,...oc}}),StatusCellPending:pc,StatusCellPendingTaxReview:hc,StatusCellPendingNewTaxForm:gc,StatusCellPendingTaxSubmission:fc,StatusCellPendingPartnerCreation:bc,StatusCellPayoutSent:xc,StatusCellPayoutFailed:wc,StatusCellPayoutCancelled:()=>e("sqm-rewards-table-status-cell",{statusText:"Payout Cancelled",reward:{...ku,...dc}}),StatusCellPendingWithLongText:()=>e("div",{style:{width:"200px"}},e("sqm-rewards-table-status-cell",{statusText:"Pending for 300,000,000 months and some change",reward:{...ku,...ic}})),StatusCellPendingUsTax:()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic,...uc}}),StatusCellPendingScheduled:()=>e("sqm-rewards-table-status-cell",{statusText:"Pending",reward:{...ku,...ic,...cc}}),StatusCellPendingUnhandled:yc,StatusCellPendingReview:vc,StatusCellDenied:qc,DateCell:Ec,CustomerNoteCell:()=>e("sqm-rewards-table-customer-note-cell",{note:ku.meta.message}),EmptyCell:()=>e("sqm-rewards-table-date-cell",null)}),Tc=e("div",{slot:"loading",style:{display:"contents"}},e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null))),e("sqm-table-row",null,e("sqm-table-cell",{colspan:5},e("sl-skeleton",null)))),Ac=e("sqm-empty",{"empty-state-image":"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png","empty-state-header":"View your rewards","empty-state-text":"See all the rewards you have earned from referring friends and completing tasks"}),Dc=(e,t=!1,n=!1,a="Prev",r="Next",o="")=>({states:{hasPrev:!1,hasNext:!0,show:t?"empty":n?"loading":"rows",namespace:"sqm-rewards-table"},data:{textOverrides:{showLabels:!0,prevLabel:a,moreLabel:r},hiddenColumns:o,mdBreakpoint:799,smBreakpoint:599},callbacks:{prevPage:()=>console.log("Prev"),nextPage:()=>console.log("Next")},elements:{columns:["Rewards","Status","Source","Date received"],rows:e,emptyElement:Ac,loadingElement:Tc}}),kc=[e(Ru,null),e(Zu,null),e($u,null),e(Ec,null)],Sc=[e(Iu,null),e(ec,null),e(Xu,null),e(Ec,null)],Rc=[e(Nu,null),e(rc,null),e(Ku,null),e(Ec,null)],Pc=[e(Nu,null),e(rc,null),e(Ju,null),e(Ec,null)],Ic=[e(Ou,null),e(nc,null),e(Wu,null),e(Ec,null)],Nc=[e(Ou,null),e(qc,null),e(Wu,null),e(Ec,null)],Fc=[e(Ou,null),e(vc,null),e(Wu,null),e(Ec,null)],Oc=[e(_u,null),e(ec,null),e(Xu,null),e(Ec,null)],Lc=[e(Gu,null),e(pc,null),e(Wu,null),e(Ec,null)],Bc=[e(ju,null),e(yc,null),e(Wu,null),e(Ec,null)],_c=[e(Ou,null),e(xc,null),e($u,null),e(Ec,null)],Gc=[e(Ou,null),e(wc,null),e($u,null),e(Ec,null)],jc=[e(Ou,null),e(gc,null),e($u,null),e(Ec,null)],Wc=[e(Ou,null),e(bc,null),e($u,null),e(Ec,null)],Uc=[e(Ou,null),e(hc,null),e($u,null),e(Ec,null)],Mc=[e(Ou,null),e(fc,null),e($u,null),e(Ec,null)],Vc=Object.freeze({__proto__:null,default:{title:"Components/Rewards Table",parameters:{scenario:'@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And "View your rewards" in bold\n        And "See all the rewards you have earned from referring friends and completing tasks" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutia\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the "empty" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutia\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the "loading" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than "799px"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than "599px"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than "799px"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than "599px"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop "hidden-columns" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by "program-id" are shown\n        Given the table is configured with "program-id"\n        Then only rewards from the program with "program-id" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for "classic" programs,\n        thus we are filtering for rewards without programId\'s.\n\n        Given the "program-id" of the table is set to "classic"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutia\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with "hide-labels" set to "true"\n        Then the table is displayed without column headings'}},RewardsTable:()=>e(b,Object.assign({},Dc([kc,Ic,Pc,Rc,Sc,Nc,Fc,_c,Gc,jc,Wc,Mc,Uc]))),RewardsTableSingle:()=>e(b,Object.assign({},Dc([Lc]))),RewardsTableLong:()=>e(b,Object.assign({},Dc([Bc,Oc]))),RewardsTableEmpty:()=>e(b,Object.assign({},Dc([],!0))),RewardsTableLoading:()=>e(b,Object.assign({},Dc([],!1,!0))),CustomButtonTextTable:()=>e(b,Object.assign({},Dc([kc,Ic,Pc,Sc],!1,!1,"CUSTOM PREVIOUS TEXT","CUSTOM NEXT TEXT"))),ColumnsMobileHidden:()=>e(b,Object.assign({},Dc([kc,Ic,Pc,Sc],!1,!1,void 0,void 0,"0,1,2,3")))});function Hc(){const e="testestest",t=e;return window.widgetIdent={tenantAlias:"test_a8b41jotf8a1v",appDomain:"https://staging.referralsaasquatch.com"},s((()=>(u({accountId:t,id:e,jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs"}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:e,accountId:t}}function zc({token:e,id:t}){const n=t;return window.widgetIdent={tenantAlias:"test_a74miwdpofztj",appDomain:"https://staging.referralsaasquatch.com"},s((()=>(u({accountId:n,id:t,jwt:e}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:t,accountId:n}}const Yc=na((()=>e("sqm-rewards-table",{"per-page":"4"},e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-date-column",null)))),$c=na((()=>(Hc(),c("sam-partner-test-2"),e("sqm-rewards-table",null,e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-date-column",null))))),Xc=na((()=>(Hc(),c(void 0),e("sqm-rewards-table",null,e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-date-column",null))))),Jc=na((()=>(zc({token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",id:"samenglish"}),c(void 0),e("sqm-rewards-table",{"per-page":"4"},e("sqm-rewards-table-reward-column",null),e("sqm-rewards-table-status-column",null),e("sqm-rewards-table-source-column",null),e("sqm-rewards-table-date-column",null))))),Kc=na((()=>(zc({token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",id:"samturkey"}),c(void 0),e("sqm-rewards-table",{"per-page":"4","more-label":"Daha","prev-label":"Öncesi","empty-state-text":"Henüz Referans Yok"},e("sqm-rewards-table-reward-column",{"column-title":"Ödüller","redeemed-text":"{redeemedAmount} kullanıldı","available-text":"{availableAmount} mevcut"}),e("sqm-rewards-table-source-column",{"column-title":"Kullanıcılar","anonymous-user":"Anonim Kullanıcı","deleted-user":"Silinmiş Kullanıcı","reward-exchange-text":"Ödülleri Kulannın","referral-text":"{rewardSource, select, FRIEND_SIGNUP {Referans} REFERRED {Yönlendiren} other {}}","reward-source-text":"{rewardSource, select, MANUAL {Manuel} AUTOMATED {Otomatik} other {}}"}),e("sqm-rewards-table-status-column",{"column-title":"Statut","status-text":"{status, select, AVAILABLE {Mevcut} PENDING {Bekleniyor} EXPIRED {Geçmiş} REDEEMED {Kullanılmış} CANCELED {İptal Edildi} other {Kullanılamaz} }","expiry-text":"Bitiyor "}),e("sqm-rewards-table-date-column",{"column-title":"Tarih"}))))),Zc=na((()=>(zc({token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",id:"samfrench"}),c(void 0),e("sqm-rewards-table",{"per-page":"4","more-label":"Plus","prev-label":"Précédent","empty-state-text":"Aucune Récompenses Maintenant"},e("sqm-rewards-table-reward-column",{"column-title":"Récompenses","redeemed-text":"{redeemedAmount} rachetée","available-text":"{availableAmount} disponible"}),e("sqm-rewards-table-source-column",{"column-title":"Utilisateur","anonymous-user":"Utilisateur Anonyme","deleted-user":"Utilisateur Supprimé","reward-exchange-text":"Échange de Récompenses","referral-text":"{rewardSource, select, FRIEND_SIGNUP {Référence à} REFERRED {Référencé par} other {}}","reward-source-text":"{rewardSource, select, MANUAL {Manuel} AUTOMATED {Automatique} other {}}"}),e("sqm-rewards-table-status-column",{"column-title":"Statut","status-text":"{status, select, AVAILABLE {Disponible} PENDING {Pendant} EXPIRED {Expiré} REDEEMED {Racheté} CANCELED {Annulé} other {Indisponible} }","expiry-text":"Expire sur "}),e("sqm-rewards-table-date-column",{"column-title":"Date de Réception"}))))),Qc=Object.freeze({__proto__:null,default:{title:"Hooks / useRewardsTable"},RewardTableDemoHook:Yc,RewardsTableWithProgram:$c,RewardsTableNoProgram:Xc,RewardsTableEn:Jc,RewardsTableTr:Kc,RewardsTableFr:Zc}),em=na((()=>e("div",null,e("button",{onClick:()=>d.push("/")},"/"),e("button",{onClick:()=>d.push("/foo")},"/foo"),e("button",{onClick:()=>d.push("/bar")},"/bar"),e("button",{onClick:()=>d.push("/baz/bang")},"/baz/bang"),e("button",{onClick:()=>d.push("/refer")},"/refer"),e("button",{onClick:()=>d.push("/refer/1")},"/refer/1"),e("button",{onClick:()=>d.push("/refer/2")},"/refer/2"),e("button",{onClick:()=>d.back()},"Back"),e("button",{onClick:()=>d.forward()},"Forward"),e("hr",null),e("sqm-router",{innerHTML:'\n    <template path="/foo"><h1>foo</h1>\n    \n    <p>These elements don\'t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.\n\n    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what\'s inside. See the Accessibility concerns section below for more details.</p>\n    </template>\n    <template path="/bar"><h2>bar</h2>\n    \n    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.\n    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>\n    </template>\n    <template path="/baz/bang"><h3>baz/bang</h3>\n    <pre>\n    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄\n    ░░▀███░░░░▀██░░░░██▀░░░░██░░\n    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░\n    ░░░░███░░░░░▀██▄█░░░░░░█░░░░\n    ░░░░░███░░░░░▀██░░░░░░█▀░░░░\n    ░░░░░░███░░░░▄███░░░░█▀░░░░░\n    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░\n    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░\n    ░░░░░░░░▀██▀░░░░░███░░░░░░░░\n    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░\n    </pre>\n    </template>\n    <template path="/refer/:page"><h3>/refer/:page</h3>\n    <pre>\n      refer/:page\n    </pre>\n    </template>\n'})))),tm=na((()=>e("div",null,e("button",{onClick:()=>d.push("/")},"/"),e("button",{onClick:()=>d.push("/foo")},"/foo"),e("button",{onClick:()=>d.push("/bar")},"/bar"),e("button",{onClick:()=>d.push("/baz/bang")},"/baz/bang"),e("button",{onClick:()=>d.push("/refer")},"/refer"),e("button",{onClick:()=>d.push("/refer/1")},"/refer/1"),e("button",{onClick:()=>d.push("/refer/2")},"/refer/2"),e("button",{onClick:()=>d.back()},"Back"),e("button",{onClick:()=>d.forward()},"Forward"),e("hr",null),e("sqm-router",{innerHTML:'\n    <sqm-route path="/foo"><h1>foo</h1>\n    \n    <p>These elements don\'t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.\n\n    Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what\'s inside. See the Accessibility concerns section below for more details.</p>\n    </sqm-route>\n    <sqm-route path="/bar"><h2>bar</h2>\n    <p>Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.\n    To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.</p>\n    </sqm-route>\n    <sqm-route path="/baz/bang"><h3>baz/bang</h3>\n    <pre>\n    ▄▄▄▄▄▄▄░▄▄▄▄▄▄▄░▄▄▄▄▄▄░▄▄▄▄▄\n    ░░▀███░░░░▀██░░░░██▀░░░░██░░\n    ░░░▀██░░░░░▀██░░▄█░░░░░▄█░░░\n    ░░░░███░░░░░▀██▄█░░░░░░█░░░░\n    ░░░░░███░░░░░▀██░░░░░░█▀░░░░\n    ░░░░░░███░░░░▄███░░░░█▀░░░░░\n    ░░░░░░░██▄░░▄▀░███░░█▀░░░░░░\n    ░░░░░░░▀██▄█▀░░░███▄▀░░░░░░░\n    ░░░░░░░░▀██▀░░░░░███░░░░░░░░\n    ░░░░░░░░░▀▀░░░░░░░▀░░░░░░░░░\n    </pre>\n    </sqm-route>\n    <sqm-route path="/refer/:page"><h3>/refer/:page</h3>\n    <pre>\n      refer/:page\n    </pre>\n    </sqm-route>\n'})))),nm=na((()=>e("div",null,e("button",{onClick:()=>d.push("/")},"/"),e("button",{onClick:()=>d.push("/foo")},"/foo"),e("hr",null),e("div",{style:{display:"flex",justifyContent:"space-around"}},e("sqm-router",{innerHTML:'<template path="/">\n      \n      <div>Column 1</div>\n      <div>Column 2 </div>\n      </template>'})))));function am(t){const{states:n,callbacks:a}=t;return[e("textarea",{style:{width:"100%",height:"300px"},onChange:e=>a.setEditedTemplate(e.target.value)},n.editedTemplate),e("button",{onClick:()=>a.setPreviewTemplate(n.editedTemplate)},"Update Preview"),e("label",null,"Current path:",e("input",{onInput:a.setPath,value:"/"})),e("div",{innerHTML:n.previewTemplate})]}const rm=na((()=>{const{states:t,callbacks:n}=function(e){const[t,n]=o(e),[a,r]=o(e);return{states:{previewTemplate:a,editedTemplate:t},callbacks:{setEditedTemplate:n,setPreviewTemplate:r,setPath:function(e){d.push(e.target.value)}}}}('\n<sqm-router>\n  <template path="/">\n  <div>hello world</div>\n  </template>\n</sqm-router>\n');return e(am,{states:t,callbacks:n})})),om=Object.freeze({__proto__:null,default:{title:"Tests/Router"},TemplateNavigation:em,RouteNavigation:tm,Styling:nm,RouterPlayground:rm}),im=Object.freeze({__proto__:null,default:{title:"Components/Scroll"},ScrollTag:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"scroll-tag-name":"sqm-text","button-text":"Scroll","scroll-animation":"smooth"}),e("div",{style:{position:"absolute",bottom:"0"}},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),ScrollId:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Scroll","scroll-id":"my-id","scroll-animation":"smooth"}),e("div",{style:{position:"absolute",bottom:"0"}},e("sqm-text",{slot:"label",id:"my-id"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),ScrollAutoAnimation:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Scroll","scroll-id":"my-id","scroll-animation":"auto"}),e("div",{style:{position:"absolute",bottom:"0"}},e("sqm-text",{slot:"label",id:"my-id"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),ScrollTabGroup:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Redeem rewards","scroll-id":"tab-3","scroll-animation":"smooth"}),e("div",{style:{position:"absolute",bottom:"0"},innerHTML:'\n              <sqm-tabs>\n              <sqm-tab header="Leaderboard">\n                <sqm-hero-image\n                  image-url="https://i.imgur.com/MVgOJn7.png"\n                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n                  layout="columns"\n                  image-percentage="33%"\n                  padding-image="large"\n                  padding-text="large"\n                  background-color=""\n                ></sqm-hero-image>\n                <sqm-leaderboard></sqm-leaderboard>\n              </sqm-tab>\n              <sqm-tab header="Referral history"\n              >\n                <sqm-referral-table></sqm-referral-table>\n              </sqm-tab>\n              <sqm-tab header="Reward history">\n                <sqm-rewards-table></sqm-rewards-table>\n              </sqm-tab>\n              <sqm-tab header="Redeem">\n                <sqm-reward-exchange-list></sqm-reward-exchange-list>\n              </sqm-tab>\n            </sqm-tabs>\n      '})),ScrollTabGroupInner:()=>e("div",{style:{position:"relative",height:"2000px"}},e("sqm-scroll",{"button-text":"Redeem rewards","scroll-tag-name":"sqm-reward-exchange-list"}),e("div",{style:{position:"absolute",bottom:"0"},innerHTML:'\n              <sqm-tabs>\n              <sqm-tab header="Leaderboard">\n                <sqm-hero-image\n                  image-url="https://i.imgur.com/MVgOJn7.png"\n                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n                  layout="columns"\n                  image-percentage="33%"\n                  padding-image="large"\n                  padding-text="large"\n                  background-color=""\n                ></sqm-hero-image>\n                <sqm-leaderboard></sqm-leaderboard>\n              </sqm-tab>\n              <sqm-tab header="Referral history"\n              >\n                <sqm-referral-table></sqm-referral-table>\n              </sqm-tab>\n              <sqm-tab header="Reward history">\n                <sqm-rewards-table></sqm-rewards-table>\n              </sqm-tab>\n              <sqm-tab header="Redeem">\n                <sqm-reward-exchange-list></sqm-reward-exchange-list>\n              </sqm-tab>\n            </sqm-tabs>\n      '})),ShoelaceProps:()=>e("div",null,e("div",{style:{display:"flex",gap:"60px"}},e("div",{style:{textAlign:"center"}},e("h3",null,"Type:"),e("sqm-scroll",{"button-type":"primary"},"Primary"),e("br",null),e("sqm-scroll",{"button-type":"success"},"Success"),e("br",null),e("sqm-scroll",{"button-type":"neutral"},"Neutral"),e("br",null),e("sqm-scroll",{"button-type":"warning"},"Warning"),e("br",null),e("sqm-scroll",{"button-type":"danger"},"Danger")),e("div",{style:{textAlign:"center"}},e("h3",null,"Outline:"),e("sqm-scroll",{outline:!0,"button-type":"primary"},"Primary"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"success"},"Success"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"neutral"},"Neutral"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"warning"},"Warning"),e("br",null),e("sqm-scroll",{outline:!0,"button-type":"danger"},"Danger"))),e("br",null)," ",e("hr",null),e("h3",null,"Text:"),e("sqm-scroll",{"button-type":"text"},"Text"),e("br",null)," ",e("hr",null),e("h3",null,"Size:"),e("sqm-scroll",{size:"small"},"Small"),e("br",null),e("sqm-scroll",{size:"medium"},"Medium"),e("br",null),e("sqm-scroll",{size:"large"},"Large"),e("br",null)," ",e("hr",null),e("h3",null,"Pill:"),e("sqm-scroll",{pill:!0},"Button"),e("br",null)," ",e("hr",null),e("h3",null,"Icon:"),e("sqm-scroll",{"button-type":"primary",iconName:"facebook"},"Icon Name"),e("br",null),e("sqm-scroll",{iconName:"gear",iconSlot:"prefix"},"Icon Slot Prefix"),e("br",null),e("sqm-scroll",{iconName:"gear",iconSlot:"suffix"},"Icon Slot Suffix"),e("br",null)," ",e("hr",null),e("h3",null,"Circle:"),e("sqm-scroll",{circle:!0},"X"),e("br",null)," ",e("hr",null),e("h3",null,"Mobile Friendly:"),e("sqm-scroll",{mobile:!0},"Button"),e("br",null)," ",e("hr",null))}),sm=Object.freeze({__proto__:null,default:{title:"Components/Share Button",parameters:{scenario:'@author:noah\n@owner:noah\nFeature: Share Button\n\n  The share button redirects users to a platform where they can share their referral link\n\n  @motivating\n  @ui\n  Scenario Outline: Share button displays for various platforms\n    Given the share button\'s medium prop is "<medium>"\n    And the button\'s child is text saying "BUTTON_TEXT"\n    When the share button is rendered\n    Then the button has text "BUTTON_TEXT"\n    And the button is <colour>\n    And it displays an <icon> beside the text\n    And clicking the button redirects to an appropriate link\n    Examples:\n      | medium        | colour       | icon               |\n      | facebook      | #1877f2      | facebook logo      |\n      | twitter       | #000000      | twitter x logo     |\n      | email         | #666666      | envelope           |\n      | direct        | brand colour | paper plane        |\n      | linkedin      | #0077b5      | linkedIn logo      |\n      | sms           | #34DA50      | chat bubble        |\n      | fbmessenger   | #0084ff      | messenger logo     |\n      | whatsapp      | #25d366      | whatsapp logo      |\n      | linemessenger | #00B300      | linemessenger logo |\n      | pinterest     | #e60023      | pinterest logo     |\n\n  @minutia\n  @ui\n  Scenario Outline: Default icons can be overwritten\n    Given a share button for any medium with <iconPropValue>\n    When the share button is rendered\n    Then it displays a <iconPropValue> instead of the share mediums default icon\n    Examples:\n      | iconPropValue |\n      | basket        |\n      | bluetooth     |\n      | bandaid       |\n\n  @motivating\n  @ui\n  Scenario Outline: Default share medium colours can be overwritten\n    Given a share button for any medium with <backgroundColourPropValue>\n    When the share button is rendered\n    Then the share button is <backgroundColourPropValue>\n    Examples:\n      | backgroundColourPropValue |\n      | blue                      |\n      | black                     |\n      | green                     |\n\n  @minutia\n  @ui\n  Scenario Outline: Share medium icons and text can be hidden\n    Given a share button with <prop> <value>\n    When the share button is rendered\n    Then <element> is hidden\n    Examples:\n      | prop     | value | element |\n      | hideicon | true  | icon    |\n      | hidetext | true  | text    |\n\n  @minutia\n  @ui\n  Scenario Outline: Icons can be on either side of the text\n    Given a share button with <iconslotPropValue>\n    When the share button is rendered\n    Then the icon is displayed to the <direction> of the text\n    Examples:\n      | iconslotPropValue | direction |\n      | suffix            | right     |\n      | prefix            | left      |\n      | prefix            | left      |\n\n  @minutia\n  Scenario: Unsupported browsers hide native share buttons\n    Given the share button\'s medium prop is "direct"\n    And your browser does not support the Web Share API\n    Then the share button is hidden\n\n  @minutia\n  Scenario: SMS share buttons are hidden on non Android and iOS devices\n    Given the share button\'s medium is "sms"\n    And the share button is being viewed on a device which is not an Android or iOS device\n    Then the share button is hidden\n\n  @motivating\n  Scenario: Facebook share buttons uses SquatchAndroid sharing features\n    Given the share button\'s medium is "facebook"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is available\n    Then tapping the share button opens the phone\'s Facebook app\n    And a share activity is opened with the share link prefilled\n\n  @motivating\n  Scenario: SquatchAndroid falls back to the Facebook website if no app is available\n    Given the share button\'s medium is "facebook"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is not available\n    Then tapping the share button opens the the Facebook mobile site in the device\'s browser\n    And a share activity is opened with the share link prefilled\n\n  @minutia\n  Scenario: A supplied program ID is used if available\n    Given the program id is supplied to the component in the "programId" prop\n    Then the program ID in the "programId" prop is used to retrieve share links\n\n  @minutia\n  Scenario: The program ID is automatically fetched from context\n    Given the program id is not supplied to the component in the "programId" prop\n    Then the program ID is retrieved from context'}},WithIconPrefix:()=>e(L,Object.assign({},{medium:"whatsapp",iconslot:"prefix"}),"Share"),WithIconSuffix:()=>e(L,Object.assign({},{medium:"whatsapp",iconslot:"suffix"}),"Share"),WithIconOverride:()=>e(L,Object.assign({},{medium:"facebook",icon:"person-badge"}),"Share"),TextStyle:()=>e(L,Object.assign({},{medium:"facebook",type:"text"}),"Share"),WithoutIcon:()=>e(L,Object.assign({},{medium:"facebook",hideicon:!0}),"Share"),WithoutText:()=>e(L,Object.assign({},{medium:"facebook",hidetext:!0}),"Share"),TextStyleWithoutIcon:()=>e(L,Object.assign({},{medium:"facebook",type:"text",hideicon:!0}),"Share"),WithCustomColorsAndBranding:()=>e(L,Object.assign({},{medium:"facebook",type:"text",backgroundcolor:"red",textcolor:"yellow",iconslot:"prefix",border:"2px solid yellow",borderradius:30}),"Facebook"),WithCustomBorderRadius:()=>e(L,Object.assign({},{medium:"facebook",type:"text",borderradius:8,iconslot:"prefix"}),"Facebook"),LinkLocationTest:()=>e(L,Object.assign({},{medium:"facebook",type:"text",onClick:void 0,messageLink:"https://www.example.com"}),"Click me"),FullStackIcon:()=>e("div",null,e("sqm-share-button",{medium:"facebook"},e("span",null,"Facebook")),e("br",null),e("sqm-share-button",{medium:"email"},e("span",null,"Email"))),AllMediums:()=>e("div",null,e("sqm-share-button",{medium:"facebook"},e("span",null,"Facebook")),e("br",null),e("sqm-share-button",{medium:"email"},e("span",null,"Email")),e("br",null),e("sqm-share-button",{medium:"whatsapp"},e("span",null,"WhatsApp")),e("br",null),e("sqm-share-button",{medium:"linkedin"},e("span",null,"Linkedin")),e("br",null),e("sqm-share-button",{medium:"twitter"},e("span",null,"Post on X")),e("br",null),e("sqm-share-button",{medium:"pinterest"},e("span",null,"Pinterest")),e("br",null),e("sqm-share-button",{medium:"fbmessenger"},e("span",null,"Messenger")),e("br",null),e("sqm-share-button",{medium:"sms"},e("span",null,"SMS")),e("br",null),e("sqm-share-button",{medium:"linemessenger"},e("span",null,"Line Messenger")),e("br",null),e("sqm-share-button",{medium:"direct"},e("span",null,"Share")))});function lm(){window.widgetIdent={tenantAlias:"test_a8b41jotf8a1v",appDomain:"https://staging.referralsaasquatch.com",programId:"sam-partner-test-2"},s((()=>(u({accountId:"testestest",id:"testestest",jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs"}),()=>{window.widgetIdent=void 0,u(void 0)})),[])}const dm=na((()=>{lm();const t="sam-partner-test-2",n=[ve({programId:t,medium:"facebook"}),ve({programId:t,medium:"twitter"}),ve({programId:t,medium:"email"}),ve({programId:t,medium:"direct"}),ve({programId:t,medium:"sms"})];return e("div",null,n.map((t=>e("div",null,e("button",{onClick:t.onClick},"Share link (",t.medium,")")))))})),um=na((()=>(lm(),e("div",null,["facebook","twitter","email","direct","sms"].map((t=>e("div",null,e("sqm-share-button",Object.assign({},{programId:"sam-partner-test-2",medium:t}),"BUTTON_TEXT")))))))),cm=Object.freeze({__proto__:null,default:{title:"Hooks / useShareButton"},BareBonesView:dm,RegularView:um}),mm=Object.freeze({__proto__:null,default:{title:"Components/Share Code",parameters:{scenario:'@author:johan\n@owner:johan\nFeature: Share Code\n\n  The share code component is a box that allows users to see and copy their referral code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code can be copied to their clipboard\n    Given tooltiptext is "hello tooltip"\n    When the component renders\n    Then there is a textbox with the user\'s share code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip\'s lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is "SHARECODE001"\n    And the component won\'t be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to "program-a"\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share code is for "program-a"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share code is for "program-b"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the share code component\n    And the component is rendered for "program-a"\n    When they click to copy their code\n    Then an "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic event is fired\n    And it is for "program-a"\n    And it has share medium "DIRECT"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the share code component\n    Then they see "Align text" props\n    And the default value is "left"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the share code component\n    Then they see "Style" props\n    And the default value is "icon"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n'}},ShareCode:()=>e("sqm-share-code",{tooltiptext:"Copied to Clipboard"}),CustomTooltipText:()=>e("sqm-share-code",{tooltiptext:"CUSTOM TOOLTIP TEXT"}),TextAlignCenter:()=>e("sqm-share-code",{textAlign:"center"}),TextAlignRight:()=>e("sqm-share-code",{textAlign:"right"}),CustomTooltipDuration:()=>e("sqm-share-code",{tooltiplifespan:5e3,tooltiptext:"CUSTOM TOOLTIP TEXT"}),CopyButton:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",isCopyIcon:!1})),CopyButtonBelow:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",buttonStyle:"button-below"})),Error:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",disabled:!0,open:!0,tooltiptext:"Copied!",error:!0}))}),pm=Object.freeze({__proto__:null,default:{title:"Components/Share Link",parameters:{scenario:'@author:johan\n@owner:johan\nFeature: Share Link\n\n  The share link component is a box that allows users to see and copy their share link for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users sharelink can be copied to their clipboard\n    Given tooltipText is "hello tooltip"\n    When the component renders\n    Then there is a textbox with the user\'s share link\n    When the clipboard icon is clicked\n    Then the link is copied to clipboard\n    And a tooltip appears for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip\'s lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share link is "https://www.example.com/sharelink/abc"\n    And the component won\'t be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to "program-a"\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share link is for "program-a"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to "program-b"\n    When the component renders\n    Then the share link is for "program-b"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their sharelink\n    Given a user viewing the share link component\n    And the component is rendered for "program-a"\n    When they click to copy their link\n    Then an "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT" analytic event is fired\n    And it is for "program-a"\n    And it has share medium "DIRECT"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share link text\n    Given a user is editing the share link component\n    Then they see "Align text" props\n    And the default value is "left"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the share link component\n    Then they see "Style" props\n    And the default value is "icon"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n'}},Default:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!"})),Tooltip:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",tooltiptext:"Some text for the tooltip",open:!0})),Disabled:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",disabled:!0,open:!0,tooltiptext:"Copied!"})),Error:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",disabled:!0,open:!0,tooltiptext:"Copied!",error:!0})),TextAlignCenter:()=>e("sqm-share-link",{textAlign:"center"}),TextAlignRight:()=>e("sqm-share-link",{textAlign:"right"}),CopyButton:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",isCopyIcon:!1})),CopyButtonBelow:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",buttonStyle:"button-below"})),CustomStyles:()=>e(f,Object.assign({},{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",backgroundColor:"#1ed760",borderRadius:"30px",textColor:"#121212",buttonType:"primary"})),CustomStylesWithDemoHooks:()=>e("sqm-share-link",{demoData:{copyString:"https://noah.example.com",open:!1,tooltiptext:"Copied!",backgroundColor:"#1ed760",borderRadius:"30px",textColor:"red",buttonType:"primary",borderColor:"#121212"},backgroundColor:"#1ed760"}),FullStack:()=>e("sqm-share-link",null)});function hm(){window.widgetIdent={tenantAlias:"test_a74miwdpofztj",appDomain:"https://staging.referralsaasquatch.com",programId:"klip-referral-program"},s((()=>(u({accountId:"zach.harrison@referralsaasquatch.com",id:"zach.harrison@referralsaasquatch.com",jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiemFjaC5oYXJyaXNvbkByZWZlcnJhbHNhYXNxdWF0Y2guY29tIiwiYWNjb3VudElkIjoiemFjaC5oYXJyaXNvbkByZWZlcnJhbHNhYXNxdWF0Y2guY29tIn19.Wi8Vd5r64g5n8VNhiY-v5cqFcLwGxPG3Wi3dVSfkFZI"}),()=>{window.widgetIdent=void 0,u(void 0)})),[])}const gm=na((()=>{hm();const t=qe({programId:"klip-referral-program",tooltiplifespan:0,tooltiptext:""});return e("div",null,"Sharelink:"," ",e("code",{style:{borderStyle:"solid",borderWidth:"1px",padding:"2px"}},t.copyString))})),fm=na((()=>(hm(),e(f,Object.assign({},qe({programId:"klip-referral-program",tooltiptext:"Copied to clipboard",tooltiplifespan:1e3})))))),bm=na((()=>(hm(),e(f,Object.assign({},qe({programId:"klip-referral-program",tooltiptext:"⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",tooltiplifespan:500})))))),xm=Object.freeze({__proto__:null,default:{title:"Hooks / useShareLink"},BareBonesView:gm,RegularView:fm,FastTooltip:bm}),wm=Object.freeze({__proto__:null,default:{title:"Components/Tabs",parameters:{scenario:'@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id "test123"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the "sq:program-id" event listener for the program section is removed\n    And the component does not use program-id "test123" to source its data\n    And falls back to the global program id'}},SimpleTabs:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n      </sqm-tabs>\n    '}),CustomColor:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs text-color="red">\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n      </sqm-tabs>\n    '}),ManyTabs:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> \n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n        <sqm-tab header="General">This is the general tab</sqm-tab>\n        <sqm-tab header="Custom">This is the custom tab</sqm-tab>\n        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>\n      </sqm-tabs>\n    '}),SingleTab:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n     <sqm-tabs>\n        <sqm-tab header="Redeem">\n          <sqm-reward-exchange-list></sqm-reward-exchange-list>\n        </sqm-tab>\n      </sqm-tabs>\n    '}),ReferralProgram:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n    <sqm-tabs>\n    <sqm-tab header="Leaderboard">\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table>\n        <sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),LoyaltyProgram:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="top">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table>\n        <sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),BottomTabs:()=>e("div",{style:{maxWidth:"700px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="bottom">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table\n        ><sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),LeftTabs:()=>e("div",{style:{maxWidth:"900px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="left">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table\n        ><sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '}),RightTabs:()=>e("div",{style:{maxWidth:"900px",margin:"auto"},innerHTML:'\n    <sqm-tabs placement="right">\n    <sqm-tab header="Leaderboard">\n      <sqm-hero-image\n        image-url="https://i.imgur.com/MVgOJn7.png"\n        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"\n        layout="columns"\n        image-percentage="33%"\n        padding-image="large"\n        padding-text="large"\n        background-color=""\n      ></sqm-hero-image>\n      <sqm-leaderboard></sqm-leaderboard>\n    </sqm-tab>\n    <sqm-tab header="Referral history">\n      <sqm-referral-table\n        ><sqm-referral-table-user-column\n          column-title="User"\n          anonymous-user="Anonymous User"\n          deleted-user="Deleted User"\n        >\n        </sqm-referral-table-user-column>\n        <sqm-referral-table-status-column\n          column-title="Referral status"\n          converted-status-text="Converted"\n          in-progress-status-text="In Progress"\n        >\n        </sqm-referral-table-status-column>\n        <sqm-referral-table-rewards-column\n          column-title="Rewards"\n          expiring-text="Expiring in"\n          fuel-tank-text="Your code is"\n          pending-for-text="{status} for {date}"\n          reward-received-text="Reward received on"\n          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-referral-table-rewards-column>\n        <sqm-referral-table-date-column\n          column-title="Date referred"\n          date-shown="dateReferralStarted"\n        >\n        </sqm-referral-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"\n          empty-state-header="View your referral details"\n          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"\n        >\n        </sqm-empty\n      ></sqm-referral-table>\n    </sqm-tab>\n    <sqm-tab header="Reward history">\n      <sqm-rewards-table\n        ><sqm-rewards-table-reward-column\n          available-text="{availableAmount} remaining"\n          column-title="Reward"\n          copy-text="Copied!"\n          redeemed-text="{redeemedAmount} redeemed"\n        >\n        </sqm-rewards-table-reward-column>\n        <sqm-rewards-table-source-column\n          anonymous-user="Anonymous User"\n          column-title="Source"\n          deleted-user="Deleted User"\n          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"\n          reward-exchange-text="Reward Exchange"\n          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"\n        >\n        </sqm-rewards-table-source-column>\n        <sqm-rewards-table-status-column\n          column-title="Status"\n          expiry-text="Expires on "\n          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"\n        >\n        </sqm-rewards-table-status-column>\n        <sqm-rewards-table-date-column\n          column-title="Date received"\n          date-shown="dateGiven"\n        >\n        </sqm-rewards-table-date-column>\n        <sqm-empty\n          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png"\n          empty-state-header="View your rewards"\n          empty-state-text="Refer friends and complete tasks to view the details of your rewards"\n        >\n        </sqm-empty\n      ></sqm-rewards-table>\n    </sqm-tab>\n    <sqm-tab header="Redeem">\n      <sqm-reward-exchange-list></sqm-reward-exchange-list>\n    </sqm-tab>\n  </sqm-tabs>  \n    '})});function ym({matrix:t,props:n,Component:a}){return function(...e){var t=[],n=e.length-1;return function a(r,o){for(var i=0,s=e[o].length;i<s;i++){var l=r.slice(0);l.push(e[o][i]),o==n?t.push(l):a(l,o+1)}}([],0),t}(...Object.keys(t).map((e=>t[e].map((t=>({[e]:t})))))).map((e=>e.reduce(((e,t)=>({...e,...t})),{}))).map((t=>{const r={...n,...t};return e("div",null,e(vm,{values:r}),e("hr",null)," ",e("br",null),e(a,Object.assign({},r)),e("br",null))}))}function vm({values:t}){return e("table",null,e("tbody",null,Object.keys(t).map((n=>e("tr",null,e("th",null,n),e("td",null,JSON.stringify(t[n])))))))}const qm=(t,n)=>e("div",{class:"resizer"},n),Em={display:"inline-flex",gap:"32px"},Cm={width:"347px",minWidth:"347px",resize:"horizontal",height:"fit-content",overflow:"hidden"},Tm={callbacks:{sendEvent:()=>{},onClick:()=>{}},content:{rewardAmount:"20",rewardUnit:"SaaSquatch Points",cardTitle:"Complete a survey",description:"Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",repeatable:!1,showProgressBar:!1,steps:!1,buttonText:"Take survey",buttonLink:"https://example.com/",openNewTab:!1,rewardDuration:null,completedText:"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",expiryMessage:"Ends {endDate}",startsOnMessage:"Starts {startDate}",endedMessage:"Ended {endDate}",finite:0,goal:1,locale:"en"},states:{progress:0,loading:!1,loadingEvent:!1}},Am={callbacks:{sendEvent:()=>{},onClick:()=>{}},content:{rewardAmount:"40",rewardUnit:"SaaSquatch Points",cardTitle:"Comment on 5 articles",description:"Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",repeatable:!1,showProgressBar:!0,steps:!0,buttonText:"Take survey",buttonLink:"https://example.com/",openNewTab:!1,completedText:"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",rewardDuration:null,expiryMessage:"Ends {endDate}",startsOnMessage:"Starts {startDate}",endedMessage:"Ended {endDate}",finite:0,goal:5,locale:"en"},states:{progress:1,loading:!1,loadingEvent:!1}},Dm={callbacks:{sendEvent:()=>{},onClick:()=>{}},content:{rewardAmount:"150",rewardUnit:"SaaSquatch Points",cardTitle:"Spend $500 at our Store",description:"Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",repeatable:!1,completedText:"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",showProgressBar:!0,steps:!1,progressBarUnit:"$",buttonText:"Take survey",buttonLink:"https://example.com/",openNewTab:!1,rewardDuration:null,expiryMessage:"Ends {endDate}",startsOnMessage:"Starts {startDate}",endedMessage:"Ended {endDate}",finite:0,goal:500,locale:"en"},states:{progress:100,loading:!1,loadingEvent:!1}},km=Object.freeze({__proto__:null,default:{title:"Components/Task Card/",parameters:{scenario:'@author:derek\n@owner:kutay\nFeature: Task Card\n\n\t@motivating\n\t@ui\n\tScenario: A header, body title and a CTA button are always displayed\n\t\tGiven the Task Card is configured with the following props\n\t\t\t| prop         | value             |\n\t\t\t| rewardAmount | "40"              |\n\t\t\t| rewardUnit   | "Points"          |\n\t\t\t| cardTitle    | Complete a survey |\n\t\t\t| buttonText   | Take Survey       |\n\t\tWhen a user views the Task Card\n\t\tThen they see "40 Points" as the heading\n\t\tAnd the "40" is bolded\n\t\tAnd they see "Complete a survey" bolded in the body\n\t\tAnd a details icon in the top right hand corner\n\t\tAnd a button with text "Take Survey" in the bottom right hand corner\n\t\tWhen they click the button\n\t\tThen they are redirected to "example.com" in a new window\n\n\t@motivating\n\t@ui\n\tScenario Outline: A Task Card description can be included but is not required\n\t\tGiven a Task Card\n\t\tAnd it has <descriptionPropValue>\n\t\tWhen a user views the Task card\n\t\tThen they <maySee> a chevron icon in the top right\n\t\tWhen they attempt to click the chevron\n\t\tThen they <maySee> the card description\n\t\tExamples:\n\t\t\t| descriptionPropValue             | maySee    |\n\t\t\t| This is my task card description | see       |\n\t\t\t|                                  | don\'t see |\n\n\t@motivating\n\tScenario Outline: CTA links can open in a new tab or the same tab\n\t\tGiven a Task Card\n\t\tAnd it has <openNewTabPropValue>\n\t\tWhen a user views the Task card\n\t\tAnd they click on the CTA\n\t\tThen they are redirected to the CTA link in <tab>\n\t\tExamples:\n\t\t\t| openNewTabPropValue | tab          |\n\t\t\t| true                | a new tab    |\n\t\t\t| false               | the same tab |\n\t\t\t| N/A                 | the same tab |\n\n\t@minutia\n\t@ui\n\tScenario: A loading state is displayed while the Task Card is loading\n\t\tGiven a Task Card component\n\t\tWhen a user views the Task Card\n\t\tThen a loading state is displayed\n\t\tWhen the Task Card has loaded\n\t\tThen the loading state disapears\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\n\t\tGiven a Task Card\n\t\tAnd it has <showProgressBarPropValue>\n\t\tWhen a user views the Task Card\n\t\tThen the progress bar <mayBe> displayed\n\t\tExamples:\n\t\t\t| showProgressBarPropValue | mayBe |\n\t\t\t| true                     | is    |\n\t\t\t| false                    | isn\'t |\n\t\t\t| N/A                      | isn\'t |\n\n\t@motivating\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\n\t\tGiven a Task card\n\t\tAnd it is configured to send an "test" event\n\t\tWhen a user views the Task card\n\t\tAnd clicks on the CTA\n\t\tThen a "test" event is sent to SSQT on the users behalf\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\n\n\t@motivating\n\t@ui\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\n\t\tGiven a Task Card\n\t\tAnd it has <repeatablePropValue>\n\t\tAnd a user who has already completed the task\n\t\tWhen they view the Task Card\n\t\tThen they see a brand colour checkmark icon beside the card heading\n\t\tAnd the card <mayBe> brand colour\n\t\tAnd the CTA button <mayBe> disabled\n\t\tAnd the CTA button <mayBe> grey\n\t\tExamples:\n\t\t\t| repeatablePropValue | mayBe |\n\t\t\t| true                | isn\'t |\n\t\t\t| false               | is    |\n\t\t\t| N/A                 | is    |\n\n\t@motivating\n\tScenario Outline: Display duration hides or shows a task\n\t\tGiven a Task Card\n\t\tAnd it has a "display-duration" interval\n\t\tWhen a user views the Card on <day>\n\t\tThen card <mayBeHidden>\n\t\tExamples:\n\t\t\t| day                       | mayBeHidden   |\n\t\t\t| a day before the interval | is hidden     |\n\t\t\t| a day during the interval | is not hidden |\n\t\t\t| a day after the interval  | is hidden     |\n\n\t@motivating\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\n\t\tGiven a Task Card\n\t\tAnd it has an "reward-duration" interval\n\t\tWhen a user views the card on <day>\n\t\tThen the card <mayBeDisabled>\n\t\tAnd it <mayHaveAlert>\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\n\t\tExamples:\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn\'t have expiry text                            |\n\t\t\t| a day during the expiry interval | isn\'t disabled | doesn\'t have an alert                                             | has the month, date, year and time the task expires |\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn\'t have expiry text                            |\n\n\t@motivating\n\tScenario Outline: Task Card dates support localization\n\t\tGiven a Task Card\n\t\tAnd it\'s configured with a expiry duration interval\n\t\tWhen a user with <locale> views the task card <atTime>\n\t\tThen they <seeDate> translated for <locale>\n\t\tExamples:\n\t\t\t| atTime              | locale | seeDate         |\n\t\t\t| before the interval | en     | Task Start Date |\n\t\t\t| during the interval | en     | Task End Date   |\n\t\t\t| after the interval  | en     | Task Ended Date |\n\t\t\t| before the interval | fr     | Task Start Date |\n\t\t\t| during the interval | fr     | Task End Date   |\n\t\t\t| after the interval  | fr     | Task Ended Date |\n\n\t@motivating\n\t@ui\n\tScenario Outline: A task completion count is displayed for repeatable tasks\n\t\tGiven a Task Card\n\t\tAnd it is configured for a repeatable task\n\t\tAnd has it has <goalValue>\n\t\tAnd a user with <userGoalProgress>\n\t\tWhen the user views the task card\n\t\tThen they see a repeat icon\n\t\tAnd the <text> in the bottom left hand corner\n\t\tAnd the <text> is brand colour\n\t\tExamples:\n\t\t\t| goalValue | userGoalProgress | text              |\n\t\t\t| 2         | 0                | Completed 0 times |\n\t\t\t| 2         | 1                | Completed 0 times |\n\t\t\t| 2         | 2                | Completed 1 times |\n\t\t\t| 2         | 4                | Completed 2 times |\n\n\t@motivating\n\tScenario Outline: The source of a user\'s progress can be a custom field or a program goal\n\t\tGiven a Task Card\n\t\tAnd it is configured <progressSourcePath>\n\t\tWhen a user views the Task card\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the "Goal Completion Count"\n\t\tExamples:\n\t\t\t| progressSourcePath                               |\n\t\t\t| /customFields/activityCount                      |\n\t\t\t| /customFields/purchaseTotal                      |\n\t\t\t| /programGoals/count%2FComment-on-Article         |\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\n\n\t@motivating\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\n\t\tGiven a Task Card\n\t\tAnd it is configured for <goalValue>\n\t\tAnd a user who has <progressValue>\n\t\tWhen they view the Task Card\n\t\tThen they are shown to have <progressValue> towards <goalValue>\n\t\tWhen their progress grows larger than <goalValue>\n\t\tThen the task is marked as completed\n\t\tExamples:\n\t\t\t| goalValue | progressValue |\n\t\t\t| 1         | 0             |\n\t\t\t| 10        | 9             |\n\t\t\t| 5         | 2             |\n\n\t@motivating\n\tScenario: The Goal Completion Number defaults to 1\n\t\tGiven a Task Card without a configured "goal" value\n\t\tAnd a user who has <progressValue>\n\t\tWhen they view the Task Card\n\t\tThen it <mayBe> marked as completed\n\t\tExamples:\n\t\t\t| progressValue | mayBe |\n\t\t\t| 0             | isn\'t |\n\t\t\t| 1             | is    |\n\t\t\t| 2             | is    |\n\n\t@motivating\n\tScenario: CTA Button can be hidden on the task card\n\t\tGiven a Task Card\n\t\tAnd it has default prop values set\n\t\tAnd "hideButton" is true\n\t\tThen the task card is shown\n\t\tAnd the button is hidden\n@author:kutay\n@owner:kutay\nFeature: The progress bar can be shown as a continuous line with progress and end goal. \n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\n\t\tGiven a Task Card component\n\t\tAnd the users progress is <progress>\n\t\tAnd the task goal is "500"\n\t\tAnd the task is not repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows "500" with <unit> below\n\t\tExamples:\n\t\t\t| progress | progressBar           | unit | color |\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is "5"\n\t\tAnd steps are enabled\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to "5" in increments of 1\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows "5" below\n\t\tExamples:\n\t\t\t| progress | progressBar           | color |\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is "500"\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tExamples:\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is "5"\n\t\tAnd steps are enabled\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to "5" in increments of 1\n\t\tAnd the first <icon1> is <color1>\n\t\tAnd the second <icon2> is <color2>\n\t\tAnd the third <icon3> is <color3>\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tExamples:\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |'}},TaskCard:()=>{const t={rewardDuration:"2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",repeatable:!0};return e("div",{style:Em},e(qm,null,e("h4",null,"Not Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,description:""},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,description:""},states:{...Am.states,progress:0}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,description:""},states:{...Dm.states,progress:230}}))),e(qm,null,e("h4",null,"Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0},states:{...Tm.states,progress:2}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:7}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:650}}))),e(qm,null,e("h4",null,"Complete"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500}}))),e(qm,null,e("h4",null,"Unavailable"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0}},t)),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:3}},t)),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:250}},t))))},TaskCardNotRepeatable:()=>e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{states:{...Am.states,progress:1}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:5}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:230}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500}})),e("h5",null))),TaskCardRepeatable:()=>e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0},states:{...Tm.states,progress:1}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:0}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:7}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0},states:{...Am.states,progress:10}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:500}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:650}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0},states:{...Dm.states,progress:1e3}})),e("h5",null))),TaskCardRepeatableFinite:()=>e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,finite:2},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,finite:2},states:{...Tm.states,progress:1}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,finite:2},states:{...Tm.states,progress:2}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:2},states:{...Am.states,progress:2}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:2},states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:2},states:{...Am.states,progress:10}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:3},states:{...Am.states,progress:12}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,finite:3},states:{...Am.states,progress:15}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:2},states:{...Dm.states,progress:200}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:3},states:{...Dm.states,progress:500}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:2},states:{...Dm.states,progress:1e3}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:3},states:{...Dm.states,progress:1200}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,finite:3},states:{...Dm.states,progress:1500}})),e("h5",null))),TaskCardEndDate:()=>{const t={rewardDuration:x.DateTime.now().minus({days:1}).toISO()+"/"+x.DateTime.now().plus({days:1}).toISO()},n={...t,repeatable:!0};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Tm.content,...n},states:{...Tm.states,progress:1}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Tm,{content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Am.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Am.content,...n},states:{...Am.states,progress:5}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Tm,{content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Dm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{content:{...Dm.content,...n},states:{...Dm.states,progress:1e3}})),e("h5",null)))},TaskCardLoading:()=>{const t={states:{loading:!0,progress:0,loadingEvent:!1}};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,t))," ",e("h5",null),e(j,Object.assign({},Tm,t))," ",e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,t))," ",e("h5",null),e(j,Object.assign({},Am,t))," ",e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,t))," ",e("h5",null),e(j,Object.assign({},Dm,t))," ",e("h5",null)))},TaskCardNotStarted:()=>{const t={rewardDuration:x.DateTime.now().plus({days:1}).toISO()+"/"+x.DateTime.now().plus({days:2}).toISO()},n={...t,repeatable:!0};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...n}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...n}})),e("h5",null)))},TaskCardEnded:()=>{const t={rewardDuration:x.DateTime.now().minus({days:2}).toISO()+"/"+x.DateTime.now().minus({days:1}).toISO()},n={...t,repeatable:!0};return e("div",{style:Em},e("div",{style:Cm},e("h4",null,"One Action"),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...t}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:0},content:{...Tm.content,...n}})),e("h5",null),e(j,Object.assign({},Tm,{states:{...Tm.states,progress:1},content:{...Tm.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"A Couple Actions"),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...t}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null),e(j,Object.assign({},Am,{states:{...Am.states,progress:1},content:{...Am.content,...n}})),e("h5",null)),e("div",{style:Cm},e("h4",null,"Many Actions"),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...t}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:100},content:{...Dm.content,...n}})),e("h5",null),e(j,Object.assign({},Dm,{states:{...Dm.states,progress:500},content:{...Dm.content,...n}})),e("h5",null)))},TaskCardButtonHidden:()=>{const t={rewardDuration:"2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",repeatable:!0};return e("div",{style:Em},e(qm,null,e("h4",null,"Not Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,description:"",hideButton:!0},states:{...Tm.states,progress:0}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,description:"",hideButton:!0},states:{...Am.states,progress:0}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,description:"",hideButton:!0},states:{...Dm.states,progress:230}}))),e(qm,null,e("h4",null,"Repeatable"),e(j,Object.assign({},Tm,{content:{...Tm.content,repeatable:!0,hideButton:!0},states:{...Tm.states,progress:2}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,repeatable:!0,hideButton:!0},states:{...Am.states,progress:7}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,repeatable:!0,hideButton:!0},states:{...Dm.states,progress:650}}))),e(qm,null,e("h4",null,"Complete"),e(j,Object.assign({},Tm,{content:{...Tm.content,hideButton:!0},states:{...Tm.states,progress:1}})),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,hideButton:!0},states:{...Am.states,progress:5}})),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,hideButton:!0},states:{...Dm.states,progress:500}}))),e(qm,null,e("h4",null,"Unavailable"),e(j,Object.assign({},Tm,{content:{...Tm.content,hideButton:!0},states:{...Tm.states,progress:0}},t)),e("h5",null),e(j,Object.assign({},Am,{content:{...Am.content,hideButton:!0},states:{...Am.states,progress:3}},t)),e("h5",null),e(j,Object.assign({},Dm,{content:{...Dm.content,hideButton:!0},states:{...Dm.states,progress:250}},t))))},ProgressBar:()=>e("div",null,e(ym,{matrix:{progress:[0,100,500,650,1200]},props:{progress:0,goal:500,progressBarUnit:"$"},Component:Ee})),ProgressBarSteps:()=>e("div",null,e(ym,{matrix:{progress:[0,1,5,7,12]},props:{progress:0,steps:!0,goal:5},Component:Ee})),ProgressBarRepeatable:()=>e("div",null,e(ym,{matrix:{progress:[0,250,500,750,1e3,1250]},props:{progress:0,goal:500,progressBarUnit:"$",repeatable:!0},Component:Ee})),ProgressBarStepsRepeatable:()=>e("div",null,e(ym,{matrix:{progress:[0,1,5,7,12]},props:{progress:0,steps:!0,goal:5,repeatable:!0},Component:Ee})),ProgressBarFinite:()=>e("div",null,e(ym,{matrix:{progress:[0,250,500,750,1e3,1250]},props:{progress:0,goal:500,progressBarUnit:"$",repeatable:!0,finite:2},Component:Ee})),ProgressBarStepsFinite:()=>e("div",null,e(ym,{matrix:{progress:[0,1,5,7,10,12]},props:{progress:0,steps:!0,goal:5,repeatable:!0,finite:2},Component:Ee}))});function Sm(){const e="sam+klip@saasquat.ch",t=e;return window.widgetIdent={tenantAlias:"test_a74miwdpofztj",appDomain:"https://staging.referralsaasquatch.com",programId:"klip-referral-program"},s((()=>(u({accountId:t,id:e,jwt:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg"}),()=>{window.widgetIdent=void 0,u(void 0)})),[]),{id:e,accountId:t}}const Rm=na((()=>(Sm(),e("sqm-task-card",{"card-title":"Comment on 5 articles","button-text":"Start reading",goal:5,steps:!0,"show-progress-bar":!0,"event-key":"testEvent","open-new-tab":!0})))),Pm=na((()=>(Sm(),e("sqm-card-feed",null,e("sqm-task-card",{"reward-amount":"75","card-title":"Refer a Friend",description:"Invite a friend to Klip and get 75 points when they signup for a free trial or contact our us about an enterprise license.","button-text":"Start referring","button-link":"https://klip-staging.vercel.app/app/klip-rewards",goal:1,repeatable:!0,"completed-text":"",demoData:"","ended-message":"","event-key":"","expiry-message":"","progress-bar-unit":"","reward-duration":"2022-01-04T08:00:00.000Z/2022-01-20T08:00:00.000Z","reward-unit":"","starts-on-message":"","stat-type":"","display-duration":"2022-01-04T08:00:00.000Z/2022-01-05T08:00:00.000Z"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"50","card-title":"Follow Us on X",description:"Earn 50 points when you Follow Us on X!","button-text":"Follow","button-link":"https://twitter.com/",goal:1,"stat-type":"/programGoals/count/Follow-on-Social-Media","open-new-tab":"true","event-key":"socialFollow"})),e("sqm-task-card",{"reward-amount":"250",goal:500,"show-progress-bar":"true","card-title":"Spend $500 on Klip Products",description:"Earn 250 points when you spend $500 or more on Klip products.","button-text":"See plans","button-link":"https://klip-staging.vercel.app/app/plans","stat-type":"/customFields/purchaseTotal","open-new-tab":"false"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"25",goal:1,"card-title":"Upload Your First Video",description:"Earn 25 points for exploring the Klip platform when you upload your first video.","button-text":"Upload","button-link":"https://klip-staging.vercel.app/app","stat-type":"/programGoals/count/Record-First-Video","open-new-tab":"false"})),e("sqm-task-card",{"reward-amount":"100",goal:5,repeatable:!0,"show-progress-bar":"true",steps:!0,"card-title":"Share 5 Videos",description:"Earn 100 points for collaborating each time you share 5 videos.","button-text":"Share","button-link":"https://klip-staging.vercel.app/app","stat-type":"/customFields/videosShared","open-new-tab":"false"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"1","reward-unit":"Free Month",goal:1,"card-title":"Upgrade Your Plan",description:"Buy a Business or Enterprise plan and get 1 free month of Klip for being a committed customer.","button-text":"Upgrade","button-link":"https://klip-staging.vercel.app/app/plans","stat-type":"/programGoals/count/Upgrade-Plan","open-new-tab":"false"})),e("sqm-task-card",{"reward-amount":"200",goal:5,"show-progress-bar":"","card-title":"Purchase 5 Seats",description:"Earn 200 points when you expand your Klip Team by purchasing 5 or more seats.","button-text":"Purchase seats","button-link":"https://klip-staging.vercel.app/app/plans","stat-type":"/customFields/seatCount"}),e("sqm-task-card",{"reward-amount":"250",goal:1,"show-progress-bar":"","card-title":"Upload 1 Hour of Video",description:"Record and upload an hour of video and get 250 points for being a super user.","button-text":"Upload","button-link":"https://klip-staging.vercel.app/app","stat-type":"/customFields/videoHoursCount","progress-bar-unit":"","reward-unit":"Points"}),e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"100",goal:1,"card-title":"Complete an NPS Survey",description:"Fill out our NPS survey and get 100 points for giving us honest feedback. Be sure to use your Klip account email when completing the survey.","button-text":"Complete survey","button-link":"https://y5tqgj96plv.typeform.com/to/p6N7lHUk","stat-type":"/programGoals/count/NPS-Survey","reward-unit":"Points","open-new-tab":"true"})),e("sqb-conditional-section",{condition:"'champion' in user.segments"},e("sqb-program-section",{"program-id":"klip-loyalty"},e("sqm-task-card",{"reward-amount":"$100",goal:1,"card-title":"Complete a Case Study",description:"Write a Klip case study and earn a $100 Visa Gift Card for letting us know how Klip has helped your team succeed.","button-text":"Complete case study","button-link":"https://y5tqgj96plv.typeform.com/to/CPhkFBBW","stat-type":"/programGoals/count/Case-Study","reward-unit":"Visa Gift Card","open-new-tab":"true"}))))))),Im=Object.freeze({__proto__:null,default:{title:"Hooks / useTaskCard"},TaskCard:Rm,TaskCardFeed:Pm}),Nm={progress:2,goal:4,steps:!0},Fm=Object.freeze({__proto__:null,default:{title:"Components/Progress Bar"},TaxAndPayoutsProgressBar:()=>e(Ce,Object.assign({},Nm,{stageCount:4,currentStage:2}))}),Om=Object.freeze({__proto__:null,default:{title:"Components/Text"},PurpleText:()=>e("sqm-text",{textColor:"slateblue"},e("p",null,"This is the text component")),CustomFontSize:()=>e("sqm-text",{fontSize:36},e("p",null,"This is the text component"))}),Lm=Object.freeze({__proto__:null,default:{title:"Components/Timeline",parameters:{scenario:'@author:derek\n@owner:kutay\nFeature: Timeline\n\n    @motivating\n    @ui\n    Scenario: The timeline adds lines between timeline entries\n        Given a timeline\n        And it has many timeline entries as children\n        When a user views the timeline\n        Then they see all timeline entries are connected by brand colour lines\n        And see that the last entry does not have a line\n\n    @motivating\n    @ui\n    Scenario Outline: The timeline can set the icons used by its timeline entries\n        Given a timeline with "icon" <iconPropValue>\n        And it has many timeline entries as children\n        When a user views the timeline\n        Then they see the timeline entries have a <icon>\n        Examples:\n            | iconPropValue | icon                |\n            | gift          | gift icon           |\n            | gift          | gift icon           |\n            | circle        | brand colour circle |\n@author:derek\n@owner:kutay\nFeature: Timeline Entry\n\n    @motivating\n    @ui\n    Scenario: Timeline entries have an icon, a reward and an entry desciption\n        Given an timeline entry with the following props\n            | prop   | value                                               |\n            | unit   | Visa Giftcard                                       |\n            | reward | 50$                                                 |\n            | desc   | Earn a 50$ Visa Giftcard for each referral you make |\n        When a user views the entry\n        Then they see a gift icon\n        And see "$50 VISA GIFTCARRD" to the right\n        And "$50" is bolded with x-large font size\n        And below they see "Earn a 50$ Visa Giftcard for each referral you make"\n\n    @motivating\n    @ui\n    Scenario Outline: Icon can either be a gift or a brand colour cirle\n        Given a timeline entry with "icon" <iconPropValue>\n        When a user views the entry\n        Then they see an <icon>\n        Examples:\n            | iconPropValue 1 | icon                |\n            | gift            | gift                |\n            | circle          | brand colour circle |\n            |                 | gift                |\n\n    @motivating\n    @ui\n    Scenario: A timeline entry can display a line to connect it to another entry\n        Given a timeline entry with "line" "true"\n        When a user views the entry\n        Then they see the entry\n        But it has a brand colour line connecting it to the next timeline entry\n'}},TimelineWith1Reward:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{textColor:"red",lineColor:"red",reward:"75",unit:"points",desc:"Your friends signs up for a free trial"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}))),TimelineWith2Rewards:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}))),TimelineWith3Rewards:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}))),TimelineWith4Rewards:()=>e("div",null,e("sqm-timeline",null,e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}),e("sqm-timeline-entry",{reward:"$1000",unit:"visa giftcard",desc:"Your friend purchases Klip Team"})),e("br",null)," ",e("hr",null)," ",e("br",null),e("sqm-timeline",{icon:"circle"},e("sqm-timeline-entry",{reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}),e("sqm-timeline-entry",{reward:"$1000",unit:"visa giftcard",desc:"Your friend purchases Klip Team"}))),TimelineWithCustomColors:()=>e("sqm-timeline",null,e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"75",unit:"points",desc:"Your friends signs up for a free trial"}),e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"$50",unit:"visa giftcard",desc:"Your friends signs up for Klip Personal"}),e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"$200",unit:"visa giftcard",desc:"Your friend qualifies as a good fit for Klip Team"}),e("sqm-timeline-entry",{"text-color":"red","line-color":"red",reward:"$1000",unit:"visa giftcard",desc:"Your friend purchases Klip Team"}))}),Bm=Object.freeze({__proto__:null,default:{title:"Components/Titled Section",parameters:{scenario:'@author:derek\n@owner:noah\nFeature: Titled Section\n\n    Background: The titled section has a label and content\n        Given a titled section\n        And it has a label\n        And it has content in the content slot\n\n    @motivating\n    @ui\n    Scenario: Text alignment defaults to left align but can be configured\n        Given the titled section has "text-align" <textAlignPropValue>\n        When a user views the titled section\n        Then the text in the label is <aligned>\n        And the text in the content is <aligned>\n        Examples:\n            | textAlignPropValue | aligned |\n            | center             | center  |\n            | left               | left    |\n            | right              | right   |\n            |                    | left    |\n\n    @minutia\n    @ui\n    Scenario: Label margin is configurable\n        Given the titled section has "label-margin" <marginPropValue>\n        When a user views the titled section\n        Then <marginPropValue> margin is between the label and content\n        Examples:\n            | marginPropValue | margin     |\n            | none            | no         |\n            | xxx-small       | xxx-small  |\n            | xx-small        | xx-small   |\n            | x-small         | x-small    |\n            | small           | small      |\n            | medium          | medium     |\n            | large           | large      |\n            | x-large         | x-large    |\n            | xx-large        | xx-large   |\n            | xxx-large       | xxx-large  |\n            | xxxx-large      | xxxx-large |\n            |                 | no         |\n\n    @minutia\n    @ui\n    Scenario Outline: Titled section padding is configurable\n        Given the titled section has "padding" <paddingPropValue>\n        When a user views the titled section\n        Then <paddingPropValue> padding is applied around the titled section\n        Examples:\n            | paddingPropValue | padding    |\n            | none             | no         |\n            | xxx-small        | xxx-small  |\n            | xx-small         | xx-small   |\n            | x-small          | x-small    |\n            | small            | small      |\n            | medium           | medium     |\n            | large            | large      |\n            | x-large          | x-large    |\n            | xx-large         | xx-large   |\n            | xxx-large        | xxx-large  |\n            | xxxx-large       | xxxx-large |\n            |                  | no         |'}},AlignLeft:()=>e("sqm-titled-section",{"text-align":"left"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),AlignCenter:()=>e("sqm-titled-section",{"text-align":"center"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),AlignRight:()=>e("sqm-titled-section",{"text-align":"right"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards"),e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),Padding:()=>e("div",null,e("h3",null,"None"),e("sqm-titled-section",{padding:"none"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-small"),e("sqm-titled-section",{padding:"xxx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-small"),e("sqm-titled-section",{padding:"xx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-small"),e("sqm-titled-section",{padding:"x-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"small"),e("sqm-titled-section",{padding:"small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"medium"),e("sqm-titled-section",{padding:"medium"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"large"),e("sqm-titled-section",{padding:"large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-large"),e("sqm-titled-section",{padding:"x-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-large"),e("sqm-titled-section",{padding:"xx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-large"),e("sqm-titled-section",{padding:"xxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxxx-large"),e("sqm-titled-section",{padding:"xxxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))),LabelMargin:()=>e("div",null,e("h3",null,"None"),e("sqm-titled-section",{"label-margin":"none"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-small"),e("sqm-titled-section",{"label-margin":"xxx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-small"),e("sqm-titled-section",{"label-margin":"xx-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-small"),e("sqm-titled-section",{"label-margin":"x-small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"small"),e("sqm-titled-section",{"label-margin":"small"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"medium"),e("sqm-titled-section",{"label-margin":"medium"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"large"),e("sqm-titled-section",{"label-margin":"large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"x-large"),e("sqm-titled-section",{"label-margin":"x-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xx-large"),e("sqm-titled-section",{"label-margin":"xx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxx-large"),e("sqm-titled-section",{"label-margin":"xxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),e("br",null),e("hr",null),e("br",null),e("h3",null,"xxxx-large"),e("sqm-titled-section",{"label-margin":"xxxx-large"},e("sqm-text",{slot:"label"},e("h3",null,"Earn more rewards")),e("sqm-text",{slot:"content"},e("p",null,"Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))))}),_m=Object.freeze({__proto__:null,default:{title:"Tests/User Name"},DemoData:()=>e("sqm-user-name",{demoData:{loading:!1,loadingText:"...",username:"Test Testerson"}}),Username:()=>e("sqm-user-name",null)}),Gm={initialiseLoading:!1,email:"testemail@example.com",loading:!1,verifyFailed:!1,emailResent:!1},jm=Object.freeze({__proto__:null,default:{title:"Components/Widget Code Verification"},Default:()=>e("sqm-code-verification",{demoData:{states:Gm}}),InitialLoading:()=>e("sqm-code-verification",{demoData:{states:{...Gm,initialiseLoading:!0}}}),Loading:()=>e("sqm-code-verification",{demoData:{states:{...Gm,loading:!0}}}),CodeResent:()=>e("sqm-code-verification",{demoData:{states:{...Gm,emailResent:!0}}}),VerificationFailed:()=>e("sqm-code-verification",{demoData:{states:{...Gm,verifyFailed:!0}}})}),Wm={email:"",error:!1,loading:!1,initialLoading:!1,sendCodeError:!1},Um=Object.freeze({__proto__:null,default:{title:"Components/Widget Email Verification"},Default:()=>e("sqm-email-verification",{demoData:{}}),EmailIsPrefilled:()=>e("div",null,e("sqm-text",null,e("h4",null,"Verify your email")),e("sqm-text",null,e("sub",null,"To get your cash paid out directly to your bank account, please complete your account setup")),e("sqm-email-verification",{demoData:{states:{...Wm,email:"test@example.com"}}})),Loading:()=>e("sqm-email-verification",{demoData:{states:{...Wm,initialLoading:!0}}}),SaveLoading:()=>e("sqm-email-verification",{demoData:{states:{...Wm,loading:!0}}}),WithHeader:()=>e("div",null,e("sqm-text",null,e("h4",null,"Verify your email")),e("sqm-text",null,e("sub",null,"To get your cash paid out directly to your bank account, please complete your account setup")),e("sqm-email-verification",{demoData:{states:{...Wm,email:"test@example.com"}}})),InvalidEmail:()=>e("sqm-email-verification",{demoData:{states:{...Wm,error:!0}}}),SendCodeError:()=>e("sqm-email-verification",{demoData:{states:{...Wm,sendCodeError:!0}}})}),Mm={states:{showVerification:!1,hideSteps:!1,disabled:!1,loading:!1,hideBackButton:!1,formState:{bankCountry:"US",paymentMethodChecked:"toBankAccount"},hasPayPal:!1,isPartner:!1,saveDisabled:!1,thresholds:[],currency:"USD",loadingError:!1,email:"test@example.com",showModal:!1},callbacks:{onVerificationHide:()=>{},onVerification:()=>{},onSubmit:async()=>console.log("Submit"),setPaymentMethodChecked:()=>{},setPaymentScheduleChecked:()=>{},setCountrySearch:()=>{},onBack:async()=>console.log("back"),onModalOpen:()=>{},onModalClose:()=>{}},refs:{formRef:{current:null}}},Vm=Object.freeze({__proto__:null,default:{title:"Components/Banking Information Form"},BankingInfoFormDefault:()=>e("sqm-banking-info-form",null),BankingInfoFormDefaultLoading:()=>e("sqm-banking-info-form",{demoData:{states:{...Mm.states,loading:!0}}}),BankingInfoFormDefaultWithLoadingError:()=>e("sqm-banking-info-form",{demoData:{states:{...Mm.states,loading:!0,loadingError:!0}}}),BankingInfoFormDefaultWithValidationErrors:()=>e("sqm-banking-info-form",{demoData:{states:{...Mm.states,formState:{...Mm.states.formState,errors:{inputErrors:{beneficiaryAccountName:{type:"required"},bankAccountType:{type:"required"},bankAccountNumber:{type:"required"},iban:{type:"required"},swiftCode:{type:"required"},routingCode:{type:"required"},bankName:{type:"required"},beneficiaryClassification:{type:"required"},patronymicName:{type:"required"},voCode:{type:"required"},agencyCode:{type:"required"},bankAddress:{type:"required"},bankCity:{type:"required"},bankCountry:{type:"required"},bankState:{type:"required"},bankPostalCode:{type:"required"},branchCode:{type:"required"},balanceThreshold:{type:"required"},fixedDay:{type:"required"}}}}}}}),BankingInfoFormCountryUSCurrencyUSD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{bankCountry:"US"},currency:"USD"}}}),BankingInfoFormGeneralError:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,errors:{general:!0}}}}}),BankingInfoFormCountryUSCurrencyUSDLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{bankCountry:"US"},loading:!0,currency:"USD"}}}),BankingInfoFormCountryARCurrencyARS:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"AR",paymentScheduleChecked:"FIXED_DAY",paymentMethodChecked:"toBankAccount"},currency:"ARS"}}}),BankingInfoFormCountryMXCurrencyMXN:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"MX",paymentScheduleChecked:"FIXED_DAY",paymentMethodChecked:"toBankAccount"},currency:"MXN"}}}),BankingInfoFormCountryUSCurrencyGBP:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"US"},currency:"GBP"}}}),BankingInfoFormCountryCanadaCurrencyCAD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"CA"},currency:"CAD"}}}),BankingInfoFormCountryCanadaCurrencyUSD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"CA"},currency:"USD"}}}),BankingInfoFormCountrySpainCurrencyUSD:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"ES"},currency:"USD"}}}),BankingInfoFormIsPartner:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,isPartner:!0,currency:"USD"}}}),BankingInfoFormPaypalChecked:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),BankingInfoFormPaypalCheckedLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,loading:!0,formState:{...Mm.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),BankingInfoFormWithBalanceThresholdPaymentSchedule:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"BALANCE_THRESHOLD"},currency:"USD"}}}),BankingInfoFormWithBalanceThresholdPaymentScheduleWithError:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{errors:{inputErrors:{balanceThreshold:{type:"required"}}},...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"BALANCE_THRESHOLD"},currency:"USD"}}}),BankingInfoFormWithBalanceThresholdPaymentScheduleLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,loading:!0,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"BALANCE_THRESHOLD"},currency:"USD"}}}),BankingInfoFormWithFixedDayPaymentSchedule:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormWithFixedDayPaymentScheduleWithError:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,formState:{errors:{inputErrors:{fixedDay:{type:"required"}}},...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormWithFixedDayPaymentScheduleLoading:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,loading:!0,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormVerififyIdentityModal:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,isPartner:!0,showVerification:!0,formState:{...Mm.states.formState,bankCountry:"US",paymentScheduleChecked:"FIXED_DAY"},currency:"USD"}}}),BankingInfoFormModalOpen:()=>e("sqm-banking-info-form",{demoData:{...Mm,states:{...Mm.states,showModal:!0}}})}),Hm={states:{step:"1",hideSteps:!1,hideState:!1,loading:!1,disabled:!1,isPartner:!1,isUser:!1,loadingError:!1,formState:{firstName:"Bob",lastName:"Testerson",email:"bobtesterson@example.com",phoneNumberCountryCode:"US",phoneNumber:"555 555 5555",countryCode:"US",currency:"CAD",address:"2/1337 Johnson Street",city:"Vancouver",state:"BC",postalCode:"555 555",errors:{}}},data:{partnerData:{},regionLabelEnum:"STATE",regions:[],phoneCountries:[{countryCode:"CA",displayName:"Canada"}],countries:[{countryCode:"CA",displayName:"Canada"},{countryCode:"ES",displayName:"Spain"},{countryCode:"UK",displayName:"United Kingdom"},{countryCode:"US",displayName:"United States"},{countryCode:"AR",displayName:"Argentina"},{countryCode:"AU",displayName:"Australia"},{countryCode:"ZW",displayName:"Zimbabwe"}],currencies:[{currencyCode:"CAD",displayName:"CAD"},{currencyCode:"GBP",displayName:"GBP"},{currencyCode:"USD",displayName:"USD"}],allCountries:[{countryCode:"CA",displayName:"Canada"},{countryCode:"ES",displayName:"Spain"},{countryCode:"UK",displayName:"United Kingdom"},{countryCode:"US",displayName:"United States"}],allCurrencies:[{currencyCode:"CAD",displayName:"CAD"},{currencyCode:"GBP",displayName:"GBP"},{currencyCode:"USD",displayName:"USD"}],userData:{firstName:"",lastName:""}},refs:{formRef:{current:null},currencyRef:{current:null},phoneCountryRef:{current:null}}},zm={step:"2",hideSteps:!1,disabled:!1,loading:!1,isPartner:!1,loadingError:!1,formState:{checked:void 0,errors:{}}},Ym={states:{showVerification:!1,step:"4",hideSteps:!1,disabled:!1,loading:!1,hasPayPal:!1,isPartner:!1,hideBackButton:!1,saveDisabled:!1,thresholds:[],loadingError:!1,email:"test@example.com",formState:{paymentMethodChecked:"toBankAccount"},showModal:!1},callbacks:{onVerificationHide:()=>{},onVerification:()=>{},onSubmit:async()=>console.log("Submit"),setPaymentMethodChecked:()=>{},setPaymentScheduleChecked:()=>{},onBack:async()=>console.log("back"),setCountrySearch:()=>{},onModalOpen:()=>{},onModalClose:()=>{}},refs:{formRef:{current:null}}},$m={showExitButton:!0,step:"3",urlLoading:!1,docusignStatus:void 0,hideSteps:!1,documentType:"W9",documentTypeString:"W9",loading:!1,disabled:!1,participantTypeDisabled:!1,loadingError:!1,formState:{participantType:"individualParticipant",errors:{},taxFormExpired:!1},showModal:!1},Xm={states:{veriffLoading:!1,payoutStatus:"DONE",canEditPayoutInfo:!0,disabled:!1,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"United Kingdom",indirectTaxNumber:"123456",indirectTaxType:"VAT",showNewFormDialog:!1,hasHold:!1},slots:{payoutDetailsCardSlot:e("sqm-payout-details-card",{demoData:{states:{badgeStatus:"nextPayout"}}})}},Jm=Object.freeze({__proto__:null,default:{title:"Components/Tax Form"},GeneralLoadingView:()=>e(Le,null),GeneralErrorView:()=>e("sqm-form-message",{type:"error"},e("p",{part:"alert-title"},"There was a problem loading your form"),e("p",{part:"alert-description"},"Please refresh the page and try again. If this problem continues, contact our support team.")),StepOne:()=>e("sqm-user-info-form",{demoData:Hm}),StepOneLoading:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,loading:!0}}}),StepOneDisabled:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,disabled:!0}}}),StepOneIsUser:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,isUser:!0}}}),StepOneIsPartner:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,disabled:!0,isPartner:!0}}}),StepOneWithErrors:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,formState:{...Hm.states.formState,errors:{firstName:!0,lastName:!0,email:!0,countryCode:!0,currency:!0,participantType:!0,allowBankingCollection:!0}}}}}),StepOneWithGeneralError:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,formState:{...Hm.states.formState,errors:{general:!0}}}}}),StepOneWithLoadingError:()=>e("sqm-user-info-form",{demoData:{states:{...Hm.states,loadingError:!0,loading:!0,formState:{...Hm.states.formState}}}}),StepTwoLoading:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,loading:!0}}}),StepTwoLoadingError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,loading:!0,loadingError:!0}}}),StepTwoDisabled:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,disabled:!0}}}),StepTwoIsPartner:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,isPartner:!0}}}),StepTwoWithGeneralError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,errors:{general:!0}}}}}),StepTwoOtherRegionChecked:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"UK",indirectTaxNumber:"123456",errors:{}}}}}),StepTwoOtherRegionCheckedCanada:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"BRITISHCOLUMBIA",indirectTaxNumber:"123456",errors:{}}}}}),StepTwoOtherRegionCheckedCanadaGST:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"QUEBEC",indirectTaxNumber:"123456",errors:{}}}}}),StepTwoOtherRegionCheckedCanadaGSTAndQST:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"QUEBEC",qstNumber:"654321",hasQst:!0,errors:{}}}}}),StepTwoOtherRegionCheckedOtherCountrySubRegion:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"ES",subRegion:"CANARYISLANDS",errors:{}}}}}),StepTwoOtherRegionCheckedOtherCountrySubRegionIncomeTax:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"ES",subRegion:"CANARYISLANDS",hasSubRegionTaxNumber:!0,subRegionTaxNumber:"654321",errors:{}}}}}),StepTwoOtherRegionCheckedWithInputErrors:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{checked:"otherRegion",errors:{}}},slotProps:{formState:{province:"",selectedRegion:"GB",errors:{selectedRegion:!0,indirectTaxNumber:!0}}}}}),StepTwoOtherRegionCheckedCanadaWithProvinceError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"BC",errors:{province:!0,indirectTaxNumber:!0}}}}}),StepTwoOtherRegionCheckedCanadaGSTAndQSTError:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"CA",province:"QUEBEC",hasQst:!0,errors:{province:!0,indirectTaxNumber:!0,qstNumber:!0}}}}}),StepTwoOtherRegionCheckedOtherCountrySubRegionErrors:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"otherRegion"}},slotProps:{formState:{selectedRegion:"ES",hasSubRegionTaxNumber:!0,errors:{indirectTaxNumber:!0,subRegionTaxNumberError:!0,subRegion:!0}}}}}),StepTwoNotRegisteredChecked:()=>e("sqm-indirect-tax-form",{demoData:{states:{...zm,formState:{...zm.formState,checked:"notRegistered"}}}}),StepThreeWithDocusign:()=>e("sqm-docusign-form",{demoData:{states:{documentType:"W9",documentTypeString:Oe("W9"),...$m}}}),StepThreeWithDocusignW8BEN:()=>e("sqm-docusign-form",{demoData:{states:{...$m,documentType:"W8BEN",documentTypeString:Oe("W8BEN")}}}),StepThreeWithDocusignW8BENE:()=>e("sqm-docusign-form",{demoData:{states:{...$m,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),formState:{taxFormExpired:!1,participantType:"businessEntity",errors:{participantType:"",general:!1}}}}}),StepThreeWithDocusignExpired:()=>e("sqm-docusign-form",{demoData:{states:{...$m,docusignStatus:"ttl_expired",formState:{participantType:"individualParticipant",taxFormExpired:!0,errors:{}}}}}),StepThreeWithDocusignCompleted:()=>e("sqm-docusign-form",{demoData:{states:{...$m,docusignStatus:"signing_complete",formState:{participantType:"individualParticipant",taxFormExpired:!1,errors:{}}}}}),StepThreeDocusignWithError:()=>e("sqm-docusign-form",{demoData:{states:{...$m,docusignStatus:"exception",formState:{...$m.formState,errors:{formSubmission:!0}}}}}),StepThreeDocusignWithGeneralError:()=>e("sqm-docusign-form",{demoData:{states:{...$m,formState:{...$m.formState,errors:{general:!0}}}}}),StepThreeDocusignWithLoadingError:()=>e("sqm-docusign-form",{demoData:{states:{...$m,loadingError:!0,formState:{...$m.formState}}}}),StepThreeDocusignLoading:()=>e("sqm-docusign-form",{demoData:{states:{...$m,loading:!0}}}),StepThreeDocusignDisabled:()=>e("sqm-docusign-form",{demoData:{states:{...$m,disabled:!0}}}),StepThreeWithDocusignModalOpen:()=>e("sqm-docusign-form",{demoData:{states:{documentType:"W9",documentTypeString:Oe("W9"),...$m,showModal:!0}}}),StepFourDefault:()=>e("sqm-banking-info-form",null),StepFourIsPartner:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,isPartner:!0,formState:{...Ym.states.formState}}}}),StepFourDirectToBankChecked:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,formState:{...Ym.states.formState}}}}),StepFourToPaypalChecked:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,formState:{...Ym.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),StepFourReVerifyEmail:()=>e("sqm-banking-info-form",{demoData:{...Ym,states:{...Ym.states,showVerification:!0,isPartner:!0,formState:{...Ym.states.formState,paymentMethodChecked:"toPayPalAccount"}}}}),TaxAndCashDashboardActiveW9Form:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm}}),TaxAndCashDashboardActiveW8BENForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,noFormNeeded:!1,canEditPayoutInfo:!0,documentType:"W8BEN",documentTypeString:Oe("W8BEN"),country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardActiveW8BENEForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,noFormNeeded:!1,canEditPayoutInfo:!0,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotActiveW9Form:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,noFormNeeded:!1,canEditPayoutInfo:!0,status:"INACTIVE",documentType:"W9",documentTypeString:Oe("W9"),country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotVerifiedW9Form:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",canEditPayoutInfo:!0,disabled:!1,status:"NOT_VERIFIED",documentType:"W9",documentTypeString:Oe("W9"),noFormNeeded:!1,country:"United States",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1,veriffLoading:!1}}}),TaxAndCashDashboardNotVerifiedW8BENForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"NOT_VERIFIED",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotVerifiedW8BENEForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"NOT_VERIFIED",documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"United Kingdom",indirectTaxType:"VAT",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNotActiveW8BENEForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"NOT_ACTIVE",documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",indirectTaxType:"VAT",country:"United Kingdom",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardNoFormNeeded:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!0,province:"Ontario",country:"Canada",indirectTaxNumber:"123456",indirectTaxType:"GST",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxCanada:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",disabled:!1,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,province:"Ontario",country:"Canada",indirectTaxType:"GST",indirectTaxNumber:"123456",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxCanadaQuebec:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",disabled:!1,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,province:"Quebec",country:"Canada",indirectTaxType:"GST",indirectTaxNumber:"123456",qstNumber:"44212",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxSpain:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",disabled:!1,documentType:"W8BENE",documentTypeString:Oe("W8BENE"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,country:"Spain",subRegion:"Spain Proper",indirectTaxType:"VAT",indirectTaxNumber:"123456",subRegionTaxNumber:"44212",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIndirectTaxNotRegistered:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationRequired:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:REQUIRED",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationRequiredInternal:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:INTERNAL",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationReviewInternal:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:REVIEW",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardIdentityVerifcationFailedInternal:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"VERIFICATION:FAILED",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardW9ThresholdReached:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"OVER_W9_THRESHOLD",veriffLoading:!1,canEditPayoutInfo:!0,status:null,documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!1,showNewFormDialog:!1,hasHold:!1,enforceUsTaxComplianceOption:"CASH_ONLY_DEFER_W9"}}}),TaxAndCashDashboardNewTaxForm:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,notRegistered:!0,showNewFormDialog:!0,hasHold:!1}}}),TaxAndCashDashboardPayoutsOnHold:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"HOLD",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",country:"Slovania",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardLoading:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,loading:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardWithLoadingError:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,disabled:!1,canEditPayoutInfo:!0,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,loading:!0,loadingError:!0,showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashDashboardWithGeneralError:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!1,status:"ACTIVE",documentType:"W9",documentTypeString:Oe("W9"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",indirectTaxType:"VAT",country:"Slovania",showNewFormDialog:!1,hasHold:!1,errors:{general:!0}}}}),TaxAndCashDashboardDisabled:()=>e("sqm-tax-and-cash-dashboard",{demoData:{...Xm,states:{payoutStatus:"DONE",veriffLoading:!1,canEditPayoutInfo:!0,disabled:!0,status:"ACTIVE",documentType:"W8BEN",documentTypeString:Oe("W8BEN"),dateSubmitted:"Jan 18th, 2025",noFormNeeded:!1,indirectTaxNumber:"123456",country:"Slovania",showNewFormDialog:!1,hasHold:!1}}}),TaxAndCashTextProps:()=>e("sqm-tax-and-cash",{demoData:{showTextProps:!0}})}),Km=Object.freeze({__proto__:null,default:{title:"Components/Payout Details Card"},Loading:()=>e("sqm-payout-details-card",{demoData:{states:{loading:!0}}}),NextPayout:()=>e("sqm-payout-details-card",{demoData:{states:{badgeStatus:"nextPayout"}}}),PayoutToday:()=>e("sqm-payout-details-card",{demoData:{states:{badgeStatus:"payoutToday"}}}),ThresholdPayout:()=>e("sqm-payout-details-card",{demoData:{states:{thresholdBalance:"50 USD",badgeStatus:"thresholdPayout"}}}),PaypalPayout:()=>e("sqm-payout-details-card",{demoData:{states:{payoutType:"PAYPAL"}}})}),Zm={error:!1,status:"INFORMATION_REQUIRED",loading:!1,veriffLoading:!1},Qm=Object.freeze({__proto__:null,default:{title:"Components/Payout Status Alert"},InformationRequired:()=>e("sqm-payout-status-alert",{demoData:{states:Zm}}),VerifyIdentity:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:REQUIRED"}}}),VerifyIdentityRequiredInternal:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:INTERNAL"}}}),VerifyIdentityReviewInternal:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:REVIEW"}}}),VerifyIdentityFailedInternal:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"VERIFICATION:FAILED"}}}),W9ThresholdReached:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"OVER_W9_THRESHOLD"}}}),Hold:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"HOLD"}}}),Loading:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,loading:!0}}}),Error:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,error:!0}}}),NewPayeeReview:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"NEW_PAYEE_REVIEW"}}}),PaymentHoldOnChange:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"PAYMENT_HOLD_ON_CHANGE"}}}),BeneficiaryNameInvalid:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"BENEFICIARY_NAME_INVALID"}}}),BeneficiaryNameMismatch:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"BENEFICIARY_NAME_MISMATCH"}}}),BankTaxNameMismatch:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"BANK_TAX_NAME_MISMATCH"}}}),WithdrawalSettingsInvalid:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"WITHDRAWAL_SETTINGS_INVALID"}}}),PaymentReturned:()=>e("sqm-payout-status-alert",{demoData:{states:{...Zm,status:"PAYMENT_RETURNED"}}})}),ep={selectedRegion:"Country / Region of Indirect Tax",searchForCountryText:"",province:"Province",indirectTaxNumber:"Indirect Tax",isRegisteredQST:"I am registered for QST Tax",isRegisteredSubRegionIncomeTax:"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.",qstNumber:"QST Number",subRegion:"Sub-region",subRegionTaxNumberLabel:"Income tax number",error:{indirectTaxNumber:"Indirect Tax is required",fieldRequiredError:"{fieldName} is required"}},tp=g({Container:{width:"100%",display:"flex",flexDirection:"column",alignItems:"center",padding:"20px",gap:"10px",margin:"auto",textAlign:"center",border:"var(--sqm-border-thickness) solid var(--sqm-border-color)"}}),np=tp.toString(),ap=t=>{const{classes:n}=tp,{text:a}=t;return e("div",null,e("style",{type:"text/css"},np),e("div",{class:n.Container},e("sl-icon",{style:{width:"50px",height:"50px",color:"var(--sl-color-neutral-500)"},name:"clock"}),e("p",{style:{margin:"0"}},a.docusignExpired)))},rp={states:{loading:!1,hide:!1,formState:{selectedRegion:"United Kindom",vatNumber:12345,countryCode:"UK"}},data:{countries:[{countryCode:"CA",displayName:"Canada"}]},text:ep},op={states:{loading:!1,hide:!1,formState:{province:"British Columbia",indirectTaxNumber:1234}},data:{countries:[{countryCode:"CA",displayName:"Canada"}]},text:ep},ip=Object.freeze({__proto__:null,default:{title:"Components/Tax Form Slot Views"},RegisteredInOtherRegion:()=>e(Ne,Object.assign({},rp)),RegisteredInCanada:()=>e(IndirectDetailsSlotView,Object.assign({},op)),RegisteredInOtherRegionWithErrors:()=>e(Ne,Object.assign({},rp,{states:{...rp.states,formState:{...rp.states.formState,errors:{vatNumber:!0,selectedRegion:!0}}}})),RegisteredInCanadaWithErrors:()=>e(IndirectDetailsSlotView,Object.assign({},op,{states:{...op.states,formState:{...op.states.formState,errors:{province:!0,indirectTaxNumber:!0}}}})),DocusignExpired:()=>e(ap,null)}),sp={states:{error:"",loading:!1},callbacks:{submit:async e=>await e},content:{invalidEmailErrorMessage:"Must be a valid email address",requiredFieldErrorMessage:"Cannot be empty",paddingTop:"large",paddingRight:"large",paddingBottom:"large",paddingLeft:"large",fraudErrorMessage:"Our team will review this referral. If approved, you and your friend will receive your rewards. Need help? Reach out to our Support team.",fraudErrorMessageTitle:"Looks like you tried referring yourself"}},lp=Object.freeze({__proto__:null,default:{title:"Components/Email Registration",parameters:{}},Default:()=>e(y,Object.assign({},sp)),HasFirstNameLastName:()=>e(y,Object.assign({},{...sp,content:{...sp.content,includeName:!0}})),WithSlots:()=>e(y,Object.assign({},{...sp,content:{...sp.content,topSlot:e("div",null,"Hello this is the top slot"),bottomSlot:e("div",null,"Hello this is the bottom slot")}})),NoBorder:()=>e(y,Object.assign({},{...sp,content:{...sp.content,hideBorder:!0}})),BackgroundColor:()=>e(y,Object.assign({},{...sp,content:{...sp.content,backgroundColor:"aquamarine"}})),Loading:()=>e(y,Object.assign({},{...sp,states:{error:"",loading:!0}})),Error:()=>e(y,Object.assign({},{...sp,states:{error:"Something went wrong. Please try again.",loading:!1}})),FraudError:()=>e(y,Object.assign({},{...sp,states:{error:"FRAUD",loading:!1}})),EmptyEmailError:()=>e(y,Object.assign({},{...sp,states:{error:"Something went wrong. Please try again.",loading:!1,registrationFormState:{validationErrors:{email:"Email cannot be empty"}}}}))}),dp={states:{success:!1,leadFormState:{},error:"",loading:!1,referralCode:"ABC123"},callbacks:{submit:()=>console.log("Submit!"),inputFunction:()=>{},resetForm:()=>{}},refs:{formRef:{}},content:{submitLabel:"Submit",pageLabel:"Submit your information",resubmitFormLabel:"Refer Another Friend",requiredFieldErrorMessage:"Cannot be empty",invalidEmailErrorMessage:"Must be a valid email address",submitSuccessHeader:"Referral submitted",submitSuccessDescription:"Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.",submitErrorHeader:"An error occurred while submitting",submitErrorDescription:"Please try again later. If the problem continues, contact Support"}},up={...dp,states:{...dp.states,success:!0,error:null},content:{...dp.content,pageLabel:"Refer your friend"}},cp={...dp,states:{...dp.states,error:"Something went wrong. Please try again.",leadFormState:{validationErrors:{firstName:"Please enter a first name",lastName:"Please enter a last name",email:"Please enter a valid email"}}}},mp={...dp,states:{...dp.states,loading:!0}},pp={...dp,content:{...dp.content,formData:e("div",null,e("sqm-lead-input-field",{"field-name":"firstName","field-label":"First Name","field-type":"text","required-field-error-message":"Please enter a first name"}),e("sqm-lead-input-field",{"field-name":"lastName","field-label":"Last Name","field-type":"text","required-field-error-message":"Please enter a last name"}),e("sqm-lead-input-field",{"field-name":"email","field-label":"Email","field-type":"email","required-field-error-message":"Please enter a valid email address"}),e("sqm-lead-dropdown-field",null))}},hp=Object.freeze({__proto__:null,default:{title:"Components/Lead Form"},Default:()=>e(Te,Object.assign({},dp)),LeadSubmitSuccess:()=>e(Te,Object.assign({},up)),LeadSubmitWithError:()=>e(Te,Object.assign({},cp)),LeadSubmitLoading:()=>e(Te,Object.assign({},mp)),FieldsHidden:()=>e("sqm-lead-form",{demoData:{states:{leadFormState:{},error:"",success:!1,loading:!0,referralCode:"ABC123"}}}),SlottedInputs:()=>e(Te,Object.assign({},pp))}),gp={states:{leadFormState:{validationErrors:{},loading:!1,disabled:!1,initialData:{}}},content:{fieldName:"firstName",fieldLabel:"First Name",fieldType:"text",optionalLabel:"(Optional)",requiredFieldErrorMessage:"Please {fieldAction} a {fieldLabel}",fieldOptional:!1}},fp=Object.freeze({__proto__:null,default:{title:"Components/Lead Form Input Field"},Default:()=>e(Be,Object.assign({},gp)),WithError:()=>e(Be,Object.assign({},gp,{states:{...gp.states,leadFormState:{...gp.states.leadFormState,validationErrors:{firstName:"Please enter a first name"}}}})),Disabled:()=>e(Be,Object.assign({},gp,{states:{...gp.states,leadFormState:{...gp.states.leadFormState,disabled:!0}}})),WithInitialValue:()=>e(Be,Object.assign({},gp,{states:{...gp.states,leadFormState:{...gp.states.leadFormState,initialData:{firstName:"Jane"}}}}))}),bp={states:{leadFormState:{validationErrors:{},loading:!1,disabled:!1,initialData:{}}},content:{dropdownName:"country",dropdownLabel:"Country",requiredFieldErrorMessage:"Please select a country",optionalLabel:"(Optional)",dropdownOptional:!1,multiple:!1,selectOptions:[e("sl-menu-item",{value:"red"},"Canada"),e("sl-menu-item",{value:"blue"},"United States"),e("sl-menu-item",{value:"green"},"Mexico")]}},xp=Object.freeze({__proto__:null,default:{title:"Components/Lead Form Dropdown Field"},Default:()=>e(Ae,Object.assign({},bp)),Multiple:()=>e(Ae,Object.assign({},bp,{content:{...bp.content,multiple:!0}})),WithError:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,validationErrors:{country:"Please select a country"}}}})),Disabled:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,disabled:!0}}})),Loading:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,loading:!0}}})),WithInitialValue:()=>e(Ae,Object.assign({},bp,{states:{...bp.states,leadFormState:{...bp.states.leadFormState,initialData:{country:"Canada"}}}}))}),wp={states:{leadFormState:{validationErrors:{}}},content:{checkboxName:"terms",checkboxLabel:"By signing up you agree to the {labelLink}",checkboxLabelLink:"https://example.com",checkboxLabelLinkText:"Terms and Conditions",errorMessage:"{checkboxLabel} Must be checked"}},yp=na((()=>e(v,Object.assign({},wp)))),vp=na((()=>e(v,Object.assign({},wp,{content:{...wp.content,checkboxLabel:"I Agree"}})))),qp=na((()=>e(v,Object.assign({},wp,{states:{...wp.states,leadFormState:{validationErrors:{terms:"{checkboxLabel} Must be checked"}}}})))),Ep=na((()=>e(v,Object.assign({},wp,{states:{...wp.states,leadFormState:{validationErrors:{terms:"{checkboxLabel} Must be checked"}}},content:{...wp.content,errorMessage:"This checkbox must be checked to continue"}})))),Cp=Object.freeze({__proto__:null,default:{title:"Components/Lead Checkbox Field"},Default:yp,CustomLabel:vp,Error:qp,CustomError:Ep}),Tp=[{countryCode:"US",displayName:"United States"},{countryCode:"CA",displayName:"Canada"},{countryCode:"GB",displayName:"United Kingdom"},{countryCode:"AU",displayName:"Australia"},{countryCode:"DE",displayName:"Germany"},{countryCode:"FR",displayName:"France"},{countryCode:"ES",displayName:"Spain"}],Ap=[{currencyCode:"USD",displayName:"US Dollar"},{currencyCode:"CAD",displayName:"Canadian Dollar"},{currencyCode:"GBP",displayName:"British Pound"},{currencyCode:"EUR",displayName:"Euro"},{currencyCode:"AUD",displayName:"Australian Dollar"}],Dp={id:"partner-123",brandedSignup:!0,countryCode:"US",currency:"USD",billingAddress:"123 Main St",billingCity:"San Francisco",billingState:"CA",billingCountryCode:"US",billingPostalCode:"94102",phoneNumberCountryCode:"US",phoneNumber:"4155551234",currentTaxDocument:null,taxInformation:null,requiredTaxDocumentType:null,withdrawalSettings:{paymentMethod:"PAYPAL",paypalEmailAddress:null,bankCountry:null,bankAccountNumber:null,paymentSchedulingType:"BALANCE_THRESHOLD",paymentThreshold:null,paymentDay:null},payoutsAccount:{hold:!1,holdReasons:[],balance:"0"}},kp={states:{step:"1",hideState:!1,hideSteps:!1,disabled:!1,loadingError:!1,loading:!1,isPartner:!1,isUser:!1,formState:{firstName:"",lastName:"",email:"user@example.com",countryCode:"US",currency:"USD",phoneNumberCountryCode:"US",phoneNumber:"",address:"",city:"",state:"",postalCode:"",allowBankingCollection:!1,errors:{}}},data:{regionLabelEnum:"STATE",regions:[{label:"California",value:"CA"},{label:"New York",value:"NY"},{label:"Texas",value:"TX"},{label:"Florida",value:"FL"},{label:"Washington",value:"WA"}],countries:Tp,phoneCountries:Tp,allCountries:Tp,allCurrencies:Ap,currencies:Ap,partnerData:void 0,userData:void 0},callbacks:{setCurrencySearch:e=>console.log("setCurrencySearch",e),setCountrySearch:e=>console.log("setCountrySearch",e),setPhoneCountrySearch:e=>console.log("setPhoneCountrySearch",e),onSubmit:e=>console.log("onSubmit",e),onFormChange:(e,t)=>console.log("onFormChange",e,t)},text:{formStep:"Step {step} of {count}",firstName:"First Name",lastName:"Last Name",email:"Email",country:"Country",phoneNumber:"Phone Number",address:"Address",city:"City",state:"State",province:"Province",region:"Region",postalCode:"Postal Code",currency:"Currency",currencyHelpText:"Select your preferred currency for payouts",allowBankingCollection:"I agree to the {termsAndConditionsLink}",personalInformation:"Personal Information",continueButton:"Continue",isPartnerAlertHeader:"Partner Account Detected",isPartnerAlertDescription:"Some fields are pre-filled from your partner account. Contact {supportLink} if you need to make changes.",termsAndConditionsLabel:"Terms and Conditions",termsAndConditionsLink:"https://example.com/terms",taxAndPayoutsDescription:"Please provide your information for tax and payout purposes.",supportLink:"support@example.com",error:{generalTitle:"Error",generalDescription:"An error occurred. Please contact {supportLink} for assistance.",invalidCharacterError:"Invalid characters detected",fieldRequiredError:"{fieldName} is required",fieldInvalidError:"Invalid value",loadingErrorAlertHeader:"Loading Error",loadingErrorAlertDescription:"Failed to load form data. Please contact {supportLink}."},searchForCountryText:"Search for country...",searchForCurrencyText:"Search for currency..."},refs:{formRef:{current:null},currencyRef:{current:null},phoneCountryRef:{current:null}}},Sp=Object.freeze({__proto__:null,default:{title:"Components/User Info Form View"},Default:()=>e(Fe,Object.assign({},kp)),WithPrefilledData:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,firstName:"John",lastName:"Doe",email:"john.doe@example.com",countryCode:"US",currency:"USD",phoneNumberCountryCode:"US",phoneNumber:"4155551234",address:"123 Main St",city:"San Francisco",state:"CA",postalCode:"94102"}}})),Loading:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,loading:!0}})),LoadingError:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,loadingError:!0}})),WithValidationErrors:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,firstName:"John",lastName:"Doe",errors:{firstName:"First Name is required",lastName:"Last Name is required",phoneNumber:"Phone Number is required",address:"Address contains invalid characters",city:"City is required",state:"State is required",postalCode:"Postal Code is required",currency:"Currency is required",countryCode:"Country is required",allowBankingCollection:"You must accept the terms and conditions"}}}})),WithGeneralError:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,errors:{general:"An error occurred. Please contact support for assistance."}}}})),PartnerAccount:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,isPartner:!0,formState:{...kp.states.formState,firstName:"Jane",lastName:"Smith",email:"jane.smith@example.com",countryCode:"US",currency:"USD",phoneNumberCountryCode:"US",phoneNumber:"4155551234",address:"123 Main St",city:"San Francisco",state:"CA",postalCode:"94102"}},data:{...kp.data,partnerData:Dp}})),UserAccount:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,isUser:!0,formState:{...kp.states.formState,firstName:"Bob",lastName:"Johnson",email:"bob.johnson@example.com"}},data:{...kp.data,userData:{firstName:"Bob",lastName:"Johnson"}}})),UserAccountMissingLastName:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,isUser:!0,formState:{...kp.states.formState,firstName:"Bob",lastName:void 0,email:"bob.johnson@example.com"}},data:{...kp.data,userData:{firstName:"Bob",lastName:void 0}}})),CanadianAddress:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,formState:{...kp.states.formState,firstName:"Alice",lastName:"Martin",countryCode:"CA",state:"BC"}},data:{...kp.data,regionLabelEnum:"PROVINCE",regions:[{label:"British Columbia",value:"BC"},{label:"Ontario",value:"ON"},{label:"Quebec",value:"QC"},{label:"Alberta",value:"AB"}]}})),NoStateRegion:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,hideState:!0,formState:{...kp.states.formState,firstName:"Pierre",lastName:"Dubois",countryCode:"FR"}},data:{...kp.data,regionLabelEnum:void 0,regions:[]}})),HideSteps:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,hideSteps:!0}})),DisabledForm:()=>e(Fe,Object.assign({},kp,{states:{...kp.states,disabled:!0,formState:{...kp.states.formState,firstName:"Disabled",lastName:"User"}}}))});function Rp(e){return e instanceof Map?e.clear=e.delete=e.set=function(){throw new Error("map is read-only")}:e instanceof Set&&(e.add=e.clear=e.delete=function(){throw new Error("set is read-only")}),Object.freeze(e),Object.getOwnPropertyNames(e).forEach((function(t){var n=e[t];"object"!=typeof n||Object.isFrozen(n)||Rp(n)})),e}var Pp=Rp;Pp.default=Rp;class Ip{constructor(e){void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}ignoreMatch(){this.isMatchIgnored=!0}}function Np(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}function Fp(e,...t){const n=Object.create(null);for(const t in e)n[t]=e[t];return t.forEach((function(e){for(const t in e)n[t]=e[t]})),n}const Op=e=>!!e.kind;class Lp{constructor(e,t){this.buffer="",this.classPrefix=t.classPrefix,e.walk(this)}addText(e){this.buffer+=Np(e)}openNode(e){if(!Op(e))return;let t=e.kind;e.sublanguage||(t=`${this.classPrefix}${t}`),this.span(t)}closeNode(e){Op(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){this.buffer+=`<span class="${e}">`}}class Bp{constructor(){this.rootNode={children:[]},this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){this.top.children.push(e)}openNode(e){const t={kind:e,children:[]};this.add(t),this.stack.push(t)}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,t){return"string"==typeof t?e.addText(t):t.children&&(e.openNode(t),t.children.forEach((t=>this._walk(e,t))),e.closeNode(t)),e}static _collapse(e){"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{Bp._collapse(e)})))}}class _p extends Bp{constructor(e){super(),this.options=e}addKeyword(e,t){""!==e&&(this.openNode(t),this.addText(e),this.closeNode())}addText(e){""!==e&&this.add(e)}addSublanguage(e,t){const n=e.root;n.kind=t,n.sublanguage=!0,this.add(n)}toHTML(){return new Lp(this,this.options).value()}finalize(){return!0}}function Gp(e){return e?"string"==typeof e?e:e.source:null}const jp=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./,Wp="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",Up={begin:"\\\\[\\s\\S]",relevance:0},Mp={className:"string",begin:"'",end:"'",illegal:"\\n",contains:[Up]},Vp={className:"string",begin:'"',end:'"',illegal:"\\n",contains:[Up]},Hp={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},zp=function(e,t,n={}){const a=Fp({className:"comment",begin:e,end:t,contains:[]},n);return a.contains.push(Hp),a.contains.push({className:"doctag",begin:"(?:TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):",relevance:0}),a},Yp=zp("//","$"),$p=zp("/\\*","\\*/"),Xp=zp("#","$");var Jp=Object.freeze({__proto__:null,MATCH_NOTHING_RE:/\b\B/,IDENT_RE:"[a-zA-Z]\\w*",UNDERSCORE_IDENT_RE:"[a-zA-Z_]\\w*",NUMBER_RE:"\\b\\d+(\\.\\d+)?",C_NUMBER_RE:Wp,BINARY_NUMBER_RE:"\\b(0b[01]+)",RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",SHEBANG:(e={})=>{const t=/^#![ ]*\//;return e.binary&&(e.begin=function(...e){return e.map((e=>Gp(e))).join("")}(t,/.*\b/,e.binary,/\b.*/)),Fp({className:"meta",begin:t,end:/$/,relevance:0,"on:begin":(e,t)=>{0!==e.index&&t.ignoreMatch()}},e)},BACKSLASH_ESCAPE:Up,APOS_STRING_MODE:Mp,QUOTE_STRING_MODE:Vp,PHRASAL_WORDS_MODE:Hp,COMMENT:zp,C_LINE_COMMENT_MODE:Yp,C_BLOCK_COMMENT_MODE:$p,HASH_COMMENT_MODE:Xp,NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?",relevance:0},C_NUMBER_MODE:{className:"number",begin:Wp,relevance:0},BINARY_NUMBER_MODE:{className:"number",begin:"\\b(0b[01]+)",relevance:0},CSS_NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",relevance:0},REGEXP_MODE:{begin:/(?=\/[^/\n]*\/)/,contains:[{className:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[Up,{begin:/\[/,end:/\]/,relevance:0,contains:[Up]}]}]},TITLE_MODE:{className:"title",begin:"[a-zA-Z]\\w*",relevance:0},UNDERSCORE_TITLE_MODE:{className:"title",begin:"[a-zA-Z_]\\w*",relevance:0},METHOD_GUARD:{begin:"\\.\\s*[a-zA-Z_]\\w*",relevance:0},END_SAME_AS_BEGIN:function(e){return Object.assign(e,{"on:begin":(e,t)=>{t.data._beginMatch=e[1]},"on:end":(e,t)=>{t.data._beginMatch!==e[1]&&t.ignoreMatch()}})}});function Kp(e,t){"."===e.input[e.index-1]&&t.ignoreMatch()}function Zp(e,t){t&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",e.__beforeBegin=Kp,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,void 0===e.relevance&&(e.relevance=0))}function Qp(e){Array.isArray(e.illegal)&&(e.illegal=function(...e){return"("+e.map((e=>Gp(e))).join("|")+")"}(...e.illegal))}function eh(e){if(e.match){if(e.begin||e.end)throw new Error("begin & end are not supported with match");e.begin=e.match,delete e.match}}function th(e){void 0===e.relevance&&(e.relevance=1)}const nh=["of","and","for","in","not","or","if","then","parent","list","value"];function ah(e,t,n="keyword"){const a={};return"string"==typeof e?r(n,e.split(" ")):Array.isArray(e)?r(n,e):Object.keys(e).forEach((function(n){Object.assign(a,ah(e[n],t,n))})),a;function r(e,n){t&&(n=n.map((e=>e.toLowerCase()))),n.forEach((function(t){const n=t.split("|");a[n[0]]=[e,rh(n[0],n[1])]}))}}function rh(e,t){return t?Number(t):function(e){return nh.includes(e.toLowerCase())}(e)?0:1}function oh(e,{}){function t(t,n){return new RegExp(Gp(t),"m"+(e.case_insensitive?"i":"")+(n?"g":""))}class n{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(e,t){t.position=this.position++,this.matchIndexes[this.matchAt]=t,this.regexes.push([t,e]),this.matchAt+=function(e){return new RegExp(e.toString()+"|").exec("").length-1}(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null);const e=this.regexes.map((e=>e[1]));this.matcherRe=t(function(e,t="|"){let n=0;return e.map((e=>{n+=1;const t=n;let a=Gp(e),r="";for(;a.length>0;){const e=jp.exec(a);if(!e){r+=a;break}r+=a.substring(0,e.index),a=a.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?r+="\\"+String(Number(e[1])+t):(r+=e[0],"("===e[0]&&n++)}return r})).map((e=>`(${e})`)).join(t)}(e),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex;const t=this.matcherRe.exec(e);if(!t)return null;const n=t.findIndex(((e,t)=>t>0&&void 0!==e)),a=this.matchIndexes[n];return t.splice(0,n),Object.assign(t,a)}}class a{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){if(this.multiRegexes[e])return this.multiRegexes[e];const t=new n;return this.rules.slice(e).forEach((([e,n])=>t.addRule(e,n))),t.compile(),this.multiRegexes[e]=t,t}resumingScanAtSamePosition(){return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,t){this.rules.push([e,t]),"begin"===t.type&&this.count++}exec(e){const t=this.getMatcher(this.regexIndex);t.lastIndex=this.lastIndex;let n=t.exec(e);if(this.resumingScanAtSamePosition())if(n&&n.index===this.lastIndex);else{const t=this.getMatcher(0);t.lastIndex=this.lastIndex+1,n=t.exec(e)}return n&&(this.regexIndex+=n.position+1,this.regexIndex===this.count&&this.considerAll()),n}}if(e.compilerExtensions||(e.compilerExtensions=[]),e.contains&&e.contains.includes("self"))throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");return e.classNameAliases=Fp(e.classNameAliases||{}),function n(r,o){const i=r;if(r.isCompiled)return i;[eh].forEach((e=>e(r,o))),e.compilerExtensions.forEach((e=>e(r,o))),r.__beforeBegin=null,[Zp,Qp,th].forEach((e=>e(r,o))),r.isCompiled=!0;let s=null;if("object"==typeof r.keywords&&(s=r.keywords.$pattern,delete r.keywords.$pattern),r.keywords&&(r.keywords=ah(r.keywords,e.case_insensitive)),r.lexemes&&s)throw new Error("ERR: Prefer `keywords.$pattern` to `mode.lexemes`, BOTH are not allowed. (see mode reference) ");return s=s||r.lexemes||/\w+/,i.keywordPatternRe=t(s,!0),o&&(r.begin||(r.begin=/\B|\b/),i.beginRe=t(r.begin),r.endSameAsBegin&&(r.end=r.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),r.end&&(i.endRe=t(r.end)),i.terminatorEnd=Gp(r.end)||"",r.endsWithParent&&o.terminatorEnd&&(i.terminatorEnd+=(r.end?"|":"")+o.terminatorEnd)),r.illegal&&(i.illegalRe=t(r.illegal)),r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((function(e){return function(e){return e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((function(t){return Fp(e,{variants:null},t)}))),e.cachedVariants?e.cachedVariants:ih(e)?Fp(e,{starts:e.starts?Fp(e.starts):null}):Object.isFrozen(e)?Fp(e):e}("self"===e?r:e)}))),r.contains.forEach((function(e){n(e,i)})),r.starts&&n(r.starts,o),i.matcher=function(e){const t=new a;return e.contains.forEach((e=>t.addRule(e.begin,{rule:e,type:"begin"}))),e.terminatorEnd&&t.addRule(e.terminatorEnd,{type:"end"}),e.illegal&&t.addRule(e.illegal,{type:"illegal"}),t}(i),i}(e)}function ih(e){return!!e&&(e.endsWithParent||ih(e.starts))}function sh(e){const t={props:["language","code","autodetect"],data:function(){return{detectedLanguage:"",unknownLanguage:!1}},computed:{className(){return this.unknownLanguage?"":"hljs "+this.detectedLanguage},highlighted(){if(!this.autoDetect&&!e.getLanguage(this.language))return console.warn(`The language "${this.language}" you specified could not be found.`),this.unknownLanguage=!0,Np(this.code);let t={};return this.autoDetect?(t=e.highlightAuto(this.code),this.detectedLanguage=t.language):(t=e.highlight(this.language,this.code,this.ignoreIllegals),this.detectedLanguage=this.language),t.value},autoDetect(){return!this.language||(e=this.autodetect,Boolean(e||""===e));var e},ignoreIllegals:()=>!0},render(e){return e("pre",{},[e("code",{class:this.className,domProps:{innerHTML:this.highlighted}})])}};return{Component:t,VuePlugin:{install(e){e.component("highlightjs",t)}}}}const lh={"after:highlightElement":({el:e,result:t,text:n})=>{const a=uh(e);if(!a.length)return;const r=document.createElement("div");r.innerHTML=t.value,t.value=function(e,t,n){let a=0,r="";const o=[];function i(){return e.length&&t.length?e[0].offset!==t[0].offset?e[0].offset<t[0].offset?e:t:"start"===t[0].event?e:t:e.length?e:t}function s(e){r+="<"+dh(e)+[].map.call(e.attributes,(function(e){return" "+e.nodeName+'="'+Np(e.value)+'"'})).join("")+">"}function l(e){r+="</"+dh(e)+">"}function d(e){("start"===e.event?s:l)(e.node)}for(;e.length||t.length;){let t=i();if(r+=Np(n.substring(a,t[0].offset)),a=t[0].offset,t===e){o.reverse().forEach(l);do{d(t.splice(0,1)[0]),t=i()}while(t===e&&t.length&&t[0].offset===a);o.reverse().forEach(s)}else"start"===t[0].event?o.push(t[0].node):o.pop(),d(t.splice(0,1)[0])}return r+Np(n.substr(a))}(a,uh(r),n)}};function dh(e){return e.nodeName.toLowerCase()}function uh(e){const t=[];return function e(n,a){for(let r=n.firstChild;r;r=r.nextSibling)3===r.nodeType?a+=r.nodeValue.length:1===r.nodeType&&(t.push({event:"start",offset:a,node:r}),a=e(r,a),dh(r).match(/br|hr|img|input/)||t.push({event:"stop",offset:a,node:r}));return a}(e,0),t}const ch={},mh=e=>{console.error(e)},ph=(e,...t)=>{console.log(`WARN: ${e}`,...t)},hh=(e,t)=>{ch[`${e}/${t}`]||(console.log(`Deprecated as of ${e}. ${t}`),ch[`${e}/${t}`]=!0)},gh=Np,fh=Fp,bh=Symbol("nomatch");var xh=function(e){const t=Object.create(null),n=Object.create(null),a=[];let r=!0;const o=/(^(<[^>]+>|\t|)+|\n)/gm,i="Could not find the language '{}', did you forget to load/include a language module?",s={disableAutodetect:!0,name:"Plain text",contains:[]};let l={noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:null,__emitter:_p};function d(e){return l.noHighlightRe.test(e)}function u(e,t,n,a){let r="",o="";"object"==typeof t?(r=e,n=t.ignoreIllegals,o=t.language,a=void 0):(hh("10.7.0","highlight(lang, code, ...args) has been deprecated."),hh("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),o=e,r=t);const i={code:r,language:o};E("before:highlight",i);const s=i.result?i.result:c(i.language,i.code,n,a);return s.code=i.code,E("after:highlight",s),s}function c(e,n,o,s){function d(e,t){const n=w.case_insensitive?t[0].toLowerCase():t[0];return Object.prototype.hasOwnProperty.call(e.keywords,n)&&e.keywords[n]}function u(){null!=E.subLanguage?function(){if(""===A)return;let e=null;if("string"==typeof E.subLanguage){if(!t[E.subLanguage])return void T.addText(A);e=c(E.subLanguage,A,!0,C[E.subLanguage]),C[E.subLanguage]=e.top}else e=m(A,E.subLanguage.length?E.subLanguage:null);E.relevance>0&&(D+=e.relevance),T.addSublanguage(e.emitter,e.language)}():function(){if(!E.keywords)return void T.addText(A);let e=0;E.keywordPatternRe.lastIndex=0;let t=E.keywordPatternRe.exec(A),n="";for(;t;){n+=A.substring(e,t.index);const a=d(E,t);if(a){const[e,r]=a;T.addText(n),n="",D+=r,e.startsWith("_")?n+=t[0]:T.addKeyword(t[0],w.classNameAliases[e]||e)}else n+=t[0];e=E.keywordPatternRe.lastIndex,t=E.keywordPatternRe.exec(A)}n+=A.substr(e),T.addText(n)}(),A=""}function p(e){return e.className&&T.openNode(w.classNameAliases[e.className]||e.className),E=Object.create(e,{parent:{value:E}}),E}function h(e,t,n){let a=function(e,t){const n=e&&e.exec(t);return n&&0===n.index}(e.endRe,n);if(a){if(e["on:end"]){const n=new Ip(e);e["on:end"](t,n),n.isMatchIgnored&&(a=!1)}if(a){for(;e.endsParent&&e.parent;)e=e.parent;return e}}if(e.endsWithParent)return h(e.parent,t,n)}function g(e){return 0===E.matcher.regexIndex?(A+=e[0],1):(R=!0,0)}function f(e){const t=e[0],a=n.substr(e.index),r=h(E,e,a);if(!r)return bh;const o=E;o.skip?A+=t:(o.returnEnd||o.excludeEnd||(A+=t),u(),o.excludeEnd&&(A=t));do{E.className&&T.closeNode(),E.skip||E.subLanguage||(D+=E.relevance),E=E.parent}while(E!==r.parent);return r.starts&&(r.endSameAsBegin&&(r.starts.endRe=r.endRe),p(r.starts)),o.returnEnd?0:t.length}let b={};function x(t,a){const i=a&&a[0];if(A+=t,null==i)return u(),0;if("begin"===b.type&&"end"===a.type&&b.index===a.index&&""===i){if(A+=n.slice(a.index,a.index+1),!r){const t=new Error("0 width match regex");throw t.languageName=e,t.badRule=b.rule,t}return 1}if(b=a,"begin"===a.type)return function(e){const t=e[0],n=e.rule,a=new Ip(n),r=[n.__beforeBegin,n["on:begin"]];for(const n of r)if(n&&(n(e,a),a.isMatchIgnored))return g(t);return n&&n.endSameAsBegin&&(n.endRe=new RegExp(t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")),n.skip?A+=t:(n.excludeBegin&&(A+=t),u(),n.returnBegin||n.excludeBegin||(A=t)),p(n),n.returnBegin?0:t.length}(a);if("illegal"===a.type&&!o){const e=new Error('Illegal lexeme "'+i+'" for mode "'+(E.className||"<unnamed>")+'"');throw e.mode=E,e}if("end"===a.type){const e=f(a);if(e!==bh)return e}if("illegal"===a.type&&""===i)return 1;if(S>1e5&&S>3*a.index)throw new Error("potential infinite loop, way more iterations than matches");return A+=i,i.length}const w=y(e);if(!w)throw mh(i.replace("{}",e)),new Error('Unknown language: "'+e+'"');const v=oh(w,{plugins:a});let q="",E=s||v;const C={},T=new l.__emitter(l);!function(){const e=[];for(let t=E;t!==w;t=t.parent)t.className&&e.unshift(t.className);e.forEach((e=>T.openNode(e)))}();let A="",D=0,k=0,S=0,R=!1;try{for(E.matcher.considerAll();;){S++,R?R=!1:E.matcher.considerAll(),E.matcher.lastIndex=k;const e=E.matcher.exec(n);if(!e)break;const t=x(n.substring(k,e.index),e);k=e.index+t}return x(n.substr(k)),T.closeAllNodes(),T.finalize(),q=T.toHTML(),{relevance:Math.floor(D),value:q,language:e,illegal:!1,emitter:T,top:E}}catch(t){if(t.message&&t.message.includes("Illegal"))return{illegal:!0,illegalBy:{msg:t.message,context:n.slice(k-100,k+100),mode:t.mode},sofar:q,relevance:0,value:gh(n),emitter:T};if(r)return{illegal:!1,relevance:0,value:gh(n),emitter:T,language:e,top:E,errorRaised:t};throw t}}function m(e,n){n=n||l.languages||Object.keys(t);const a=function(e){const t={relevance:0,emitter:new l.__emitter(l),value:gh(e),illegal:!1,top:s};return t.emitter.addText(e),t}(e),r=n.filter(y).filter(q).map((t=>c(t,e,!1)));r.unshift(a);const o=r.sort(((e,t)=>{if(e.relevance!==t.relevance)return t.relevance-e.relevance;if(e.language&&t.language){if(y(e.language).supersetOf===t.language)return 1;if(y(t.language).supersetOf===e.language)return-1}return 0})),[i,d]=o,u=i;return u.second_best=d,u}const p={"before:highlightElement":({el:e})=>{l.useBR&&(e.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ /]*>/g,"\n"))},"after:highlightElement":({result:e})=>{l.useBR&&(e.value=e.value.replace(/\n/g,"<br>"))}},h=/^(<[^>]+>|\t)+/gm,g={"after:highlightElement":({result:e})=>{l.tabReplace&&(e.value=e.value.replace(h,(e=>e.replace(/\t/g,l.tabReplace))))}};function f(e){let t=null;const a=function(e){let t=e.className+" ";t+=e.parentNode?e.parentNode.className:"";const n=l.languageDetectRe.exec(t);if(n){const t=y(n[1]);return t||(ph(i.replace("{}",n[1])),ph("Falling back to no-highlight mode for this block.",e)),t?n[1]:"no-highlight"}return t.split(/\s+/).find((e=>d(e)||y(e)))}(e);if(d(a))return;E("before:highlightElement",{el:e,language:a}),t=e;const r=t.textContent,o=a?u(r,{language:a,ignoreIllegals:!0}):m(r);E("after:highlightElement",{el:e,result:o,text:r}),e.innerHTML=o.value,function(e,t,a){const r=t?n[t]:a;e.classList.add("hljs"),r&&e.classList.add(r)}(e,a,o.language),e.result={language:o.language,re:o.relevance,relavance:o.relevance},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.relevance,relavance:o.second_best.relevance})}const b=()=>{b.called||(b.called=!0,hh("10.6.0","initHighlighting() is deprecated.  Use highlightAll() instead."),document.querySelectorAll("pre code").forEach(f))};let x=!1;function w(){"loading"!==document.readyState?document.querySelectorAll("pre code").forEach(f):x=!0}function y(e){return e=(e||"").toLowerCase(),t[e]||t[n[e]]}function v(e,{languageName:t}){"string"==typeof e&&(e=[e]),e.forEach((e=>{n[e.toLowerCase()]=t}))}function q(e){const t=y(e);return t&&!t.disableAutodetect}function E(e,t){const n=e;a.forEach((function(e){e[n]&&e[n](t)}))}"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(function(){x&&w()}),!1),Object.assign(e,{highlight:u,highlightAuto:m,highlightAll:w,fixMarkup:function(e){return hh("10.2.0","fixMarkup will be removed entirely in v11.0"),hh("10.2.0","Please see https://github.com/highlightjs/highlight.js/issues/2534"),t=e,l.tabReplace||l.useBR?t.replace(o,(e=>"\n"===e?l.useBR?"<br>":e:l.tabReplace?e.replace(/\t/g,l.tabReplace):e)):t;var t},highlightElement:f,highlightBlock:function(e){return hh("10.7.0","highlightBlock will be removed entirely in v12.0"),hh("10.7.0","Please use highlightElement now."),f(e)},configure:function(e){e.useBR&&(hh("10.3.0","'useBR' will be removed entirely in v11.0"),hh("10.3.0","Please see https://github.com/highlightjs/highlight.js/issues/2559")),l=fh(l,e)},initHighlighting:b,initHighlightingOnLoad:function(){hh("10.6.0","initHighlightingOnLoad() is deprecated.  Use highlightAll() instead."),x=!0},registerLanguage:function(n,a){let o=null;try{o=a(e)}catch(e){if(mh("Language definition for '{}' could not be registered.".replace("{}",n)),!r)throw e;mh(e),o=s}o.name||(o.name=n),t[n]=o,o.rawDefinition=a.bind(null,e),o.aliases&&v(o.aliases,{languageName:n})},unregisterLanguage:function(e){delete t[e];for(const t of Object.keys(n))n[t]===e&&delete n[t]},listLanguages:function(){return Object.keys(t)},getLanguage:y,registerAliases:v,requireLanguage:function(e){hh("10.4.0","requireLanguage will be removed entirely in v11."),hh("10.4.0","Please see https://github.com/highlightjs/highlight.js/pull/2844");const t=y(e);if(t)return t;throw new Error("The '{}' language is required, but not loaded.".replace("{}",e))},autoDetection:q,inherit:fh,addPlugin:function(e){!function(e){e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{e["before:highlightBlock"](Object.assign({block:t.el},t))}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{e["after:highlightBlock"](Object.assign({block:t.el},t))})}(e),a.push(e)},vuePlugin:sh(e).VuePlugin}),e.debugMode=function(){r=!1},e.safeMode=function(){r=!0},e.versionString="10.7.3";for(const e in Jp)"object"==typeof Jp[e]&&Pp(Jp[e]);return Object.assign(e,Jp),e.addPlugin(p),e.addPlugin(lh),e.addPlugin(g),e}({});xh.registerLanguage("gherkin",(function(e){return{name:"Gherkin",aliases:["feature"],keywords:"Feature Background Ability Business Need Scenario Scenarios Scenario Outline Scenario Template Examples Given And Then But When",contains:[{className:"symbol",begin:"\\*",relevance:0},{className:"meta",begin:"@[^@\\s]+"},{begin:"\\|",end:"\\|\\w*$",contains:[{className:"string",begin:"[^|]+"}]},{className:"variable",begin:"<",end:">"},e.HASH_COMMENT_MODE,{className:"string",begin:'"""',end:'"""'},e.QUOTE_STRING_MODE]}}));const wh=({story:t},n)=>{var a;let r,o=null===(a=t.parent.parameters)||void 0===a?void 0:a.scenario;try{r=xh.highlight("gherkin",o)}catch(e){}return e("div",null,e("details",null,e("summary",null,"Specs"),r&&e("pre",{innerHTML:r.value})),n)},yh=[Sp,Ei,wi,Ai,sm,es,pm,$a,Ii,$o,Di,xm,cm,zr,Ho,Mi,vo,Wo,mi,om,Ps,Mo,Xo,ea,Zi,Qi,js,Zs,Ss,qs,ul,pl,Ro,ms,Ys,lu,$l,zd,_m,ts,km,ka,Va,yl,Sa,Cs,Ko,jl,Ki,po,$i,Lo,ni,xu,Du,Im,Qc,gl,hl,Xr,Qr,ps,Cc,Vc,fu,Jo,Pl,Lm,Zo,Bm,im,wm,mm,Ao,Il,_l,Yi,Hi,lp,Co,Jm,Dl,Fm,ip,Km,Vm,al,os,Ya,Os,Um,jm,as,Qm,ql,Om,hp,fp,xp,Cp],vh=class{constructor(e){t(this,e),this.ignored=!0,l(this)}disconnectedCallback(){}render(){const{class:t,children:a}=function(t,n){var a=n.h,i=void 0===a?e:a,s=n.title,l=void 0===s?"Stencilbook":s,d=n.homepage,u=void 0===d?i("h3",null,"Select a story!"):d,c=n.addons,m=void 0===c?[]:c,p=r((function(){return t.map(Yn).reduce(zn,{_:[]})}),t),h=decodeURIComponent(window.location.hash).replace("#",""),g=o($n(h,p)),f=g[0],b=g[1],x=null==f?void 0:f.key,w=o(!0),y=w[0],v=w[1],q=o(!1),E=q[0],C=q[1],T=function(){return i("div",{class:"dynamic-display-wrapper"},i("button",{class:E?"active":"",onClick:function(){return C((function(e){return!e}))}},"Toggle Dark Background"),i("button",{class:y?"active":"",onClick:function(){return v((function(e){return!e}))}},"Toggle Sidebar"))},A=Gn(Mn||(Mn=Wn(["\n    max-width: ",";\n    margin-left: ",";\n  "])),"1124px",y?"250px":"0px"),D=Gn(Vn||(Vn=Wn(["\n    display: none;\n  "])));document.body.style.backgroundColor=E?"#232323":"#fafafa";var k=function(e){var t=e.selected,n=m.reduce((function(e,n){return function(){return i(n,{story:jn({},t)},i(e,null))}}),null==t?void 0:t.story);return i(n,null)},S=function(){return i("div",{class:"story-book-outer-div"},i("div",{class:"story-div "+(y?"":D)},i("div",{class:"header",onClick:function(){b(void 0)}},i("h2",null,l)),i("ul",{class:"parentStoryList"},Object.keys(p).sort().map((function(e){return i("div",{class:"group-wrapper"},"_"!==e&&i("h4",{class:"group-header"},e),p[e].map((function(t){return i("li",{class:"parentStory"},i("details",{style:{marginBottom:"10px"}},i("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map((function(n){var a=e+"-"+t.story.title+"-"+n,r=t.subs[n].storyName||qt(n);return i("div",{class:"subStory "+(x===a?"selected":"")},i("a",{onClick:function(){return function(e){window.location.hash=encodeURIComponent(e),b($n(e,p))}(a)}},r))}))))})))})))),i(T,null),i("div",{class:"component "+A},!x&&u,x&&i("div",null,i("h3",null,f.label),i(k,{selected:f}))))};return{class:Hn,children:i(S,null),View:S,selected:f}}(yh,{h:e,title:"Mint Components",addons:[ta,De,wh]}),[i,s]=o("Default"),[l,d]=o(!0);return e(n,{class:t,onClick:{}},e("sqm-brand-selector",null),a)}};export{vh as sqm_stencilbook}