@kaizen/components 2.3.7 → 2.5.0

package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.mjs

@@ -1,27 +0,0 @@
-var styles = {
-  "notification": "GenericNotification-module_notification__-JP1M",
-  "inline": "GenericNotification-module_inline__OciO5",
-  "toast": "GenericNotification-module_toast__GOVfC",
-  "global": "GenericNotification-module_global__Weka-",
-  "security": "GenericNotification-module_security__QTALa",
-  "hidden": "GenericNotification-module_hidden__WJjct",
-  "noBottomMargin": "GenericNotification-module_noBottomMargin__28nF8",
-  "persistent": "GenericNotification-module_persistent__O7bgI",
-  "subtle": "GenericNotification-module_subtle__kPns9",
-  "icon": "GenericNotification-module_icon__SDb8v",
-  "textContainer": "GenericNotification-module_textContainer__Avpbk",
-  "forceMultiline": "GenericNotification-module_forceMultiline__JcVA4",
-  "title": "GenericNotification-module_title__dvQOr",
-  "text": "GenericNotification-module_text__X-5ld",
-  "cancel": "GenericNotification-module_cancel__c6wky",
-  "disabled": "GenericNotification-module_disabled__WGBhD",
-  "hover": "GenericNotification-module_hover__hUURd",
-  "active": "GenericNotification-module_active__-6ahb",
-  "cancelLabel": "GenericNotification-module_cancelLabel__HJzsk",
-  "notificationTitle": "GenericNotification-module_notificationTitle__Oaqb8",
-  "success": "GenericNotification-module_success__oLGIP",
-  "informative": "GenericNotification-module_informative__WLimi",
-  "cautionary": "GenericNotification-module_cautionary__lneFu",
-  "warning": "GenericNotification-module_warning__7275P"
-};
-export { styles as default };

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

@@ -1,28 +0,0 @@
-var styles = {
-  "root": "Tag-module_root__uRhoc",
-  "profile": "Tag-module_profile__OoGsS",
-  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
-  "validationIcon": "Tag-module_validationIcon__B-YLv",
-  "textContent": "Tag-module_textContent__q76X-",
-  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
-  "dismissButton": "Tag-module_dismissButton__rHv7r",
-  "background": "Tag-module_background__LkzGB",
-  "truncate": "Tag-module_truncate__5w7HW",
-  "inline": "Tag-module_inline__pPM-d",
-  "medium": "Tag-module_medium__NkOrv",
-  "small": "Tag-module_small__-xyNk",
-  "default": "Tag-module_default__6PVke",
-  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
-  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
-  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
-  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
-  "validationPositive": "Tag-module_validationPositive__vgFUE",
-  "validationInformative": "Tag-module_validationInformative__bnJ4A",
-  "validationNegative": "Tag-module_validationNegative__lZgIY",
-  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
-  "statusLive": "Tag-module_statusLive__xG48w",
-  "statusAction": "Tag-module_statusAction__woL-O",
-  "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv"
-};
-export { styles as default };

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

@@ -1,14 +0,0 @@
-var styles = {
-  "text": "Text-module_text__Byo7R",
-  "intro-lede": "Text-module_intro-lede__ENE72",
-  "body": "Text-module_body__cO-XH",
-  "small": "Text-module_small__uZNGn",
-  "extra-small": "Text-module_extra-small__3g9eN",
-  "dark": "Text-module_dark__-jDSk",
-  "dark-reduced-opacity": "Text-module_dark-reduced-opacity__18nLo",
-  "white": "Text-module_white__-yVD0",
-  "white-reduced-opacity": "Text-module_white-reduced-opacity__i0veZ",
-  "positive": "Text-module_positive__e-IKh",
-  "negative": "Text-module_negative__agbge"
-};
-export { styles as default };

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

@@ -1,11 +0,0 @@
-var styles = {
-  "checkbox": "ToggleSwitch-module_checkbox__ezWz3",
-  "track": "ToggleSwitch-module_track__fcDMP",
-  "disabled": "ToggleSwitch-module_disabled__3H-9R",
-  "thumb": "ToggleSwitch-module_thumb__8PULV",
-  "checkIcon": "ToggleSwitch-module_checkIcon__8iitB",
-  "on": "ToggleSwitch-module_on__CQpkh",
-  "off": "ToggleSwitch-module_off__OhSEP",
-  "reversed": "ToggleSwitch-module_reversed__Q3-iM"
-};
-export { styles as default };

package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "container": "ToggleSwitchField-module_container__e7TXD",
-  "fullWidth": "ToggleSwitchField-module_fullWidth__ybDf-",
-  "inner": "ToggleSwitchField-module_inner__9-O0m",
-  "on": "ToggleSwitchField-module_on__HQOkN"
-};
-export { styles as default };

