@kaizen/components 1.70.9 → 1.70.11

package/src/__rc__/Menu/MenuItem.tsx

@@ -26,16 +26,14 @@ export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
         textValue={determinedTextValue}
         {...props}
       >
-        <>
-          {typeof children === 'string' && icon ? (
-            <div className={styles.flexWrapper}>
-              <span className={styles.iconWrapper}>{icon}</span>
-              {children}
-            </div>
-          ) : (
-            <>{children}</>
-          )}
-        </>
+        {typeof children === 'string' && icon ? (
+          <div className={styles.flexWrapper}>
+            <span className={styles.iconWrapper}>{icon}</span>
+            {children}
+          </div>
+        ) : (
+          children
+        )}
       </RACMenuItem>
     )
   },

package/src/__rc__/Tabs/subcomponents/Tab/Tab.tsx

@@ -29,12 +29,20 @@ export const Tab = (props: TabProps): JSX.Element => {
 
   return (
     <RACTab data-kz-tab {...tabProps}>
-      {({ isSelected, isFocusVisible, isHovered }) => (
+      {(TabRenderProps) => (
         <>
-          {children}
+          {typeof children === 'function' ? children(TabRenderProps) : children}
           {badge && (
             <span className={styles.badge}>
-              <Badge variant={isSelected || isFocusVisible || isHovered ? 'active' : 'default'}>
+              <Badge
+                variant={
+                  TabRenderProps.isSelected ||
+                  TabRenderProps.isFocusVisible ||
+                  TabRenderProps.isHovered
+                    ? 'active'
+                    : 'default'
+                }
+              >
                 {badge}
               </Badge>
             </span>

package/dist/cjs/Avatar/Avatar.module.scss.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "Avatar-module_wrapper__LY2q2",
-  "small": "Avatar-module_small__PeksS",
-  "personal": "Avatar-module_personal__2U7--",
-  "otherUser": "Avatar-module_otherUser__b-drl",
-  "company": "Avatar-module_company__2qtJE",
-  "initials": "Avatar-module_initials__VDY2Q",
-  "medium": "Avatar-module_medium__Vy3V8",
-  "large": "Avatar-module_large__qiNWs",
-  "xlarge": "Avatar-module_xlarge__Vx4IG",
-  "xxlarge": "Avatar-module_xxlarge__oOoGq",
-  "avatarImage": "Avatar-module_avatarImage__FuULy",
-  "loading": "Avatar-module_loading__i9V-D",
-  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
-  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
-  "longName": "Avatar-module_longName__31Yuf"
-};
-module.exports = styles;

package/dist/cjs/AvatarGroup/AvatarGroup.module.scss.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var styles = {
-  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
-  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl",
-  "small": "AvatarGroup-module_small__7uv8k",
-  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
-  "medium": "AvatarGroup-module_medium__af52y",
-  "large": "AvatarGroup-module_large__HN9Yy"
-};
-module.exports = styles;

package/dist/cjs/Badge/Badge.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "badge": "Badge-module_badge__CRtsW",
-  "large": "Badge-module_large__0QOpY",
-  "default": "Badge-module_default__k4Kcf",
-  "active": "Badge-module_active__-e-i2",
-  "reversed": "Badge-module_reversed__OgQLB",
-  "dark": "Badge-module_dark__RH34a",
-  "dot": "Badge-module_dot__BOKL1",
-  "animation": "Badge-module_animation__NTy6C",
-  "animationOn": "Badge-module_animationOn__nWK38"
-};
-module.exports = styles;

package/dist/cjs/BrandMoment/BrandMoment.module.scss.cjs

@@ -1,29 +0,0 @@
-'use strict';
-
-var styles = {
-  "body": "BrandMoment-module_body__J4lls",
-  "positive": "BrandMoment-module_positive__78wqJ",
-  "negative": "BrandMoment-module_negative__atXal",
-  "informative": "BrandMoment-module_informative__Qvwcd",
-  "success": "BrandMoment-module_success__v503M",
-  "warning": "BrandMoment-module_warning__dWih8",
-  "container": "BrandMoment-module_container__4ORHI",
-  "header": "BrandMoment-module_header__EAP5Q",
-  "main": "BrandMoment-module_main__cdWko",
-  "mainInner": "BrandMoment-module_mainInner__xsFA6",
-  "left": "BrandMoment-module_left__ZHJiM",
-  "leftInner": "BrandMoment-module_leftInner__TY5DY",
-  "right": "BrandMoment-module_right__B-PR2",
-  "rightInner": "BrandMoment-module_rightInner__XvQ5Y",
-  "subtitle": "BrandMoment-module_subtitle__z9PL8",
-  "title": "BrandMoment-module_title__GrdAR",
-  "textBody": "BrandMoment-module_textBody__W6LvQ",
-  "secondaryAction": "BrandMoment-module_secondaryAction__d18oJ",
-  "actions": "BrandMoment-module_actions__Z3NrK",
-  "footer": "BrandMoment-module_footer__vSeX1",
-  "footerInner": "BrandMoment-module_footerInner__Wt9Rt",
-  "poweredByContainer": "BrandMoment-module_poweredByContainer__OkhVN",
-  "footerTextContainer": "BrandMoment-module_footerTextContainer__8iin9",
-  "poweredByLogo": "BrandMoment-module_poweredByLogo__w6M7o"
-};
-module.exports = styles;

package/dist/cjs/ButtonGroup/ButtonGroup.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "buttonGroup": "ButtonGroup-module_buttonGroup__bsy2X",
-  "child": "ButtonGroup-module_child__K6AP-",
-  "firstChild": "ButtonGroup-module_firstChild__uEn1j",
-  "lastChild": "ButtonGroup-module_lastChild__Vicsx"
-};
-module.exports = styles;

package/dist/esm/Avatar/Avatar.module.scss.mjs

@@ -1,18 +0,0 @@
-var styles = {
-  "wrapper": "Avatar-module_wrapper__LY2q2",
-  "small": "Avatar-module_small__PeksS",
-  "personal": "Avatar-module_personal__2U7--",
-  "otherUser": "Avatar-module_otherUser__b-drl",
-  "company": "Avatar-module_company__2qtJE",
-  "initials": "Avatar-module_initials__VDY2Q",
-  "medium": "Avatar-module_medium__Vy3V8",
-  "large": "Avatar-module_large__qiNWs",
-  "xlarge": "Avatar-module_xlarge__Vx4IG",
-  "xxlarge": "Avatar-module_xxlarge__oOoGq",
-  "avatarImage": "Avatar-module_avatarImage__FuULy",
-  "loading": "Avatar-module_loading__i9V-D",
-  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
-  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
-  "longName": "Avatar-module_longName__31Yuf"
-};
-export { styles as default };

package/dist/esm/AvatarGroup/AvatarGroup.module.scss.mjs

@@ -1,9 +0,0 @@
-var styles = {
-  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
-  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl",
-  "small": "AvatarGroup-module_small__7uv8k",
-  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
-  "medium": "AvatarGroup-module_medium__af52y",
-  "large": "AvatarGroup-module_large__HN9Yy"
-};
-export { styles as default };

package/dist/esm/Badge/Badge.module.scss.mjs

@@ -1,12 +0,0 @@
-var styles = {
-  "badge": "Badge-module_badge__CRtsW",
-  "large": "Badge-module_large__0QOpY",
-  "default": "Badge-module_default__k4Kcf",
-  "active": "Badge-module_active__-e-i2",
-  "reversed": "Badge-module_reversed__OgQLB",
-  "dark": "Badge-module_dark__RH34a",
-  "dot": "Badge-module_dot__BOKL1",
-  "animation": "Badge-module_animation__NTy6C",
-  "animationOn": "Badge-module_animationOn__nWK38"
-};
-export { styles as default };

package/dist/esm/BrandMoment/BrandMoment.module.scss.mjs

@@ -1,27 +0,0 @@
-var styles = {
-  "body": "BrandMoment-module_body__J4lls",
-  "positive": "BrandMoment-module_positive__78wqJ",
-  "negative": "BrandMoment-module_negative__atXal",
-  "informative": "BrandMoment-module_informative__Qvwcd",
-  "success": "BrandMoment-module_success__v503M",
-  "warning": "BrandMoment-module_warning__dWih8",
-  "container": "BrandMoment-module_container__4ORHI",
-  "header": "BrandMoment-module_header__EAP5Q",
-  "main": "BrandMoment-module_main__cdWko",
-  "mainInner": "BrandMoment-module_mainInner__xsFA6",
-  "left": "BrandMoment-module_left__ZHJiM",
-  "leftInner": "BrandMoment-module_leftInner__TY5DY",
-  "right": "BrandMoment-module_right__B-PR2",
-  "rightInner": "BrandMoment-module_rightInner__XvQ5Y",
-  "subtitle": "BrandMoment-module_subtitle__z9PL8",
-  "title": "BrandMoment-module_title__GrdAR",
-  "textBody": "BrandMoment-module_textBody__W6LvQ",
-  "secondaryAction": "BrandMoment-module_secondaryAction__d18oJ",
-  "actions": "BrandMoment-module_actions__Z3NrK",
-  "footer": "BrandMoment-module_footer__vSeX1",
-  "footerInner": "BrandMoment-module_footerInner__Wt9Rt",
-  "poweredByContainer": "BrandMoment-module_poweredByContainer__OkhVN",
-  "footerTextContainer": "BrandMoment-module_footerTextContainer__8iin9",
-  "poweredByLogo": "BrandMoment-module_poweredByLogo__w6M7o"
-};
-export { styles as default };

package/dist/esm/ButtonGroup/ButtonGroup.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "buttonGroup": "ButtonGroup-module_buttonGroup__bsy2X",
-  "child": "ButtonGroup-module_child__K6AP-",
-  "firstChild": "ButtonGroup-module_firstChild__uEn1j",
-  "lastChild": "ButtonGroup-module_lastChild__Vicsx"
-};
-export { styles as default };

package/src/Avatar/Avatar.module.scss

@@ -1,169 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-
-$avatar-sm: 1.25rem;
-$avatar-md: 3rem;
-$avatar-lg: 4.5rem;
-$avatar-xl: 6rem;
-$avatar-xxl: 7.75rem;
-
-/* stylelint-disable no-descending-specificity */
-.wrapper {
-  background: $color-gray-300;
-  border-radius: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  &:not(.small) {
-    box-shadow: $shadow-small-box-shadow;
-    border: 3px solid $color-white;
-  }
-
-  // Themes
-  &.personal {
-    background: $color-orange-100;
-  }
-
-  &.otherUser {
-    background: $color-gray-300;
-  }
-
-  &.company {
-    border: 0;
-    background: $color-white;
-    padding: 6px;
-    border-radius: $border-solid-border-radius;
-  }
-
-  // Sizes
-  &.small {
-    width: $avatar-sm;
-    height: $avatar-sm;
-
-    .initials {
-      margin-bottom: -1px;
-    }
-
-    &.company {
-      padding: 0;
-    }
-  }
-
-  &.medium {
-    width: $avatar-md;
-    height: $avatar-md;
-
-    .initials {
-      margin-bottom: -1px;
-    }
-  }
-
-  &.large {
-    width: $avatar-lg;
-    height: $avatar-lg;
-  }
-
-  &.xlarge {
-    width: $avatar-xl;
-    height: $avatar-xl;
-  }
-
-  &.xxlarge {
-    width: $avatar-xxl;
-    height: $avatar-xxl;
-  }
-
-  & .initials {
-    text-decoration: none;
-    speak-as: spell-out;
-
-    // to override materialize.css global styling in performance-ui,
-    // which sets a border-bottom on abbr tags
-    border-bottom: none;
-  }
-}
-
-.avatarImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-
-  .loading & {
-    display: none;
-  }
-}
-
-.companyAvatarImage {
-  object-fit: contain;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-
-.fallbackIcon {
-  color: rgba($color-purple-800-rgb, 0.7);
-  font-size: var(--avatar-fallback-icon-size);
-
-  .xxlarge & {
-    --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
-  }
-
-  .xlarge & {
-    --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
-  }
-
-  .large & {
-    --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
-  }
-
-  .medium & {
-    --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
-  }
-
-  .small & {
-    --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
-  }
-}
-
-.initials {
-  box-sizing: border-box;
-  color: $color-purple-800;
-  padding-left: 5px;
-  padding-right: 5px;
-  text-align: center;
-  width: 100%;
-  font-size: 22px;
-  font-family: $typography-heading-1-font-family;
-  font-weight: $typography-heading-1-font-weight;
-  letter-spacing: $typography-heading-3-letter-spacing;
-
-  // Whitespace cropping
-  &:not(.longName)::before {
-    content: '';
-    display: block;
-    margin-top: -0.001em;
-  }
-
-  .xlarge &,
-  .xxlarge & {
-    font-size: 34px;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
-
-  .medium & {
-    font-size: 16px;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-
-  .small & {
-    font-size: 8px;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-/* stylelint-enable no-descending-specificity */

package/src/AvatarGroup/AvatarGroup.module.scss

@@ -1,79 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-
-// Vars
-$avatar-sm: 1.25rem;
-$avatar-md: 3rem;
-$avatar-lg: 4.5rem;
-
-@mixin overlap($size) {
-  margin-inline-start: calc(#{$size} / -2);
-}
-
-.AvatarGroup {
-  display: inline-flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.AvatarCounter {
-  direction: ltr;
-  align-items: center;
-  background: $color-gray-300;
-  border: 3px solid $color-white;
-  border-radius: 100%;
-  box-sizing: border-box;
-  box-shadow: $shadow-small-box-shadow;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.small {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-sm);
-  }
-
-  .AvatarCounter {
-    box-shadow: none;
-    border: none;
-    width: $avatar-sm;
-    height: $avatar-sm;
-    font-family: $typography-heading-5-font-family;
-    font-size: 0.5rem;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-
-.medium {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-md);
-  }
-
-  .AvatarCounter {
-    width: $avatar-md;
-    height: $avatar-md;
-    font-family: $typography-heading-5-font-family;
-    font-size: $typography-heading-5-font-size;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-
-.large {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-lg);
-  }
-
-  .AvatarCounter {
-    width: $avatar-lg;
-    height: $avatar-lg;
-    font-family: $typography-heading-3-font-family;
-    font-size: $typography-heading-3-font-size;
-    font-weight: $typography-heading-3-font-weight;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-}

package/src/Badge/Badge.module.scss

@@ -1,113 +0,0 @@
-@import '~@kaizen/design-tokens/sass/animation';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
-$dt-color-background-default: $color-gray-300;
-
-$small: $spacing-md;
-
-.badge {
-  border-radius: $spacing-sm;
-  color: $color-purple-800;
-  display: inline-block;
-  position: relative;
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-size: $typography-paragraph-extra-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-  line-height: $typography-paragraph-extra-small-line-height;
-  padding: 1px $spacing-xs;
-  min-width: 8px;
-  text-align: center;
-}
-
-.badge.large {
-  display: inline-flex;
-  justify-content: center;
-  border-radius: $spacing-xl;
-  font-size: $typography-data-medium-font-size;
-  line-height: $typography-data-medium-line-height;
-  letter-spacing: $typography-data-medium-letter-spacing;
-  padding: 2px 1.875rem;
-  width: 24px;
-}
-
-.default {
-  background-color: $dt-color-background-default;
-  color: $color-purple-800;
-}
-
-.active {
-  background-color: $color-blue-500;
-  color: $color-white;
-}
-
-.reversed.active {
-  background-color: $color-green-300;
-  color: $color-purple-800;
-}
-
-.dark {
-  background-color: rgba($color-purple-700-rgb, 0.1);
-  color: $color-purple-800;
-}
-
-.dot {
-  background-color: $color-green-300;
-  padding: $spacing-xs;
-  min-width: unset;
-}
-
-.dot.large {
-  background-color: $color-green-300;
-  padding: 1.875rem;
-  width: unset;
-}
-
-.reversed.dot {
-  background-color: $color-green-300;
-}
-
-.reversed.dark {
-  background-color: $color-purple-700;
-  color: $color-white;
-}
-
-.reversed {
-  background-color: rgba($color-white-rgb, 0.1);
-  color: $color-white;
-}
-
-$badge-duration-timing: ($animation-duration-slow / 2) $animation-easing-function-ease-in;
-
-$badge-transition:
-  transform $badge-duration-timing,
-  background-color $badge-duration-timing;
-
-.animation {
-  display: inherit;
-
-  .badge {
-    transition: $badge-transition;
-    transform-origin: center;
-    transform: scale3d(1, 1, 1);
-  }
-
-  &.animationOn .badge {
-    transform: scale3d(1.35, 1.35, 1.35);
-
-    &.dark {
-      background-color: rgba($color-purple-700-rgb, 0.2);
-    }
-
-    &.active {
-      background-color: $color-blue-500;
-      color: $color-white;
-    }
-
-    &.dot {
-      background-color: $color-green-300;
-    }
-  }
-}