tide-design-system 2.0.22 → 2.0.23

package/src/assets/svg/icons/IconShoppingCart.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M7 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 20c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 18c.55 0 1.02.196 1.412.587C8.804 18.98 9 19.45 9 20s-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 22Zm10 0c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 15 20c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 17 18c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 22ZM6.15 6l2.4 5h7l2.75-5H6.15ZM5.2 4h14.75c.383 0 .675.17.875.513.2.341.208.687.025 1.037l-3.55 6.4c-.183.333-.43.592-.738.775A1.945 1.945 0 0 1 15.55 13H8.1L7 15h12v2H7c-.75 0-1.317-.33-1.7-.988-.383-.658-.4-1.312-.05-1.962L6.6 11.6 3 4H1V2h3.25l.95 2Z"
+  />
+</svg>

package/src/assets/svg/icons/IconSms.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M8 11c.283 0 .52-.096.713-.287A.968.968 0 0 0 9 10a.968.968 0 0 0-.287-.713A.968.968 0 0 0 8 9a.968.968 0 0 0-.713.287A.968.968 0 0 0 7 10c0 .283.096.52.287.713.192.191.43.287.713.287Zm4 0c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 10a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 9a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 10c0 .283.096.52.287.713.192.191.43.287.713.287Zm4 0a.97.97 0 0 0 .712-.287A.968.968 0 0 0 17 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 16 9a.968.968 0 0 0-.713.287A.967.967 0 0 0 15 10c0 .283.096.52.287.713.192.191.43.287.713.287ZM2 22V4c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 2h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H6l-4 4Zm3.15-6H20V4H4v13.125L5.15 16Z"
+  />
+</svg>

package/src/assets/svg/icons/IconStar.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="m8.85 16.825 3.15-1.9 3.15 1.925-.825-3.6 2.775-2.4-3.65-.325-1.45-3.4-1.45 3.375-3.65.325 2.775 2.425-.825 3.575ZM5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625 7.2.625-5.45 4.725L18.175 21 12 17.275 5.825 21Z"
+  />
+</svg>

package/src/assets/svg/icons/IconSwapVert.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M8 13V5.825L5.425 8.4 4 7l5-5 5 5-1.425 1.4L10 5.825V13H8Zm7 9-5-5 1.425-1.4L14 18.175V11h2v7.175l2.575-2.575L20 17l-5 5Z"
+  />
+</svg>

package/src/assets/svg/icons/IconThreeDRotation.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <mask
+    height="24"
+    id="a"
+    maskUnits="userSpaceOnUse"
+    style="mask-type: alpha"
+    width="24"
+    x="0"
+    y="0"
+  >
+    <path d="M0 0h24v24H0z" />
+  </mask>
+  <g mask="url(#a)">
+    <path
+      d="M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12h2c0 1.917.604 3.608 1.813 5.075 1.208 1.467 2.754 2.392 4.637 2.775L9 18.4l1.4-1.4 4.55 4.55c-.483.167-.97.283-1.462.35S12.5 22 12 22Zm.5-7V9h3a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v4a.97.97 0 0 1-.288.713.968.968 0 0 1-.712.287h-3Zm-5 0v-1.5H10v-1H8.5v-1H10v-1H7.5V9h3c.283 0 .52.096.713.287.191.192.287.43.287.713v4c0 .283-.096.52-.287.713A.968.968 0 0 1 10.5 15h-3Zm6.5-1.5h1v-3h-1v3Zm6-1.5c0-1.917-.604-3.608-1.813-5.075-1.208-1.467-2.754-2.392-4.637-2.775L15 5.6 13.6 7 9.05 2.45c.483-.167.97-.283 1.462-.35S11.5 2 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12h-2Z"
+    />
+  </g>
+</svg>

package/src/assets/svg/icons/IconTrophy.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M7 21v-2h4v-3.1a5.37 5.37 0 0 1-2.19-1.04 4.48 4.48 0 0 1-1.41-1.91 4.85 4.85 0 0 1-3.14-1.64A4.81 4.81 0 0 1 3 8V7c0-.55.2-1.02.59-1.41C3.98 5.19 4.45 5 5 5h2V3h10v2h2c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v1c0 1.27-.42 2.37-1.26 3.31a4.85 4.85 0 0 1-3.14 1.64c-.3.77-.77 1.4-1.41 1.91-.64.51-1.37.86-2.19 1.04V19h4v2H7Zm0-10.2V7H5v1a3 3 0 0 0 2 2.8Zm5 3.2c.83 0 1.54-.3 2.13-.88.58-.58.87-1.29.87-2.12V5H9v6c0 .83.3 1.54.88 2.13.58.58 1.29.87 2.12.87Zm5-3.2A3 3 0 0 0 19 8V7h-2v3.8Z"
+  />
+</svg>