package/dist/esm/src/Tooltip/OverlayArrow.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "overlayArrow": "OverlayArrow-module_overlayArrow__UoDjH",
-  "reversed": "OverlayArrow-module_reversed__N3t-k"
-};
-export { styles as default };

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

@@ -1,5 +0,0 @@
-var styles = {
-  "tooltip": "Tooltip-module_tooltip__NMZ65",
-  "reversed": "Tooltip-module_reversed__aTr5h"
-};
-export { styles as default };

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

@@ -1,4 +0,0 @@
-var styles = {
-  "srOnly": "VisuallyHidden-module_srOnly__tTjOK"
-};
-export { styles as default };

package/src/Content/Content.module.scss

@@ -1,17 +0,0 @@
-@import '~@kaizen/design-tokens/sass/layout';
-@import './variables';
-
-@layer kz-components {
-  .content {
-    max-width: $layout-content-max-width;
-    margin: 0 $layout-content-side-margin;
-    width: 100%;
-
-    // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
-    min-width: 0;
-
-    @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-      margin: 0 $content-margin-width-on-medium-and-small;
-    }
-  }
-}

package/src/Content/_variables.scss

@@ -1,3 +0,0 @@
-// This replicates the layout max-width logic in
-// packages/components/TitleBlock/TitleBlock.module.scss
-$content-margin-width-on-medium-and-small: 12px;

package/src/Divider/Divider.module.scss

@@ -1,39 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-
-@layer kz-components {
-  // Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
-
-  $dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
-
-  .wrapper {
-    width: 100%;
-    border: 0;
-    margin: 0;
-    border-radius: $border-solid-border-radius;
-    // This is here to protect against a global style in a consumer.
-    // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
-    visibility: visible;
-  }
-
-  .content {
-    border-top: 1px solid;
-    border-color: $dt-content-border-color;
-  }
-
-  .canvas {
-    border-top: 1px solid;
-    border-bottom: 1px solid;
-    border-color: rgba($color-gray-600-rgb, 0.1);
-  }
-
-  .reversed {
-    border-color: rgba($color-white-rgb, 0.1);
-  }
-
-  .menuSeparator {
-    @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
-
-    margin: 5px 0;
-  }
-}

package/src/ErrorPage/ErrorPage.module.scss

@@ -1,7 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
-@layer kz-components {
-  .paragraphPadding {
-    padding: $spacing-24 0;
-  }
-}

package/src/Heading/Heading.module.scss

