@kaizen/components 1.4.22-canary.4 → 1.4.22-canary.6

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { a as KaizenProvider, K as KaizenProviderProps } from './KaizenProvider-
 export { T as ThemeContext, a as ThemeProvider, u as useTheme } from './ThemeProvider-7786826c.js';
 export { ThemeManager } from './KaizenProvider/ThemeProvider/ThemeManager.js';
 export { defaultTheme } from './KaizenProvider/ThemeProvider/themes/index.js';
-export * from '@kaizen/a11y';
 export { default as heartTheme } from './KaizenProvider/ThemeProvider/themes/heart.js';
 export { CSSVariableTheme, DeepMapObjectLeafs, Theme, ThemeKey, TypographyFont } from './KaizenProvider/ThemeProvider/themes/types.js';
 import 'react';

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 var _chunk7ZAJ7755js = require('./chunk-7ZAJ7755.js');
 
@@ -17,9 +17,6 @@ var _chunkJ42JQYBYjs = require('./chunk-J42JQYBY.js');
 
 var _chunk7T4E5A7Mjs = require('./chunk-7T4E5A7M.js');
 
-// src/index.ts
-var _a11y = require('@kaizen/a11y'); _createStarExport(_a11y);
-
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.4.22-canary.4+ddaa33e53",
+  "version": "1.4.22-canary.6+daa1f711e",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -28,55 +28,12 @@
   },
   "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
   "dependencies": {
-    "@kaizen/a11y": "^1.7.1",
-    "@kaizen/brand": "^1.5.4",
-    "@kaizen/brand-moment": "^1.12.66",
-    "@kaizen/button": "^2.0.22",
-    "@kaizen/component-base": "^1.1.3",
-    "@kaizen/component-library": "^16.4.1",
-    "@kaizen/date-picker": "^5.19.3",
-    "@kaizen/design-tokens": "^10.3.2-canary.40+ddaa33e53",
-    "@kaizen/draft-avatar": "^2.8.28",
-    "@kaizen/draft-badge": "^1.13.6",
-    "@kaizen/draft-card": "^3.2.6",
-    "@kaizen/draft-collapsible": "^3.5.21",
-    "@kaizen/draft-divider": "^2.2.6",
-    "@kaizen/draft-empty-state": "^5.3.28",
-    "@kaizen/draft-filter-menu-button": "^2.6.34",
-    "@kaizen/draft-form": "^10.3.2",
-    "@kaizen/draft-guidance-block": "^6.1.17",
-    "@kaizen/draft-hero-card": "^2.2.15",
-    "@kaizen/draft-illustration": "^6.0.19",
-    "@kaizen/draft-likert-scale-legacy": "^1.10.42",
-    "@kaizen/draft-menu": "^4.8.33",
-    "@kaizen/draft-modal": "^10.6.3",
-    "@kaizen/draft-page-layout": "^2.3.7",
-    "@kaizen/draft-popover": "^5.3.2",
-    "@kaizen/draft-select": "^2.10.23",
-    "@kaizen/draft-table": "^5.6.18",
-    "@kaizen/draft-tabs": "^5.2.28",
-    "@kaizen/draft-tag": "^3.4.2",
-    "@kaizen/draft-tile": "^5.9.28",
-    "@kaizen/draft-title-block-zen": "^7.9.8",
-    "@kaizen/draft-tooltip": "^5.4.30",
-    "@kaizen/draft-well": "^4.3.3",
-    "@kaizen/hosted-assets": "^2.0.1",
-    "@kaizen/loading-skeleton": "^2.0.2",
-    "@kaizen/loading-spinner": "^2.3.6",
-    "@kaizen/notification": "^1.4.2",
-    "@kaizen/pagination": "^1.6.28",
-    "@kaizen/progress-bar": "^2.3.21",
-    "@kaizen/responsive": "^1.8.5",
-    "@kaizen/rich-text-editor": "^1.19.32",
-    "@kaizen/select": "^6.13.9",
-    "@kaizen/split-button": "^1.3.35",
-    "@kaizen/tabs": "^1.5.32",
-    "@kaizen/tailwind": "^0.5.2-canary.40+ddaa33e53",
-    "@kaizen/typography": "^2.3.6",
+    "@kaizen/design-tokens": "^10.3.1",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
     "@deanc/esbuild-plugin-postcss": "^1.0.2",
+    "@kaizen/tailwind": "^0.5.1",
     "autoprefixer": "^10.4.13",
     "tailwindcss": "^3.2.7",
     "tiny-glob": "^0.2.9",
@@ -85,5 +42,5 @@
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "ddaa33e53006e5debe849ec0411e1ea0ef3ef19a"
+  "gitHead": "daa1f711ea6b1a7cca89aa43fd93e7c53720c2ed"
 }

package/dist/iife/Icon.module-VD7NKLAR.scss

@@ -1,72 +0,0 @@
-@import "~@kaizen/design-tokens/sass/animation";
-@import "./styles";
-
-.icon {
-  @extend %caIcon;
-
-  // Set sensible defaults for icon colours when
-  // windows high-contrast mode is enabled. These
-  // should be overridden by the consumer when the
-  // icon colour conveys information, such as mood.
-  @media screen and (-ms-high-contrast: active) {
-    color: black;
-  }
-
-  @media screen and (-ms-high-contrast: white-on-black) {
-    color: white;
-  }
-
-  @media screen and (-ms-high-contrast: black-on-white) {
-    color: black;
-  }
-}
-
-.inheritSize {
-  @extend %caIconInheritSize;
-}
-
-.interactiveIconWrapper {
-  cursor: pointer;
-  .icon {
-    opacity: 0.7;
-    transition: $animation-duration-fast opacity;
-  }
-  &:disabled,
-  &.disabled {
-    .icon {
-      opacity: 0.3;
-    }
-  }
-  &:not(:disabled):not(.disabled) {
-    &:hover,
-    &:focus,
-    &.hover {
-      .icon {
-        opacity: 1;
-      }
-    }
-    &:active,
-    &.active {
-      .icon {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-// On dark backgrounds, icons are fully opaque by default and half opacity when active.
-// Hover and disabled states are the same.
-.reversedInteractiveIconWrapper {
-  composes: interactiveIconWrapper;
-  .icon {
-    opacity: 1;
-  }
-  &:not(:disabled, .disabled) {
-    &:active,
-    &.active {
-      .icon {
-        opacity: 0.5;
-      }
-    }
-  }
-}

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/VisuallyHidden.module-E5JUNEF5.scss

@@ -1,9 +0,0 @@
-.srOnly:not(:focus):not(:active) {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}

package/dist/iife/skip.icon-4OAFSA2T.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
-    <title>skip</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="skip" fill="#000000">
-            <path d="M10,2 C14.42,2 18,5.58 18,10 C18,14.42 14.42,18 10,18 C5.58,18 2,14.42 2,10 C2,5.58 5.58,2 10,2 Z M6.8,12.9347656 L11.071582,9.86738281 L6.8,6.8 L6.8,12.9347656 Z M11.6,6.8 L11.6,12.9347656 L12.6050781,12.9347656 L12.6050781,6.8 L11.6,6.8 Z" id="Combined-Shape"></path>
-        </g>
-    </g>
-</svg>

package/dist/styles.css

@@ -1,98 +0,0 @@
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(1 104 179 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(1 104 179 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  
-}
-
-.bg-green-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(143 219 199 / var(--tw-bg-opacity))
-}