package/src/assets/svg/icons/IconTune.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M11 21v-6h2v2h8v2h-8v2h-2Zm-8-2v-2h6v2H3Zm4-4v-2H3v-2h4V9h2v6H7Zm4-2v-2h10v2H11Zm4-4V3h2v2h4v2h-4v2h-2ZM3 7V5h10v2H3Z"
+  />
+</svg>

package/src/assets/svg/icons/IconTwitter.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M18.202 2.25h3.309l-7.228 8.26 8.503 11.24H16.13l-5.217-6.816L4.95 21.75H1.636l7.73-8.836L1.214 2.25H8.04l4.711 6.23 5.452-6.23Zm-1.163 17.522h1.833L7.04 4.125H5.07l11.97 15.647Z"
+  />
+</svg>

package/src/assets/svg/icons/IconVideocam.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h12c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v4.5l4-4v11l-4-4V18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4Zm0-2h12V6H4v12Z"
+  />
+</svg>

package/src/assets/svg/icons/IconViewInAr.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M11 19.475 6 16.6a1.948 1.948 0 0 1-1-1.725v-5.75A1.948 1.948 0 0 1 6 7.4l5-2.875c.317-.183.65-.275 1-.275s.683.092 1 .275L18 7.4a1.948 1.948 0 0 1 1 1.725v5.75a1.948 1.948 0 0 1-1 1.725l-5 2.875c-.317.183-.65.275-1 .275s-.683-.092-1-.275Zm0-2.3v-4.6L7 10.25v4.625l4 2.3Zm2 0 4-2.3V10.25l-4 2.325v4.6ZM2 7V4c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 2h3v2H4v3H2Zm5 15H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 20v-3h2v3h3v2Zm10 0v-2h3v-3h2v3c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 22h-3Zm3-15V4h-3V2h3c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v3h-2Zm-8 3.85 3.95-2.325L12 6.25 8.05 8.525 12 10.85Z"
+  />
+</svg>

package/src/assets/svg/icons/IconVisibility.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.313.438-3.188 1.313C7.939 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.262-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.433 0-4.65-.68-6.65-2.038-2-1.358-3.45-3.179-4.35-5.462.9-2.283 2.35-4.104 4.35-5.463C7.35 4.68 9.567 4 12 4c2.433 0 4.65.68 6.65 2.037 2 1.359 3.45 3.18 4.35 5.463-.9 2.283-2.35 4.104-4.35 5.462C16.65 18.322 14.433 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.545 9.545 0 0 0 12 6a9.545 9.545 0 0 0-5.188 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.612 4.012A9.544 9.544 0 0 0 12 17Z"
+  />
+</svg>

package/src/assets/svg/icons/IconVolumeOff.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="m20.5 21.9-3.02-3.02a8.31 8.31 0 0 1-2.78 1.14v-2.04l.69-.25c.22-.09.43-.19.63-.3L12.7 14.1v5.2l-5-5h-4v-6h3.2L2.1 3.5l1.4-1.4 18.4 18.4-1.4 1.4Zm-.2-5.8-1.45-1.45a6.8 6.8 0 0 0 .85-3.38 6.86 6.86 0 0 0-5-6.7V2.54a8.75 8.75 0 0 1 5.05 3.13 8.73 8.73 0 0 1 1.95 5.62 8.94 8.94 0 0 1-1.4 4.82Zm-3.35-3.35L14.7 10.5V7.25c.78.37 1.4.92 1.84 1.65a4.57 4.57 0 0 1 .41 3.85ZM12.7 8.5l-2.6-2.6 2.6-2.6v5.2Zm-2 5.95V12.1l-1.8-1.8H5.7v2h2.85l2.15 2.15Z"
+  />
+</svg>

package/src/assets/svg/icons/IconVolumeOn.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M14 20.75V18.7a6.86 6.86 0 0 0 5-6.7 6.86 6.86 0 0 0-5-6.7V3.25a8.75 8.75 0 0 1 5.05 3.14A8.73 8.73 0 0 1 21 12c0 2.12-.65 3.99-1.95 5.61A8.75 8.75 0 0 1 14 20.75ZM3 15.03v-6h4l5-5v16l-5-5H3Zm11 1V7.96c.78.37 1.4.92 1.84 1.66a4.57 4.57 0 0 1 0 4.76A4.17 4.17 0 0 1 14 16.02Zm-4-7.16-2.15 2.16H5v2h2.85L10 15.18v-6.3Z"
+  />
+</svg>

