tide-design-system 2.0.49 → 2.0.51

package/dist/utilities/storybook.ts

@@ -1,8 +1,9 @@
-import type { ArgTypes, StoryContext } from '@storybook/vue3';
-
+import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { formatKebabCase } from '@/utilities/format';
+
+import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
 // Extensible object of key/value pairs
 type KeyValue = { [key: string]: any };
@@ -12,8 +13,6 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
-import { formatKebabCase } from '@/utilities/format';
-
 export const lineBreak = '\r';
 export const tab = '  ';
 

package/dist/utilities/validation.ts

@@ -1,11 +1,10 @@
-import type { Ref } from 'vue';
+import { priceToNumber } from '@/utilities/format';
 
 import type { RangeData } from '@/types/FacetRange';
-import type { SelectOption } from '@/types/Select';
 import type { StringInput } from '@/types/Form';
+import type { SelectOption } from '@/types/Select';
 import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
-
-import { priceToNumber } from '@/utilities/format';
+import type { Ref } from 'vue';
 
 export const errorMessageDefault = 'Please enter a valid value.';
 

package/index.ts

@@ -29,6 +29,22 @@ import TidePagination from '@/components/TidePagination.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideTabs from '@/components/TideTabs.vue';
 import TideToggle from '@/components/TideToggle.vue';
+import { ALERT } from '@/types/Alert';
+import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
+import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
+import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
+import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
+import { ICON, ICON_REALM } from '@/types/Icon';
+import { MEDIA_SLIDE_TYPES } from '@/types/ListingMedia';
+import { ORIENTATION } from '@/types/Orientation';
+import { PRIORITY } from '@/types/Priority';
+import { REALM } from '@/types/Realm';
+import { SIZE, SIZE_BUTTON } from '@/types/Size';
+import { CSS } from '@/types/Styles';
+import { TARGET } from '@/types/Target';
+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';
@@ -48,8 +64,8 @@ import type {
   SelectField,
   StringField,
   StringValue,
-  TextareaField,
   TextField,
+  TextareaField,
 } from '@/types/Field';
 import type {
   BooleanInput,
@@ -58,8 +74,8 @@ import type {
   Input,
   SelectInput,
   StringInput,
-  TextareaInput,
   TextInput,
+  TextareaInput,
 } from '@/types/Form';
 import type { Formatted } from '@/types/Formatted';
 import type { Icon } from '@/types/Icon';
@@ -78,23 +94,6 @@ import type { Target } from '@/types/Target';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
 
-import { ALERT } from '@/types/Alert';
-import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
-import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
-import { CSS } from '@/types/Styles';
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
-import { FORMAT, FORMAT_REGEX } from '@/types/Formatted';
-import { ICON, ICON_REALM } from '@/types/Icon';
-import { MEDIA_SLIDE_TYPES } from '@/types/ListingMedia';
-import { ORIENTATION } from '@/types/Orientation';
-import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
-import { PRIORITY } from '@/types/Priority';
-import { REALM } from '@/types/Realm';
-import { SIZE, SIZE_BUTTON } from '@/types/Size';
-import { TARGET } from '@/types/Target';
-import { TEXT_INPUT_TYPE } from '@/types/TextInput';
-import { VALIDATOR } from '@/types/Validation';
-
 import '@/assets/css/main.css';
 
 export type {

package/package.json

@@ -36,8 +36,12 @@
     "vue": "^3.2.45",
     "vue-tsc": "^1.0.12"
   },
+  "homepage": "https://tide-design-system.netlify.app",
   "license": "MIT",
   "name": "tide-design-system",
+  "repository": {
+    "url": "https://github.com/traderinteractive/tide-design-system"
+  },
   "scripts": {
     "build": "npm run enforce && npm run build-vite",
     "build-storybook": "npm run build-vite && storybook build && cp -r src/assets/ storybook-static/",
@@ -57,5 +61,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.49"
+  "version": "2.0.51"
 }

package/src/assets/css/realm/aero.css

@@ -1,11 +1,12 @@
 /* Aero Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-color1: #4e9ac8;
-  --tide-color2: #006C97;
-  --tide-color3: #83CBFB;
+  --tide-color1:     #4e9ac8;
+  --tide-color2:     #006C97;
+  --tide-color3:     #83CBFB;
+  --tide-atmosphere: #E3E8F1;
 
-  --tide-bg-gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
     var(--tide-color3) 50%,
     var(--tide-color2) 150%
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-color2);
+  --tide-surface-accent:         var(--tide-atmosphere);
   --tide-surface-accent-variant: var(--tide-color3);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/src/assets/css/realm/atv.css

@@ -1,12 +1,13 @@
 /* ATV Trader Realm Colors */
 :root {
-    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --tide-charcoal: #33383B;
-    --tide-maroon:   #9B2702;
-    --tide-orange:   #C7521A;
-    --tide-peach:    #EFBA88;
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-charcoal: #33383B;
+  --tide-maroon:   #9B2702;
+  --tide-orange:   #C7521A;
+  --tide-peach:    #EFBA88;
+  --tide-sand:     #F8EADD;
 
-    --tide-floating: rgba(0, 0, 0, 0);
+  --tide-floating: rgba(0, 0, 0, 0);
 
   /* Color Roles: Each realm will assign values to this same series of variables from a combination of the Global and Realm-specific Palettes. */
   --tide-primary:    var(--tide-orange);
@@ -18,7 +19,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-charcoal);
-  --tide-surface-accent:         var(--tide-peach);
+  --tide-surface-accent:         var(--tide-sand);
   --tide-surface-accent-variant: var(--tide-maroon);
   --tide-surface-floating:       var(--tide-floating);
 

package/src/assets/css/realm/boatmart.css

@@ -5,6 +5,7 @@
   --tide-navy-dark: #143353;
   --tide-mint:      #46CFD1;
   --tide-sand:      #FFCF86;
+  --tide-mist:      #DBEDFC;
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -18,7 +19,7 @@
   --tide-surface:                var(--tide-gray-100);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-navy);
