@kaizen/components 1.4.21 → 1.4.22-canary.1

package/dist/iife/CheckboxField.module-MS76TDL7.scss

@@ -1,46 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../variables";
-
-// -----------------------------------------------
-// Checkbox Field
-// -----------------------------------------------
-///////////////////////////////////////////////////
-// LAYOUT
-///////////////////////////////////////////////////
-.container {
-  position: relative;
-  margin-bottom: $spacing-xs;
-
-  label {
-    // This is to override bootstrap styles. Remove when appropriate
-    padding-top: 0;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    label:hover {
-      input:not([disabled]) + div {
-        border-color: $dt-color-form-border-color;
-        background-color: $color-gray-100;
-      }
-    }
-  }
-
-  &.checked,
-  &.mixed {
-    label {
-      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-bold-font-weight;
-      position: static;
-    }
-  }
-}

package/dist/iife/CheckboxGroup.module-AHAPICAN.scss

@@ -1,13 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.checkboxGroupLabel {
-  margin-bottom: $spacing-sm;
-}
-.checkboxGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
-}

package/dist/iife/ClearButton.module-KVNHOLVT.scss

@@ -1,79 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "../../mixins";
-
-// Polyfill
-$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
-
-// Classnames to simulate pseudo states in storybook
-$story-className--clear-button-hover: ":global(.story__clear-button-hover)";
-
-// Combined pseudo state classes
-$selectors--clear-button-hover: "&:hover, &#{$story-className--clear-button-hover}";
-$selectors--clear-button-focus: "&:focus-visible, #{$polyfill--focus-visible}";
-
-.clearButton {
-  @include button-reset;
-
-  position: relative;
-  display: inline-flex;
-
-  #{$selectors--clear-button-hover} {
-    cursor: pointer;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  #{$selectors--clear-button-focus} {
-    &::after {
-      $focus-ring-offset: -1px;
-
-      content: "";
-      position: absolute;
-      background: transparent;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: 50%;
-      top: $focus-ring-offset;
-      left: $focus-ring-offset;
-      right: $focus-ring-offset;
-      bottom: $focus-ring-offset;
-    }
-  }
-}
-
-///////////////////////////////////////////////////
-// THEMES
-///////////////////////////////////////////////////
-
-.default {
-  color: $color-gray-500;
-
-  #{$selectors--clear-button-hover},
-  #{$selectors--clear-button-focus} {
-    color: $color-purple-800;
-  }
-
-  #{$selectors--clear-button-focus} {
-    &::after {
-      border-color: $color-blue-500;
-    }
-  }
-}
-
-.reversed {
-  color: rgba($color-white-rgb, 0.8);
-
-  #{$selectors--clear-button-hover},
-  #{$selectors--clear-button-focus} {
-    color: $color-white;
-  }
-
-  #{$selectors--clear-button-focus} {
-    &::after {
-      border-color: $color-blue-300;
-    }
-  }
-}

package/dist/iife/Collapsible.module-ZJNVWQIB.scss

