tide-design-system 2.0.43 → 2.0.45

package/package.json

@@ -54,5 +54,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.43"
+  "version": "2.0.45"
 }

package/src/assets/svg/icons/IconBed.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 19v-6c0-.45.1-.86.27-1.22.19-.37.43-.7.73-.98V8c0-.83.3-1.54.88-2.13A2.9 2.9 0 0 1 6 5h4c.38 0 .74.07 1.07.21.34.14.65.34.93.59.28-.25.6-.45.93-.59.33-.14.69-.21 1.07-.21h4c.83 0 1.54.3 2.13.88.58.58.87 1.29.87 2.12v2.8c.3.28.54.6.73.97.18.37.27.78.27 1.23v6h-2v-2H4v2H2Zm11-9h6V8c0-.28-.1-.52-.29-.71A.97.97 0 0 0 18 7h-4c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71v2Zm-8 0h6V8c0-.28-.1-.52-.29-.71A.97.97 0 0 0 10 7H6c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71v2Zm-1 5h16v-2c0-.28-.1-.52-.29-.71A.97.97 0 0 0 19 12H5c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71v2Z" />
+</svg>

package/src/assets/svg/icons/IconEngine.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 4.52h-.76v1.5h3.5v1.46H8.5c-.82 0-1.5.67-1.5 1.5v.5h-.5c-.82 0-1.5.67-1.5 1.5v1.75H3.51v-3H2v7.5h1.5v-3h1.48v1.75c0 .83.68 1.5 1.5 1.5h.89l.58 1.17c.26.51.78.83 1.34.83h4.39a1.5 1.5 0 0 0 1.34-.83l.58-1.17H17v.5c0 .83.68 1.5 1.5 1.5h2c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5h-2c-.82 0-1.5.67-1.5 1.5v.5h-1v-2.5c0-.83-.67-1.5-1.5-1.5h-2.25V6.02h3.5v-1.5H8Zm1 5.46v-.5h5v2.5c0 .83.67 1.5 1.5 1.5h2c.82 0 1.5-.67 1.5-1.5v-.5h1v6h-1v-.5c0-.83-.68-1.5-1.5-1.5h-2.2a1.5 1.5 0 0 0-1.34.83l-.58 1.17H9.6l-.58-1.17a1.5 1.5 0 0 0-1.34-.83h-.7v-4h.5c.83 0 1.5-.67 1.5-1.5Z" clip-rule="evenodd"/>
+</svg>

package/src/assets/svg/icons/IconGas.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.75 21V5c0-.55.2-1.02.59-1.41.39-.4.86-.59 1.41-.59h6c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v7h1c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v4.5c0 .28.1.52.29.71.19.2.43.29.71.29.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71v-7.2c-.15.08-.3.14-.48.16-.16.03-.34.04-.52.04-.7 0-1.3-.24-1.78-.72A2.41 2.41 0 0 1 15.25 9a2.48 2.48 0 0 1 1.6-2.35l-2.1-2.1L15.8 3.5l3.7 3.6c.25.25.44.54.56.88.13.33.19.67.19 1.02v9.5c0 .7-.24 1.3-.73 1.77-.48.49-1.07.73-1.77.73s-1.3-.24-1.78-.73a2.41 2.41 0 0 1-.72-1.77v-5h-1.5V21h-10Zm2-11h6V5h-6v5Zm12 0c.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71 0-.28-.1-.52-.29-.71a.97.97 0 0 0-.71-.29c-.28 0-.52.1-.71.29-.2.19-.29.43-.29.71 0 .28.1.52.29.71.19.2.43.29.71.29Zm-12 9h6v-7h-6v7Z" />
+</svg>

package/src/assets/svg/icons/IconLevellingJack.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M9 2h6v2h-2v1.8h5v-.98h2V9h-2V7.8h-5V10h.23c.5 0 .98.26 1.26.68l5.85 9A1.5 1.5 0 0 1 19.08 22H4.92a1.5 1.5 0 0 1-1.26-2.32l5.85-9a1.5 1.5 0 0 1 1.26-.68H11V7.8H6V9H4V4.82h2v.97h5V4H9V2Zm2 10.07L5.84 20h12.32L13 12.07v6.43h-2v-6.43Z" clip-rule="evenodd" />
+</svg>

package/src/assets/svg/icons/IconOdometer.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.45 15.5c.4.4.92.6 1.55.59.63-.01 1.1-.24 1.4-.69L19 7l-8.4 5.6c-.45.3-.69.76-.71 1.38-.03.61.16 1.12.56 1.52ZM12 4a9.21 9.21 0 0 1 5.4 1.65l-1.9 1.2A7.58 7.58 0 0 0 12 6c-2.22 0-4.1.78-5.66 2.34A7.71 7.71 0 0 0 4 14a8.2 8.2 0 0 0 1.1 4h13.8c.38-.63.66-1.3.84-1.98.17-.68.26-1.39.26-2.12a7.19 7.19 0 0 0-.85-3.4l1.2-1.9c.5.78.9 1.62 1.19 2.5a9.77 9.77 0 0 1-.89 7.95c-.18.3-.43.53-.75.7-.32.17-.65.25-1 .25H5.1c-.35 0-.68-.08-1-.25a1.9 1.9 0 0 1-.75-.7A10.2 10.2 0 0 1 2 14c0-1.38.26-2.68.79-3.89A10.18 10.18 0 0 1 8.12 4.8 9.68 9.68 0 0 1 12 4Z" />
+</svg>

