@kaizen/components 3.0.11 → 3.0.12

package/dist/cjs/src/SingleSelect/subcomponents/Option/Option.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var listbox = require('@react-aria/listbox');
 var classnames = require('classnames');
 var reactAria = require('react-aria');
 var Icon = require('../../../Icon/Icon.cjs');
@@ -20,7 +21,7 @@ var Option = function (_a) {
     props = tslib.__rest(_a, ["item", "classNameOverride"]);
   var state = SelectContext.useSelectContext().state;
   var ref = React__default.default.useRef(null);
-  var _b = reactAria.useOption({
+  var _b = listbox.useOption({
       key: item.key
     }, state, ref),
     optionProps = _b.optionProps,

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

@@ -5,7 +5,7 @@ var React = require('react');
 var Button = require('../../ButtonV1/Button/Button.cjs');
 require('../../ButtonV1/IconButton/IconButton.cjs');
 var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
-var MultiActionTile_module = require('./MultiActionTile.module.scss.cjs');
+var MultiActionTile_module = require('./MultiActionTile.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -0,0 +1,7 @@
+'use strict';
+
+var modules_435527c5 = {
+  "actions": "MultiActionTile_module_actions__7f3718a6",
+  "secondaryAction": "MultiActionTile_module_secondaryAction__7f3718a6"
+};
+module.exports = modules_435527c5;

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

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var TileGrid_module = require('./TileGrid.module.scss.cjs');
+var TileGrid_module = require('./TileGrid.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

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

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

@@ -9,7 +9,7 @@ var IconButton = require('../../../ButtonV1/IconButton/IconButton.cjs');
 var Heading = require('../../../Heading/Heading.cjs');
 var Icon = require('../../../Icon/Icon.cjs');
 var Text = require('../../../Text/Text.cjs');
-var GenericTile_module = require('./GenericTile.module.scss.cjs');
+var GenericTile_module = require('./GenericTile.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var modules_6900a44e = {
+  "root": "GenericTile_module_root__8e7442cc",
+  "tile": "GenericTile_module_tile__8e7442cc",
+  "titleMeta": "GenericTile_module_titleMeta__8e7442cc",
+  "face": "GenericTile_module_face__8e7442cc",
+  "faceFront": "GenericTile_module_faceFront__8e7442cc",
+  "faceBack": "GenericTile_module_faceBack__8e7442cc",
+  "default": "GenericTile_module_default__8e7442cc",
+  "expert-advice": "GenericTile_module_expertAdvice__8e7442cc",
+  "isFlipped": "GenericTile_module_isFlipped__8e7442cc",
+  "title": "GenericTile_module_title__8e7442cc",
+  "actions": "GenericTile_module_actions__8e7442cc",
+  "informationBtn": "GenericTile_module_informationBtn__8e7442cc",
+  "information": "GenericTile_module_information__8e7442cc",
+  "footer": "GenericTile_module_footer__8e7442cc"
+};
+module.exports = modules_6900a44e;

package/dist/esm/src/SingleSelect/subcomponents/Option/Option.mjs

@@ -1,7 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
+import { useOption } from '@react-aria/listbox';
 import classnames from 'classnames';
-import { useOption, useFocusRing, mergeProps } from 'react-aria';
+import { useFocusRing, mergeProps } from 'react-aria';
 import { Icon } from '../../../Icon/Icon.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
 import modules_84f224dd from './Option.module.scss.mjs';

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

@@ -3,12 +3,12 @@ import React from 'react';
 import { Button } from '../../ButtonV1/Button/Button.mjs';
 import '../../ButtonV1/IconButton/IconButton.mjs';
 import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
-import modules_0d682542 from './MultiActionTile.module.scss.mjs';
+import modules_435527c5 from './MultiActionTile.module.css.mjs';
 var renderActions = function (primaryAction, secondaryAction) {
   return /*#__PURE__*/React.createElement("div", {
-    className: modules_0d682542.actions
+    className: modules_435527c5.actions
   }, secondaryAction && (/*#__PURE__*/React.createElement("div", {
-    className: modules_0d682542.secondaryAction
+    className: modules_435527c5.secondaryAction
   }, /*#__PURE__*/React.createElement(Button, __assign({
     secondary: true
   }, secondaryAction)))), /*#__PURE__*/React.createElement(Button, __assign({}, primaryAction)));

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

@@ -0,0 +1,5 @@
+var modules_435527c5 = {
+  "actions": "MultiActionTile_module_actions__7f3718a6",
+  "secondaryAction": "MultiActionTile_module_secondaryAction__7f3718a6"
+};
+export { modules_435527c5 as default };

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

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import modules_9b937ad3 from './TileGrid.module.scss.mjs';
+import modules_02352db2 from './TileGrid.module.css.mjs';
 
 /**
  * @deprecated TileGrid is deprecated in v3 and will be removed in v4.
@@ -17,7 +17,7 @@ const TileGrid = /*#__PURE__*/function () {
       restProps = __rest(_a, ["children", "classNameOverride"]);
     var isFragment = !Array.isArray(children) && children.type === React.Fragment;
     return /*#__PURE__*/React.createElement("ul", __assign({
-      className: classnames(modules_9b937ad3.grid, classNameOverride),
+      className: classnames(modules_02352db2.grid, classNameOverride),
       "data-tile-grid": true
     }, restProps), isFragment ? ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.children) ? (/*#__PURE__*/React.createElement(TileListItem, {
       tiles: children.props.children

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

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

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

@@ -7,7 +7,7 @@ import { IconButton } from '../../../ButtonV1/IconButton/IconButton.mjs';
 import { Heading } from '../../../Heading/Heading.mjs';
 import { Icon } from '../../../Icon/Icon.mjs';
 import { Text } from '../../../Text/Text.mjs';
-import modules_fed39cba from './GenericTile.module.scss.mjs';
+import modules_6900a44e from './GenericTile.module.css.mjs';
 const GenericTile = /*#__PURE__*/function () {
   const GenericTile = function (_a) {
     var children = _a.children,
@@ -39,12 +39,12 @@ const GenericTile = /*#__PURE__*/function () {
     });
     var renderTitle = function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.title
+        className: modules_6900a44e.title
       }, /*#__PURE__*/React.createElement(Heading, {
         variant: "heading-3",
         tag: titleTag
       }, title), metadata && (/*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.titleMeta
+        className: modules_6900a44e.titleMeta
       }, /*#__PURE__*/React.createElement(Text, {
         variant: "small",
         color: "dark-reduced-opacity"
@@ -52,9 +52,9 @@ const GenericTile = /*#__PURE__*/function () {
     };
     var renderFront = function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(modules_fed39cba.face, modules_fed39cba.faceFront, modules_fed39cba[variant])
+        className: classnames(modules_6900a44e.face, modules_6900a44e.faceFront, modules_6900a44e[variant])
       }, information && (/*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.informationBtn
+        className: modules_6900a44e.informationBtn
       }, /*#__PURE__*/React.createElement(IconButton, {
         label: infoButtonLabel !== null && infoButtonLabel !== void 0 ? infoButtonLabel : "".concat(translatedInfoLabel, " ").concat(title),
         icon: /*#__PURE__*/React.createElement(Icon, {
@@ -69,9 +69,9 @@ const GenericTile = /*#__PURE__*/function () {
         "aria-hidden": isFlipped,
         ref: infoButtonRef
       }))), renderTitle(), /*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.children
+        className: modules_6900a44e.children
       }, children && children), footer && /*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.footer
+        className: modules_6900a44e.footer
       }, footer));
     };
     var renderInformation = function (informationProp) {
@@ -80,9 +80,9 @@ const GenericTile = /*#__PURE__*/function () {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
           variant: "body"
         }, informationProp.text), ((_a = informationProp.primaryAction) !== null && _a !== void 0 ? _a : informationProp.secondaryAction) && (/*#__PURE__*/React.createElement("div", {
-          className: modules_fed39cba.footer
+          className: modules_6900a44e.footer
         }, /*#__PURE__*/React.createElement("div", {
-          className: modules_fed39cba.actions
+          className: modules_6900a44e.actions
         }, informationProp.secondaryAction && (/*#__PURE__*/React.createElement(Button, __assign({
           secondary: true,
           disabled: !isFlipped
@@ -100,9 +100,9 @@ const GenericTile = /*#__PURE__*/function () {
         description: 'Prompts user to interact with button to hide information'
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(modules_fed39cba.face, modules_fed39cba.faceBack)
+        className: classnames(modules_6900a44e.face, modules_6900a44e.faceBack)
       }, /*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.informationBtn
+        className: modules_6900a44e.informationBtn
       }, /*#__PURE__*/React.createElement(IconButton, {
         label: "".concat(returnButtonLabel, " ").concat(title),
         icon: /*#__PURE__*/React.createElement(Icon, {
@@ -116,13 +116,13 @@ const GenericTile = /*#__PURE__*/function () {
         "aria-hidden": !isFlipped,
         ref: infoButtonReturnRef
       })), /*#__PURE__*/React.createElement("div", {
-        className: modules_fed39cba.information
+        className: modules_6900a44e.information
       }, renderInformation(information)));
     };
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(modules_fed39cba.root, classNameOverride)
+      className: classnames(modules_6900a44e.root, classNameOverride)
     }, restProps), /*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_fed39cba.tile, isFlipped && modules_fed39cba.isFlipped)
+      className: classnames(modules_6900a44e.tile, isFlipped && modules_6900a44e.isFlipped)
     }, isFlipped ? renderBack() : renderFront()));
   };
   GenericTile.displayName = 'GenericTile';

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

@@ -0,0 +1,17 @@
+var modules_6900a44e = {
+  "root": "GenericTile_module_root__8e7442cc",
+  "tile": "GenericTile_module_tile__8e7442cc",
+  "titleMeta": "GenericTile_module_titleMeta__8e7442cc",
+  "face": "GenericTile_module_face__8e7442cc",
+  "faceFront": "GenericTile_module_faceFront__8e7442cc",
+  "faceBack": "GenericTile_module_faceBack__8e7442cc",
+  "default": "GenericTile_module_default__8e7442cc",
+  "expert-advice": "GenericTile_module_expertAdvice__8e7442cc",
+  "isFlipped": "GenericTile_module_isFlipped__8e7442cc",
+  "title": "GenericTile_module_title__8e7442cc",
+  "actions": "GenericTile_module_actions__8e7442cc",
+  "informationBtn": "GenericTile_module_informationBtn__8e7442cc",
+  "information": "GenericTile_module_information__8e7442cc",
+  "footer": "GenericTile_module_footer__8e7442cc"
+};
+export { modules_6900a44e as default };

package/dist/styles.css

@@ -151,9 +151,9 @@
 @layer kz-components{.TabPanel_module_tabPanel__931e68c3{border:2px solid transparent;&:focus{outline:none}&:focus-visible{border-color:var(--color-blue-500);border-radius:var(--border-focus-ring-border-radius)}}}
 @layer kz-components{.TextArea_module_wrapper__be744297{font-family:var(--typography-paragraph-body-font-family);font-size:var(--typography-paragraph-body-font-size);font-weight:var(--typography-paragraph-body-font-weight);line-height:var(--typography-paragraph-body-line-height);letter-spacing:var(--typography-paragraph-body-letter-spacing);color:var(--color-purple-800-rgb)}.TextArea_module_wrapperAutogrow__be744297{display:grid}.TextArea_module_wrapperAutogrow__be744297:after{content:attr(data-value) " ";white-space:pre-wrap;visibility:hidden}.TextArea_module_textarea__be744297,.TextArea_module_wrapperAutogrow__be744297:after{border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);border-radius:var(--border-solid-border-radius);padding:var(--spacing-sm);box-sizing:border-box;width:100%;font:inherit}.TextArea_module_textareaAutogrow__be744297,.TextArea_module_wrapperAutogrow__be744297:after{grid-area:2/1}.TextArea_module_textarea__be744297{display:block;border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);border-radius:var(--border-solid-border-radius);padding:var(--spacing-sm);resize:vertical;&:focus{outline:var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);outline-offset:1px}&:disabled{border-color:rgb(var(--color-gray-500-rgb),.3);resize:none}}.TextArea_module_textareaAutogrow__be744297{overflow:hidden}.TextArea_module_default__be744297{&:not(.TextArea_module_error__be744297,.TextArea_module_caution__be744297){&:disabled{border-color:rgb(var(--color-gray-500-rgb),.3)}}&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){background-color:var(--color-gray-200);border-color:var(--color-gray-600)}&.TextArea_module_error__be744297{border-color:var(--color-red-500);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-red-500)}}&.TextArea_module_caution__be744297{border-color:var(--color-yellow-600);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-yellow-600)}}&.TextArea_module_disabled__be744297{background-color:var(--color-white);border-color:rgb(var(--color-gray-500-rgb),.3);color:rgb(var(--color-purple-800-rgb),.3)}}.TextArea_module_reversed__be744297{border-color:rgb(var(--color-white-rgb),.65);background:transparent;color:var(--color-white);&:focus{outline-color:var(--color-blue-300)}&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){background:rgb(var(--color-white-rgb),.1);border-color:var(--color-white)}&.TextArea_module_error__be744297{border-color:var(--color-red-300);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-red-300)}}&.TextArea_module_caution__be744297{border-color:var(--color-yellow-400);&:focus:not([disabled]),&:hover:focus:not([disabled]),&:hover:not([disabled]){border-color:var(--color-yellow-400)}}&.TextArea_module_disabled__be744297{background:transparent;border-color:rgb(var(--color-white-rgb),.3);color:rgb(var(--color-white-rgb),.3)}}}
 @layer kz-components{.TextAreaField_module_message__095b2956.TextAreaField_module_disabled__095b2956{opacity:.3}.TextAreaField_module_textareaLabel__095b2956{margin-bottom:var(--spacing-xs,.375rem)}.TextAreaField_module_textareaLabelProminent__095b2956{margin-bottom:0}}
-@layer kz-components{.GenericTile_module_root__de9f2627{perspective:800px}.GenericTile_module_tile__de9f2627{position:relative;width:330px;height:370px;transition:transform var(--animation-duration-slow,.4s) var(--animation-easing-function-ease-in-out,cubic-bezier(.455,.03,.515,.955));transform-style:preserve-3d;box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));border-radius:7px;background-color:var(--color-white,#fff)}[data-tile-grid] .GenericTile_module_tile__de9f2627{width:auto}@media (max-width:767px){.GenericTile_module_tile__de9f2627{width:100%;min-width:226px;max-width:370px}}@media (max-width:480px){.GenericTile_module_tile__de9f2627{max-width:100%}}.GenericTile_module_titleMeta__de9f2627{padding-top:var(--spacing-4,.25rem)}.GenericTile_module_face__de9f2627{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;backface-visibility:hidden;border:var(--border-width-1) solid var(--generic-tile-border-color);border-radius:var(--border-solid-border-radius);background-color:var(--generic-tile-background-color)}.GenericTile_module_face__de9f2627 *{backface-visibility:hidden}.GenericTile_module_faceFront__de9f2627{justify-content:space-between;padding:var(--spacing-xl,3rem) var(--spacing-md,1.5rem) var(--spacing-md,1.5rem)}.GenericTile_module_faceBack__de9f2627{--generic-tile-border-color:var(--color-blue-400);--generic-tile-background-color:var(--color-blue-100);padding-top:var(--spacing-xl,3rem);transform:rotateY(180deg)}.GenericTile_module_default__de9f2627{--generic-tile-border-color:var(--color-gray-500);--generic-tile-background-color:var(--color-white)}.GenericTile_module_expertAdvice__de9f2627{--generic-tile-border-color:var(--color-purple-400);--generic-tile-background-color:var(--color-purple-100)}.GenericTile_module_isFlipped__de9f2627{transform:rotateY(179deg)}.GenericTile_module_title__de9f2627{text-align:center;padding-bottom:var(--spacing-sm,.75rem);backface-visibility:hidden}.GenericTile_module_actions__de9f2627{display:flex}.GenericTile_module_informationBtn__de9f2627{inset-block-start:0;inset-inline-end:0;position:absolute;color:rgba(var(--color-purple-800-rgb,47,36,56),.5)}.GenericTile_module_information__de9f2627{display:flex;padding-bottom:var(--spacing-md,1.5rem);padding-right:var(--spacing-md,1.5rem);padding-left:var(--spacing-md,1.5rem);flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;height:100%;text-align:left;border-radius:0 0 7px 7px}.GenericTile_module_footer__de9f2627{display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-sm,.75rem);height:var(--spacing-xl,3rem)}}
-@layer kz-components{.MultiActionTile_module_actions__60f34f5f{display:flex}.MultiActionTile_module_secondaryAction__60f34f5f{margin-inline-end:var(--spacing-8,.5rem)}}
-@layer kz-components{.TileGrid_module_grid__0d070152{list-style-type:none;padding-inline-start:0;margin-block:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--spacing-md,1.5rem)}@media (max-width:767px){.TileGrid_module_grid__0d070152{grid-template-columns:repeat(2,minmax(226px,370px))}.TileGrid_module_grid__0d070152>*{width:100%}}@media (max-width:480px){.TileGrid_module_grid__0d070152{grid-template-columns:repeat(1,100%)}}}
+@layer kz-components{.GenericTile_module_root__8e7442cc{perspective:800px}.GenericTile_module_tile__8e7442cc{position:relative;width:330px;height:370px;transition:transform var(--animation-duration-slow,.4s) var(--animation-easing-function-ease-in-out,cubic-bezier(.455,.03,.515,.955));transform-style:preserve-3d;box-shadow:var(--shadow-small-box-shadow);border-radius:7px;background-color:var(--color-white);[data-tile-grid] &{width:auto}@media (width <= 767px){width:100%;min-width:226px;max-width:370px}@media (width <= 480px){max-width:100%}}.GenericTile_module_titleMeta__8e7442cc{padding-top:var(--spacing-4)}.GenericTile_module_face__8e7442cc{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;backface-visibility:hidden;border:var(--border-width-1) solid var(--generic-tile-border-color);border-radius:var(--border-solid-border-radius);background-color:var(--generic-tile-background-color);*{backface-visibility:hidden}}.GenericTile_module_faceFront__8e7442cc{justify-content:space-between;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-md)}.GenericTile_module_faceBack__8e7442cc{--generic-tile-border-color:var(--color-blue-400);--generic-tile-background-color:var(--color-blue-100);padding-top:var(--spacing-xl);transform:rotateY(180deg)}.GenericTile_module_default__8e7442cc{--generic-tile-border-color:var(--color-gray-500);--generic-tile-background-color:var(--color-white)}.GenericTile_module_expertAdvice__8e7442cc{--generic-tile-border-color:var(--color-purple-400);--generic-tile-background-color:var(--color-purple-100)}.GenericTile_module_isFlipped__8e7442cc{transform:rotateY(179deg)}.GenericTile_module_title__8e7442cc{text-align:center;padding-bottom:var(--spacing-sm);backface-visibility:hidden}.GenericTile_module_actions__8e7442cc{display:flex}.GenericTile_module_informationBtn__8e7442cc{inset-block-start:0;inset-inline-end:0;position:absolute;color:rgb(var(--color-purple-800-rgb),.5)}.GenericTile_module_information__8e7442cc{display:flex;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;box-sizing:border-box;width:100%;height:100%;text-align:left;border-radius:0 0 7px 7px}.GenericTile_module_footer__8e7442cc{display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-sm);height:var(--spacing-xl)}}
+@layer kz-components{.MultiActionTile_module_actions__7f3718a6{display:flex}.MultiActionTile_module_secondaryAction__7f3718a6{margin-inline-end:var(--spacing-8)}}
+@layer kz-components{.TileGrid_module_grid__7011d934{--tile-width:330px;--tile-height:370px;list-style-type:none;padding-inline-start:0;margin-block:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile-width) - 40px),1fr));gap:var(--spacing-md);@media (width <= 767px){grid-template-columns:repeat(2,minmax(226px,var(--tile-height)));>*{width:100%}}@media (width <= 480px){grid-template-columns:repeat(1,100%)}}}
 @layer kz-components{.TimeSegment_module_timeSegmentWrapper__812aaa15{white-space:nowrap}.TimeSegment_module_timeSegment__812aaa15{display:block;text-align:end;background-color:var(--color-gray-300);border-radius:3px;color:var(--color-purple-800);&:hover{background-color:var(--color-white)}&:focus-visible{color:var(--color-white);background:var(--color-blue-500);outline:none}}.TimeSegment_module_hasPadding__812aaa15{padding:0 4px}.TimeSegment_module_placeholder__812aaa15{color:rgb(var(--color-purple-800-rgb),.7)}.TimeSegment_module_literal__812aaa15{background:none;&:hover{background:none}}.TimeSegment_module_dayPeriod__812aaa15{margin-right:4px}}
 @layer kz-components{:root{--input-height:48px}.TimeField_module_wrapper__8614def1{position:relative;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--typography-paragraph-body-font-family);font-weight:var(--typography-paragraph-body-font-weight);font-size:var(--typography-paragraph-body-font-size);line-height:var(--typography-paragraph-body-line-height);letter-spacing:var(--typography-paragraph-body-letter-spacing);color:var(--color-purple-800)}.TimeField_module_label__8614def1.TimeField_module_label__8614def1{display:block;margin-bottom:var(--spacing-6)}.TimeField_module_input__8614def1{display:inline-flex;align-items:center;background-color:var(--color-white);background-clip:padding-box;border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);border-radius:var(--border-solid-border-radius);font-size:var(--typography-paragraph-body-font-size);line-height:var(--typography-paragraph-body-line-height);padding:0 var(--spacing-sm);height:var(--input-height);width:100%;box-sizing:border-box;&:focus-within,&:hover{border-color:var(--color-gray-600);background-color:var(--color-gray-200)}}.TimeField_module_input__8614def1:focus-within .TimeField_module_focusRing__8614def1{--focus-ring-offset:3px;position:absolute;background:transparent;border-radius:var(--border-focus-ring-border-radius);border-width:var(--border-focus-ring-border-width);border-style:var(--border-focus-ring-border-style);border-color:var(--color-blue-500);inset:calc(var(--focus-ring-offset)*-1);pointer-events:none}.TimeField_module_isDisabled__8614def1{pointer-events:none;background-color:transparent;border-color:var(--color-gray-500);opacity:.3}.TimeField_module_error__8614def1{border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-red-500)}}
 @layer kz-components{.TitleBlockMenuItem_module_menuListItem__53835be1{display:flex}.TitleBlockMenuItem_module_menuItem__53835be1{display:flex;align-items:center;flex:1 1 auto;box-sizing:border-box;background:none;border:2px solid transparent;text-align:start;padding:6px calc(var(--spacing-sm, .75rem) - 2px);margin:0 var(--spacing-xs,.375rem);min-height:calc(var(--spacing-md, 1.5rem)*1.75);border-radius:4px;font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-body-font-weight,400);font-size:var(--typography-paragraph-body-font-size,1rem);line-height:var(--typography-paragraph-body-line-height,1.5rem);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);text-decoration:none;color:var(--color-purple-800,#2f2438)}.TitleBlockMenuItem_module_menuItem__53835be1:hover{text-decoration:none}.TitleBlockMenuItem_module_menuItem__53835be1:focus,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover{background:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem_module_menuItem__53835be1:focus .TitleBlockMenuItem_module_menuItem__Icon__53835be1,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem_module_menuItem__53835be1:focus.TitleBlockMenuItem_module_menuItem_Destructive__53835be1,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover.TitleBlockMenuItem_module_menuItem_Destructive__53835be1{background:var(--color-red-100,#fdeaee);color:var(--color-red-600,#a82433)}.TitleBlockMenuItem_module_menuItem__53835be1:focus.TitleBlockMenuItem_module_menuItem_Destructive__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover.TitleBlockMenuItem_module_menuItem_Destructive__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:var(--color-red-600,#a82433)}.TitleBlockMenuItem_module_menuItem__53835be1:focus{outline:none}.TitleBlockMenuItem_module_menuItem__53835be1:focus-visible{border-color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem_module_menuItem_Disabled__53835be1,.TitleBlockMenuItem_module_menuItem_Disabled__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:rgba(var(--color-purple-800-rgb,47,36,56),.3)}.TitleBlockMenuItem_module_menuItem_Active__53835be1{color:var(--color-blue-500,#0168b3);font-weight:var(--typography-paragraph-bold-font-weight,600)}.TitleBlockMenuItem_module_menuItem_Destructive__53835be1,.TitleBlockMenuItem_module_menuItem_Destructive__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:var(--color-red-600,#a82433)}.TitleBlockMenuItem_module_menuItem_Destructive__53835be1.TitleBlockMenuItem_module_menuItem_Disabled__53835be1,.TitleBlockMenuItem_module_menuItem_Destructive__53835be1.TitleBlockMenuItem_module_menuItem_Disabled__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:rgba(var(--color-red-600-rgb,168,36,51),.3)}.TitleBlockMenuItem_module_menuItem__Label__53835be1{flex-grow:1}.TitleBlockMenuItem_module_menuItem__Icon__53835be1{margin-inline-end:calc(var(--spacing-md, 1.5rem)/3);display:flex;align-self:flex-start;transform:translateY(.2em);color:rgba(var(--color-purple-800-rgb,47,36,56),.75)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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;