package/src/assets/svg/icons/IconWarning.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M1 21 12 2l11 19H1Zm3.45-2h15.1L12 6 4.45 19ZM12 18a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z"
+  />
+</svg>

package/src/assets/svg/icons/IconWeight.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M6 19h12L16.57 9H7.42L6 19Zm6-12c.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71 0-.28-.1-.52-.29-.71A.97.97 0 0 0 12 5c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71 0 .28.1.52.29.71.19.2.43.29.71.29Zm2.82 0h1.75c.5 0 .94.17 1.3.5.37.33.6.74.68 1.22l1.43 10c.08.6-.08 1.13-.47 1.6-.39.45-.9.68-1.51.68H6a1.9 1.9 0 0 1-1.51-.69c-.4-.46-.55-.98-.47-1.58l1.43-10c.08-.49.3-.9.67-1.23.37-.33.8-.5 1.3-.5h1.75a6 6 0 0 1-.12-.49 2.9 2.9 0 0 1 .83-2.64A2.9 2.9 0 0 1 12 3c.83 0 1.54.3 2.13.88a2.9 2.9 0 0 1 .82 2.63c-.03.16-.07.32-.13.49Z" />
+</svg>

package/src/assets/svg/icons/IconWidth.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="m7 16-4-4 4-4 1.4 1.4L6.8 11h10.4l-1.6-1.6L17 8l4 4-4 4-1.4-1.4 1.6-1.6H6.8l1.6 1.6L7 16Z" />
+</svg>

package/src/assets/svg/icons/IconYoutube.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M22.54 6.848a2.72 2.72 0 0 0-1.945-1.899C18.88 4.5 12 4.5 12 4.5s-6.88 0-8.595.45a2.72 2.72 0 0 0-1.946 1.898C1 8.523 1 12.016 1 12.016s0 3.492.46 5.168c.253.925.998 1.62 1.945 1.867C5.12 19.5 12 19.5 12 19.5s6.88 0 8.595-.45c.947-.245 1.692-.945 1.946-1.866.459-1.676.459-5.168.459-5.168s0-3.493-.46-5.168Zm-12.788 8.34V8.843l5.748 3.172-5.748 3.171Z"
+  />
+</svg>

package/src/components/TideAccordionItem.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+
+  import TideDivider from '@/components/TideDivider.vue';
+  import TideIcon from '@/components/TideIcon.vue';
+  import TideIndicator from '@/components/TideIndicator.vue';
+  import { ICON } from '@/types/Icon';
+  import { CSS } from '@/types/Styles';
+
+  const props = defineProps({
+    hasBottomDivider: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    hasTopDivider: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    isActive: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    isExpandedInitial: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    isOptional: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    label: {
+      default: '',
+      required: true,
+      type: String,
+    },
+  });
+
+  const isExpanded = ref(props.isExpandedInitial);
+
+  let accordionBody = ref();
+
+  const toggleIsExpanded = () => {
+    const element = accordionBody.value as HTMLElement;
+
+    isExpanded.value = !isExpanded.value;
+
+    element.style.gridTemplateRows = isExpanded.value ? '1fr' : '0fr';
+  };
+
+  onMounted(() => {
+    const element = accordionBody.value as HTMLElement;
+
+    element.style.gridTemplateRows = isExpanded.value ? '1fr' : '0fr';
+  });
+</script>
+
+<template>
+  <div class="tide-accordion-item">
+    <TideDivider v-if="props.hasTopDivider" />
+
+    <div
+      :class="['tide-accordion-head', CSS.DISPLAY.FLEX, CSS.AXIS1.BETWEEN, CSS.PADDING.Y.HALF, CSS.CURSOR.POINTER]"
+      @click="toggleIsExpanded"
+    >
+      <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.FONT.WEIGHT.SEVEN_HUNDRED]">
+        <span>{{ props.label }}</span>
+
+        <span
+          :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
+          v-if="props.isOptional"
+        >
+          (optional)
+        </span>
+
+        <TideIndicator v-if="props.isActive" />
+      </div>
+
+      <TideIcon :icon="isExpanded ? ICON.EXPAND_LESS : ICON.EXPAND_MORE" />
+    </div>
+
+    <div
+      :class="['tide-accordion-body', CSS.DISPLAY.GRID]"
+      ref="accordionBody"
+    >
+      <div :class="[CSS.OVERFLOW.Y.HIDDEN]">
+        <div :class="[CSS.MARGIN.Y.ONE, CSS.FONT.WEIGHT.FOUR_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    <TideDivider v-if="props.hasBottomDivider" />
+  </div>
+</template>
+
+<style scoped>
+  .tide-accordion-body {
+    transition: grid-template-rows var(--tide-animate);
+  }
+</style>

