@kaizen/components 3.0.2 → 3.0.4

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/cjs/src/Slider/Slider.cjs

@@ -7,7 +7,7 @@ var FieldGroup = require('../FieldGroup/FieldGroup.cjs');
 var InputRange = require('../Input/InputRange/InputRange.cjs');
 var Label = require('../Label/Label.cjs');
 var Text = require('../Text/Text.cjs');
-var Slider_module = require('./Slider.module.scss.cjs');
+var Slider_module = require('./Slider.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var styles = {
+  "wrapper": "Slider-module_wrapper__kXjBM",
+  "labelWrapper": "Slider-module_labelWrapper__vENis",
+  "label": "Slider-module_label__mtiIe",
+  "labelInline": "Slider-module_labelInline__Ga4E2",
+  "inputWrapper": "Slider-module_inputWrapper__XF-0J",
+  "descriptionDisabled": "Slider-module_descriptionDisabled__NGY9Q",
+  "readOnlyMessage": "Slider-module_readOnlyMessage__ttMUd"
+};
+module.exports = styles;

package/dist/cjs/src/TimeField/TimeField.cjs

@@ -10,7 +10,7 @@ var classnames = require('classnames');
 var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Label = require('../Label/Label.cjs');
 var TimeSegment = require('./subcomponents/TimeSegment/TimeSegment.cjs');
-var TimeField_module = require('./TimeField.module.scss.cjs');
+var TimeField_module = require('./TimeField.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var styles = {
+  "wrapper": "TimeField-module_wrapper__pQZdC",
+  "label": "TimeField-module_label__1znpw",
+  "input": "TimeField-module_input__tYw7K",
+  "focusRing": "TimeField-module_focusRing__YmCyC",
+  "isDisabled": "TimeField-module_isDisabled__KIIuQ",
+  "error": "TimeField-module_error__lgr4N"
+};
+module.exports = styles;

package/dist/cjs/src/TimeField/subcomponents/TimeSegment/TimeSegment.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var datepicker = require('@react-aria/datepicker');
 var classnames = require('classnames');
 var generateSegmentDisplayText = require('./utils/generateSegmentDisplayText.cjs');
-var TimeSegment_module = require('./TimeSegment.module.scss.cjs');
+var TimeSegment_module = require('./TimeSegment.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var styles = {
+  "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__VHChp",
+  "timeSegment": "TimeSegment-module_timeSegment__MYvxk",
+  "hasPadding": "TimeSegment-module_hasPadding__s-PMt",
+  "placeholder": "TimeSegment-module_placeholder__gfr9g",
+  "literal": "TimeSegment-module_literal__Ep2-S",
+  "dayPeriod": "TimeSegment-module_dayPeriod__WOOH2"
+};
+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/esm/src/Slider/Slider.mjs

@@ -5,7 +5,7 @@ import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
 import { InputRange } from '../Input/InputRange/InputRange.mjs';
 import { Label } from '../Label/Label.mjs';
 import { Text } from '../Text/Text.mjs';
-import styles from './Slider.module.scss.mjs';
+import styles from './Slider.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896335/Slider Guidance} |

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

@@ -0,0 +1,10 @@
+var styles = {
+  "wrapper": "Slider-module_wrapper__kXjBM",
+  "labelWrapper": "Slider-module_labelWrapper__vENis",
+  "label": "Slider-module_label__mtiIe",
+  "labelInline": "Slider-module_labelInline__Ga4E2",
+  "inputWrapper": "Slider-module_inputWrapper__XF-0J",
+  "descriptionDisabled": "Slider-module_descriptionDisabled__NGY9Q",
+  "readOnlyMessage": "Slider-module_readOnlyMessage__ttMUd"
+};
+export { styles as default };

package/dist/esm/src/TimeField/TimeField.mjs

@@ -8,7 +8,7 @@ import classnames from 'classnames';
 import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
 import { Label } from '../Label/Label.mjs';
 import { TimeSegment } from './subcomponents/TimeSegment/TimeSegment.mjs';
-import styles from './TimeField.module.scss.mjs';
+import styles from './TimeField.module.css.mjs';
 
 // This needed to be placed directly below the props because
 // the prop descriptions wouldn't show in Storybook otherwise.

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