@@ -1,119 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/animation";
-
-$heading-active-color: $color-gray-200;
-// ^This is just a temporary hex to get us by for now until we rearrange our neutrals and introduce something that can used here.
-$border-color: rgba($color-gray-600-rgb, 0.2);
-
-// We need a full border radius on this container element, then have classes
-// beneath to toggle nested borders off and on for different use cases.
-.container {
-  background-color: $color-white;
-  box-shadow: $shadow-small-box-shadow;
-  border-radius: $border-borderless-border-radius;
-}
-
-.single {
-  .header {
-    border-radius: $border-borderless-border-radius;
-  }
-}
-
-.separated {
-  & + .separated {
-    margin-top: calc(#{$spacing-md} * 0.3);
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  .header {
-    border-radius: $border-borderless-border-radius;
-  }
-}
-
-// When a collapsible group is rendered, we need the first group to have a rounded
-// on top and the last group to have a rounded bottom edge. Then when the last group
-// is open we remove the rounded edge as the content sits beneath and needs to be straight.
-.groupItem {
-  & + .groupItem {
-    border-top: 1px $border-solid-border-style $border-color;
-  }
-
-  &:first-of-type > .header {
-    border-top-left-radius: $border-borderless-border-radius;
-    border-top-right-radius: $border-borderless-border-radius;
-  }
-
-  &:last-of-type > .header:not(.open) {
-    border-bottom-left-radius: $border-borderless-border-radius;
-    border-bottom-right-radius: $border-borderless-border-radius;
-  }
-}
-
-// Round the bottom corners of the header so when the container is open, the
-// header background is not rounded on the corners and flush with the content beneath.
-.open .header {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  text-align: left;
-  background-color: $color-white;
-  border: none;
-  transition: background-color $animation-duration-rapid;
-  padding-top: $spacing-sm;
-  padding-bottom: $spacing-sm;
-  padding-left: $spacing-md;
-  padding-right: $spacing-sm;
-
-  &:hover {
-    background-color: $heading-active-color;
-  }
-
-  [dir="rtl"] & {
-    text-align: right;
-    padding-left: $spacing-sm;
-    padding-right: $spacing-md;
-  }
-}
-
-.chevronButton:hover {
-  // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
-  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.title {
-  flex: 1 1 auto;
-}
-
-.defaultVariant {
-  background-color: $heading-active-color;
-}
-
-.clearVariant {
-  border-bottom: 1px $border-solid-border-style $border-color;
-}
-
-.sticky {
-  position: -webkit-sticky;
-  position: sticky;
-  z-index: 10;
-}
-
-.section {
-  padding: $spacing-md;
-}
-
-.noPadding {
-  padding: 0;
-}
-
-.hide {
-  display: none;
-}

package/dist/iife/CollapsibleGroup.module-UR2SIYLJ.scss

@@ -1,10 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/shadow";
-
-// We need a full border radius on this container element, then have classes
-// beneath to toggle nested borders off and on for different use cases.
-.container {
-  background-color: white;
-  box-shadow: $shadow-small-box-shadow;
-  border-radius: $border-borderless-border-radius;
-}

package/dist/iife/ConfirmationModal.module-RN2H7KPL.scss

@@ -1,157 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/layout";
-
-$dt-positive-header-background: $color-green-100;
-$dt-informative-header-background: $color-blue-100;
-$dt-negative-header-background: $color-red-100;
-$dt-cautionary-header-background: $color-yellow-100;
-$dt-heading-text-color: $color-purple-800;
-$dt-cautionary-heading-text-color: $color-purple-800;
-$dt-assertive-header-background: $color-orange-100;
-
-.modal {
-  composes: genericModal from "../Primitives/GenericModal.module.scss";
-  min-width: 300px;
-  max-width: 600px;
-}
-
-.header {
-  color: $color-white;
-  text-align: left;
-  border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
-
-  &.padded {
-    padding: $spacing-md $spacing-lg;
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
-    }
-  }
-
-  // override Murmur global styles :(
-  h1 {
-    color: $dt-heading-text-color;
-  }
-}
-
-.positiveHeader,
-.informativeHeader,
-.negativeHeader,
-.cautionaryHeader,
-.assertiveHeader {
-  display: grid;
-  grid-template-columns: 0.2fr 2fr;
-  align-items: center;
-  &.prominent {
-    grid-template-columns: 1.1fr 2fr;
-    @media (max-width: $layout-breakpoints-medium) {
-      display: flex;
-      flex-direction: column;
-      align-content: flex-start;
-      justify-content: center;
-      align-items: flex-start;
-    }
-    .iconContainer {
-      position: absolute;
-      top: 8%;
-      @media (max-width: $layout-breakpoints-medium) {
-        position: relative;
-        top: 0;
-        margin-bottom: $spacing-sm;
-      }
-    }
-    .spotIcon,
-    .svgIcon > svg {
-      width: 155px;
-      height: 155px;
-      margin: 0 auto;
-      color: $color-purple-800;
-      @media (max-width: $layout-breakpoints-medium) {
-        width: 86px;
-        height: 86px;
-      }
-    }
-  }
-  .iconContainer {
-    align-self: flex-start;
-    @media (min-width: $layout-breakpoints-medium) {
-      align-self: center;
-    }
-  }
-  .spotIcon,
-  .svgIcon > svg {
-    width: 30px;
-    height: 30px;
-    @media (max-width: $layout-breakpoints-medium) {
-      margin-right: 0.9375rem;
-      position: relative;
-      top: 0.125rem;
-    }
-  }
-}
-
-.positiveHeader {
-  background-color: $dt-positive-header-background;
-
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-green-500;
-  }
-}
-
-.assertiveHeader {
-  background-color: $dt-assertive-header-background;
-
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-orange-500;
-  }
-}
-
-.informativeHeader {
-  background-color: $dt-informative-header-background;
-
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-blue-500;
-  }
-}
-
-.negativeHeader {
-  background-color: $dt-negative-header-background;
-
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-red-500;
-  }
-}
-
-.cautionaryHeader {
-  background-color: $dt-cautionary-header-background;
-
-  .spotIcon,
-  .svgIcon > svg {
-    color: $color-yellow-500;
-  }
-}
-
-.prominent {
-  display: grid;
-  grid-template-columns: 1.1fr 2fr;
-  align-items: center;
-  @media (max-width: $layout-breakpoints-medium) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.padded {
-  padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
-  @media (max-width: $layout-breakpoints-medium) {
-    padding: $spacing-md;
-  }
-}
-
-.iconContainer {
-  position: relative;
-}

package/dist/iife/Content.module-6CTLBAHR.scss

@@ -1,25 +0,0 @@
-@import "~@kaizen/design-tokens/sass/layout";
-@import "../variables";
-
-.container {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  * {
-    &,
-    &:after,
-    &:before {
-      box-sizing: border-box;
-    }
-  }
-}
-
-.content {
-  max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
-  width: 100%;
-
-  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    margin: 0 $content-margin-width-on-medium-and-small;
-  }
-}