-  --tide-surface-accent:         var(--tide-sand);
+  --tide-surface-accent:         var(--tide-mist);
   --tide-surface-accent-variant: var(--tide-mint);
   --tide-surface-floating:       var(--tide-floating);
 

package/src/assets/css/realm/cycle.css

@@ -1,15 +1,10 @@
 /* Cycle Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-pure-black:  #000000;
-  --tide-red: #C50000;
-  --tide-steel-blue:   #C9DDE5;
-
-  --tide-bg-gradient: linear-gradient(
-    to bottom right,
-    var(--tide-steel-blue) 50%,
-    var(--tide-red) 150%
-  );
+  --tide-pure-black: #000000;
+  --tide-red:        #C50000;
+  --tide-steel-blue: #C9DDE5;
+  --tide-light-blue: #DFECF2;
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -23,11 +18,30 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-pure-black);
-  --tide-surface-accent:         var(--tide-red);
+  --tide-surface-accent:         var(--tide-light-blue);
   --tide-surface-accent-variant: var(--tide-steel-blue);
-  --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);
 
+  --tide-surface-gradient:
+    /* top */
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-surface-accent-variant) 100%, transparent) 28.37%,
+      color-mix(in srgb, var(--tide-surface-accent-variant) 0%, transparent) 100%
+    ),
+    /* bottom right */
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
+      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+    ),
+    /* bottom left */
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      rgba(228, 228, 229, 0.72) 0%,
+      rgba(228, 228, 229, 0.00) 100%
+    );
+
   --tide-on-surface:         var(--tide-black);
   --tide-on-surface-variant: var(--tide-gray-800);
   --tide-on-surface-brand:   var(--tide-pure-black);

package/src/assets/css/realm/equipment.css

@@ -1,15 +1,16 @@
 /* Equipment Trader Realm Colors */
 :root {
-    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --tide-evergreen: #468200;
-    --tide-steel:     #494949;
-    --tide-yellow:    #FFCE34;
-
-    --tide-bg-gradient: linear-gradient(
-      to bottom right,
-      var(--tide-evergreen) 50%,
-      var(--tide-yellow) 150%
-    );
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-evergreen: #468200;
+  --tide-steel:     #494949;
+  --tide-yellow:    #FFCE34;
+  --tide-moss:      #EEF6D7;
+
+  --tide-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-evergreen) 50%,
+    var(--tide-yellow) 150%
+  );
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-steel);
-  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent:         var(--tide-moss);
   --tide-surface-accent-variant: var(--tide-evergreen);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/src/assets/css/realm/pwc.css