package/src/assets/svg/icons/IconPowerOff.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.2 20.3v-3l-3.5-3.5V8.3c0-.4.1-.78.27-1.13.19-.34.45-.61.8-.8L9.7 8.3h-1v4.65l3.5 3.5v1.85h1v-1.85l.93-.92L2.1 3.5l1.4-1.4 18.4 18.4-1.4 1.4-4.95-4.95-.35.35v3h-5Zm7.65-6.7-1.15-1.15V8.3h-4.15L8.7 4.45V2.3h2v4h4v-4h2v5l-1-1h1c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v4.45l-.85.85Z" />
+</svg>

package/src/assets/svg/icons/IconSleeps.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 17V7h2v8h8V7h8c1.1 0 2.04.4 2.82 1.18A3.85 3.85 0 0 1 23 11v6H1Zm12-2h8v-4c0-.55-.2-1.02-.59-1.41-.39-.4-.86-.59-1.41-.59h-6v6Zm-6-1c.83 0 1.54-.3 2.13-.88.58-.58.87-1.29.87-2.12 0-.83-.3-1.54-.88-2.13A2.9 2.9 0 0 0 7 8c-.83 0-1.54.3-2.13.88A2.9 2.9 0 0 0 4 11c0 .83.3 1.54.88 2.13.58.58 1.29.87 2.12.87Zm0-2a.97.97 0 0 1-.71-.29A.97.97 0 0 1 6 11c0-.28.1-.52.29-.71.19-.2.43-.29.71-.29.28 0 .52.1.71.29.2.19.29.43.29.71 0 .28-.1.52-.29.71-.19.2-.43.29-.71.29Z" />
+</svg>

package/src/assets/svg/icons/IconSnowflake.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11 22v-4.15l-3.25 3.2-1.4-1.4L11 15v-2H9l-4.65 4.65-1.4-1.4L6.15 13H2v-2h4.15l-3.2-3.25 1.4-1.4L9 11h2V9L6.35 4.35l1.4-1.4L11 6.15V2h2v4.15l3.25-3.2 1.4 1.4L13 9v2h2l4.65-4.65 1.4 1.4-3.2 3.25H22v2h-4.15l3.2 3.25-1.4 1.4L15 13h-2v2l4.65 4.65-1.4 1.4-3.25-3.2V22h-2Z"/>
+</svg>

package/src/assets/svg/icons/IconUmbrella.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m19.6 21.01-6.35-6.35 1.4-1.4L21 19.61l-1.4 1.4Zm-13.65-.7c-1-1-1.74-2.12-2.23-3.37a10.52 10.52 0 0 1 0-7.63 9.74 9.74 0 0 1 2.23-3.35c1-1 2.12-1.74 3.36-2.23a10.27 10.27 0 0 1 7.63 0 9.86 9.86 0 0 1 3.36 2.23L5.95 20.31Zm.2-3.05 1.35-1.35a19.27 19.27 0 0 1-1.42-2.17 10.98 10.98 0 0 1-.93-2.18c-.18.99-.2 1.97-.04 2.95.16.99.5 1.9 1.04 2.75Zm2.8-2.75 5.55-5.6c-.72-.55-1.44-1-2.16-1.33a8.84 8.84 0 0 0-2.04-.7 4.83 4.83 0 0 0-1.71-.07c-.51.09-.9.27-1.19.55-.28.3-.47.7-.55 1.21a4.9 4.9 0 0 0 .06 1.73c.13.64.36 1.32.7 2.04.34.71.79 1.44 1.34 2.17Zm6.95-7 1.4-1.35a7.95 7.95 0 0 0-5.75-1 14.58 14.58 0 0 1 2.2.92A11.34 11.34 0 0 1 15.9 7.5Z" />
+</svg>

