@crystallize/design-system 1.20.1 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.21.0
+
+### Minor Changes
+
+- 32f87dc: The design system was exporting event common tailwind classes, which was causing issues when the css is imported. To fix is now we export only custom classes and remove all tailwind classes from the component files. Also storybook is no longer using tailwind when needs some styles but rather we use inline css.
+
 ## 1.20.1
 
 ### Patch Changes

package/dist/index.css

@@ -423,460 +423,9 @@
   --c-color-elevate: var(--c-color-purple-50-900);
   --c-color-overlay: 0 0 0 ;
 }
-body {
-  font-family:
-    Roboto,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  color: rgb(var(--c-color-gray));
-}
-input,
-textarea,
-button {
-  font-family:
-    Roboto,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  color: rgb(var(--c-color-gray));
-}
-.-translate-y-1\/3,
-.translate-x-1\/3,
-.transform,
-.active\:scale-95 {
-  --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 ;
-}
-.shadow-md {
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000 ;
-}
-.filter {
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-}
-.container {
-  width: 100%;
-}
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-.absolute {
-  position: absolute;
-}
-.relative {
-  position: relative;
-}
-.left-2 {
-  left: 0.5rem;
-}
-.right-0 {
-  right: 0px;
-}
-.right-2 {
-  right: 0.5rem;
-}
-.top-0 {
-  top: 0px;
-}
-.top-2 {
-  top: 0.5rem;
-}
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-.mb-9 {
-  margin-bottom: 2.25rem;
-}
-.mt-2 {
-  margin-top: 0.5rem;
-}
-.mt-4 {
-  margin-top: 1rem;
-}
-.mt-8 {
-  margin-top: 2rem;
-}
 .block {
   display: block;
 }
