@livechat/platform-workflows 0.1.8 → 0.44.0-beta.v1

package/dist/index.css

@@ -1,13 +1,10 @@
-/* src/views/Workflows/Creator/Builder/Forms/Schema/overrides/Fields/CustomTags/TagsInput/Input.css */
+/* src/views/Workflows/Creator/Forms/Common/SchemaForm/overrides/Widgets/CustomInput/TagsInput/Tags/Tags.css */
 .tagify-tooltip-trigger {
   position: relative;
   width: 100%;
 }
-.tags-input {
-  width: 100%;
-}
 .tagify.customLook {
-  --tags-disabled-bg: var(--surface-primary-disabled);
+  --tags-disabled-bg: var(--surface-basic-disabled);
   --tags-border-color: var(--border-basic-primary);
   --tags-hover-border-color: var(--border-basic-hover);
   --tags-focus-border-color: var(--action-primary-default);
@@ -16,9 +13,10 @@
   --tag-hover: var(--surface-tertiary-hover);
   --tag-text-color: var(--content-basic-primary);
   --tag-text-color--edit: var(--content-basic-primary);
-  --tag-pad: 0.2em 0.4em 0.2em 0.8em;
+  --tag-pad: 0.2em 0.4em 0.2em 0.4em;
   --tag-inset-shadow-size: 1.1em;
   --tag-invalid-color: var(--content-basic-negative);
+  --tag-warning-color: var(--content-basic-warning);
   --tag-invalid-bg: var(--surface-accent-emphasis-low-negative);
   --tag--min-width: 1ch;
   --tag--max-width: 100%;
@@ -29,11 +27,23 @@
   --tag-remove-btn-bg--hover: var(--action-negative-default);
   --input-color: inherit;
   --placeholder-color: var(--content-basic-disabled);
-  --placeholder-color-focus: rgba(0, 0, 0, 0.25);
+  --placeholder-color-focus: var(--content-basic-disabled);
   --loader-size: 0.8em;
   --readonly-striped: 1;
   border-radius: var(--radius-3);
-  min-height: 36px;
+  background: var(--surface-primary-default);
+  overflow: hidden;
+}
+.tagify.customLook[disabled] {
+  pointer-events: all;
+  opacity: 1 !important;
+  filter: none;
+  --tags-border-color: var(--border-basic-disabled) !important;
+  --input-color: var(--content-basic-disabled);
+  --tag-text-color: var(--content-basic-disabled);
+  tag {
+    filter: saturate(0);
+  }
 }
 .tagify--focus {
   --tags-border-color: var(--tags-focus-border-color) !important;
@@ -42,27 +52,45 @@
   --tags-border-color: var(--action-negative-default) !important;
 }
 .tagify__input {
-  padding: 4px 12px !important;
-  line-height: 26px !important;
+  min-height: 30px;
+  padding: var(--spacing-1) var(--spacing-8) var(--spacing-05) var(--spacing-3) !important;
+  line-height: 22px !important;
+  overflow: auto;
+}
+.tagify--multiline .tagify__input {
+  align-items: flex-start;
+  min-height: 100px !important;
+  max-height: 160px;
+  overflow-y: auto;
+  scrollbar-width: none;
 }
 .tagify__tag {
   margin: 2px 1px !important;
 }
-.tagify__tag__content {
+.tagify.customLook .tagify__tag {
+  max-width: calc(100% - 40px);
+}
+.tagify.customLook .tagify__tag__content {
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
+}
+.tagify.customLook .tagify__tag-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .tagify__tag__content__icon {
-  line-height: 0px;
-  min-width: 0 !important;
-  display: none !important;
+  line-height: 0;
+  width: 16px;
+  min-width: 16px;
+  flex: 0 0 16px;
+  visibility: hidden;
 }
 .tagify__tag__content__icon.visible {
-  display: block !important;
-}
-.tagify.customLook[disabled] {
-  opacity: 1 !important;
+  visibility: visible;
 }
 .tagify__tag.tagify--notAllowed div > span {
   --tag-text-color: var(--tag-invalid-color) !important;
@@ -70,68 +98,31 @@
   opacity: 1 !important;
 }
 
-/* src/views/Workflows/Creator/Builder/Forms/Schema/Form.css */
+/* src/views/Workflows/Creator/Forms/Common/SchemaForm/Form.css */
 .rjsf #root {
-  border: none;
-  padding: 0;
+  padding: 0px;
   margin: 0;
-}
-.rjsf .field:not(:first-of-type) {
-  margin-top: var(--spacing-5);
-}
-.rjsf .field.additional {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
+  border: none;
 }
 .rjsf fieldset {
-  min-width: 0;
-}
-.rjsf fieldset fieldset {
-  border: solid 0.5px var(--surface-tertiary-default);
-  border-radius: var(--radius-3);
-  background-color: var(--surface-secondary-default);
-}
-.rjsf fieldset fieldset fieldset {
-  background-color: var(--surface-tertiary-default);
-}
-.rjsf .array-item-list {
-  margin-bottom: var(--spacing-2);
+  border: 1px solid var(--border-basic-secondary);
+  border-radius: 8px;
+  min-width: auto;
+  max-width: 100%;
+  margin-inline: 0;
 }
 .rjsf .array-item {
-  display: flex;
+  max-width: 100%;
+  & > div:has(+ div > button) {
+    max-width: calc(100% - 24px);
+  }
 }
-.rjsf .array-item > div {
-  flex: 1;
-}
-.rjsf .array-item div.array-item-toolbox {
-  flex: 0;
-  align-self: flex-end;
-  justify-self: flex-end;
-  margin-bottom: var(--spacing-3);
-}
-.array-item:has(div > .field.has-error) .array-item-toolbox .btn-group {
-  margin-bottom: var(--spacing-6);
-}
-
-/* src/views/Workflows/Creator/Builder/Handles/CustomAdd/Handle.css */
-.react-flow__handle {
-  border-radius: 0;
-  width: 14px !important;
-  height: 14px !important;
-  background: transparent !important;
+.rjsf .no-fieldset-border > div > div > div > div > fieldset {
   border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
-.react-flow__handle svg {
-  opacity: 0;
-  width: 12px;
-  height: 12px;
-}
-
-/* src/views/Workflows/Creator/Builder/Diagram.css */
-.react-flow__edge-textbg {
-  fill: var(--surface-tertiary-default) !important;
-}
-.react-flow__edge-text {
-  fill: var(--content-basic-primary);
+.rjsf .rjsf-field {
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
 }