@@ -1,115 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '../../styles/foundation/layers';
-
-@layer reset {
-  .heading {
-    margin: 0;
-  }
-}
-
-@layer kz-components {
-  .display-0 {
-    font-family: $typography-display-0-font-family;
-    font-weight: $typography-display-0-font-weight;
-    font-size: $typography-display-0-font-size;
-    line-height: $typography-display-0-line-height;
-    letter-spacing: $typography-display-0-letter-spacing;
-  }
-
-  .composable-header-title {
-    font-family: $typography-display-0-font-family; // Tiempos
-    font-weight: 500; // Medium
-    font-size: $typography-heading-1-font-size;
-    line-height: $typography-heading-1-line-height;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
-
-  .heading-1 {
-    font-family: $typography-heading-1-font-family;
-    font-weight: $typography-heading-1-font-weight;
-    font-size: $typography-heading-1-font-size;
-    line-height: $typography-heading-1-line-height;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
-
-  .heading-2 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-  }
-
-  .heading-3 {
-    font-family: $typography-heading-3-font-family;
-    font-weight: $typography-heading-3-font-weight;
-    font-size: $typography-heading-3-font-size;
-    line-height: $typography-heading-3-line-height;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-
-  .heading-4 {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-  }
-
-  .heading-5 {
-    font-family: $typography-heading-5-font-family;
-    font-weight: $typography-heading-5-font-weight;
-    font-size: $typography-heading-5-font-size;
-    line-height: $typography-heading-5-line-height;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-
-  .heading-6 {
-    font-family: $typography-heading-6-font-family;
-    font-weight: $typography-heading-6-font-weight;
-    font-size: $typography-heading-6-font-size;
-    line-height: $typography-heading-6-line-height;
-    letter-spacing: $typography-heading-6-letter-spacing;
-  }
-
-  .dark {
-    color: $color-purple-800;
-    opacity: 100%;
-  }
-
-  .dark-reduced-opacity {
-    color: $color-purple-800;
-    opacity: 70%;
-  }
-
-  .white {
-    color: $color-white;
-    opacity: 100%;
-  }
-
-  .white-reduced-opacity {
-    color: $color-white;
-    opacity: 80%;
-  }
-
-  .positive {
-    &.small {
-      color: $color-green-600;
-    }
-
-    &.large {
-      color: $color-green-500;
-    }
-  }
-
-  .negative {
-    &.small {
-      color: $color-red-600;
-    }
-
-    &.large {
-      color: $color-red-500;
-    }
-  }
-}

package/src/Label/Label.module.scss

@@ -1,105 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '../../styles/utils/form-variables';
-
-@layer kz-components {
-  $label-start-margin: $spacing-xs;
-
-  .label {
-    --icon-vertical-align: text-bottom;
-  }
-
-  .label,
-  :global(.ideal-sans) .label {
-    // override Murmur global styles :(
-    opacity: inherit;
-    color: $dt-color-form-text-color;
-    visibility: visible;
-    width: 100%;
-    text-align: start;
-  }
-
-  .reversed {
-    color: $color-white;
-
-    a {
-      color: $color-white;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .disabled {
-    opacity: 30%;
-  }
-
-  ///////////////////////////////////////////////////
-  // LABEL TYPES
-  ///////////////////////////////////////////////////
-
-  // This is to override bootstrap styles. Remove when appropriate
-  .text,
-  :global(.ideal-sans) .text {
-    font-family: $typography-heading-6-font-family;
-    font-size: $typography-heading-6-font-size;
-    line-height: $typography-heading-6-line-height;
-    letter-spacing: $typography-heading-6-letter-spacing;
-    font-weight: $typography-heading-6-font-weight;
-  }
-
-  %checkboxOrRadio,
-  :global(.ideal-sans) %checkboxOrRadio {
-    display: flex;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-  }
-
-  .checkbox {
-    @extend %checkboxOrRadio;
-  }
-
-  .radio {
-    @extend %checkboxOrRadio;
-  }
-
-  .toggle {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-  }
-
-  .checkbox,
-  .radio,
-  .toggle {
-    // apply padding when label is inline with form control
-    .prependedLabel {
-      order: -1; // place label before the control
-      margin-inline-end: $label-start-margin;
-    }
-
-    .appendedLabel {
-      margin-inline-start: $label-start-margin;
-    }
-  }
-
-  .prominent {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    display: block;
-    margin-bottom: $spacing-xs;
-  }
-}

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -1,138 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import './mixins';
-
-@layer kz-components {
-  .notification {
-    @extend %ca-notification;
-  }
-
-  // Structure
-  .icon {
-    @extend %ca-notification__icon;
-
-    color: var(--icon-color);
-  }
-
-  .textContainer {
-    @extend %ca-notification__text-container;
-  }
-
-  .title {
-    @extend %ca-notification__title;
-  }
-
-  .text {
-    @extend %ca-notification__text;
-  }
-
-  .cancel {
-    @extend %ca-notification__cancel;
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--border-solid-border-radius);
-
-    &:focus-visible {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: -4px;
-    }
-  }
-
-  .cancelLabel {
-    @extend %ca-notification__cancel__label;
-  }
-
-  .notificationTitle {
-    top: 0.42em;
-    position: relative;
-    margin-inline-end: $spacing-6;
-    line-height: $typography-heading-6-line-height;
-  }
-
-  @container (max-width: 25rem) {
-    .notificationTitle {
-      width: 100%;
-    }
-  }
-
-  // Animation
-  .hidden {
-    @extend %ca-notification---hidden;
-  }
-
-  // Variant
-  .inline {
-    @extend %ca-notification---inline;
-  }
-
-  .toast {
-    @extend %ca-notification---toast;
-  }
-
-  .global {
-    @extend %ca-notification---global;
-  }
-
-  // ------------------------------
-  // Variant
-  // ------------------------------
-  .success {
-    background: $color-green-100;
-    border-color: var(--color-green-500);
-    color: $color-purple-800;
-
-    --icon-color: var(--color-green-500);
-  }
-
-  .informative {
-    background: $color-blue-100;
-    border-color: var(--color-blue-500);
-    color: $color-purple-800;
-
-    --icon-color: var(--color-blue-500);
-  }
-
-  .cautionary {
-    background: $color-yellow-100;
-    border-color: var(--color-yellow-700);
-    color: $color-purple-800;
-
-    --icon-color: var(--color-yellow-700);
-  }
-
-  .warning {
-    background: $color-red-100;
-    border-color: var(--color-red-500);
-    color: $color-purple-800;
-
-    --icon-color: var(--color-red-500);
-  }
-
-  .security {
-    @extend %ca-notification---cautionary;
-  }
-
-  // Modifiers
-  .noBottomMargin {
-    @extend %ca-notification---noBottomMargin;
-  }
-
-  .forceMultiline {
-    @extend %ca-notification---forceMultiline;
-  }
-
-  .persistent {
-    @extend %ca-notification---persistent;
-  }
-
-  // this is only for inline notifications, but is here due to specificity issues in the _styles.scss file
-  .subtle {
-    @extend %ca-notification---subtle;
-  }
-}