@kaizen/components 2.3.6 → 2.3.7

package/dist/cjs/src/Container/Container.cjs

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

package/dist/cjs/src/Container/{Container.module.scss.cjs → Container.module.css.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
 var styles = {
-  "container": "Container-module_container__jSUGk"
+  "container": "Container-module_container__Aj6o8"
 };
 module.exports = styles;

package/dist/esm/src/Container/Container.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './Container.module.scss.mjs';
+import styles from './Container.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |

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

@@ -0,0 +1,4 @@
+var styles = {
+  "container": "Container-module_container__Aj6o8"
+};
+export { styles as default };

package/dist/styles.css

@@ -2689,15 +2689,21 @@
   }
 }
 @layer kz-components {
-  .Container-module_container__jSUGk {
+  .Container-module_container__Aj6o8 {
     display: flex;
     width: 100%;
     justify-content: center;
-  }
-  .Container-module_container__jSUGk *, .Container-module_container__jSUGk *::after, .Container-module_container__jSUGk *::before {
-    box-sizing: border-box;
+
+    * {
+      &,
+      &::after,
+      &::before {
+        box-sizing: border-box;
+      }
+    }
   }
 }
+
 /** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
   .Content-module_content__ZeTRs {
@@ -10061,11 +10067,9 @@
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRow__Ifqiu {
     background-color: var(--color-white, #ffffff);
-    margin-bottom: 0.063rem;
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec, .TitleBlock-module_titleRowInner__SlArS {
     box-sizing: border-box;
@@ -10083,7 +10087,7 @@
     }
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
-    border-bottom: 1px solid var(--color-gray-300, #eaeaec);
+    box-shadow: inset 0 -0.0625rem 0 0 var(--color-gray-300, #eaeaec);
   }
   .TitleBlock-module_rowBelowSeparatorInner__3gNec {
     padding: 0 4px 0 12px;
@@ -10096,24 +10100,28 @@
   }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     box-sizing: border-box;
+    min-height: 88px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
     gap: 12px;
-    padding-block: 20px 19px;
+    padding-block: 20px;
     justify-content: space-between;
-    border-bottom: 0.063rem solid rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
+    box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
   }
   .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
-    border-bottom-color: rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
+    box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--color-purple-700-rgb, 74, 35, 77), 0.2);
   }
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_titleRowInnerContent__NhTHV, .TitleBlock-module_collapseNavigationArea__x9hzQ .TitleBlock-module_titleRowInnerContent__NhTHV {
-    border-bottom-color: transparent;
+    box-shadow: none;
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_titleRowInnerContent__NhTHV {
-      border-bottom: none;
+      box-shadow: none;
+    }
+    .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_titleRowInnerContent__NhTHV {
+      box-shadow: none;
     }
   }
   @container (max-width: 576px) {
@@ -10393,7 +10401,6 @@
   .TitleBlock-module_rowBelowSeparatorInnerContent__g5H9w {
     display: flex;
     width: 100%;
-    margin-top: -0.063rem;
     justify-content: space-between;
   }
   .TitleBlock-module_titleAndAdjacent__Q7W-m {
@@ -10456,7 +10463,6 @@
   }
   @container (max-width: calc(768px - 1px)) {
     .TitleBlock-module_hasNavigationTabs__v09jL .TitleBlock-module_navigationTabScrollerContainer__o234q {
-      margin-top: 0.063rem;
       height: 3.75rem;
       display: block;
       overflow-x: scroll;
@@ -10485,7 +10491,7 @@
     .TitleBlock-module_navigationTabEdgeShadowRight__xkIWc, .TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR {
       display: block;
       position: absolute;
-      top: 3.687rem;
+      top: 3.75rem;
       width: 3.75rem;
       height: 3.75rem;
       background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));

package/package.json

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

package/src/Container/Container.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { type ContentProps } from '~components/Content'
-import styles from './Container.module.scss'
+import styles from './Container.module.css'
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |

package/src/TitleBlock/TitleBlock.module.scss

@@ -16,7 +16,7 @@
   $breadcrumb-circle-width: 48px;
   $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
     $breadcrumb-circle-width * 2.25;
-  $title-block-separator-height: 0.063rem;
+  $title-block-separator-height: 0.0625rem;
   $tab-container-height-default: $ca-grid * 3;
   $tab-container-height-small: $ca-grid * 2.5;
   $tab-container-height-default-collapsed: 0;
@@ -65,12 +65,10 @@
 
   .lightVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: $title-block-separator-height;
   }
 
   .adminVariant .titleRow {
     background-color: $color-white;
-    margin-bottom: $title-block-separator-height;
   }
 
   %titleBlockInner {
@@ -93,7 +91,7 @@
   }
 
   .lightVariant .titleRowInner {
-    border-bottom: 1px solid $color-gray-300;
+    box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0 $color-gray-300;
   }
 
   %rowBelowSeparatorInnerMarginOverride {
@@ -112,27 +110,33 @@
 
   .titleRowInnerContent {
     box-sizing: border-box;
+    min-height: 88px;
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
     gap: $title-block-gap-default;
-    padding-block: $title-block-spacing-default 19px;
+    padding-block: $title-block-spacing-default;
     justify-content: space-between;
-    border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
+    box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0 rgba($color-white-rgb, 0.1);
 
     .educationVariant & {
-      border-bottom-color: rgba($color-purple-700-rgb, 0.2);
+      box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0
+        rgba($color-purple-700-rgb, 0.2);
     }
 
     .lightVariant &,
     .adminVariant &,
     .collapseNavigationArea & {
-      border-bottom-color: transparent;
+      box-shadow: none;
     }
 
     @include title-block-medium-and-small {
-      border-bottom: none;
+      box-shadow: none;
+
+      .educationVariant & {
+        box-shadow: none;
+      }
     }
 
     @include title-block-under-576 {
@@ -425,7 +429,6 @@
   .rowBelowSeparatorInnerContent {
     display: flex;
     width: 100%;
-    margin-top: -$title-block-separator-height;
     justify-content: space-between;
   }
 
@@ -496,7 +499,6 @@
   .navigationTabScrollerContainer {
     .hasNavigationTabs & {
       @include title-block-small {
-        margin-top: $title-block-separator-height;
         height: $tab-container-height-small;
         display: block;
         overflow-x: scroll;
@@ -529,7 +531,7 @@
     @include title-block-small {
       display: block;
       position: absolute;
-      top: $tab-container-height-small - $title-block-separator-height;
+      top: $tab-container-height-small;
       width: $tab-container-height-small;
       height: $tab-container-height-small;
       background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));

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

@@ -1,4 +0,0 @@
-var styles = {
-  "container": "Container-module_container__jSUGk"
-};
-export { styles as default };