package/src/components/TideAlert.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import type { Alert } from '@/types/Alert';
+  import type { Icon } from '@/types/Icon';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import { ALERT } from '@/types/Alert';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { PRIORITY } from '@/types/Priority';
+
+  type Props = {
+    heading?: string;
+    isToast?: boolean;
+    type?: Alert;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    heading: undefined,
+    isToast: false,
+    type: ALERT.INFO,
+  });
+
+  const icon = computed(() => {
+    let icon: Icon = ICON.VIEW_IN_AR;
+
+    switch (props.type) {
+      case ALERT.ERROR:
+        icon = ICON.ERROR;
+        break;
+      default:
+      case ALERT.INFO:
+        icon = ICON.INFO;
+        break;
+      case ALERT.SUCCESS:
+        icon = ICON.CHECK;
+        break;
+      case ALERT.WARNING:
+        icon = ICON.WARNING;
+        break;
+    }
+
+    return icon;
+  });
+</script>
+
+<template>
+  <div
+    :class="[
+      props.type,
+      'tide-alert',
+      CSS.DISPLAY.GRID,
+      CSS.BORDER.RADIUS.HALF,
+      CSS.PADDING.FULL.ONE,
+      props.type === ALERT.ERROR && CSS.BG.SURFACE.ERROR,
+      props.type === ALERT.INFO && CSS.BG.SURFACE.INFO,
+      props.type === ALERT.SUCCESS && CSS.BG.SURFACE.SUCCESS,
+      props.type === ALERT.WARNING && CSS.BG.SURFACE.WARNING,
+      props.isToast ? CSS.SHADOW.BOTTOM : '',
+    ]"
+  >
+    <div :class="['tide-alert-icon', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
+      <TideIcon
+        :class="[
+          props.type,
+          CSS.BORDER.RADIUS.FULL,
+          CSS.PADDING.FULL.HALF,
+          CSS.FONT.COLOR.SURFACE.INVERSE,
+          props.type === ALERT.ERROR && CSS.BG.ERROR,
+          props.type === ALERT.INFO && CSS.BG.INFO,
+          props.type === ALERT.SUCCESS && CSS.BG.SUCCESS,
+          props.type === ALERT.WARNING && CSS.BG.WARNING,
+        ]"
+        :icon="icon"
+      />
+    </div>
+
+    <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
+      <h2 :class="[CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+        {{ props.heading }}
+      </h2>
+    </div>
+
+    <TideButtonIcon
+      :class="['tide-alert-close', CSS.AXIS2.CENTER, CSS.FONT.COLOR.SURFACE.DEFAULT]"
+      :icon="ICON.CLOSE"
+      :priority="PRIORITY.QUATERNARY"
+      aria-label="Close alert"
+    />
+
+    <div :class="['tide-alert-body', CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.FONT.COLOR.SURFACE.VARIANT]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .tide-alert {
+    grid-template-areas:
+      'icon heading close'
+      '. body .';
+    grid-template-columns: auto 1fr auto;
+    grid-column-gap: 0.5rem;
+    max-width: 40rem;
+  }
+
+  .tide-alert-icon {
+    grid-area: icon;
+  }
+
+  .tide-alert-heading {
+    grid-area: heading;
+  }
+
+  .tide-alert-close {
+    grid-area: close;
+  }
+
+  .tide-alert-body {
+    grid-area: body;
+  }
+</style>

package/src/components/TideBackgroundImage.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    alt: string;
+    isLazy: boolean;
+    src: string;
+  };
+
+  withDefaults(defineProps<Props>(), {
+    alt: '',
+    isLazy: true,
+  });
+</script>
+
+<template>
+  <div :class="[CSS.POSITION.RELATIVE, CSS.OVERFLOW.XY.HIDDEN, CSS.ISOLATION.ISOLATE]">
+    <div
+      :class="[
+        CSS.POSITION.ABSOLUTE,
+        CSS.HEIGHT.FULL,
+        CSS.WIDTH.FULL,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.CENTER,
+        CSS.AXIS2.CENTER,
+      ]"
+    >
+      <img
+        :alt="alt"
+        :class="['tide-background-image', CSS.OBJECT.COVER, CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
+        :loading="isLazy ? 'lazy' : undefined"
+        :src="src"
+      />
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .tide-background-image {
+    z-index: -1;
+  }
+</style>

