tide-design-system 2.1.12 → 2.1.13

package/index.ts

@@ -2,7 +2,6 @@ import TideAccordionItem from '@/components/TideAccordionItem.vue';
 import TideAlert from '@/components/TideAlert.vue';
 import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
 import TideBadge from '@/components/TideBadge.vue';
-import TideBadgePremium from '@/components/TideBadgePremium.vue';
 import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
 import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import TideButton from '@/components/TideButton.vue';
@@ -30,7 +29,7 @@ import TidePagination from '@/components/TidePagination.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
-import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
+import { BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
 import { TYPE_CARD } from '@/types/Card';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
@@ -47,7 +46,7 @@ import { TEXT_INPUT_TYPE } from '@/types/TextInput';
 import { VALIDATOR } from '@/types/Validation';
 
 import type { Alert } from '@/types/Alert';
-import type { Badge, BadgePremium, BadgeTrustedYears } from '@/types/Badge';
+import type { BadgeTrustedYears } from '@/types/Badge';
 import type { BreadCrumb } from '@/types/BreadCrumb';
 import type { Breakpoint, Media } from '@/types/Breakpoint';
 import type { CardType } from '@/types/Card';
@@ -99,8 +98,6 @@ import '@/assets/css/main.css';
 
 export type {
   Alert,
-  Badge,
-  BadgePremium,
   BadgeTrustedYears,
   BooleanField,
   BooleanInput,
@@ -160,8 +157,6 @@ export type {
 
 export {
   ALERT,
-  BADGE,
-  BADGE_PREMIUM,
   BADGE_TRUSTED,
   BREAKPOINT,
   CSS,
@@ -189,7 +184,6 @@ export {
   TideAlert,
   TideBackgroundImage,
   TideBadge,
-  TideBadgePremium,
   TideBadgeTrustedPartner,
   TideBreadCrumbs,
   TideButton,

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/utilities-lg.css

@@ -111,7 +111,7 @@
 	.lg-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 	.lg-tide-margin-left-0    {margin-left: 0;}
-	.lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
+	.lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
 	.lg-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 	.lg-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 	.lg-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -360,6 +360,7 @@
 	.lg-tide-shadow-initial {box-shadow: initial;}
 	.lg-tide-shadow-bottom  {box-shadow: var(--tide-shadow-bottom);}
 	.lg-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
+	.lg-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
 	.lg-tide-text-center {text-align: center;}
 	.lg-tide-text-left   {text-align: left;}

package/src/assets/css/utilities-md.css

@@ -113,7 +113,7 @@
 	.md-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 	.md-tide-margin-left-0    {margin-left: 0;}
-	.md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
+	.md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
 	.md-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 	.md-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 	.md-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -362,6 +362,7 @@
 	.md-tide-shadow-initial {box-shadow: initial;}
 	.md-tide-shadow-bottom  {box-shadow: var(--tide-shadow-bottom);}
 	.md-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
+	.md-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
 	.md-tide-text-center {text-align: center;}
 	.md-tide-text-left   {text-align: left;}

package/src/assets/css/utilities-sm.css

@@ -111,7 +111,7 @@
 	.sm-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 	.sm-tide-margin-left-0    {margin-left: 0;}
-	.sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
+	.sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
 	.sm-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 	.sm-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 	.sm-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -360,6 +360,7 @@
 	.sm-tide-shadow-initial {box-shadow: initial;}
 	.sm-tide-shadow-bottom  {box-shadow: var(--tide-shadow-bottom);}
 	.sm-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
+	.sm-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
 	.sm-tide-text-center {text-align: center;}
 	.sm-tide-text-left   {text-align: left;}

package/src/assets/css/utilities-xl.css

@@ -111,7 +111,7 @@
 	.lg-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 	.lg-tide-margin-left-0    {margin-left: 0;}
-	.lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
+	.lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
 	.lg-tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 	.lg-tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 	.lg-tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -360,6 +360,7 @@
 	.lg-tide-shadow-initial {box-shadow: initial;}
 	.lg-tide-shadow-bottom  {box-shadow: var(--tide-shadow-bottom);}
 	.lg-tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
+	.lg-tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
 	.lg-tide-text-center {text-align: center;}
 	.lg-tide-text-left   {text-align: left;}

package/src/assets/css/utilities.css

@@ -110,7 +110,7 @@
 .tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
 
 .tide-margin-left-0    {margin-left: 0;}
-.tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/2);}
+.tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
 .tide-margin-left-1\/2 {margin-left: var(--tide-spacing-1\/2);}
 .tide-margin-left-1    {margin-left: var(--tide-spacing-1);}
 .tide-margin-left-2    {margin-left: var(--tide-spacing-2);}
@@ -359,6 +359,7 @@
 .tide-shadow-initial {box-shadow: initial;}
 .tide-shadow-bottom  {box-shadow: var(--tide-shadow-bottom);}
 .tide-shadow-top     {box-shadow: var(--tide-shadow-top);}
+.tide-shadow-text    {text-shadow: var(--tide-shadow-text);}
 
 .tide-text-center {text-align: center;}
 .tide-text-left   {text-align: left;}

package/src/assets/css/variables.css

@@ -44,6 +44,7 @@
   /* Shadow */
   --tide-shadow-bottom: 0px  2px 8px 2px rgba(0, 0, 0, 0.07);
   --tide-shadow-top:    0px -2px 8px 2px rgba(0, 0, 0, 0.07);
+  --tide-shadow-text:   0px  0px 5px rgba(0, 0, 0, 0.6);
 
   /* Transparency */
   --tide-transparent-100: color-mix(in srgb, white 90%, transparent);
@@ -52,10 +53,8 @@
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
   /* Global tonal palette */
-  --tide-blue-100:  #D1E0EB;
-  --tide-blue-200:  #A4C1D7;
-  --tide-blue-300:  #76A3C4;
-  --tide-blue-400:  #4984B0;
+  --tide-blue-100:  #EBF1FD;
+  --tide-blue-400:  #3870E9;
 
   --tide-gray-100:  #FFFFFF;
   --tide-gray-200:  #F5F5F5;
@@ -68,20 +67,13 @@
   --tide-gray-900:  #252526;
   --tide-gray-1000: #000000;
 
-  --tide-green-100:  #E6EFCF;
-  --tide-green-200:  #CDE09E;
-  --tide-green-300:  #B4D06E;
-  --tide-green-400:  #9BC13D;
+  --tide-green-100:  #E7F6ED;
+  --tide-green-400:  #30B351;
 
-  --tide-red-100:  #EFCFCF;
-  --tide-red-200:  #E09E9E;
-  --tide-red-300:  #D06E6E;
-  --tide-red-400:  #C13D3D;
-  --tide-red-500:  #912E2E;
+  --tide-red-100:  #FBE9EA;
+  --tide-red-400:  #D8202E;
 
   --tide-yellow-100:  #FEF2CC;
-  --tide-yellow-200:  #FCE499;
-  --tide-yellow-300:  #FBD766;
   --tide-yellow-400:  #FACA33;
 
   /* Global color roles */

package/src/assets/svg/icons/IconVerified.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M7 8H17V16H7V8Z" fill="white"/>
   <path d="m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z" />
 </svg>

package/src/components/TideAccordionItem.vue

@@ -54,10 +54,8 @@
     </div>
 
     <div :class="['tide-accordion-body', props.isExpanded ? 'expanded' : 'collapsed', CSS.DISPLAY.GRID]">
-      <div :class="[CSS.OVERFLOW.Y.HIDDEN]">
-        <div :class="[CSS.MARGIN.Y.ONE, CSS.FONT.ROLE.BODY_1, CSS.FONT.COLOR.SURFACE.DEFAULT]">
-          <slot />
-        </div>
+      <div :class="[CSS.OVERFLOW.Y.HIDDEN, CSS.MARGIN.Y.ONE, CSS.FONT.ROLE.BODY_1, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+        <slot />
       </div>
     </div>
 

package/src/components/TideBadge.vue

@@ -1,30 +1,41 @@
 <script lang="ts" setup>
+  import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
 
+  import type { Icon } from '@/types/Icon';
+
   type Props = {
+    iconLeading?: Icon;
+    isFloating?: boolean;
     label: string;
   };
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    iconLeading: undefined,
+    isFloating: false,
+  });
 </script>
 
 <template>
   <div
     :class="[
       'tide-badge',
-      CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.BG.SURFACE.FLOATING,
+      props.isFloating
+        ? [CSS.BG.SURFACE.FLOATING, CSS.FONT.ROLE.LABEL_3, CSS.SHADOW.BOTTOM]
+        : [CSS.BG.SURFACE.VARIANT, CSS.FONT.ROLE.LABEL_2],
       CSS.DISPLAY.INLINE_FLEX,
       CSS.AXIS2.CENTER,
       CSS.GAP.QUARTER,
       CSS.BORDER.RADIUS.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
-      CSS.FONT.ROLE.BODY_2,
     ]"
   >
