@saasquatch/mint-components 1.5.0 → 1.5.1-0

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -36,115 +36,455 @@ export const SingleTab = () => (h("div", { style: { maxWidth: "700px", margin: "
       </sqm-tabs>
     ` }));
 export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs>
-        <sqm-tab header="Leaderboard">
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs>
+    <sqm-tab header="Leaderboard">
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table>
+        <sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <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="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="top">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="top">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table>
+        <sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <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="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 export const BottomTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="bottom">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="bottom">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table
+        ><sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <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="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 export const LeftTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="left">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="left">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table
+        ><sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <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="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));
 export const RightTabs = () => (h("div", { style: { maxWidth: "900px", margin: "auto" }, innerHTML: `
-     <sqm-tabs placement="right">
-        <sqm-tab header="Leaderboard">
-          <sqm-hero-image
-            image-url="https://i.imgur.com/MVgOJn7.png"
-            description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
-            layout="columns"
-            image-percentage="33%"
-            padding-image="large"
-            padding-text="large"
-            background-color=""
-          ></sqm-hero-image>
-          <sqm-leaderboard></sqm-leaderboard>
-        </sqm-tab>
-        <sqm-tab header="Referral history">
-          <sqm-referral-table></sqm-referral-table>
-        </sqm-tab>
-        <sqm-tab header="Reward history">
-          <sqm-rewards-table></sqm-rewards-table>
-        </sqm-tab>
-        <sqm-tab header="Redeem">
-          <sqm-reward-exchange-list></sqm-reward-exchange-list>
-        </sqm-tab>
-      </sqm-tabs>
+    <sqm-tabs placement="right">
+    <sqm-tab header="Leaderboard">
+      <sqm-hero-image
+        image-url="https://i.imgur.com/MVgOJn7.png"
+        description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
+        layout="columns"
+        image-percentage="33%"
+        padding-image="large"
+        padding-text="large"
+        background-color=""
+      ></sqm-hero-image>
+      <sqm-leaderboard></sqm-leaderboard>
+    </sqm-tab>
+    <sqm-tab header="Referral history">
+      <sqm-referral-table
+        ><sqm-referral-table-user-column
+          column-title="User"
+          anonymous-user="Anonymous User"
+          deleted-user="Deleted User"
+        >
+        </sqm-referral-table-user-column>
+        <sqm-referral-table-status-column
+          column-title="Referral status"
+          converted-status-text="Converted"
+          in-progress-status-text="In Progress"
+        >
+        </sqm-referral-table-status-column>
+        <sqm-referral-table-rewards-column
+          column-title="Rewards"
+          expiring-text="Expiring in"
+          fuel-tank-text="Your code is"
+          pending-for-text="{status} for {date}"
+          reward-received-text="Reward received on"
+          status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }"
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-referral-table-rewards-column>
+        <sqm-referral-table-date-column
+          column-title="Date referred"
+          date-shown="dateReferralStarted"
+        >
+        </sqm-referral-table-date-column>
+        <sqm-empty
+          empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png"
+          empty-state-header="View your referral details"
+          empty-state-text="Refer a friend to view the status of your referrals and rewards earned"
+        >
+        </sqm-empty
+      ></sqm-referral-table>
+    </sqm-tab>
+    <sqm-tab header="Reward history">
+      <sqm-rewards-table
+        ><sqm-rewards-table-reward-column
+          available-text="{availableAmount} remaining"
+          column-title="Reward"
+          copy-text="Copied!"
+          redeemed-text="{redeemedAmount} redeemed"
+        >
+        </sqm-rewards-table-reward-column>
+        <sqm-rewards-table-source-column
+          anonymous-user="Anonymous User"
+          column-title="Source"
+          deleted-user="Deleted User"
+          referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
+          reward-exchange-text="Reward Exchange"
+          reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"
+        >
+        </sqm-rewards-table-source-column>
+        <sqm-rewards-table-status-column
+          column-title="Status"
+          expiry-text="Expires on "
+          status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"
+        >
+        </sqm-rewards-table-status-column>
+        <sqm-rewards-table-date-column
+          column-title="Date received"
+          date-shown="dateGiven"
+        >
+        </sqm-rewards-table-date-column>
+        <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="Refer friends and complete tasks to view the details of your rewards"
+        >
+        </sqm-empty
+      ></sqm-rewards-table>
+    </sqm-tab>
+    <sqm-tab header="Redeem">
+      <sqm-reward-exchange-list></sqm-reward-exchange-list>
+    </sqm-tab>
+  </sqm-tabs>  
     ` }));

package/dist/collection/global/mixins.js

@@ -81,7 +81,7 @@ export const AuthWrapper = {
 };
 export const AuthColumn = {
   ...Column,
-  "& > *:not(style, div)": { display: "block" },
+  "& > *:not(style, div, slot)": { display: "block" },
   ...gap({ direction: "column", size: "var(--sl-spacing-large)" }),
 };
 export const AuthButtonsContainer = {

package/dist/esm/{GenericTableView-6924630b.js → GenericTableView-8dc8ae86.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { g as gap } from './mixins-10353a39.js';
-import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { g as gap } from './mixins-59fd94b7.js';
+import { c as createStyleSheet } from './JSS-418cab16.js';
 
 function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;

package/dist/esm/{JSS-96eeab98.js → JSS-418cab16.js}

@@ -4270,4 +4270,4 @@ var create$1 = function create(options) {
 const jss$1 = create(create$1());
 const createStyleSheet = (...args) => jss$1.createStyleSheet(...args);
 
-export { createStyleSheet as c };
+export { create$1 as a, createStyleSheet as c, jss as j };