@@ -4,6 +4,7 @@
   --tide-color1: #0B72B8;
   --tide-color2: #085487;
   --tide-color3: #59A0EB;
+  --tide-foam:   #E0EBF5;
 
   --tide-gradient: linear-gradient(
     to bottom right,
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-gray-100);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-color3);
+  --tide-surface-accent:         var(--tide-foam);
   --tide-surface-accent-variant: var(--tide-color2);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/src/assets/css/realm/rv.css

@@ -16,10 +16,10 @@
   --tide-on-secondary: var(--tide-gray-100);
 
   --tide-surface:                var(--tide-gray-100);
+  --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-green);
-  --tide-surface-accent:         var(--tide-yellow);
+  --tide-surface-accent:         var(--tide-pistachio);
   --tide-surface-accent-variant: var(--tide-pistachio);
-  --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-floating:       var(--tide-floating);
 
   --tide-surface-gradient:
@@ -32,8 +32,8 @@
     /* bottom right */
     radial-gradient(
       57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-surface-accent) 22%, transparent) 0%,
-      color-mix(in srgb, var(--tide-surface-accent) 0%, transparent) 100%
+      color-mix(in srgb, var(--tide-yellow) 22%, transparent) 0%,
+      color-mix(in srgb, var(--tide-yellow) 0%, transparent) 100%
     ),
     /* bottom left */
     radial-gradient(

package/src/assets/css/realm/snow.css

@@ -1,15 +1,16 @@
 /* Snowmobile Trader Realm Colors */
 :root {
-    /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-    --tide-color1: #193778;
-    --tide-color2: #10234C;
-    --tide-color3: #4F60A7;
-
-    --tide-bg-gradient: linear-gradient(
-      to bottom right,
-      var(--tide-color3) 50%,
-      var(--tide-color2) 150%
-    );
+  /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
+  --tide-color1: #193778;
+  --tide-color2: #10234C;
+  --tide-color3: #4F60A7;
+  --tide-frost:  #E3E8F2;
+
+  --tide-gradient: linear-gradient(
+    to bottom right,
+    var(--tide-color3) 50%,
+    var(--tide-color2) 150%
+  );
 
   --tide-floating: rgba(255, 255, 255, 0);
 
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-color1);
-  --tide-surface-accent:         var(--tide-color2);
+  --tide-surface-accent:         var(--tide-frost);
   --tide-surface-accent-variant: var(--tide-color3);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/src/assets/css/realm/truck.css

@@ -1,11 +1,12 @@
 /* Commercial Truck Trader Realm Colors */
 :root {
   /* Realm-specific Tonal Palette: Only to be referenced in the assignment of Color Roles below. */
-  --tide-blue:  #005F9E;
-  --tide-midnight-blue:   #172C4B;
-  --tide-teal: #97D9E3;
+  --tide-blue:          #005F9E;
+  --tide-midnight-blue: #172C4B;
+  --tide-teal:          #97D9E3;
+  --tide-cloud:         #DEECF6;
 
-  --tide-bg-gradient: linear-gradient(
+  --tide-gradient: linear-gradient(
     to bottom right,
     var(--tide-midnight-blue) 50%,
     var(--tide-teal) 150%
@@ -23,7 +24,7 @@
   --tide-surface:                var(--tide-white);
   --tide-surface-variant:        var(--tide-gray-200);
   --tide-surface-brand:          var(--tide-blue);
-  --tide-surface-accent:         var(--tide-teal);
+  --tide-surface-accent:         var(--tide-cloud);
   --tide-surface-accent-variant: var(--tide-midnight-blue);
   --tide-surface-gradient:       var(--tide-gradient);
   --tide-surface-floating:       var(--tide-floating);

package/src/components/TideAlert.vue

@@ -1,15 +1,15 @@
 <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 TideIcon from '@/components/TideIcon.vue';
   import { ALERT } from '@/types/Alert';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
+  import { CSS } from '@/types/Styles';
+
+  import type { Alert } from '@/types/Alert';
+  import type { Icon } from '@/types/Icon';
 
   type Props = {
     heading?: string;

package/src/components/TideBackgroundImage.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-  import type { Source } from '@/types/Source';
-
   import TideImage from '@/components/TideImage.vue';
   import { CSS } from '@/types/Styles';
 
+  import type { Source } from '@/types/Source';
+
   type Props = {
     alt: string;
     isLazy: boolean;

package/src/components/TideBadgePremium.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-  import type { BadgePremium } from '@/types/Badge';
-
   import { CSS } from '@/types/Styles';
 
+  import type { BadgePremium } from '@/types/Badge';
+
   type Props = {
     label: BadgePremium;
   };

package/src/components/TideBadgeTrustedPartner.vue

@@ -1,10 +1,10 @@
 <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';
+  import { CSS } from '@/types/Styles';
+
+  import type { BadgeTrustedYears } from '@/types/Badge';
 
   type Props = {
     years?: BadgeTrustedYears;

package/src/components/TideBreadCrumbs.vue

@@ -1,12 +1,11 @@
 <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';
+  import { CSS } from '@/types/Styles';
+
+  import type { BreadCrumb } from '@/types/BreadCrumb';
+  import type { PropType } from 'vue';
 
   const props = defineProps({
     breadCrumbs: {

package/src/components/TideButton.vue

@@ -1,15 +1,16 @@
 <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, SIZE_BUTTON, type SizeButton } from '@/types/Size';
+  import { SIZE, SIZE_BUTTON } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
+  import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
+  import type { Priority } from '@/types/Priority';
+  import type { SizeButton } from '@/types/Size';
+
   type Props = {
     disabled?: boolean;
     element?: Element;

package/src/components/TideButtonIcon.vue

@@ -1,15 +1,15 @@
 <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 { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
+  import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
+  import type { Priority } from '@/types/Priority';
+
   type Props = {
     disabled?: boolean;
     element?: Element;

package/src/components/TideButtonPagination.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-  import type { ElementTextAsIcon } from '@/types/Element';
-
-  import { CSS } from '@/types/Styles';
   import { ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+  import { CSS } from '@/types/Styles';
+
+  import type { ElementTextAsIcon } from '@/types/Element';
 
   type Props = {
     disabled?: boolean;

package/src/components/TideCard.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-  import type { CardIconPosition, CardType } from '@/types/Card';
-  import type { Icon } from '@/types/Icon';
-
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
   import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
+
+  import type { CardIconPosition, CardType } from '@/types/Card';
+  import type { Icon } from '@/types/Icon';
 
   type Props = {
     description?: string;

package/src/components/TideCarousel.vue

@@ -2,9 +2,9 @@
   import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
+  import { CSS } from '@/types/Styles';
 
   type Props = {
     isTouchscreen?: boolean;

package/src/components/TideChipAction.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
+  import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
   type Props = {

package/src/components/TideChipInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
+  import { CSS } from '@/types/Styles';
 
   type Props = {
     label: string;

package/src/components/TideDivider.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-  import type { Orientation } from '@/types/Orientation';
-  import { CSS } from '@/types/Styles';
   import { ORIENTATION } from '@/types/Orientation';
+  import { CSS } from '@/types/Styles';
+
+  import type { Orientation } from '@/types/Orientation';
 
   type Props = {
     orientation?: Orientation;

package/src/components/TideIcon.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
   import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
 
-  import type { Component } from 'vue';
-  import type { Icon } from '@/types/Icon';
-  import type { Size } from '@/types/Size';
-
-  import { CSS } from '@/types/Styles';
+  import { REALM } from '@/types/Realm';
   import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
   import { formatPascalCase } from '@/utilities/format';
-  import { REALM } from '@/types/Realm';
+
+  import type { Icon } from '@/types/Icon';
+  import type { Size } from '@/types/Size';
+  import type { Component } from 'vue';
 
   type Props = {
     icon: Icon;