+    <TideIcon
+      :icon="props.iconLeading"
+      v-if="props.iconLeading"
+    />
+
     {{ props.label }}
   </div>
 </template>
-
-<style scoped></style>

package/src/components/TideBadgeTrustedPartner.vue

@@ -25,10 +25,10 @@
       CSS.GAP.QUARTER,
       CSS.PADDING.Y.QUARTER,
       CSS.PADDING.X.HALF,
-      CSS.FONT.ROLE.BODY_2,
+      CSS.FONT.ROLE.LABEL_2,
     ]"
   >
-    <TideIcon :icon="ICON.VIEW_IN_AR" />
+    <TideIcon :icon="ICON.AWARD_STAR" />
     <div :class="[]">
       <span>{{ props.years }} year trusted partner</span>
     </div>

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+  import TideIcon from '@/components/TideIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { CSS } from '@/types/Styles';
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-badge-verified-vehicle',
+      CSS.BG.SECONDARY,
+      CSS.FONT.ROLE.LABEL_2,
+      CSS.FONT.COLOR.SECONDARY,
+      CSS.DISPLAY.INLINE_FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.QUARTER,
+      CSS.BORDER.RADIUS.QUARTER,
+      CSS.PADDING.Y.QUARTER,
+      CSS.PADDING.X.HALF,
+    ]"
+  >
+    <TideIcon :icon="ICON.VERIFIED" />
+
+    <span>Verified vehicle</span>
+  </div>
+</template>
+
+<style scoped>
+  .tide-icon {
+    color: var(--tide-blue-400);
+  }
+</style>