package/dist/iife/ContextModal.module-TTFVPUPU.scss

@@ -1,77 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.modal {
-  composes: genericModal from "../Primitives/GenericModal.module.scss";
-  min-width: 300px;
-  max-width: 840px;
-
-  @media (min-width: $layout-breakpoints-medium) {
-    width: 90%;
-  }
-}
-
-.header {
-  color: $color-purple-800;
-  text-align: left;
-  &.padded {
-    padding: $spacing-md;
-    @media (min-width: $layout-breakpoints-medium) {
-      padding: $spacing-md $spacing-lg;
-    }
-  }
-}
-
-.footer {
-  white-space: initial;
-  @media (min-width: $layout-breakpoints-medium) {
-    white-space: nowrap;
-  }
-}
-
-.footerWithSecondaryAction {
-  composes: footer;
-  margin-left: calc(-1 * #{$spacing-sm});
-}
-
-.emptyFooter {
-  height: $spacing-sm;
-}
-
-.portraitContentlayout {
-  padding: $spacing-md;
-  display: block;
-  box-sizing: content-box;
-  @media (min-width: $layout-breakpoints-medium) {
-    display: grid;
-    max-width: 800px;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    column-gap: $spacing-xl;
-    padding: $spacing-md $spacing-lg;
-  }
-}
-
-.landscapeContentlayout {
-  display: flex;
-  padding: $spacing-md;
-  flex-direction: column;
-  @media (min-width: $layout-breakpoints-medium) {
-    padding: $spacing-md $spacing-lg;
-  }
-
-  .image {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .content {
-    padding-left: 0rem;
-    @media (min-width: $layout-breakpoints-medium) {
-      max-width: 100%;
-    }
-  }
-}

package/dist/iife/DateInput.module-YBXARKD2.scss

@@ -1,3 +0,0 @@
-.dateInput {
-  width: 100%;
-}

package/dist/iife/DateInputDescription.module-SGAJNB7K.scss

@@ -1,19 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.dateInputDescription {
-  display: inline;
-}
-
-.dateInputFormatContainer {
-  margin-inline-start: $spacing-xs;
-  white-space: nowrap;
-}
-
-.descriptionInputFormat {
-  display: inline-flex;
-  white-space: nowrap;
-}
-
-.labelSeparator {
-  margin-inline-end: $spacing-xs;
-}

package/dist/iife/DateInputField.module-2LG4I24X.scss

@@ -1,5 +0,0 @@
-$input-disabled-opacity: 0.3;
-
-.disabled {
-  opacity: $input-disabled-opacity;
-}

package/dist/iife/DateInputWithIconButton.module-RSUEQ345.scss

@@ -1,53 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/component-library/styles/animation";
-@import "../../mixins";
-
-$input-disabled-opacity: 0.3;
-
-.iconButton {
-  @include button-reset;
-
-  display: inherit;
-  padding: 0.25rem $spacing-xs;
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $border-solid-border-radius;
-  position: relative;
-  right: -0.35rem;
-  top: -40%;
-
-  [dir="rtl"] & {
-    right: 0.25rem;
-  }
-
-  &:hover:not([disabled]) {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
-  }
-
-  :focus {
-    outline: none;
-  }
-
-  &:focus-visible,
-  :global(.js-focus-visible) &:global(.focus-visible) {
-    outline-offset: -2px;
-    outline: $color-blue-500 $border-focus-ring-border-style
-      $border-focus-ring-border-width;
-  }
-
-  svg {
-    position: relative;
-    top: 2px;
-  }
-}
-
-.calendarActive {
-  color: $color-blue-500;
-  background-color: $color-blue-100;
-}
-
-.disabled {
-  opacity: $input-disabled-opacity;
-}