package/src/assets/svg/icons/IconWater.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 21.5c-2.22 0-4.1-.77-5.66-2.3A7.56 7.56 0 0 1 4 13.6a7.6 7.6 0 0 1 2.35-5.55L12 2.5l5.65 5.55a7.78 7.78 0 0 1 .01 11.15A7.78 7.78 0 0 1 12 21.5Zm0-2c1.67 0 3.08-.57 4.25-1.71A5.63 5.63 0 0 0 18 13.6a5.68 5.68 0 0 0-1.75-4.1L12 5.3 7.75 9.5A5.45 5.45 0 0 0 6 13.6c0 1.65.58 3.05 1.75 4.19A5.85 5.85 0 0 0 12 19.5Z" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvClassA.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.75 5a1 1 0 0 1 1-1h1.67a1 1 0 0 1 .6.2l1.33 1c.12.09.2.19.27.3h3.13V5a1 1 0 0 1 1-1h1.67a1 1 0 0 1 .6.2l1.33 1c.12.09.2.19.27.3h3.56c.83 0 1.55.59 1.72 1.4l.82 4.1c.02.12.03.23.03.35v4.9c0 .97-.78 1.75-1.75 1.75h-.88a2.25 2.25 0 0 1-4.24 0H8.12a2.25 2.25 0 0 1-4.24 0H2c-.97 0-1.75-.78-1.75-1.75v-9c0-.97.78-1.75 1.75-1.75h1.75V5Zm12 2H2a.25.25 0 0 0-.25.25v9c0 .14.11.25.25.25h1.88a2.25 2.25 0 0 1 4.24 0h4.13v-6.25c0-.97.78-1.75 1.75-1.75h1c.97 0 1.75.78 1.75 1.75v5.13a2.24 2.24 0 0 1 3.37 1.12H21c.14 0 .25-.11.25-.25V13H19c-.97 0-1.75-.78-1.75-1.75v-2c0-.97.78-1.75 1.75-1.75h1.49l-.06-.3a.25.25 0 0 0-.25-.2h-4.43Zm-2 9.5h1.5v-6.25A.25.25 0 0 0 15 10h-1a.25.25 0 0 0-.25.25v6.25ZM19 9h1.79l.46 2.3v.2H19a.25.25 0 0 1-.25-.25v-2c0-.14.11-.25.25-.25ZM6 16.5A.75.75 0 1 0 6 18a.75.75 0 0 0 0-1.5Zm12 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7.75 10.25c0-.14.11-.25.25-.25h2c.14 0 .25.11.25.25v1c0 .14-.11.25-.25.25H8a.25.25 0 0 1-.25-.25v-1ZM8 8.5c-.97 0-1.75.78-1.75 1.75v1c0 .97.78 1.75 1.75 1.75h2c.97 0 1.75-.78 1.75-1.75v-1c0-.97-.78-1.75-1.75-1.75H8Z" clip-rule="evenodd" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvClassB.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2.75 14V6.5H14c.07 0 .2.03.42.14.21.1.46.27.73.5.3.24.61.54.93.86h-.83a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h6.54c.16.14.29.37.37.66a2.67 2.67 0 0 1 .09.59V14H2.75Zm-1.5 1.5V6a1 1 0 0 1 1-1H14c.4 0 .77.13 1.1.3.34.18.68.41 1 .68.65.53 1.31 1.22 1.92 1.92l.08.1h.15v.18A40.44 40.44 0 0 1 20.4 11h1.54c.15 0 .32.03.48.12.73.4 1.04 1.14 1.18 1.64a4.17 4.17 0 0 1 .15.96v.02l-.75.01h.75v1.9a1 1 0 0 1-.3.7l-.85.86a1 1 0 0 1-.7.29h-1.03a2.25 2.25 0 0 1-4.24 0H9.87a2.25 2.25 0 0 1-4.24 0H2.25a1 1 0 0 1-1-1v-1Zm20.94 0h-1.57c.1.15.19.32.25.5h.82l.5-.5Zm-5.31 0H9.62c.1.15.19.32.25.5h6.76c.06-.18.15-.35.25-.5Zm-11 0c-.1.15-.19.32-.25.5H2.75v-.5h3.13Zm9.87-6h1.65c.43.54.83 1.06 1.15 1.5h-2.8V9.5Zm-8 6.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm11 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 9a1 1 0 0 1 1-1h6.5a1 1 0 0 1 1 1v2.5a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1V9Zm1.5.5V11h5.5V9.5h-5.5Z" clip-rule="evenodd" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvClassC.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.75 5.5V16h1.88a2.25 2.25 0 0 1 3.62-.93V8a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v8h.5v-6a1 1 0 0 1 1-1h7V7.26l-4.4-1.76H1.76Zm6.12 12h7.76a2.25 2.25 0 0 0 4.24 0h1.88a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1h-.35l-1-1.5h1.35a1 1 0 0 0 1-1V6.92a1 1 0 0 0-.63-.93l-4.8-1.92a1 1 0 0 0-.37-.07H1.25a1 1 0 0 0-1 1v11.5a1 1 0 0 0 1 1h2.38a2.25 2.25 0 0 0 4.24 0Zm9.88-3c-.98 0-1.81.63-2.12 1.5h-.88v-5.5h.5v2a1 1 0 0 0 1 1h5V16h-1.38a2.25 2.25 0 0 0-2.12-1.5Zm.89-3.95L19.6 12h-2.85v-1.5h1.85l.04.05ZM11.25 16h-2.5V8.5h2.5V16ZM5 16.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM17.75 16a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm-14-9.5a1 1 0 0 0-1 1V10a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7.5a1 1 0 0 0-1-1h-2Zm.5 3V8h1v1.5h-1Z" clip-rule="evenodd" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvFifthWheel.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.75 5.5V16h.88a2.25 2.25 0 0 1 4.12-.28 2.25 2.25 0 0 1 3.5-.65V8a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v8h.5v-3a1 1 0 0 1 1-1h4.15c.08-.4.18-.98.22-1.6.06-.9-.01-1.75-.3-2.31a5.13 5.13 0 0 0-1.86-1.74c-.69-.43-1.34-.73-1.61-.85H1.75ZM14.25 16V8.5h-2.5V16h2.5Zm-13 1.5h1.38a2.25 2.25 0 0 0 4.12.28 2.25 2.25 0 0 0 4.12-.28h5.88a1 1 0 0 0 1-1v-3h1.5V15h1.5v-1.5h1.06a1 1 0 0 0 .97-.76c.08-.38.27-1.25.33-2.24.07-.95.03-2.15-.44-3.09a6.53 6.53 0 0 0-2.41-2.34c-.9-.55-1.72-.9-1.93-1a.98.98 0 0 0-.38-.07H1.25a1 1 0 0 0-1 1v11.5a1 1 0 0 0 1 1ZM4 16.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Zm4 0a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM4.75 8.5V11h2.5V8.5h-2.5ZM3.25 8a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1h-3.5a1 1 0 0 1-1-1V8Zm15.43.25a.5.5 0 0 0-.18-.18.5.5 0 0 0-.18.18c.04.08.1.14.18.18a.5.5 0 0 0 .18-.18ZM17.25 8a1 1 0 0 1 1-1h.5a1 1 0 0 1 1 1v.5a1 1 0 0 1-1 1h-.5a1 1 0 0 1-1-1V8Z" clip-rule="evenodd" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvFishHouse.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2.5 18V6.5H16V18h-.5V9a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v9H7.93a2.25 2.25 0 1 0-3.35 0H2.5ZM20 8.21l-2.5-1.25v10.58l2.5-1.25V8.2Zm-2.91 11.21 3.84-1.92H23.5V15H22v1h-.5V7.9a1 1 0 0 0-.55-.89l-3.86-1.93-.16-.08H2a1 1 0 0 0-1 1v12.5a1 1 0 0 0 1 1h14.93l.16-.08ZM14 9.5V18h-2.5V9.5H14ZM5 10v-.5h1.5v.5H5Zm-.5-2a1 1 0 0 0-1 1v1.5a1 1 0 0 0 1 1H7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H4.5Zm9 3.25v-.75H12v3h1.5v-2.25Zm-8 5.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" clip-rule="evenodd"/>
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvParkModel.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2.25 5a1 1 0 0 0-1 1v9.5a1 1 0 0 0 1 1V19h1.5v-2.5h9.76l-.01.25a2.25 2.25 0 0 0 4.25 1.03 2.25 2.25 0 0 0 4.24-1.28h.76a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H2.25Zm18.91 10h1.09V9h-5.68a1 1 0 0 1-.53-.15l-3.51-2.2-2.78 1.99V15h4.59a2.24 2.24 0 0 1 3.41.72 2.25 2.25 0 0 1 3.41-.72ZM5.75 15H5v-2.25h.75V15ZM3.5 15v-2.25h-.75V15h.75Zm.75-3.75h-1.5V9h5.5v2.25h-4ZM8.76 7.5H2.75v-1h7.41l-1.4 1Zm13.49-1h-7.13l1.6 1h5.53v-1Zm-15 6.25h1V15h-1v-2.25Zm4.5-4.25a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9.5a1 1 0 0 0-1-1h-2Zm1.5 4h-1V10h1v2.5Zm5-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2Zm.5 2.5v-1h1v1h-1Zm-3 4a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm4 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" clip-rule="evenodd" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvPopUpCamper.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M7.66 6v-.5h9.5V6h-9.5Zm11-1v1h3.96a1 1 0 0 1 .98 1.16l-.62 3.71-.3 1.8a1 1 0 0 1-.98.83h-3.04V15h2.5v-1h1.5v2.5h-4a1 1 0 0 1-1 1h-3.88a2.25 2.25 0 0 1-4.24 0H7.16a1 1 0 0 1-1-1v-3H3.12a1 1 0 0 1-.98-.84l-.3-1.79-.62-3.7A1 1 0 0 1 2.2 6h3.95V5a1 1 0 0 1 1-1h10.5a1 1 0 0 1 1 1ZM9.54 16a2.25 2.25 0 0 1 4.24 0h3.38v-2.5h-1a1 1 0 0 1-1-1v-5h-5.5v5a1 1 0 0 1-1 1h-1V16h1.88Zm7.12-6V7.5h5.36l-.41 2.5h-4.95Zm0 1.5h4.7l-.09.5H16.66v-.5Zm-9.75-4h1.25V10H3.21L2.8 7.5H6.9Zm-3.45 4h4.7v.5H3.55l-.09-.5Zm9.2.5h-.5V9.5h.5V12Zm-1-4a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h1.5a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-1.5Zm-.75 8.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" clip-rule="evenodd"/>
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvTravelTrailer.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.1 4a4 4 0 0 0-2.83 1.17l-.1.1A4 4 0 0 0 1 8.1v4.62a1 1 0 0 0 .03.26l.95 3.5a1 1 0 0 0 .96.74h3.81v.03a2.5 2.5 0 1 0 5-.03h11.47V14.75h-1.5v.97H20.3l.91-2.69a1 1 0 0 0 .06-.32V8.1a4 4 0 0 0-1.18-2.83l-.1-.1A4 4 0 0 0 17.18 4H5.1Zm6.12 11.72h.54V8a1 1 0 0 1 1-1H17a1 1 0 0 1 1 1v7.72h.71l1.06-3.1V8.1c0-.67-.27-1.3-.74-1.77l-.1-.1a2.5 2.5 0 0 0-1.76-.73H5.1c-.67 0-1.3.26-1.77.73l-.1.1A2.5 2.5 0 0 0 2.5 8.1v4.55l.82 3.07h3.96a2.5 2.5 0 0 1 3.94 0ZM16.5 8.5v7.22h-3.24V8.5h3.24Zm-11 1v-1h2v1h-2ZM5 7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H5Zm9.13 2.75v2h1.5v-2h-1.5Zm-3.88 7.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
+</svg>

