@kaizen/components 3.0.10 → 3.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.10",
+  "version": "3.0.12",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -132,29 +132,29 @@
     "@cultureamp/frontend-apis": "13.3.0",
     "@cultureamp/i18n-react-intl": "^4.1.1",
     "@cultureamp/package-bundler": "^4.0.1",
-    "cssnano": "^7.1.4",
+    "cssnano": "^7.1.5",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^11.0.0",
-    "autoprefixer": "^10.4.27",
+    "autoprefixer": "^10.5.0",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.9",
+    "postcss": "^8.5.10",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^11.2.0",
+    "postcss-preset-env": "^11.2.1",
     "postcss-scss": "^4.0.9",
     "query-string": "^9.3.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.1.14",
+    "react-intl": "^10.1.2",
     "rollup": "^4.60.1",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",

package/src/Brand/Brand.tsx

@@ -30,8 +30,8 @@ export type BrandProps = {
 
 const isSVG = (
   variant: VariantSVG['variant'] | VariantPicture['variant'],
-  restProps: SVGProps | PictureProps,
-): restProps is SVGProps => variant === 'collective-intelligence'
+  _restProps: SVGProps | PictureProps,
+): _restProps is SVGProps => variant === 'collective-intelligence'
 
 export const Brand = ({ reversed = false, variant, ...restProps }: BrandProps): JSX.Element => {
   if (isSVG(variant, restProps)) {

package/src/DateInput/DateInput/{DateInput.module.scss → DateInput.module.css}

@@ -1,11 +1,9 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
   .dateInput {
     width: 100%;
   }
 
   .input {
-    margin-top: $spacing-6;
+    margin-top: var(--spacing-6);
   }
 }

package/src/DateInput/DateInput/DateInput.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Input, type InputProps } from '~components/Input'
 import { Label } from '~components/Label'
 import { isRefObject } from '~components/utils/isRefObject'
-import styles from './DateInput.module.scss'
+import styles from './DateInput.module.css'
 
 type OmittedInputProps = 'reversed' | 'type' | 'inputRef'
 

package/src/DateInput/DateInputDescription/{DateInputDescription.module.scss → DateInputDescription.module.css}

@@ -1,12 +1,10 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
   .dateInputDescription {
     display: inline;
   }
 
   .dateInputFormatContainer {
-    margin-inline-start: $spacing-xs;
+    margin-inline-start: var(--spacing-xs);
     white-space: nowrap;
   }
 
@@ -16,6 +14,6 @@
   }
 
   .labelSeparator {
-    margin-inline-end: $spacing-xs;
+    margin-inline-end: var(--spacing-xs);
   }
 }

package/src/DateInput/DateInputDescription/DateInputDescription.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import type { Locale } from 'date-fns'
 import { LabelledMessage } from '~components/LabelledMessage'
 import { formatDescriptionInputFormat } from './utils/formatDescriptionInputFormat'
-import styles from './DateInputDescription.module.scss'
+import styles from './DateInputDescription.module.css'
 
 export type DateInputDescriptionProps = {
   description?: string | JSX.Element

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.css

@@ -0,0 +1,43 @@
+@layer kz-components {
+  :root {
+    --input-disabled-opacity: 0.3;
+  }
+
+  .iconButton {
+    /* Button reset: repace @include button-reset */
+    appearance: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+
+    /* Styles */
+    display: flex;
+    padding: var(--spacing-6);
+    border: var(--border-solid-border-width) var(--border-solid-border-style) transparent;
+    border-radius: var(--border-solid-border-radius);
+    position: relative;
+    inset-inline-end: -0.35rem;
+    top: -40%;
+
+    &:focus-visible {
+      outline-offset: -2px;
+      outline: var(--color-blue-500) var(--border-focus-ring-border-style)
+        var(--border-focus-ring-border-width);
+    }
+
+    &:hover:not([disabled]) {
+      background-color: var(--color-blue-100);
+      color: var(--color-blue-500);
+    }
+  }
+
+  .calendarActive {
+    color: var(--color-blue-500);
+    background-color: var(--color-blue-100);
+  }
+
+  .disabled {
+    opacity: var(--input-disabled-opacity);
+  }
+}

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Icon } from '~components/Icon'
 import { isRefObject } from '~components/utils/isRefObject'
 import { DateInput, type DateInputProps } from '../DateInput'
