@kaizen/components 3.0.9 → 3.0.11

package/dist/types/SingleSelect/index.d.ts

@@ -1,3 +1,4 @@
 export * from './SingleSelect';
 export * from './types';
+export * from './subcomponents/SelectToggle';
 export { SingleSelect, type SingleSelectProps } from './SingleSelect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "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/index.ts

@@ -1,4 +1,5 @@
 export * from './SingleSelect'
 export * from './types'
+export * from './subcomponents/SelectToggle'
 
 export { SingleSelect, type SingleSelectProps } from './SingleSelect'

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/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/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;
-  }
-}