package/src/assets/svg/icons/realm/rv/IconRvTruckCamper.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8.1 5a1 1 0 0 0-.7.3L4.9 7.8a1 1 0 0 0 .7 1.7h6.65v.5H9.1a1 1 0 0 0-.7.3L5.69 13H2.25a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1H4.5a2.25 2.25 0 0 0 4.5 0h6.5a2.25 2.25 0 0 0 4.5 0h2.75a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H8.1Zm11.33 11h2.82v-1.5h-8.5V16h2.32a2.24 2.24 0 0 1 3.36 0Zm-11 0h3.82v-4.5h-.5v2a1 1 0 0 1-1 1h-8V16h2.32a2.24 2.24 0 0 1 3.36 0Zm1.82-3H7.81l1.5-1.5h.94V13Zm12 0h-8.5V9a1 1 0 0 0-1-1H6.81l1.5-1.5h13.94V13Zm-3-3.5h-2.5v-1h2.5v1Zm-3-2.5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-3.5Zm-9.5 9.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm11 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" clip-rule="evenodd" />
+</svg>

package/src/components/TideBackgroundImage.vue

@@ -8,13 +8,14 @@
     alt: string;
     isLazy: boolean;
     sources?: Source[];
-    src: string;
+    src?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     alt: '',
     isLazy: true,
     sources: () => [],