package/src/stories/FoundationsShadow.stories.ts

@@ -1,5 +1,11 @@
 import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import { CSS } from '@/types/Styles';
+import {
+  argTypeBooleanUnrequired,
+  formatArgType,
+  getConstantsByValues,
+  prependNoneAsEmpty,
+} from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
@@ -14,7 +20,8 @@ const formatArgs = (args: any) => {
 const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
-  if (args.shadow) classNames.push(args.shadow);
+  if (args.box) classNames.push(args.box);
+  if (args.text) classNames.push(CSS.SHADOW.TEXT);
 
   return classNames;
 };
@@ -54,14 +61,20 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
-    shadow: {
+    box: {
       ...formatArgType({ SHADOW }),
-      description: `Applies a shadow at the element's top or bottom boundary.<br />(Top shadows are for sticky footers only.)`,
-      name: 'Shadow',
+      description: `Applies a shadow at the element's top or bottom boundary or to the text.<br />(Top shadows are for sticky footers.`,
+      name: 'Box Shadow',
+    },
+    text: {
+      ...argTypeBooleanUnrequired,
+      description: `Applies a shadow to the element's text.`,
+      name: 'Text Shadow',
     },
   },
   args: {
-    shadow: SHADOW.None,
+    box: SHADOW.None,
+    text: undefined,
   },
   parameters,
   render,
@@ -73,12 +86,18 @@ export const Default = {};
 
 export const ShadowBottom = {
   args: {
-    shadow: SHADOW['Bottom'],
+    box: SHADOW['Bottom'],
   },
 };
 
 export const ShadowTop = {
   args: {
-    shadow: SHADOW['Top'],
+    box: SHADOW['Top'],
+  },
+};
+
+export const ShadowText = {
+  args: {
+    text: true,
   },
 };

package/src/stories/TideBadge.stories.ts