-import styles from './DateInputWithIconButton.module.scss'
+import styles from './DateInputWithIconButton.module.css'
 
 export type DateInputWithIconButtonProps = {
   /**

package/src/DatePicker/DatePicker.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .datePicker {
+    color: var(--color-purple-800);
+  }
+
+  .isReversed {
+    color: var(--color-yellow-600);
+  }
+}

package/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -185,39 +185,39 @@ export const Validation: Story = {
           <Text variant="body">
             NOTE: This story includes additional custom validation to provide some guidance when
             dealing with validation other than date isInvalid or isDisabled.
-          </Text>
-          <ul>
-            <li>
-              There will be a caution when the selectedDay <strong>is valid</strong> but{' '}
-              <strong>is not within this year</strong>.
-            </li>
-            <li>
-              There will be an error when the <strong>submit button is clicked</strong> and there is
-              a <strong>current error</strong> within the DatePicker.
-            </li>
-          </ul>
-          <Text variant="body">
+            <ul>
+              <li>
+                There will be a caution when the selectedDay <strong>is valid</strong> but{' '}
+                <strong>is not within this year</strong>.
+              </li>
+              <li>
+                There will be an error when the <strong>submit button is clicked</strong> and there
+                is a <strong>current error</strong> within the DatePicker.
+              </li>
+            </ul>
             The <code>onValidate</code> callback returns a <code>validationResponse</code> object
             which provides data such as a default validation message, and can be utilised for custom
             validation.
           </Text>
           <Highlight className="json">{JSON.stringify(response, null, 4)}</Highlight>
-          <ul>
-            <li>
-              <code>isInvalid</code>: A date that cannot be parsed. e.g &quot;potato&quot;.
-            </li>
-            <li>
-              <code>isDisabled</code>: A date that have been set as disabled through the{' '}
-              <code>disabledDates</code> prop.
-            </li>
-            <li>
-              <code>isEmpty</code>: Input is empty.
-            </li>
-            <li>
-              <code>isValidDate</code>: Date input that is not <code>invalid</code> nor{' '}
-              <code>disabled</code> nor <code>empty</code>.
-            </li>
-          </ul>
+          <Text variant="body">
+            <ul>
+              <li>
+                <code>isInvalid</code>: A date that cannot be parsed. e.g &quot;potato&quot;.
+              </li>
+              <li>
+                <code>isDisabled</code>: A date that have been set as disabled through the{' '}
+                <code>disabledDates</code> prop.
+              </li>
+              <li>
+                <code>isEmpty</code>: Input is empty.
+              </li>
+              <li>
+                <code>isValidDate</code>: Date input that is not <code>invalid</code> nor{' '}
+                <code>disabled</code> nor <code>empty</code>.
+              </li>
+            </ul>
+          </Text>
         </div>
       </>
     )

package/src/DatePicker/subcomponents/DateInputField/DateInputField.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  :root {
+    --input-disabled-opacity: 0.3;
+  }
+
+  .disabled {
+    opacity: var(--input-disabled-opacity);
+  }
+}

package/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx

@@ -10,7 +10,7 @@ import {
   type DateInputWithIconButtonRefs,
 } from '~components/DateInput'
 import { FieldMessage, type FieldMessageStatus } from '~components/FieldMessage'
-import styles from './DateInputField.module.scss'
+import styles from './DateInputField.module.css'
 
 export type DateInputFieldProps = {
   /**

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/DateInput/DateInput/DateInput.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var modules_0755dfa8 = {
-  "dateInput": "DateInput_module_dateInput__ddfc3633",
-  "input": "DateInput_module_input__ddfc3633"
-};
-module.exports = modules_0755dfa8;

package/dist/cjs/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-var modules_d90a2c0e = {
-  "iconButton": "DateInputWithIconButton_module_iconButton__dffd0a18",
-  "calendarActive": "DateInputWithIconButton_module_calendarActive__dffd0a18",
-  "disabled": "DateInputWithIconButton_module_disabled__dffd0a18"
-};
-module.exports = modules_d90a2c0e;

package/dist/cjs/src/DatePicker/subcomponents/DateInputField/DateInputField.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var modules_99160b40 = {
-  "disabled": "DateInputField_module_disabled__e4d317ee"
-};
-module.exports = modules_99160b40;

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/DateInput/DateInput/DateInput.module.scss.mjs

@@ -1,5 +0,0 @@
-var modules_0755dfa8 = {
-  "dateInput": "DateInput_module_dateInput__ddfc3633",
-  "input": "DateInput_module_input__ddfc3633"
-};
-export { modules_0755dfa8 as default };

package/dist/esm/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss.mjs

@@ -1,6 +0,0 @@
-var modules_d90a2c0e = {
-  "iconButton": "DateInputWithIconButton_module_iconButton__dffd0a18",
-  "calendarActive": "DateInputWithIconButton_module_calendarActive__dffd0a18",
-  "disabled": "DateInputWithIconButton_module_disabled__dffd0a18"
-};
-export { modules_d90a2c0e as default };

package/dist/esm/src/DatePicker/subcomponents/DateInputField/DateInputField.module.scss.mjs

@@ -1,4 +0,0 @@
-var modules_99160b40 = {
-  "disabled": "DateInputField_module_disabled__e4d317ee"
-};
-export { modules_99160b40 as default };

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/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss

@@ -1,44 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/border';
-@import '../../../styles/utils/animation';
-@import '../../../styles/utils/button-reset';
-
-@layer kz-components {
-  $input-disabled-opacity: 0.3;
-
-  .iconButton {
-    @include button-reset;
-
-    display: flex;
-    padding: var(--spacing-6);
-    border: $border-solid-border-width $border-solid-border-style transparent;
-    border-radius: $border-solid-border-radius;
-    position: relative;
-    inset-inline-end: -0.35rem;
-    top: -40%;
-
-    :focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline-offset: -2px;
-      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-    }
-
-    &:hover:not([disabled]) {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
-  }
-
-  .calendarActive {
-    color: $color-blue-500;
-    background-color: $color-blue-100;
-  }
-
-  .disabled {
-    opacity: $input-disabled-opacity;
-  }
-}

package/src/DatePicker/DatePicker.module.scss

@@ -1,11 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-
-@layer kz-components {
-  .datePicker {
-    color: $color-purple-800;
-  }
-
-  .isReversed {
-    color: $color-yellow-600;
-  }
-}

package/src/DatePicker/subcomponents/DateInputField/DateInputField.module.scss

@@ -1,7 +0,0 @@
-@layer kz-components {
-  $input-disabled-opacity: 0.3;
-
-  .disabled {
-    opacity: $input-disabled-opacity;
-  }
-}