@kaizen/components 3.0.2 → 3.0.3

package/dist/cjs/src/ClearButton/ClearButton.cjs

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

package/dist/cjs/src/ClearButton/ClearButton.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "clearButton": "ClearButton-module_clearButton__qOM0I",
+  "default": "ClearButton-module_default__0y2mv",
+  "reversed": "ClearButton-module_reversed__AfUH1"
+};
+module.exports = styles;

package/dist/esm/src/ClearButton/ClearButton.mjs

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { Icon } from '../Icon/Icon.mjs';
-import styles from './ClearButton.module.scss.mjs';
+import styles from './ClearButton.module.css.mjs';
 const ClearButton = /*#__PURE__*/function () {
   const ClearButton = function (_a) {
     var classNameOverride = _a.classNameOverride,

package/dist/esm/src/ClearButton/ClearButton.module.css.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "clearButton": "ClearButton-module_clearButton__qOM0I",
+  "default": "ClearButton-module_default__0y2mv",
+  "reversed": "ClearButton-module_reversed__AfUH1"
+};
+export { styles as default };

package/dist/styles.css

@@ -2575,12 +2575,10 @@
     margin-bottom: 0;
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .ClearButton-module_clearButton__CSOIc {
+  .ClearButton-module_clearButton__qOM0I {
+    /* Button reset */
     appearance: none;
-    display: inline;
     background: transparent;
     color: inherit;
     font: inherit;
@@ -2590,30 +2588,41 @@
     position: relative;
     display: inline-flex;
     border-radius: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -1px;
+    }
   }
-  .ClearButton-module_clearButton__CSOIc:hover {
-    cursor: pointer;
-  }
-  .ClearButton-module_clearButton__CSOIc:focus-visible {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
-    outline-offset: -1px;
-  }
-  .ClearButton-module_default__lBJxw {
-    color: var(--color-gray-500, #878792);
-  }
-  .ClearButton-module_default__lBJxw:hover, .ClearButton-module_default__lBJxw:focus-visible {
-    color: var(--color-purple-800, #2f2438);
-  }
-  .ClearButton-module_reversed__0I2DC {
-    color: rgba(var(--color-white-rgb, 255, 255, 255), 0.8);
-  }
-  .ClearButton-module_reversed__0I2DC:hover, .ClearButton-module_reversed__0I2DC:focus-visible {
-    color: var(--color-white, #ffffff);
+
+  .ClearButton-module_default__0y2mv {
+    color: var(--color-gray-500);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-purple-800);
+    }
   }
-  .ClearButton-module_reversed__0I2DC:focus-visible {
-    outline-color: var(--color-blue-300);
+
+  .ClearButton-module_reversed__AfUH1 {
+    color: rgb(var(--color-white-rgb), 0.8);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-white);
+    }
+
+    &:focus-visible {
+      outline-color: var(--color-blue-300);
+    }
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/

package/locales/kk-KZ.json

@@ -0,0 +1,259 @@
+{
+  "smartling" : {
+    "string_format" : "icu",
+    "translate_paths" : [
+    {
+      "instruction" : "*/description",
+      "key" : "{*}/message",
+      "path" : "*/message"
+    }],
+    "variants_enabled" : true
+  },
+  "date.validation.invalidDate" : {
+    "description" : "Error message when the user enters an invalid date and we do not know their input value",
+    "message" : "Date is invalid"
+  },
+  "date.validation.invalidDateWithValue" : {
+    "description" : "Error message when the user enters an invalid date and we know their input value",
+    "message" : "{inputValue} is an invalid date"
+  },
+  "date.validation.rangeEndBeforeRangeStart" : {
+    "description" : "Error message when the user tries to select an end date earlier than the start date",
+    "message" : "Cannot be earlier than the selection in \"{startDateFieldLabel}\""
+  },
+  "date.validation.unavailableDate" : {
+    "description" : "Error message when the user tries to select a date that is unavailable",
+    "message" : "{inputValue} is not available, try another date"
+  },
+  "dateInputDescription.inputFormat" : {
+    "description" : "Label for the 'Input format' field",
+    "message" : "Input format"
+  },
+  "datePicker.calendarLabelDescription" : {
+    "description" : "Label for the search input",
+    "message" : "Select date from calendar for:"
+  },
+  "filterBar.addFiltersMenu.buttonLabel" : {
+    "description" : "Menu button label to show additional available filter options",
+    "message" : "Add filters"
+  },
+  "filterBar.clearAllButton.ariaLabel" : {
+    "description" : "Button aria-label to clear all values within the filter bar",
+    "message" : "Clear all filters"
+  },
+  "filterBar.clearAllButton.label" : {
+    "description" : "Button label to clear all values within the filter bar",
+    "message" : "Clear all"
+  },
+  "filterButton.removable.removeButtonLabel" : {
+    "description" : "Button label to remove a single filter from the filter bar",
+    "message" : "Remove filter - {filterLabel}"
+  },
+  "filterDatePickerDateInputField.dateInputLabelFallback" : {
+    "description" : "Default label for date input field",
+    "message" : "Date"
+  },
+  "filterDateRangePicker.dateFrom" : {
+    "description" : "Label for the 'Date from' field",
+    "message" : "Date from"
+  },
+  "filterDateRangePicker.dateTo" : {
+    "description" : "Label for the 'date to' field",
+    "message" : "Date to"
+  },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+  },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Search…"
+  },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Select all"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
+  "kz.rte.bold" : {
+    "description" : "Label for the \"Bold\" button in a text editor",
+    "message" : "Bold"
+  },
+  "kz.rte.bullet_list" : {
+    "description" : "Label for the \"Bullet list\" button in a text editor",
+    "message" : "Bullet list"
+  },
+  "kz.rte.decrease_indent" : {
+    "description" : "Label for the \"Decrease indent\" button in a text editor",
+    "message" : "Decrease indent"
+  },
+  "kz.rte.increase_indent" : {
+    "description" : "Label for the \"Increase indent\" button in a text editor",
+    "message" : "Increase indent"
+  },
+  "kz.rte.italic" : {
+    "description" : "Label for the \"Italic\" button in a text editor",
+    "message" : "Italic"
+  },
+  "kz.rte.link" : {
+    "description" : "Label for the \"Link\" button in a text editor that allows the creation of hyperlinks in the text",
+    "message" : "Link"
+  },
+  "kz.rte.numbered_list" : {
+    "description" : "Label for the \"Numbered list\" button in a text editor",
+    "message" : "Numbered list"
+  },
+  "kz.rte.toolbar.aria_label" : {
+    "description" : "Label for the text formatting toolbar in a Rich Text Editor",
+    "message" : "Text formatting"
+  },
+  "kz.rte.underline" : {
+    "description" : "Label for the \"Underline\" button in a text editor",
+    "message" : "Underline"
+  },
+  "kzErrorPage" : {
+    "description" : "Label for contact button",
+    "message" : "Contact support"
+  },
+  "kzErrorPage.400.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Problem loading page right now. Try again or head home."
+  },
+  "kzErrorPage.400.title" : {
+    "description" : "Heading for page",
+    "message" : "Problem loading page"
+  },
+  "kzErrorPage.401.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home"
+  },
+  "kzErrorPage.401.title" : {
+    "description" : "Main title for page",
+    "message" : "You can't view this page"
+  },
+  "kzErrorPage.403.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry but it looks like you don’t have permission to view this page. Go back and try again, or head to Home"
+  },
+  "kzErrorPage.403.title" : {
+    "description" : "Main title for page",
+    "message" : "You can't view this page"
+  },
+  "kzErrorPage.404.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry but we can't find the page you're looking for. Go back and try again, or head to Home"
+  },
+  "kzErrorPage.404.title" : {
+    "description" : "Main title of page",
+    "message" : "Page not found"
+  },
+  "kzErrorPage.413" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
+  },
+  "kzErrorPage.413.title" : {
+    "description" : "Main title of page",
+    "message" : "Something's gone wrong on our side"
+  },
+  "kzErrorPage.422.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry but your change couldn't be made. Go back and try again, or head to Home"
+  },
+  "kzErrorPage.422.title" : {
+    "description" : "Main title of page",
+    "message" : "Change couldn't be made"
+  },
+  "kzErrorPage.500" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home"
+  },
+  "kzErrorPage.500.title" : {
+    "description" : "Main title of page",
+    "message" : "Something's gone wrong on our side"
+  },
+  "kzErrorPage.502.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry about this. The best thing to do is go back and try again."
+  },
+  "kzErrorPage.502.title" : {
+    "description" : "Main title of page",
+    "message" : "You can't view this page"
+  },
+  "kzErrorPage.503.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry about this. The best thing to do is go back and try again."
+  },
+  "kzErrorPage.503.title" : {
+    "description" : "Main title of page",
+    "message" : "You can't view this page"
+  },
+  "kzErrorPage.504.message" : {
+    "description" : "Call to action instructions for the user",
+    "message" : "Sorry about this. The best thing to do is go back and try again."
+  },
+  "kzErrorPage.504.title" : {
+    "description" : "Main title of page",
+    "message" : "You can't view this page"
+  },
+  "kzErrorPage.errorCode" : {
+    "message" : "Error code {code}"
+  },
+  "kzErrorPage.goToHome" : {
+    "description" : "Home button label",
+    "message" : "Go to Home"
+  },
+  "kzGenericTile.infoButtonLabel" : {
+    "description" : "Prompts user to interact with button to reveal more information",
+    "message" : "View more information:"
+  },
+  "kzGenericTile.infoButtonReturnLabel" : {
+    "description" : "Prompts user to interact with button to hide information",
+    "message" : "Hide information:"
+  },
+  "kzTitleBlock.combinedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items and secondary actions",
+    "message" : "Open combined secondary and overflow menu"
+  },
+  "kzTitleBlock.defaultActionMinimizedOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays the default action item",
+    "message" : "Open default action overflow menu"
+  },
+  "kzTitleBlock.hamburgerMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays navigation items",
+    "message" : "Мәзірді ашу"
+  },
+  "kzTitleBlock.overflowMenuAriaLabel" : {
+    "description" : "Aria Label for the dropdown menu which displays additional action items",
+    "message" : "Opens overflow menu"
+  },
+  "kzTitleBlock.overflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional action items",
+    "message" : "Menu"
+  },
+  "kzTitleBlock.secondaryAndOverflowMenuLabel" : {
+    "description" : "Label for the dropdown menu which displays additional actions",
+    "message" : "Open secondary and overflow menu"
+  },
+  "select.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Clear selection: {field}"
+  },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Show suggestions for {field}"
+  },
+  "singleSelect.clearButtonAlt_v2" : {
+    "description" : "Alt text for the clear selection button. The button clears the selection the user has made via a dropdown. The field placeholder is the label of the dropdown.",
+    "message" : "Clear selection: {field}"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -77,7 +77,7 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.7",
+    "@floating-ui/react-dom": "^2.1.8",
     "@headlessui/react": "^2.2.9",
     "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
@@ -130,7 +130,7 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.15.1",
+    "@cultureamp/i18n-react-intl": "^4.0.0",
     "@cultureamp/package-bundler": "^2.4.4",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
@@ -144,7 +144,7 @@
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^11.2.0",
@@ -157,11 +157,11 @@
     "rollup": "^4.59.0",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
-    "svgo": "^4.0.0",
+    "svgo": "^4.0.1",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
     "tsx": "^4.21.0",
-    "@kaizen/design-tokens": "11.0.1"
+    "@kaizen/design-tokens": "11.0.2"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

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

@@ -1,11 +1,13 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '../../styles/utils/button-reset';
-
 @layer kz-components {
   .clearButton {
-    @include button-reset;
-
+    /* Button reset */
+    appearance: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    border: none;
     position: relative;
     display: inline-flex;
     border-radius: 100%;
@@ -22,20 +24,20 @@
   }
 
   .default {
-    color: $color-gray-500;
+    color: var(--color-gray-500);
 
     &:hover,
     &:focus-visible {
-      color: $color-purple-800;
+      color: var(--color-purple-800);
     }
   }
 
   .reversed {
-    color: rgba($color-white-rgb, 0.8);
+    color: rgb(var(--color-white-rgb), 0.8);
 
     &:hover,
     &:focus-visible {
-      color: $color-white;
+      color: var(--color-white);
     }
 
     &:focus-visible {

package/src/ClearButton/ClearButton.tsx

@@ -2,7 +2,7 @@ import React, { type ButtonHTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './ClearButton.module.scss'
+import styles from './ClearButton.module.css'
 
 export type ClearButtonProps = {
   isReversed?: boolean

package/dist/cjs/src/ClearButton/ClearButton.module.scss.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-var styles = {
-  "clearButton": "ClearButton-module_clearButton__CSOIc",
-  "default": "ClearButton-module_default__lBJxw",
-  "reversed": "ClearButton-module_reversed__0I2DC"
-};
-module.exports = styles;

package/dist/esm/src/ClearButton/ClearButton.module.scss.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "clearButton": "ClearButton-module_clearButton__CSOIc",
-  "default": "ClearButton-module_default__lBJxw",
-  "reversed": "ClearButton-module_reversed__0I2DC"
-};
-export { styles as default };