@clubmed/trident-ui 1.0.0-alpha.35 → 1.0.0-alpha.36

package/fonts/Transports/tui-transports.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-transports";
-  src: url('tui-transports.eot?t=1712155606240'); /* IE9*/
-  src: url('tui-transports.eot?t=1712155606240#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-transports.woff2?t=1712155606240") format("woff2"),
-  url("tui-transports.woff?t=1712155606240") format("woff"),
-  url('tui-transports.ttf?t=1712155606240') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-transports.svg?t=1712155606240#tui-transports') format('svg'); /* iOS 4.1- */
+  src: url('tui-transports.eot?t=1712586779208'); /* IE9*/
+  src: url('tui-transports.eot?t=1712586779208#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-transports.woff2?t=1712586779208") format("woff2"),
+  url("tui-transports.woff?t=1712586779208") format("woff"),
+  url('tui-transports.ttf?t=1712586779208') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-transports.svg?t=1712586779208#tui-transports') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-transports-"], [class*=" tui-transports-"] {

package/fonts/Transports/tui-transports.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-transports";
-  src: url('tui-transports.eot?t=1712155606240'); /* IE9*/
-  src: url('tui-transports.eot?t=1712155606240#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-transports.woff2?t=1712155606240") format("woff2"),
-  url("tui-transports.woff?t=1712155606240") format("woff"),
-  url('tui-transports.ttf?t=1712155606240') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-transports.svg?t=1712155606240#tui-transports') format('svg'); /* iOS 4.1- */
+  src: url('tui-transports.eot?t=1712586779208'); /* IE9*/
+  src: url('tui-transports.eot?t=1712586779208#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-transports.woff2?t=1712586779208") format("woff2"),
+  url("tui-transports.woff?t=1712586779208") format("woff"),
+  url('tui-transports.ttf?t=1712586779208') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-transports.svg?t=1712586779208#tui-transports') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-transports-"], [class*=" tui-transports-"] {

package/fonts/Utilities/tui-utilities.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712155606392'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712155606392#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712155606392") format("woff2"),
-  url("tui-utilities.woff?t=1712155606392") format("woff"),
-  url('tui-utilities.ttf?t=1712155606392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712155606392#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1712586779366'); /* IE9*/
+  src: url('tui-utilities.eot?t=1712586779366#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1712586779366") format("woff2"),
+  url("tui-utilities.woff?t=1712586779366") format("woff"),
+  url('tui-utilities.ttf?t=1712586779366') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1712586779366#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712155606392'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712155606392#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712155606392") format("woff2"),
-  url("tui-utilities.woff?t=1712155606392") format("woff"),
-  url('tui-utilities.ttf?t=1712155606392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712155606392#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1712586779366'); /* IE9*/
+  src: url('tui-utilities.eot?t=1712586779366#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1712586779366") format("woff2"),
+  url("tui-utilities.woff?t=1712586779366") format("woff"),
+  url('tui-utilities.ttf?t=1712586779366') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1712586779366#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712155606392'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712155606392#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712155606392") format("woff2"),
-  url("tui-utilities.woff?t=1712155606392") format("woff"),
-  url('tui-utilities.ttf?t=1712155606392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712155606392#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1712586779366'); /* IE9*/
+  src: url('tui-utilities.eot?t=1712586779366#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1712586779366") format("woff2"),
+  url("tui-utilities.woff?t=1712586779366") format("woff"),
+  url('tui-utilities.ttf?t=1712586779366') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1712586779366#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712155606392'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712155606392#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712155606392") format("woff2"),
-  url("tui-utilities.woff?t=1712155606392") format("woff"),
-  url('tui-utilities.ttf?t=1712155606392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712155606392#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1712586779366'); /* IE9*/
+  src: url('tui-utilities.eot?t=1712586779366#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1712586779366") format("woff2"),
+  url("tui-utilities.woff?t=1712586779366") format("woff"),
+  url('tui-utilities.ttf?t=1712586779366') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1712586779366#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712155606392'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712155606392#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712155606392") format("woff2"),
-  url("tui-utilities.woff?t=1712155606392") format("woff"),
-  url('tui-utilities.ttf?t=1712155606392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712155606392#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1712586779366'); /* IE9*/
+  src: url('tui-utilities.eot?t=1712586779366#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1712586779366") format("woff2"),
+  url("tui-utilities.woff?t=1712586779366") format("woff"),
+  url('tui-utilities.ttf?t=1712586779366') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1712586779366#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-alpha.35",
+  "version": "1.0.0-alpha.36",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -74,8 +74,10 @@
     }
   },
   "scripts": {
+    "predev": "npm run build:icons",
     "dev": "storybook dev -p 6006",
-    "build": "npm run build:icons && vite build && npm run build:icons font",
+    "prebuild": "npm run build:icons",
+    "build": "vite build && npm run build:icons font",
     "build:storybook": "npm run build:icons && storybook build",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --fix",
@@ -102,19 +104,19 @@
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
     "@netsells/storybook-mockdate": "^0.3.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-actions": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-viewport": "^7.6.12",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
-    "@storybook/test": "^7.6.10",
-    "@svgr/rollup": "^8.1.0",
+    "@storybook/addon-a11y": "8.0.6",
+    "@storybook/addon-actions": "8.0.6",
+    "@storybook/addon-essentials": "8.0.6",
+    "@storybook/addon-interactions": "8.0.6",
+    "@storybook/addon-links": "8.0.6",
+    "@storybook/addon-mdx-gfm": "8.0.6",
+    "@storybook/addon-styling": "1.3.7",
+    "@storybook/addon-viewport": "8.0.6",
+    "@storybook/blocks": "8.0.6",
+    "@storybook/react": "8.0.6",
+    "@storybook/react-vite": "8.0.6",
+    "@storybook/test": "8.0.6",
+    "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
@@ -147,14 +149,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "storybook": "^7.6.3",
+    "storybook": "8.0.6",
     "svgtofont": "^4.2.0",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
-    "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.0.1"
   },

package/styles/globals.css

@@ -102,327 +102,4 @@
     @apply justify-between;
     @apply uppercase;
   }
-
-  /* SCROLLVIEWS */
-  .NativeScroller {
-    --arrows-margin: calc(12.5vw - 20px - 50px);
-  }
-
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .h-scroll-yellow {
-    overflow-y: hidden;
-    overflow-x: scroll;
-    scroll-behavior: smooth;
-    -ms-scroll-snap-type: x mandatory;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: thin;
-    scrollbar-color: black #d8cdc1;
-    padding-bottom: 44px;
-    --scrollbar-margin: calc(12.5vw - 20px - 50px);
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar {
-    height: 4px;
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar-thumb {
-    @apply bg-saffron;
-    @apply rounded-pill;
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar-track {
-    @apply rounded-pill;
-    background: transparent;
-    max-width: 1120px;
-    margin: 0 max(var(--scrollbar-margin), 20px);
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar-track-piece {
-    @apply bg-pearl;
-    @apply rounded-pill;
-  }
-
-  .children-no-shrink > * {
-    @apply shrink-0;
-  }
-
-  /* CONTENT SLIDER */
-  .ContentSlider-item {
-    will-change: transform, filter;
-    transform: scale(var(--scale));
-    filter: contrast(calc(var(--opacity) / (2 - var(--opacity))))
-      brightness(calc(2 - var(--opacity)));
-    /* yeah we don't actually *want* to make the element transparent, we just want to make it look like it is, and this is the formula */
-  }
-
-  .force-white {
-    filter: brightness(0) saturate(100%) invert(100%);
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 2) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 2) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 3) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 2;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 3) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 4) {
-    grid-column-start: calc(3 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(4 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 4) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 5) {
-    grid-column-start: calc(4 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(5 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 5) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 6) {
-    grid-column-start: calc(5 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(6 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(-50% - 10px));
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 6) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 7) {
-    grid-column-start: calc(5 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(6 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(50% + 10px));
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 7) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 8) {
-    grid-column-start: calc(6 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(7 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 8) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 9) {
-    grid-column-start: calc(7 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(8 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 9) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='2'] > *:nth-child(2) {
-    grid-column-start: 2;
-    grid-row-start: 1;
-    grid-column-end: 3;
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='2'] > *:nth-child(2) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(2) {
-    grid-column-start: 2;
-    grid-row-start: 1;
-    grid-column-end: 3;
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(2) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(3) {
-    grid-column-start: 2;
-    grid-row-start: 2;
-    grid-column-end: 3;
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(3) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(2) {
-    grid-column-start: 2;
-    grid-row-start: 1;
-    grid-column-end: 3;
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(2) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(3) {
-    grid-column-start: 2;
-    grid-row-start: 2;
-    grid-column-end: 3;
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(3) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(4) {
-    grid-column-start: 3;
-    grid-row-start: 1;
-    grid-column-end: 4;
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(4) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  /* TABS */
-  .Tabs-focusIndicator {
-    transform: translateX(
-      calc(
-        var(--index) * -100% + var(--activeIndex) * 100% -
-          (4px * (var(--index) - var(--activeIndex)))
-      )
-    );
-  }
-
-  html[dir='rtl'] .Tabs-focusIndicator {
-    transform: translateX(
-      calc(
-        var(--index) * 100% + var(--activeIndex) * -100% +
-          (4px * (var(--index) - var(--activeIndex)))
-      )
-    );
-  }
-
-  .ProductDestinations-focusIndicator {
-    transform: translateX(calc(var(--index) * -100% + var(--activeIndex) * 100%));
-  }
-
-  html[dir='rtl'] .ProductDestinations-focusIndicator {
-    transform: translateX(calc(var(--index) * 100% + var(--activeIndex) * -100%));
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 2) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 2;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 2) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 3) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 2;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 3) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 4) {
-    grid-column-start: calc(3 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(4 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(-50% - 10px));
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 4) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 5) {
-    grid-column-start: calc(3 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(4 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(50% + 10px));
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 5) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .tick {
-    -webkit-animation: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    animation: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    transform-style: preserve-3d;
-  }
-
-  .tock {
-    -webkit-animation: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    animation: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    transform-style: preserve-3d;
-  }
-
-  @keyframes tick {
-    0% {
-      transform: rotateX(0deg);
-    }
-    100% {
-      transform: rotateX(-180deg);
-    }
-  }
-
-  @keyframes tock {
-    0% {
-      transform: rotateX(180deg);
-    }
-    100% {
-      transform: rotateX(0deg);
-    }
-  }
 }