+    src: undefined,
   });
 </script>
 

package/src/components/TideCard.vue

@@ -1,19 +1,73 @@
 <script lang="ts" setup>
+  import { POSITION_CARD_ICON, TYPE_CARD, type CardIconPosition, type CardType } from '@/types/Card';
+  import type { Icon } from '@/types/Icon';
   import { CSS } from '@/types/Styles';
+  import { SIZE } from '@/types/Size';
+  import TideIcon from '@/components/TideIcon.vue';
+
+  type Props = {
+    description?: string;
+    heading: string;
+    icon?: Icon;
+    iconPosition: CardIconPosition;
+    selected?: boolean;
+    type: CardType;
+  };
+
+  withDefaults(defineProps<Props>(), {
+    description: undefined,
+    icon: undefined,
+    iconPosition: POSITION_CARD_ICON.LEFT,
+    selected: undefined,
+    type: TYPE_CARD.INFORMATIONAL,
+  });
 </script>
 
 <template>
-  <div
+  <component
     :class="[
       'tide-card',
-      CSS.HEIGHT.FULL,
+      CSS.BORDER.COLOR.LOW,
+      CSS.BORDER.FULL.ONE,
       CSS.BORDER.RADIUS.HALF,
-      CSS.BG.SURFACE.DEFAULT,
-      CSS.SHADOW.BOTTOM,
-      CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.SNAP_ALIGN.START,
+      CSS.DISPLAY.FLEX,
+      CSS.GAP.HALF,
+      CSS.PADDING.FULL.ONE,
+      CSS.WIDTH.FULL,
+      CSS.ALIGN.X.LEFT,
+      iconPosition === POSITION_CARD_ICON.LEFT
+        ? CSS.FLEX.DIRECTION.ROW
+        : iconPosition === POSITION_CARD_ICON.TOP && CSS.FLEX.DIRECTION.COLUMN,
+      type !== TYPE_CARD.INFORMATIONAL && 'hoverable',
+      type === TYPE_CARD.SELECTABLE && selected && 'selected',
     ]"