-.inline-block {
-  display: inline-block;
-}
-.inline {
-  display: inline;
-}
-.flex {
-  display: flex;
-}
-.table {
-  display: table;
-}
-.table-cell {
-  display: table-cell;
-}
-.table-row {
-  display: table-row;
-}
-.grid {
-  display: grid;
-}
-.list-item {
-  display: list-item;
-}
-.hidden {
-  display: none;
-}
-.h-24 {
-  height: 6rem;
-}
-.h-36 {
-  height: 9rem;
-}
-.h-6 {
-  height: 1.5rem;
-}
-.h-\[44px\] {
-  height: 44px;
-}
-.h-\[8px\] {
-  height: 8px;
-}
-.w-1\/2 {
-  width: 50%;
-}
-.w-1\/4 {
-  width: 25%;
-}
-.w-36 {
-  width: 9rem;
-}
-.w-6 {
-  width: 1.5rem;
-}
-.w-\[44px\] {
-  width: 44px;
-}
-.w-\[8px\] {
-  width: 8px;
-}
-.w-full {
-  width: 100%;
-}
-.min-w-\[44px\] {
-  min-width: 44px;
-}
-.max-w-\[1100px\] {
-  max-width: 1100px;
-}
-.max-w-xs {
-  max-width: 20rem;
-}
-.flex-1 {
-  flex: 1 1 0%;
-}
-.-translate-y-1\/3 {
-  --tw-translate-y: -33.333333%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.translate-x-1\/3 {
-  --tw-translate-x: 33.333333%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-.resize {
-  resize: both;
-}
-.grid-cols-10 {
-  grid-template-columns: repeat(10, minmax(0, 1fr));
-}
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.items-start {
-  align-items: flex-start;
-}
-.items-center {
-  align-items: center;
-}
-.justify-start {
-  justify-content: flex-start;
-}
-.justify-end {
-  justify-content: flex-end;
-}
-.justify-center {
-  justify-content: center;
-}
-.justify-between {
-  justify-content: space-between;
-}
-.justify-items-center {
-  justify-items: center;
-}
-.gap-2 {
-  gap: 0.5rem;
-}
-.gap-4 {
-  gap: 1rem;
-}
-.gap-6 {
-  gap: 1.5rem;
-}
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-}
-.self-end {
-  align-self: flex-end;
-}
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-.rounded {
-  border-radius: 0.25rem;
-}
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-.rounded-md {
-  border-radius: 0.375rem;
-}
-.border {
-  border-width: 1px;
-}
-.border-solid {
-  border-style: solid;
-}
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-.bg-elevate {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
-}
-.bg-gray {
-  background-color: rgb(var(--c-color-gray));
-}
-.bg-gray-50-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
-}
-.bg-\[length\:18px_18px\] {
-  background-size: 18px 18px;
-}
-.bg-center {
-  background-position: center;
-}
-.bg-no-repeat {
-  background-repeat: no-repeat;
-}
-.p-10 {
-  padding: 2.5rem;
-}
-.p-2 {
-  padding: 0.5rem;
-}
-.p-4 {
-  padding: 1rem;
-}
-.p-\[5px\] {
-  padding: 5px;
-}
-.px-14 {
-  padding-left: 3.5rem;
-  padding-right: 3.5rem;
-}
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-.pt-14 {
-  padding-top: 3.5rem;
-}
-.text-center {
-  text-align: center;
-}
-.font-sans {
-  font-family:
-    Roboto,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-}
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.italic {
-  font-style: italic;
-}
-.leading-6 {
-  line-height: 1.5rem;
-}
-.leading-\[0\] {
-  line-height: 0;
-}
-.text-gray {
-  color: rgb(var(--c-color-gray));
-}
-.text-gray-800-100 {
-  --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
-}
-.underline {
-  text-decoration-line: underline;
-}
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-.active\:scale-95:active {
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 
 /* src/button/button.css */
 .c-btn {
@@ -1156,6 +705,17 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
 }
+.c-action-menu__trigger-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .c-action-menu-xs {
   height: 1.5rem;
   width: 1.5rem;
@@ -1502,6 +1062,18 @@ button {
   z-index: 100;
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }
+.c-dialog-icon-wrapper {
+  display: flex;
+  height: 44px;
+  width: 44px;
+  min-width: 44px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  padding: 5px;
+}
 .c-dialog-icon {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1560,6 +1132,13 @@ button {
   gap: 1.5rem;
   padding-left: 1.5rem;
 }
+.c-dialog-content__buttons {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+}
 
 /* src/icon-button/icon-button.css */
 .c-icon-button {
@@ -1815,7 +1394,6 @@ button {
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 500;
-  font-style: italic;
   line-height: 1;
   --tw-shadow: hsl(206 22% 7%/15%) 0px 10px 18px -10px, hsl(206 22% 7%/10%) 0px 2px 20px -15px;
   --tw-shadow-colored: 0px 10px 18px -10px var(--tw-shadow-color), 0px 2px 20px -15px var(--tw-shadow-color);
@@ -1837,6 +1415,7 @@ button {
     backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
+  font-style: italic;
 }
 .c-tooltip-success {
   border-width: 1px;
@@ -1904,7 +1483,6 @@ button {
 .c-progress-indicator {
   height: 100%;
   width: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-cyan-300-600) / var(--tw-bg-opacity));
   transition-duration: 500ms;
@@ -2001,9 +1579,9 @@ button {
   line-height: 1.75rem;
 }
 .c-select-value {
-  font-style: italic;
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  font-style: italic;
 }
 .c-select-content {
   overflow: hidden;
@@ -2116,6 +1694,29 @@ button {
   outline-offset: 2px;
 }
 
+/* src/stack-icon/stack-icon.css */
+.c-stack-icon {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+}
+.c-stack-icon__icon {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  transform: translate(33.33%, -33.33%);
+}
+
 /* src/tag/tag.css */
 .c-tag {
   display: inline-grid;
@@ -2145,6 +1746,17 @@ button {
   padding: 0px;
   font-size: 0;
 }
+.c-tag__remove-button-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .c-tag-default {
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
@@ -2190,7 +1802,7 @@ button {
   line-height: 1.75rem;
 }
 
-/* src/rich-text-editor/rich-text-editor-icons.css */
+/* src/rich-text-editor/rich-text-editor.css */
 .c-rte-icon-plus {
   background-image: url(./plus-CQISIKEC.svg);
 }
@@ -2351,8 +1963,6 @@ button {
 .c-rte-icon-prettier-error {
   background-image: url(./prettier-error-DYJSLYDP.svg);
 }
-
-/* src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css */
 .c-rte-code-action-menu-container {
   height: 37px;
   position: absolute;
@@ -2415,8 +2025,6 @@ button {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
 }
-
-/* src/rich-text-editor/plugins/DraggableBlockPlugin/index.css */
 .c-rte-draggable-block-menu {
   border-radius: 4px;
   padding: 2px 1px;
@@ -2449,16 +2057,12 @@ button {
   opacity: 0;
   will-change: transform;
 }
-
-/* src/rich-text-editor/plugins/TableActionMenuPlugin/index.css */
 .c-rte-table-cell-action-button-container {
   position: absolute;
   top: 0;
   left: 0;
   will-change: transform;
 }
-
-/* src/rich-text-editor/plugins/ToolbarPlugin/index.css */
 .c-rte-toolbar {
   display: flex;
   height: 3rem;
@@ -2516,6 +2120,15 @@ button {
 .c-rte-toolbar__block-format__text.selected {
   font-weight: 700;
 }
+.c-rte-toolbar__block-format__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  background-size: 18px 18px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
 .c-rte-toolbar__toggle-icon {
   height: 1.5rem;
   width: 1.5rem;
@@ -2648,7 +2261,6 @@ button {
   justify-content: space-between;
 }
 .c-rte-insert-table__dimensions {
-  display: grid;
   grid-template-columns: 1fr 1px 1fr;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -2661,6 +2273,7 @@ button {
     var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
+  display: grid;
 }
 .c-rte-insert-table__dimensions__separator {
   height: 100%;
@@ -2677,8 +2290,6 @@ button {
     display: none;
   }
 }
-
-/* src/rich-text-editor/rich-text-editor.css */
 .c-rich-text-editor {
   margin: 0px auto;
   position: relative;
@@ -2835,9 +2446,9 @@ button {
   white-space: nowrap;
   font-size: 14px;
   font-weight: 400;
-  font-style: italic;
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
+  font-style: italic;
 }
 @keyframes CursorBlink {
   to {
@@ -3314,10 +2925,10 @@ button {
 }
 .CrystallizeRTEditorTheme__code {
   position: relative;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
   margin-left: 0px;
   margin-right: 0px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   display: block;
   overflow-x: auto;
   border-radius: 0.375rem;
@@ -3341,8 +2952,8 @@ button {
 }
 .CrystallizeRTEditorTheme__code:before {
   position: absolute;
-  top: 0px;
   left: 0px;
+  top: 0px;
   border-width: 0px;
   border-right-width: 1px;
   border-style: solid;
@@ -3581,10 +3192,10 @@ button {
   list-style-position: inside;
 }
 .CrystallizeRTEditorTheme__listItem {
-  margin-top: 0px;
-  margin-bottom: 0px;
   margin-left: 1.25rem;
   margin-right: 1.25rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));