@@ -1,14 +1,25 @@
 import TideBadge from '@/components/TideBadge.vue';
-import { parameters } from '@/utilities/storybook';
+import * as STANDARD_ICON from '@/types/Icon';
+import { argTypeBooleanUnrequired, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
+
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 
 const render = (args: any) => ({
   components: { TideBadge },
   setup: () => ({ args }),
-  template: `<TideBadge class="tide-shadow-bottom" v-bind="args" />`,
+  template: `<TideBadge v-bind="args" />`,
 });
 
 export default {
   argTypes: {
+    iconLeading: {
+      ...formatArgType({ ICON }),
+      description: 'Icon to left of label',
+    },
+    isFloating: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to display the "Floating" variant styles',
+    },
     label: {
       control: 'text',
       description: 'Badge text',

package/src/stories/TideBadgeVerifiedVehicle.stories.ts

@@ -0,0 +1,20 @@
+import TideBadgeVerifiedVehicle from '@/components/TideBadgeVerifiedVehicle.vue';
+import { parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideBadgeVerifiedVehicle },
+  setup: () => ({ args }),
+  template: `<TideBadgeVerifiedVehicle v-bind="args" />`,
+});
+
+export default {
+  argTypes: {},
+  args: {},
+  component: TideBadgeVerifiedVehicle,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideBadgeVerifiedVehicle',
+};
+
+export const Demo = {};

package/src/types/Badge.ts

@@ -1,21 +1,7 @@
-export const BADGE = {
-  JUST_LISTED: 'Just listed',
-  NATIONWIDE: 'Nationwide',
-  REDUCED: 'Reduced',
-  UPDATED: 'Updated',
-} as const;
-
-export const BADGE_PREMIUM = {
-  PREMIUM: 'Premium',
-  PREMIUM_SELECT: 'Premium SELECT',
-} as const;
-
 export const BADGE_TRUSTED = {
   YEARS_10: '10',
   YEARS_15: '15',
   YEARS_5: '5',
 } as const;
 
-export type Badge = (typeof BADGE)[keyof typeof BADGE];
-export type BadgePremium = (typeof BADGE_PREMIUM)[keyof typeof BADGE_PREMIUM];
 export type BadgeTrustedYears = (typeof BADGE_TRUSTED)[keyof typeof BADGE_TRUSTED];

package/src/types/Styles.ts

@@ -452,6 +452,7 @@ export const CSS = {
     INITIAL: 'tide-shadow-initial',
     BOTTOM: 'tide-shadow-bottom',
     TOP: 'tide-shadow-top',
+    TEXT: 'tide-shadow-text',
   },
   SNAP: {
     ON: 'tide-scroll-snap',

package/dist/IconVerified-04c12500.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e.createElementVNode("path",{d:"m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z"},null,-1),r=[n];function t(l,s){return e.openBlock(),e.createElementBlock("svg",o,r)}const c={render:t};exports.default=c;exports.render=t;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblZlcmlmaWVkLTA0YzEyNTAwLmNqcyIsInNvdXJjZXMiOlsiLi4vc3JjL2Fzc2V0cy9zdmcvaWNvbnMvSWNvblZlcmlmaWVkLnN2ZyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50Vk5vZGUgYXMgX2NyZWF0ZUVsZW1lbnRWTm9kZSwgb3BlbkJsb2NrIGFzIF9vcGVuQmxvY2ssIGNyZWF0ZUVsZW1lbnRCbG9jayBhcyBfY3JlYXRlRWxlbWVudEJsb2NrIH0gZnJvbSBcInZ1ZVwiXG5cbmNvbnN0IF9ob2lzdGVkXzEgPSB7XG4gIHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsXG4gIHZpZXdCb3g6IFwiMCAwIDI0IDI0XCJcbn1cbmNvbnN0IF9ob2lzdGVkXzIgPSAvKiNfX1BVUkVfXyovX2NyZWF0ZUVsZW1lbnRWTm9kZShcInBhdGhcIiwgeyBkOiBcIm04LjYgMjIuNS0xLjktMy4yLTMuNi0uOC4zNS0zLjdMMSAxMmwyLjQ1LTIuOC0uMzUtMy43IDMuNi0uOCAxLjktMy4yTDEyIDIuOTVsMy40LTEuNDUgMS45IDMuMiAzLjYuOC0uMzUgMy43TDIzIDEybC0yLjQ1IDIuOC4zNSAzLjctMy42LjgtMS45IDMuMi0zLjQtMS40NS0zLjQgMS40NVptMi4zNS02Ljk1TDE2LjYgOS45bC0xLjQtMS40NS00LjI1IDQuMjUtMi4xNS0yLjFMNy40IDEybDMuNTUgMy41NVpcIiB9LCBudWxsLCAtMSlcbmNvbnN0IF9ob2lzdGVkXzMgPSBbXG4gIF9ob2lzdGVkXzJcbl1cblxuZXhwb3J0IGZ1bmN0aW9uIHJlbmRlcihfY3R4LCBfY2FjaGUpIHtcbiAgcmV0dXJuIChfb3BlbkJsb2NrKCksIF9jcmVhdGVFbGVtZW50QmxvY2soXCJzdmdcIiwgX2hvaXN0ZWRfMSwgX2hvaXN0ZWRfMykpXG59XG5leHBvcnQgZGVmYXVsdCB7IHJlbmRlcjogcmVuZGVyIH0iXSwibmFtZXMiOlsiX2hvaXN0ZWRfMSIsIl9ob2lzdGVkXzIiLCJfY3JlYXRlRWxlbWVudFZOb2RlIiwiX2hvaXN0ZWRfMyIsInJlbmRlciIsIl9jdHgiLCJfY2FjaGUiLCJfb3BlbkJsb2NrIiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIkljb25WZXJpZmllZCJdLCJtYXBwaW5ncyI6InVHQUVNQSxFQUFhLENBQ2pCLE1BQU8sNkJBQ1AsUUFBUyxXQUNYLEVBQ01DLEVBQTBCQyxFQUFBQSxtQkFBb0IsT0FBUSxDQUFFLEVBQUcseU9BQTJPLEtBQU0sRUFBRSxFQUM5U0MsRUFBYSxDQUNqQkYsQ0FDRixFQUVPLFNBQVNHLEVBQU9DLEVBQU1DLEVBQVEsQ0FDbkMsT0FBUUMsRUFBQUEsVUFBWSxFQUFFQyxFQUFtQixtQkFBQyxNQUFPUixFQUFZRyxDQUFVLENBQ3pFLENBQ0EsTUFBZU0sRUFBQSxDQUFFLE9BQVFMLENBQU0ifQ==

package/dist/IconVerified-a78449ea.js

@@ -1,16 +0,0 @@
-import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-const n = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, c = /* @__PURE__ */ o("path", { d: "m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z" }, null, -1), l = [
-  c
-];
-function r(s, d) {
-  return e(), t("svg", n, l);
-}
-const _ = { render: r };
-export {
-  _ as default,
-  r as render
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblZlcmlmaWVkLWE3ODQ0OWVhLmpzIiwic291cmNlcyI6WyIuLi9zcmMvYXNzZXRzL3N2Zy9pY29ucy9JY29uVmVyaWZpZWQuc3ZnIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUVsZW1lbnRWTm9kZSBhcyBfY3JlYXRlRWxlbWVudFZOb2RlLCBvcGVuQmxvY2sgYXMgX29wZW5CbG9jaywgY3JlYXRlRWxlbWVudEJsb2NrIGFzIF9jcmVhdGVFbGVtZW50QmxvY2sgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgX2hvaXN0ZWRfMSA9IHtcbiAgeG1sbnM6IFwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIixcbiAgdmlld0JveDogXCIwIDAgMjQgMjRcIlxufVxuY29uc3QgX2hvaXN0ZWRfMiA9IC8qI19fUFVSRV9fKi9fY3JlYXRlRWxlbWVudFZOb2RlKFwicGF0aFwiLCB7IGQ6IFwibTguNiAyMi41LTEuOS0zLjItMy42LS44LjM1LTMuN0wxIDEybDIuNDUtMi44LS4zNS0zLjcgMy42LS44IDEuOS0zLjJMMTIgMi45NWwzLjQtMS40NSAxLjkgMy4yIDMuNi44LS4zNSAzLjdMMjMgMTJsLTIuNDUgMi44LjM1IDMuNy0zLjYuOC0xLjkgMy4yLTMuNC0xLjQ1LTMuNCAxLjQ1Wm0yLjM1LTYuOTVMMTYuNiA5LjlsLTEuNC0xLjQ1LTQuMjUgNC4yNS0yLjE1LTIuMUw3LjQgMTJsMy41NSAzLjU1WlwiIH0sIG51bGwsIC0xKVxuY29uc3QgX2hvaXN0ZWRfMyA9IFtcbiAgX2hvaXN0ZWRfMlxuXVxuXG5leHBvcnQgZnVuY3Rpb24gcmVuZGVyKF9jdHgsIF9jYWNoZSkge1xuICByZXR1cm4gKF9vcGVuQmxvY2soKSwgX2NyZWF0ZUVsZW1lbnRCbG9jayhcInN2Z1wiLCBfaG9pc3RlZF8xLCBfaG9pc3RlZF8zKSlcbn1cbmV4cG9ydCBkZWZhdWx0IHsgcmVuZGVyOiByZW5kZXIgfSJdLCJuYW1lcyI6WyJfaG9pc3RlZF8xIiwiX2hvaXN0ZWRfMiIsIl9jcmVhdGVFbGVtZW50Vk5vZGUiLCJfaG9pc3RlZF8zIiwicmVuZGVyIiwiX2N0eCIsIl9jYWNoZSIsIl9vcGVuQmxvY2siLCJfY3JlYXRlRWxlbWVudEJsb2NrIiwiSWNvblZlcmlmaWVkIl0sIm1hcHBpbmdzIjoiO0FBRUEsTUFBTUEsSUFBYTtBQUFBLEVBQ2pCLE9BQU87QUFBQSxFQUNQLFNBQVM7QUFDWCxHQUNNQyxJQUEwQkMsZ0JBQUFBLEVBQW9CLFFBQVEsRUFBRSxHQUFHLDJPQUEyTyxNQUFNLEVBQUUsR0FDOVNDLElBQWE7QUFBQSxFQUNqQkY7QUFDRjtBQUVPLFNBQVNHLEVBQU9DLEdBQU1DLEdBQVE7QUFDbkMsU0FBUUMsRUFBWSxHQUFFQyxFQUFvQixPQUFPUixHQUFZRyxDQUFVO0FBQ3pFO0FBQ0EsTUFBZU0sSUFBQSxFQUFFLFFBQVFMLEVBQU07In0=

package/src/components/TideBadgePremium.vue

@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-  import { CSS } from '@/types/Styles';
-
-  import type { BadgePremium } from '@/types/Badge';
-
-  type Props = {
-    label: BadgePremium;
-  };
-
-  const props = defineProps<Props>();
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-badge',
-      CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.BG.SURFACE.VARIANT,
-      CSS.DISPLAY.INLINE_FLEX,
-      CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.QUARTER,
-      CSS.PADDING.Y.QUARTER,
-      CSS.PADDING.X.HALF,
-      CSS.FONT.ROLE.BODY_2,
-    ]"
-  >
-    {{ props.label }}
-  </div>
-</template>
-
-<style scoped></style>

package/src/stories/TideBadgePremium.stories.ts

@@ -1,31 +0,0 @@
-import TideBadgePremium from '@/components/TideBadgePremium.vue';
-import { BADGE_PREMIUM } from '@/types/Badge';
-import { formatArgType, parameters } from '@/utilities/storybook';
-
-const render = (args: any) => ({
-  components: { TideBadgePremium },
-  setup: () => ({ args }),
-  template: `<TideBadgePremium v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    label: {
-      ...formatArgType({ BADGE_PREMIUM }),
-      description: 'Badge text',
-      table: {
-        defaultValue: { summary: 'Premium' },
-      },
-    },
-  },
-  args: {
-    label: BADGE_PREMIUM.PREMIUM,
-  },
-  component: TideBadgePremium,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Basic Components/TideBadgePremium',
-};
-
-export const Demo = {};