@kaizen/components 3.0.11 → 3.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -123,7 +123,7 @@
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
     "use-debounce": "^10.1.1",
-    "uuid": "^13.0.0"
+    "uuid": "^14.0.0"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
@@ -132,7 +132,7 @@
     "@cultureamp/frontend-apis": "13.3.0",
     "@cultureamp/i18n-react-intl": "^4.1.1",
     "@cultureamp/package-bundler": "^4.0.1",
-    "cssnano": "^7.1.5",
+    "cssnano": "^7.1.7",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -155,14 +155,14 @@
     "react-dom": "^19.2.5",
     "react-highlight": "^0.15.0",
     "react-intl": "^10.1.2",
-    "rollup": "^4.60.1",
+    "rollup": "^4.60.2",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
     "svgo": "^4.0.1",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
     "tsx": "^4.21.0",
-    "@kaizen/design-tokens": "11.0.4"
+    "@kaizen/design-tokens": "11.0.5"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/SingleSelect/subcomponents/Option/Option.tsx

@@ -1,7 +1,8 @@
 import React, { type HTMLAttributes } from 'react'
+import { useOption } from '@react-aria/listbox'
 import { type FocusableElement } from '@react-types/shared'
 import classnames from 'classnames'
-import { mergeProps, useFocusRing, useOption } from 'react-aria'
+import { mergeProps, useFocusRing } from 'react-aria'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'

package/src/Tile/MultiActionTile/{MultiActionTile.module.scss → MultiActionTile.module.css}

@@ -1,11 +1,9 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
   .actions {
     display: flex;
   }
 
   .secondaryAction {
-    margin-inline-end: $spacing-8;
+    margin-inline-end: var(--spacing-8);
   }
 }

package/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from '~components/ButtonV1'
 import { GenericTile, type GenericTileProps, type TileAction } from '../subcomponents/GenericTile'
-import styles from './MultiActionTile.module.scss'
+import styles from './MultiActionTile.module.css'
 
 export type MultiActionTileProps = {
   primaryAction: TileAction

package/src/Tile/TileGrid/TileGrid.module.css

@@ -0,0 +1,31 @@
+@layer kz-components {
+  .grid {
+    --tile-width: 330px;
+    --tile-height: 370px;
+
+    list-style-type: none;
+    padding-inline-start: 0;
+    margin-block: 0;
+    display: grid;
+
+    /* 
+    the more we shave off the width here,
+    the less the tiles will grow when they lose one from the row
+    */
+    grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile-width) - 40px), 1fr));
+    gap: var(--spacing-md);
+
+    /* Replace @include ca-media-mobile */
+    @media (width <= 767px) {
+      grid-template-columns: repeat(2, minmax(226px, var(--tile-height)));
+
+      > * {
+        width: 100%;
+      }
+    }
+
+    @media (width <= 480px) {
+      grid-template-columns: repeat(1, 100%);
+    }
+  }
+}

package/src/Tile/TileGrid/TileGrid.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type InformationTileProps } from '../InformationTile'
 import { type MultiActionTileProps } from '../MultiActionTile'
-import styles from './TileGrid.module.scss'
+import styles from './TileGrid.module.css'
 
 type TileProps = InformationTileProps | MultiActionTileProps
 

package/src/Tile/subcomponents/GenericTile/{GenericTile.module.scss → GenericTile.module.css}