@@ -0,0 +1,9 @@
+var styles = {
+  "wrapper": "TimeField-module_wrapper__pQZdC",
+  "label": "TimeField-module_label__1znpw",
+  "input": "TimeField-module_input__tYw7K",
+  "focusRing": "TimeField-module_focusRing__YmCyC",
+  "isDisabled": "TimeField-module_isDisabled__KIIuQ",
+  "error": "TimeField-module_error__lgr4N"
+};
+export { styles as default };

package/dist/esm/src/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -3,7 +3,7 @@ import React from 'react';
 import { useDateSegment } from '@react-aria/datepicker';
 import classnames from 'classnames';
 import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText.mjs';
-import styles from './TimeSegment.module.scss.mjs';
+import styles from './TimeSegment.module.css.mjs';
 const TimeSegment = /*#__PURE__*/function () {
   const TimeSegment = function (_a) {
     var segment = _a.segment,

package/dist/esm/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.css.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__VHChp",
+  "timeSegment": "TimeSegment-module_timeSegment__MYvxk",
+  "hasPadding": "TimeSegment-module_hasPadding__s-PMt",
+  "placeholder": "TimeSegment-module_placeholder__gfr9g",
+  "literal": "TimeSegment-module_literal__Ep2-S",
+  "dayPeriod": "TimeSegment-module_dayPeriod__WOOH2"
+};
+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 **/
@@ -9107,44 +9116,51 @@
     width: 180px;
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .Slider-module_wrapper__zVX6g {
+  .Slider-module_wrapper__kXjBM {
     display: flex;
     flex-direction: column;
   }
-  .Slider-module_labelWrapper__WuUIw {
-    margin-bottom: var(--spacing-sm, 0.75rem);
+
+  .Slider-module_labelWrapper__vENis {
+    margin-bottom: var(--spacing-sm);
   }
-  .Slider-module_label__CfIjh {
-    margin-bottom: var(--spacing-4, 0.25rem);
+
+  .Slider-module_label__mtiIe {
+    margin-bottom: var(--spacing-4);
   }
-  @media (min-width: 768px) {
-    .Slider-module_labelInline__zjINd.Slider-module_wrapper__zVX6g {
-      align-items: center;
-      flex-direction: row;
-    }
-    .Slider-module_labelInline__zjINd .Slider-module_labelWrapper__WuUIw {
-      flex: 1;
-    }
-    .Slider-module_labelInline__zjINd .Slider-module_inputWrapper__n16yj {
-      flex-basis: 50%;
+
+  @media (width >= 768px) {
+    .Slider-module_labelInline__Ga4E2 {
+      &.Slider-module_wrapper__kXjBM {
+        align-items: center;
+        flex-direction: row;
+      }
+
+      .Slider-module_labelWrapper__vENis {
+        flex: 1;
+      }
+
+      .Slider-module_inputWrapper__XF-0J {
+        flex-basis: 50%;
+      }
     }
   }
-  .Slider-module_descriptionDisabled__8GwiS {
-    opacity: 30%;
+
+  .Slider-module_descriptionDisabled__NGY9Q {
+    opacity: 0.3;
   }
-  .Slider-module_readOnlyMessage__Zscoa {
+
+  .Slider-module_readOnlyMessage__ttMUd {
     text-align: center;
-    font-family: var(--typography-paragraph-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-size: var(--typography-paragraph-small-font-size, 0.875rem);
-    font-weight: var(--typography-paragraph-bold-font-weight, 600);
-    line-height: var(--typography-paragraph-body-line-height, 1.5rem);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing, normal);
+    font-family: var(--typography-paragraph-small-font-family);
+    font-size: var(--typography-paragraph-small-font-size);
+    font-weight: var(--typography-paragraph-bold-font-weight);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -9900,101 +9916,125 @@
     }
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .TimeSegment-module_timeSegmentWrapper__WYD6y {
+  /*
+  Chrome has a bug where `contenteditable` elements receive focus from external clicks.
+  This (in combination with the invisible character ​) creates boundaries
+  for the element.
+  https://stackoverflow.com/a/34445203
+  */
+  .TimeSegment-module_timeSegmentWrapper__VHChp {
     white-space: nowrap;
   }
-  .TimeSegment-module_timeSegment__eXb0c {
+
+  .TimeSegment-module_timeSegment__MYvxk {
     display: block;
     text-align: end;
-    background-color: var(--color-gray-300, #eaeaec);
+    background-color: var(--color-gray-300);
     border-radius: 3px;
-    color: var(--color-purple-800, #2f2438);
-  }
-  .TimeSegment-module_timeSegment__eXb0c:hover {
-    background-color: var(--color-white, #ffffff);
-  }
-  .TimeSegment-module_timeSegment__eXb0c:focus-visible {
-    color: white;
-    background: var(--color-blue-500, #0168b3);
-    outline: none;
+    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__9oYW3 {
+
+  .TimeSegment-module_hasPadding__s-PMt {
     padding: 0 4px;
   }
-  .TimeSegment-module_placeholder__j1-gK {
-    color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
-  }
-  .TimeSegment-module_literal__mOkqz {
-    background: none;
+
+  .TimeSegment-module_placeholder__gfr9g {
+    color: rgb(var(--color-purple-800-rgb), 0.7);
   }
-  .TimeSegment-module_literal__mOkqz:hover {
+
+  .TimeSegment-module_literal__Ep2-S {
     background: none;
+
+    &:hover {
+      background: none;
+    }
   }
-  .TimeSegment-module_dayPeriod__fzT5I {
+
+  .TimeSegment-module_dayPeriod__WOOH2 {
     margin-right: 4px;
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
+
 @layer kz-components {
-  .TimeField-module_wrapper__YuSI3 {
+  :root {
+    --input-height: 48px;
+  }
+
+  .TimeField-module_wrapper__pQZdC {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    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);
-    color: var(--color-purple-800, #2f2438);
+    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__kjKyK {
+
+  .TimeField-module_label__1znpw {
     display: block;
-    margin-bottom: var(--spacing-6, 0.375rem);
+    margin-bottom: var(--spacing-6);
   }
-  .TimeField-module_input__Hxjcu {
+
+  .TimeField-module_input__tYw7K {
     display: inline-flex;
     align-items: center;
-    background-color: var(--color-white, #ffffff);
+    background-color: var(--color-white);
     background-clip: padding-box;
-    border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid) var(--color-gray-500, #878792);
-    border-radius: var(--border-solid-border-radius, 7px);
-    font-size: var(--typography-paragraph-body-font-size, 1rem);
-    line-height: var(--typography-paragraph-body-line-height, 1.5rem);
-    padding: 0 var(--spacing-sm, 0.75rem);
-    height: 48px;
+    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;
+
+    &:hover,
+    &:focus-within {
+      border-color: var(--color-gray-600);
+      background-color: var(--color-gray-200);
+    }
   }
-  .TimeField-module_input__Hxjcu:hover, .TimeField-module_input__Hxjcu:focus-within {
-    border-color: var(--color-gray-600, #524e56);
-    background-color: var(--color-gray-200, #f4f4f5);
-  }
-  .TimeField-module_input__Hxjcu:focus-within .TimeField-module_focusRing__7hgWG {
+
+  .TimeField-module_input__tYw7K:focus-within .TimeField-module_focusRing__YmCyC {
+    --focus-ring-offset: 3px;
+
     position: absolute;
     background: transparent;
-    border-radius: var(--border-focus-ring-border-radius, 10px);
-    border-width: var(--border-focus-ring-border-width, 2px);
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: -3px;
+    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(-1 * var(--focus-ring-offset));
     pointer-events: none;
   }
-  .TimeField-module_isDisabled__rpEc8 {
+
+  .TimeField-module_isDisabled__KIIuQ {
     pointer-events: none;
     background-color: transparent;
-    border-color: var(--color-gray-500, #878792);
-    opacity: 30%;
+    border-color: var(--color-gray-500);
+    opacity: 0.3;
   }
-  .TimeField-module_error__tK2QY {
-    border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid) var(--color-red-500, #c93b55);
+
+  .TimeField-module_error__lgr4N {
+    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-red-500);
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/