+    :is="type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
   >
-    <slot />
-  </div>
+    <TideIcon
+      :icon="icon"
+      :size="SIZE.SMALL"
+      v-if="icon"
+    />
+
+    <div :class="[CSS.AXIS2.START, CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.HALF]">
+      <div :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">{{ heading }}</div>
+
+      <div
+        :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
+        v-if="description"
+      >
+        {{ description }}
+      </div>
+    </div>
+  </component>
 </template>
+
+<style scoped>
+  .tide-card.hoverable:not(.selected):hover {
+    border-color: var(--tide-border-rest);
+  }
+  .tide-card.selected {
+    outline: 2px solid var(--tide-border-high);
+    outline-offset: -2px;
+  }
+</style>

package/src/components/TideIcon.vue

@@ -8,6 +8,7 @@
   import { CSS } from '@/types/Styles';
   import { SIZE } from '@/types/Size';
   import { formatPascalCase } from '@/utilities/format';
+  import { REALM } from '@/types/Realm';
 
   type Props = {
     icon: Icon;
@@ -22,11 +23,17 @@
 
   watch(
     () => props.icon,
-    () => {
+    async () => {
       const id = props.icon as unknown as string;
-      const name = formatPascalCase(id);
-      const component = defineAsyncComponent(() => import(`../assets/svg/icons/Icon${name}.svg`));
+      const [prefix, ...rest] = id.split('-');
+      const name = formatPascalCase(rest.length > 0 ? rest.join('-') : prefix);
+      const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
 
+      const componentPath: string = realmFolder
+        ? `../assets/svg/icons/realm/${realmFolder}/Icon${formatPascalCase(prefix)}${name}.svg`
+        : `../assets/svg/icons/Icon${name}.svg`;
+
+      const component = defineAsyncComponent(() => import(componentPath));
       innerSVG.value = markRaw(component);
     },
     { immediate: true }
@@ -46,13 +53,16 @@
 </template>
 
 <style>
-  .tide-icon svg {
+  .tide-icon {
     width: 1.5rem;
     height: 1.5rem;
   }
-
-  .tide-icon.small svg {
+  .tide-icon.small {
     width: 1.25rem;
     height: 1.25rem;
   }
+  .tide-icon svg {
+    width: 100%;
+    height: 100%;
+  }
 </style>

package/src/components/TideInputCheckbox.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { computed } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
@@ -7,8 +7,6 @@
   import { SIZE } from '@/types/Size';
   import { formatNumber } from '@/utilities/format';
 
-  const input = ref<HTMLInputElement>();
-
   type Props = {
     checked?: boolean;
     dataTrack?: string;
@@ -31,41 +29,7 @@
     number: undefined,
   });
 
-  const checked = ref(props.checked || props.indeterminate);
-  const indeterminate = ref(props.indeterminate);
-
-  const handleClick = () => {
-    checked.value = !checked.value;
-  };
-
-  watch(
-    () => props.indeterminate,
-    (newValue, oldValue) => {
-      if (newValue !== oldValue || newValue !== indeterminate.value) {
-        if (input.value) {
-          indeterminate.value = newValue;
-          input.value.indeterminate = indeterminate.value;
-
-          if (indeterminate.value === true) {
-            checked.value = true;
-          }
-
-          input.value.checked = checked.value;
-        }
-      }
-    }
-  );
-
-  watch(
-    () => props.checked,
-    (newValue, oldValue) => {
-      if (newValue !== oldValue || newValue !== checked.value) {
-        checked.value = newValue;
-      }
-    }
-  );
-
-  defineExpose({ checked, indeterminate });
+  const isChecked = computed(() => props.checked || props.indeterminate);
 </script>
 
 <template>
@@ -76,16 +40,16 @@
       CSS.AXIS2.CENTER,
       CSS.GAP.HALF,
       CSS.FONT.SIZE.FOURTEEN,
-      disabled && 'disabled',
-      disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+      disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
     ]"
   >
     <input
-      :checked="checked"
+      :checked="isChecked"
       :class="[CSS.DISPLAY.NONE]"
       :disabled="props.disabled"
       :name="props.name"
       ref="input"
+      @click.prevent
       :id="props.inputId"
       type="checkbox"
     />
@@ -99,25 +63,24 @@
         CSS.AXIS2.CENTER,
         CSS.FLEX.SHRINK.OFF,
         CSS.BORDER.FULL.ONE,
-        checked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
+        isChecked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
         CSS.BORDER.RADIUS.QUARTER,
-        checked && 'checked',
+        isChecked && 'checked',
         disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
       ]"
-      @click="handleClick"
     >
       <TideIcon
         :class="[CSS.FONT.COLOR.SECONDARY]"
-        :icon="indeterminate ? ICON.REMOVE : ICON.CHECK"
+        :icon="props.indeterminate ? ICON.REMOVE : ICON.CHECK"
         :size="SIZE.SMALL"
-        v-if="checked || indeterminate"
+        v-if="isChecked"
       />
     </div>
 
     <label
       :class="[CSS.DISPLAY.FLEX, CSS.GAP.HALF, disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER]"
       :for="props.inputId"
-      @click.prevent="checked = !checked"
+      @click.prevent
       v-if="label"
     >
       <span>{{ label }}</span>

package/src/stories/TideCard.stories.ts

@@ -1,32 +1,95 @@
+import { action } from '@storybook/addon-actions';
+
 import TideCard from '@/components/TideCard.vue';
-import { dataTrack, parameters } from '@/utilities/storybook';
+import { ICON } from '@/types/Icon';
+import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
+import { argTypeBooleanUnrequired, click, doSomething } from '@/utilities/storybook';
+import { parameters, prependNoneAsUndefined, formatArgType } from '@/utilities/storybook';
+
+const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
+const POSITION_CARD_ICON = prependNoneAsUndefined(STANDARD_POSITION_CARD_ICON);
+const CARD_ICON = prependNoneAsUndefined(ICON);
 
 const render = (args: any) => ({
   components: { TideCard },
+  methods: {
+    doSomething,
+    handleClick: (event: Event) => {
+      action('TideCard clicked')(event);
+
+      try {
+        const buttonClick = eval(args.click);
+
+        if (buttonClick) {
+          buttonClick();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "click" control.');
+      }
+    },
+  },
   setup: () => ({ args }),
-  template: `<TideCard class="tide-display-inline-block tide-padding-1">{{ args.default }}</TideCard>`,
+  template: `<TideCard @click="handleClick" v-bind="args" />`,
 });
 
 export default {
   argTypes: {
-    class: {
+    click: {
+      ...click,
+    },
+    description: {
+      control: 'text',
+      description: 'Optional description text displayed below the heading.',
       table: {
-        disable: true,
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
       },
     },
-    dataTrack,
-    default: {
+    heading: {
       control: 'text',
-      description: 'Card content',
+      description: 'The main heading of the card.',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      ...formatArgType({ CARD_ICON }),
+      description: 'Optional icon displayed on the card.',
       table: {
         defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
+        type: { summary: 'Icon' },
+      },
+    },
+    iconPosition: {
+      ...formatArgType({ POSITION_CARD_ICON }),
+      description: 'Position of the icon relative to the content.',
+      table: {
+        defaultValue: { summary: 'LEFT' },
+        type: { summary: 'CardIconPosition' },
+      },
+    },
+    selected: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether the Card is selected (for selectable cards).',
+    },
+    type: {
+      ...formatArgType({ TYPE_CARD }),
+      description: 'Type of the card.',
+      table: {
+        defaultValue: { summary: 'INFORMATIONAL' },
+        type: { summary: 'CardType' },
       },
     },
   },
   args: {
-    dataTrack: '',
-    default: 'Demo',
+    click: 'doSomething',
+    description: '',
+    heading: 'Demo',
+    icon: CARD_ICON.None,
+    iconPosition: POSITION_CARD_ICON.None,
+    selected: undefined,
+    type: TYPE_CARD.None,
   },
   component: TideCard,
   parameters,

package/src/stories/TideInputCheckbox.stories.ts

@@ -1,16 +1,27 @@
 import { action } from '@storybook/addon-actions';
 
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
-import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
 
 const render = (args: any, context: any) => ({
   components: { TideInputCheckbox },
   methods: {
+    doSomething,
     handleClick: (event: Event) => {
       const input = context.canvasElement.querySelector('input');
 
-      action('TideInputCheckbox toggled')(event);
-      context.updateArgs({ ...args, checked: input.checked === true, indeterminate: undefined });
+      action('TideInputCheckbox clicked')(event);
+      context.updateArgs({ ...args, checked: !input.checked === true, indeterminate: undefined });
+
+      try {
+        const buttonClick = eval(args.click);
+
+        if (buttonClick) {
+          buttonClick();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "click" control.');
+      }
     },
   },
   setup: () => ({ args }),
@@ -23,6 +34,9 @@ export default {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether Checkbox is checked or unchecked',
     },
+    click: {
+      ...click,
+    },
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
@@ -68,6 +82,7 @@ export default {
   },
   args: {
     checked: undefined,
+    click: 'doSomething',
     dataTrack: '',
     disabled: undefined,
     indeterminate: undefined,

package/src/types/Card.ts

@@ -0,0 +1,14 @@
+export const TYPE_CARD = {
+  ACTIONABLE: 'action',
+  INFORMATIONAL: 'informational',
+  SELECTABLE: 'select',
+} as const;
+
+export type CardType = (typeof TYPE_CARD)[keyof typeof TYPE_CARD];
+
+export const POSITION_CARD_ICON = {
+  LEFT: 'left',
+  TOP: 'top',
+} as const;
+
+export type CardIconPosition = (typeof POSITION_CARD_ICON)[keyof typeof POSITION_CARD_ICON];

package/src/types/Icon.ts

@@ -1,3 +1,5 @@
+import type { RealmKey } from '@/types/Realm';
+
 export const ICON = {
   ACCOUNT_BALANCE: 'account-balance',
   ADD: 'add',
@@ -5,10 +7,12 @@ export const ICON = {
   ALIGN_SPACE: 'align-space',
   APPLE_PAY: 'apple-pay',
   ARROW_BACK: 'arrow-back',
+  ARROW_CYCLE: 'arrow-cycle',
   ARROW_FORWARD: 'arrow-forward',
   ARROW_RIGHT: 'arrow-right',
   ASSIGNMENT: 'assignment',
   AWARD_STAR: 'award-star',
+  BED: 'bed',
   BOOKMARK: 'bookmark',
   CALENDAR_MONTH: 'calendar-month',
   CALL: 'call',
@@ -17,11 +21,11 @@ export const ICON = {
   CHEVRON_RIGHT: 'chevron-right',
   CLEAR: 'clear',
   CLOSE: 'close',
-  CYCLE: 'cycle',
   DELETE: 'delete',
   DIAMOND: 'diamond',
   DRAFT: 'draft',
   EDIT: 'edit',
+  ENGINE: 'engine',
   ERROR: 'error',
   EXPAND_CONTENT: 'expand-content',
   EXPAND_LESS: 'expand-less',
@@ -33,6 +37,7 @@ export const ICON = {
   FORMAT_ITALIC: 'format-italic',
   FORMAT_LIST_BULLETED: 'format-list-bulleted',
   FORUM: 'forum',
+  GAS: 'gas',
   GAVEL: 'gavel',
   GOOGLE: 'google',
   GOOGLE_PAY: 'google-pay',
@@ -44,6 +49,7 @@ export const ICON = {
   INSTAGRAM: 'instagram',
   IOS_SHARE: 'ios-share',
   LAYOUT: 'layout',
+  LEVELLING_JACK: 'levelling-jack',
   LINKED_IN: 'linked in',
   LOCAL_SHIPPING: 'local-shipping',
   LOCK: 'lock',
@@ -51,6 +57,7 @@ export const ICON = {
   MENU: 'menu',
   MORE_HORIZ: 'more-horiz',
   NOTIFICATIONS: 'notifications',
+  ODOMETER: 'odometer',
   OPEN_IN_NEW: 'open-in-new',
   PALETTE: 'palette',
   PAYPAL: 'paypal',
@@ -58,6 +65,7 @@ export const ICON = {
   PHOTO_CAMERA: 'photo-camera',
   PINTEREST: 'pinterest',
   PLAY_ARROW: 'play-arrow',
+  POWER_OFF: 'power-off',
   REMOVE: 'remove',
   ROUNDED_CORNERS: 'rounded-corners',
   RULER: 'ruler',
@@ -66,22 +74,46 @@ export const ICON = {
   SELL: 'sell',
   SHARE: 'share',
   SHOPPING_CART: 'shopping-cart',
+  SLEEPS: 'sleeps',
   SMS: 'sms',
+  SNOWFLAKE: 'snowflake',
   STAR: 'star',
   SWAP_VERT: 'swap-vert',
   THREE_D_ROTATION: 'three-d-rotation',
   TROPHY: 'trophy',
   TUNE: 'tune',
   TWITTER: 'twitter',
+  UMBRELLA: 'umbrella',
   VIDEOCAM: 'videocam',
   VIEW_IN_AR: 'view-in-ar',
   VISIBILITY: 'visibility',
   VOLUME_OFF: 'volume-off',
   VOLUME_ON: 'volume-on',
   WARNING: 'warning',
+  WATER: 'water',
   WEIGHT: 'weight',
   WIDTH: 'width',
   YOUTUBE: 'youtube',
 } as const;
 
-export type Icon = (typeof ICON)[keyof typeof ICON];
+export const ICON_REALM = {
+  RV: {
+    CLASS_A: 'rv-class-a',
+    CLASS_B: 'rv-class-b',
+    CLASS_C: 'rv-class-c',
+    FIFTH_WHEEL: 'rv-fifth-wheel',
+    FISH_HOUSE: 'rv-fish-house',
+    PARK_MODEL: 'rv-park-model',
+    POP_UP_CAMPER: 'rv-pop-up-camper',
+    TRAVEL_TRAILER: 'rv-travel-trailer',
+    TRUCK_CAMPER: 'rv-truck-camper',
+  },
+} as const;
+
+type RealmKeysWithIcons = Extract<RealmKey, keyof typeof ICON_REALM>;
+type RealmIcon = {
+  [RealmKey in RealmKeysWithIcons]: (typeof ICON_REALM)[RealmKey][keyof (typeof ICON_REALM)[RealmKey]];
+}[RealmKeysWithIcons];
+
+export type GlobalIcon = (typeof ICON)[keyof typeof ICON];
+export type Icon = GlobalIcon | RealmIcon;