@kaizen/components 1.4.23 → 1.4.25

package/dist/iife/SkipLink.module-KAZA7PAL.scss

@@ -1,109 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-
-/**
- * _Most_ of these styles have been copied over from the generic button
- * in @kaizen/button. Although the appearance closely resembles reversed primary
- * button, some necessary modifications to make this component visuallyHidden and
- * other slight visual tweaks did not make this appropriate for reuse. 
- */
-$caButton-height: $spacing-xl;
-$caButton-verticalPadding: calc(#{$spacing-sm} - #{$border-solid-border-width});
-$caButtonIcon-height: 20px;
-
-// reset user agent styles for button element type
-@mixin button-reset {
-  appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  transition: none; // override Murmur global styles :(
-}
-
-@mixin button {
-  @include button-reset;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  font-family: $typography-button-primary-font-family;
-  font-weight: $typography-button-primary-font-weight;
-  font-size: $typography-button-primary-font-size;
-  line-height: $typography-button-primary-line-height;
-  letter-spacing: $typography-button-primary-letter-spacing;
-  display: inline-flex;
-  // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
-  //  and this element is an <a>, causing the element to be full width.
-  align-items: center;
-  box-sizing: border-box;
-  min-height: $caButton-height;
-  border: $border-solid-border-width $border-solid-border-style;
-  border-radius: $border-solid-border-radius;
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  text-align: center;
-  overflow: visible; // Required for the focus ring on IE11
-
-  text-decoration: none;
-
-  padding: $caButton-verticalPadding
-    calc(#{$spacing-md} - #{$border-solid-border-width});
-}
-
-@mixin primary {
-  background: $color-white;
-  border-color: $border-borderless-border-color;
-  color: $color-purple-800;
-  // show custom focus ring when :focus-visible
-  &:global(.focus-visible)::after {
-    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    top: calc(-1 * #{$focus-ring-offset});
-    left: calc(-1 * #{$focus-ring-offset});
-    right: calc(-1 * #{$focus-ring-offset});
-    bottom: calc(-1 * #{$focus-ring-offset});
-  }
-}
-
-.skipLinkContainer {
-  @include button();
-  @include primary();
-  position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  z-index: 1040; // Navigation z-index + 10
-  opacity: 0;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-
-  &:focus {
-    opacity: 1;
-    clip: auto;
-    clip-path: none;
-  }
-}
-
-.skipLinkContent {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.skipLinkIcon {
-  height: $caButtonIcon-height;
-  align-self: auto;
-  display: flex;
-  padding-right: 4px;
-  color: $color-purple-800;
-}

package/dist/iife/Skirt.module-S3GPHMMQ.scss

@@ -1,32 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-$dt-color-background-color-default: $color-purple-600;
-$dt-color-background-color-education: $color-blue-100;
-
-.container {
-  position: relative;
-}
-
-// Actual height is determined in JavaScript
-.underlay {
-  box-sizing: content-box;
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-}
-
-.defaultVariant {
-  background-color: $dt-color-background-color-default;
-}
-
-.educationVariant {
-  background-color: $dt-color-background-color-education;
-}
-
-.content {
-  position: relative;
-  z-index: 2;
-}

package/dist/iife/SkirtCard.module-6YQ4PS2K.scss

@@ -1,16 +0,0 @@
-@import "~@kaizen/design-tokens/sass/layout";
-@import "../variables";
-
-.wrapper {
-  @media (max-width: $layout-breakpoints-large) {
-    margin-left: $content-margin-width-on-medium-and-small * -1;
-    margin-right: $content-margin-width-on-medium-and-small * -1;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  @media (max-width: $layout-breakpoints-medium) {
-    border-radius: 0;
-    margin-left: $content-margin-width-on-medium-and-small * -1;
-    margin-right: $content-margin-width-on-medium-and-small * -1;
-  }
-}

package/dist/iife/Slider.module-EIBFJ2LP.scss

@@ -1,42 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/layout";
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.labelWrapper {
-  margin-bottom: $spacing-sm;
-}
-
-@media (min-width: $layout-breakpoints-medium) {
-  .labelInline {
-    &.wrapper {
-      align-items: center;
-      flex-direction: row;
-    }
-
-    .labelWrapper {
-      flex: 1;
-    }
-
-    .inputWrapper {
-      flex-basis: 50%;
-    }
-  }
-}
-
-.descriptionDisabled {
-  opacity: 0.3;
-}
-
-.readOnlyMessage {
-  text-align: center;
-  font-family: $typography-paragraph-small-font-family;
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-}

package/dist/iife/SplitButton.module-WMGCIDDK.scss

@@ -1,4 +0,0 @@
-.splitButton {
-  display: inline-flex;
-  align-items: center;
-}

package/dist/iife/StatelessMenu.module-SX2T5P4I.scss

@@ -1,3 +0,0 @@
-.buttonWrapper {
-  display: inline-block;
-}

package/dist/iife/Tab.module-4S535DQG.scss

@@ -1,105 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-
-.tab {
-  display: inline-flex;
-  align-items: center;
-  border: 0;
-  border-top: 2px solid transparent;
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-  border-top-left-radius: $border-borderless-border-radius;
-  border-top-right-radius: $border-borderless-border-radius;
-  background: $color-white;
-  white-space: nowrap;
-  text-decoration: none;
-  padding: $spacing-md $spacing-md;
-  margin: 0;
-  font-family: $typography-heading-4-font-family;
-  font-size: $typography-heading-4-font-size;
-  font-weight: $typography-heading-4-font-weight;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-  color: $color-purple-800;
-
-  &:not(:first-child) {
-    margin-inline-start: $spacing-xs;
-  }
-
-  &:not(:disabled):hover {
-    background: $color-blue-100;
-    color: $color-blue-500;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:global(.focus-visible) {
-    background: $color-blue-100;
-    color: $color-blue-500;
-    border-color: $color-blue-500;
-  }
-}
-
-.tab[data-selected] {
-  position: relative;
-  color: $color-blue-500;
-
-  &::before {
-    content: "";
-    display: block;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    background-color: currentColor;
-    height: 5px;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.tab:disabled {
-  opacity: 0.3;
-}
-
-.badge {
-  margin-inline-start: $spacing-sm;
-  display: inline-flex;
-  align-items: center;
-}
-
-@media (forced-colors: active) {
-  .tab {
-    border: 2px solid transparent;
-
-    &:global(.focus-visible)::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-      content: "";
-      position: absolute;
-      background: transparent;
-      border-radius: $border-focus-ring-border-radius;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-color: transparent;
-      top: calc(-1 * #{$focus-ring-offset});
-      left: calc(-1 * #{$focus-ring-offset});
-      right: calc(-1 * #{$focus-ring-offset});
-      bottom: calc(-1 * #{$focus-ring-offset});
-    }
-  }
-
-  .tab.selected::before {
-    // High contrast also doesn't see the pseudo element created to show the active tab.
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-bottom: 2px solid transparent;
-  }
-}

package/dist/iife/TabList.module-FVWF5RCV.scss

@@ -1,11 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
-.tabList {
-  border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
-  padding: $spacing-xs $spacing-md 0;
-}
-
-.tabList.noPadding {
-  padding: 0;
-}

package/dist/iife/TabPanel.module-2YHJE4CY.scss

@@ -1,14 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-
-.tabPanel {
-  border: 2px solid transparent;
-
-  &:focus {
-    outline: none;
-  }
-  &:global(.focus-visible) {
-    border-color: $color-blue-500;
-    border-radius: $border-focus-ring-border-radius;
-  }
-}

package/dist/iife/Table.module-LCDRXCBP.scss

@@ -1,233 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "./mixins";
-
-// Taken from design-tokens/sass/shadow
-// we need control of the x and y offset in this component
-$box-shadow-color-sm: rgba(53, 55, 74, 0.09);
-$row-height: 60px;
-$row-height-data-variant: 48px;
-
-.anchorReset {
-  text-decoration: none;
-  color: $color-purple-800;
-  display: block;
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-  }
-
-  &.headerRowCellButtonReversed {
-    color: $color-white;
-  }
-}
-
-.container {
-  width: 100%;
-  margin-bottom: $spacing-sm;
-}
-
-.headerRowCell {
-  display: flex;
-  align-items: stretch;
-  text-align: start;
-  justify-content: flex-start;
-  // The 8px usually makes the height of the header cell 40px
-  padding: 8px $spacing-md;
-  // This is required as so the tooltip will display directly above the header cell
-  position: relative;
-}
-
-.headerRowCellNoWrap {
-  .headerRowCellLabel {
-    // It appears that this ellipsis is not showing 🤔
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-}
-
-.headerRowCellAlignCenter {
-  .headerRowCellLabelAndIcons {
-    text-align: center;
-    justify-content: center;
-  }
-}
-
-.headerRowCellAlignEnd {
-  .headerRowCellLabelAndIcons {
-    text-align: end;
-    justify-content: flex-end;
-  }
-}
-
-.headerRowCellCheckbox {
-  margin-right: 10px;
-}
-
-// The .headerRowCell wrapper is required to increase the specificity, as so
-// we can override the `Tooltip` component's styling.
-.headerRowCell .headerRowCellTooltip {
-  flex: 1 1 100%;
-  width: 100%;
-  display: flex;
-  align-items: stretch;
-}
-
-.headerRowCellButton {
-  @include button-reset;
-  composes: anchorReset;
-}
-
-.headerRowCellButton,
-.headerRowCellNoButton {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
-  box-sizing: border-box;
-}
-
-.headerRowCellLabelAndIcons {
-  display: flex;
-  align-items: center;
-  flex: 1 1 100%;
-  width: 100%;
-}
-
-.headerRowCellTooltipIcon {
-  color: $color-blue-500;
-  margin-right: $spacing-xs;
-}
-
-.headerRowCellIcon {
-  color: rgba($color-purple-800-rgb, 0.7);
-  height: 20px;
-
-  .headerRowCellActive & {
-    color: $color-purple-800;
-  }
-}
-
-.card {
-  @include button-reset;
-  background: $color-white;
-  border: solid 1px rgba($color-purple-700-rgb, 0.1);
-  transition: box-shadow $animation-duration-rapid,
-    border-color $animation-duration-rapid, margin $animation-duration-rapid,
-    padding $animation-duration-rapid, width $animation-duration-rapid;
-
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0px 4px 6px rgba(53, 55, 74, 0.04);
-
-  // These css properties are required for when the rows are anchor elements
-  composes: anchorReset;
-
-  &:not(:first-child) {
-    margin-top: -1px;
-  }
-
-  &:last-child {
-    border-bottom-left-radius: $border-solid-border-radius;
-    border-bottom-right-radius: $border-solid-border-radius;
-  }
-
-  &:hover {
-    will-change: box-shadow, border-color, margin, padding, width;
-  }
-
-  &.well {
-    margin-top: $spacing-sm;
-  }
-}
-
-// target the first child card when there is a heading present
-[role="rowgroup"] + .card {
-  border-top-left-radius: $border-solid-border-radius;
-  border-top-right-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-}
-
-.card:first-child {
-  border-top-left-radius: $border-solid-border-radius;
-  border-top-right-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-}
-
-.row {
-  display: flex;
-}
-
-.well {
-  border-color: $border-borderless-border-color;
-  box-shadow: none;
-  border-radius: $border-solid-border-radius;
-  background-color: $color-gray-300;
-  margin-bottom: $spacing-sm;
-}
-
-.popout {
-  box-shadow: $shadow-large-box-shadow;
-}
-
-.expanded {
-  position: relative;
-  z-index: 1;
-  margin-left: calc(#{$spacing-sm} * -1);
-  margin-right: calc(#{$spacing-sm} * -1);
-  padding-left: $spacing-sm;
-  padding-right: $spacing-sm;
-}
-
-.hasHoverState {
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-
-  &.expanded {
-    width: calc(100% + #{$spacing-md});
-  }
-
-  &:focus,
-  &:hover {
-    background-color: $color-gray-100;
-  }
-}
-
-.rowCell {
-  min-height: $row-height;
-  padding: 0 $spacing-md;
-  display: flex;
-  align-items: center;
-  // These css properties are required for when the cells are anchor elements
-  composes: anchorReset;
-
-  .defaultSpacing & {
-    padding: $spacing-sm $spacing-md;
-  }
-
-  .dataVariant & {
-    min-height: $row-height-data-variant;
-  }
-}
-
-.rowCellAlignCenter {
-  justify-content: center;
-  text-align: center;
-}
-
-.rowCellAlignEnd {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.headerRowCellIconAlignCenter,
-.headerRowCellIconAlignEnd {
-  //makes sure the label doesn't move on hover when not left aligned
-  margin-right: -20px;
-}