package/src/components/TideBadge.vue

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

package/src/components/TideBadgePremium.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+  import type { BadgePremium } from '@/types/Badge';
+
+  import { CSS } from '@/types/Styles';
+
+  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.SIZE.TWELVE,
+    ]"
+  >
+    {{ props.label }}
+  </div>
+</template>
+
+<style scoped></style>

package/src/components/TideBadgeTrustedPartner.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+  import type { BadgeTrustedYears } from '@/types/Badge';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { BADGE_TRUSTED } from '@/types/Badge';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+
+  type Props = {
+    years?: BadgeTrustedYears;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    years: BADGE_TRUSTED.YEARS_5,
+  });
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-badge-trusted-partner',
+      CSS.FONT.COLOR.SURFACE.BRAND,
+      CSS.DISPLAY.INLINE_FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.QUARTER,
+      CSS.PADDING.Y.QUARTER,
+      CSS.PADDING.X.HALF,
+      CSS.FONT.SIZE.FOURTEEN,
+    ]"
+  >
+    <TideIcon :icon="ICON.VIEW_IN_AR" />
+    <div :class="[]">
+      <span>{{ props.years }} year trusted partner</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/src/components/TideBreadCrumbs.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+
+  import type { BreadCrumb } from '@/types/BreadCrumb';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+
+  const props = defineProps({
+    breadCrumbs: {
+      default: undefined,
+      required: true,
+      type: Object as PropType<BreadCrumb[]>,
+    },
+  });
+</script>
+
+<template>
+  <ul :class="['tide-bread-crumbs', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]">
+    <template
+      :key="crumb.label"
+      v-for="(crumb, index) in props.breadCrumbs"
+    >
+      <li :class="[CSS.FONT.SIZE.FOURTEEN]">
+        <a
+          :class="[CSS.FONT.WEIGHT.SEVEN_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]"
+          :data-track="crumb.dataTrack || undefined"
+          :href="crumb.url"
+          v-if="crumb.url"
+        >
+          {{ crumb.label }}
+        </a>
+
+        <span
+          :class="[CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.FONT.COLOR.SURFACE.VARIANT]"
+          :data-track="crumb.dataTrack || undefined"
+          v-else
+        >
+          {{ crumb.label }}
+        </span>
+      </li>
+
+      <li v-if="props.breadCrumbs && index < props.breadCrumbs.length - 1">
+        <TideIcon
+          :icon="ICON.ARROW_RIGHT"
+          :size="SIZE.SMALL"
+        />
+      </li>
+    </template>
+  </ul>
+</template>

package/src/components/TideButton.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+  import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
+  import type { Priority } from '@/types/Priority';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ELEMENT } from '@/types/Element';
+  import { PRIORITY } from '@/types/Priority';
+  import { SIZE } from '@/types/Size';
+  import { TARGET } from '@/types/Target';
+
+  type Props = {
+    disabled?: boolean;
+    element?: Element;
+    href?: string;
+    iconLeading?: Icon;
+    iconTrailing?: Icon;
+    isNewTab?: boolean;
+    label: string;
+    priority?: Priority;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    element: ELEMENT.BUTTON,
+    href: undefined,
+    iconLeading: undefined,
+    iconTrailing: undefined,
+    isNewTab: false,
+    label: undefined,
+    priority: PRIORITY.PRIMARY,
+  });
+</script>
+
+<template>
+  <component
+    :class="[
+      props.element === ELEMENT.LINK ? 'tide-link-as-button' : 'tide-button',
+      props.priority && `tide-button-${props.priority}`,
+      props.element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX] : [CSS.DISPLAY.FLEX],
+      [CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.BORDER.RADIUS.HALF],
+      props.element === ELEMENT.LINK ? CSS.UNDERLINE.OFF : '',
+      CSS.PADDING.Y.ONE,
+      CSS.PADDING.X.TWO,
+      CSS.FONT.WEIGHT.SIX_HUNDRED,
+    ]"
+    :disabled="props.element === ELEMENT.BUTTON && props.disabled"
+    :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"
+    :target="props.element === ELEMENT.LINK && props.isNewTab ? TARGET.BLANK : TARGET.SELF"
+    :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"
+  >
+    <TideIcon
+      :icon="props.iconLeading"
+      :size="SIZE.LARGE"
+      v-if="props.iconLeading"
+    />
+
+    {{ props.label }}
+
+    <TideIcon
+      :icon="props.iconTrailing"
+      :size="SIZE.LARGE"
+      v-if="props.iconTrailing"
+    />
+  </component>
+</template>