@@ -1,45 +1,36 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '../../../../styles/utils/animation';
-@import '../../../../styles/utils/responsive';
-@import './variables';
-
 @layer kz-components {
-  $tilePaddingTop: $spacing-xl;
-
   .root {
     perspective: 800px;
   }
 
   .tile {
     position: relative;
-    width: $tileWidth;
-    height: $tileHeight;
-    transition: transform $ca-duration-slow $ca-default;
+    width: 330px;
+    height: 370px;
+    transition: transform var(--animation-duration-slow, 400ms)
+      var(--animation-easing-function-ease-in-out, cubic-bezier(0.455, 0.03, 0.515, 0.955));
     transform-style: preserve-3d;
-    box-shadow: $shadow-small-box-shadow;
+    box-shadow: var(--shadow-small-box-shadow);
     border-radius: 7px;
-    background-color: $color-white;
+    background-color: var(--color-white);
 
     [data-tile-grid] & {
       width: auto;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       width: 100%;
       min-width: 226px;
-      max-width: $tileHeight;
+      max-width: 370px;
     }
 
-    @media (max-width: 480px) {
+    @media (width <= 480px) {
       max-width: 100%;
     }
   }
 
   .titleMeta {
-    padding-top: $spacing-4;
+    padding-top: var(--spacing-4);
   }
 
   .face {
@@ -62,14 +53,14 @@
 
   .faceFront {
     justify-content: space-between;
-    padding: $tilePaddingTop $spacing-md $spacing-md;
+    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
   }
 
   .faceBack {
     --generic-tile-border-color: var(--color-blue-400);
     --generic-tile-background-color: var(--color-blue-100);
 
-    padding-top: $tilePaddingTop;
+    padding-top: var(--spacing-xl);
     transform: rotateY(180deg);
   }
 
@@ -89,7 +80,7 @@
 
   .title {
     text-align: center;
-    padding-bottom: $spacing-sm;
+    padding-bottom: var(--spacing-sm);
     backface-visibility: hidden;
   }
 
@@ -101,14 +92,14 @@
     inset-block-start: 0;
     inset-inline-end: 0;
     position: absolute;
-    color: rgba($color-purple-800-rgb, 0.5);
+    color: rgb(var(--color-purple-800-rgb), 0.5);
   }
 
   .information {
     display: flex;
-    padding-bottom: $spacing-md;
-    padding-right: $spacing-md;
-    padding-left: $spacing-md;
+    padding-bottom: var(--spacing-md);
+    padding-right: var(--spacing-md);
+    padding-left: var(--spacing-md);
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
@@ -123,7 +114,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: $spacing-sm;
-    height: $spacing-xl;
+    margin-top: var(--spacing-sm);
+    height: var(--spacing-xl);
   }
 }

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -7,7 +7,7 @@ import { Heading, type AllowedHeadingTags } from '~components/Heading'
 import { Icon } from '~components/Icon'
 import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './GenericTile.module.scss'
+import styles from './GenericTile.module.css'
 
 export type TileAction = GenericButtonProps
 

package/dist/cjs/src/Tile/MultiActionTile/MultiActionTile.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var modules_0d682542 = {
-  "actions": "MultiActionTile_module_actions__60f34f5f",
-  "secondaryAction": "MultiActionTile_module_secondaryAction__60f34f5f"
-};
-module.exports = modules_0d682542;

package/dist/cjs/src/Tile/TileGrid/TileGrid.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var modules_9b937ad3 = {
-  "grid": "TileGrid_module_grid__0d070152"
-};
-module.exports = modules_9b937ad3;

package/dist/cjs/src/Tile/subcomponents/GenericTile/GenericTile.module.scss.cjs

@@ -1,19 +0,0 @@
-'use strict';
-
-var modules_fed39cba = {
-  "root": "GenericTile_module_root__de9f2627",
-  "tile": "GenericTile_module_tile__de9f2627",
-  "titleMeta": "GenericTile_module_titleMeta__de9f2627",
-  "face": "GenericTile_module_face__de9f2627",
-  "faceFront": "GenericTile_module_faceFront__de9f2627",
-  "faceBack": "GenericTile_module_faceBack__de9f2627",
-  "default": "GenericTile_module_default__de9f2627",
-  "expert-advice": "GenericTile_module_expertAdvice__de9f2627",
-  "isFlipped": "GenericTile_module_isFlipped__de9f2627",
-  "title": "GenericTile_module_title__de9f2627",
-  "actions": "GenericTile_module_actions__de9f2627",
-  "informationBtn": "GenericTile_module_informationBtn__de9f2627",
-  "information": "GenericTile_module_information__de9f2627",
-  "footer": "GenericTile_module_footer__de9f2627"
-};
-module.exports = modules_fed39cba;

package/dist/esm/src/Tile/MultiActionTile/MultiActionTile.module.scss.mjs

@@ -1,5 +0,0 @@
-var modules_0d682542 = {
-  "actions": "MultiActionTile_module_actions__60f34f5f",
-  "secondaryAction": "MultiActionTile_module_secondaryAction__60f34f5f"
-};
-export { modules_0d682542 as default };

package/dist/esm/src/Tile/TileGrid/TileGrid.module.scss.mjs

@@ -1,4 +0,0 @@
-var modules_9b937ad3 = {
-  "grid": "TileGrid_module_grid__0d070152"
-};
-export { modules_9b937ad3 as default };

package/dist/esm/src/Tile/subcomponents/GenericTile/GenericTile.module.scss.mjs

@@ -1,17 +0,0 @@
-var modules_fed39cba = {
-  "root": "GenericTile_module_root__de9f2627",
-  "tile": "GenericTile_module_tile__de9f2627",
-  "titleMeta": "GenericTile_module_titleMeta__de9f2627",
-  "face": "GenericTile_module_face__de9f2627",
-  "faceFront": "GenericTile_module_faceFront__de9f2627",
-  "faceBack": "GenericTile_module_faceBack__de9f2627",
-  "default": "GenericTile_module_default__de9f2627",
-  "expert-advice": "GenericTile_module_expertAdvice__de9f2627",
-  "isFlipped": "GenericTile_module_isFlipped__de9f2627",
-  "title": "GenericTile_module_title__de9f2627",
-  "actions": "GenericTile_module_actions__de9f2627",
-  "informationBtn": "GenericTile_module_informationBtn__de9f2627",
-  "information": "GenericTile_module_information__de9f2627",
-  "footer": "GenericTile_module_footer__de9f2627"
-};
-export { modules_fed39cba as default };

package/src/Tile/TileGrid/TileGrid.module.scss

@@ -1,28 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '../../../styles/utils/responsive';
-@import '../subcomponents/GenericTile/variables';
-
-@layer kz-components {
-  .grid {
-    list-style-type: none;
-    padding-inline-start: 0;
-    margin-block: 0;
-    display: grid;
-    // the more we shave off the width here,
-    // the less the tiles will grow when they lose one from the row
-    grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
-    gap: $spacing-md;
-
-    @include ca-media-mobile {
-      grid-template-columns: repeat(2, minmax(226px, $tileHeight));
-
-      > * {
-        width: 100%;
-      }
-    }
-
-    @media (max-width: 480px) {
-      grid-template-columns: repeat(1, 100%);
-    }
-  }
-}

package/src/Tile/subcomponents/GenericTile/_variables.scss

@@ -1,2 +0,0 @@
-$tileWidth: 330px;
-$tileHeight: 370px;