@zipify/wysiwyg 3.5.4-ai-prototype → 3.6.0-0

package/dist/wysiwyg.css

@@ -23,7 +23,7 @@
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
 
-.zw-button[data-v-562f4e4a] {
+.zw-button[data-v-ecf2f936] {
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
@@ -43,21 +43,21 @@
     transition: 0.1s opacity ease-out;
     will-change: opacity;
 }
-.zw-button[data-v-562f4e4a]::-moz-focus-inner {
+.zw-button[data-v-ecf2f936]::-moz-focus-inner {
     border: 0 !important;
 }
-.zw-button[data-v-562f4e4a]:hover,
-.zw-button[data-v-562f4e4a]:focus {
+.zw-button[data-v-ecf2f936]:hover,
+.zw-button[data-v-ecf2f936]:focus {
     text-decoration: none;
     outline: none;
 }
-.zw-button[data-v-562f4e4a]:disabled {
+.zw-button[data-v-ecf2f936]:disabled {
     user-select: none;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.35;
 }
-.zw-button--toolbar[data-v-562f4e4a] {
+.zw-button--toolbar[data-v-ecf2f936] {
     border-radius: 1px;
     min-height: 28px;
     font-weight: var(--zw-font-weight-semibold);
@@ -67,32 +67,41 @@
     transition-property: background-color, color, opacity;
     will-change: background-color, color, opacity;
 }
-.zw-button--primary[data-v-562f4e4a] {
+.zw-button--primary[data-v-ecf2f936] {
     background-color: rgb(var(--zw-color-green));
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     line-height: var(--zw-line-height-md);
 }
-.zw-button--primary[data-v-562f4e4a],
-.zw-button--secondary[data-v-562f4e4a] {
+.zw-button--primary[data-v-ecf2f936],
+.zw-button--secondary[data-v-ecf2f936] {
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     font-weight: 600;
     font-size: var(--zw-font-size-xs);
 }
-.zw-button--primary[data-v-562f4e4a]:not(:disabled):hover,
-.zw-button--secondary[data-v-562f4e4a]:not(:disabled):hover {
+.zw-button--primary[data-v-ecf2f936]:not(:disabled):hover,
+.zw-button--secondary[data-v-ecf2f936]:not(:disabled):hover {
     opacity: 0.9;
 }
-.zw-button--toolbar[data-v-562f4e4a]:not(.zw-button--icon) {
+.zw-button--toolbar[data-v-ecf2f936]:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
-.zw-button--toolbar[data-v-562f4e4a]:not(:disabled):hover,
-.zw-button--toolbar[data-v-562f4e4a]:not(:disabled):focus,
-.zw-button--toolbar.zw-button--active[data-v-562f4e4a]:not(:disabled) {
+.zw-button--toolbar[data-v-ecf2f936]:not(:disabled):hover,
+.zw-button--toolbar[data-v-ecf2f936]:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active[data-v-ecf2f936]:not(:disabled) {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
+.zw-button__customized-indicator[data-v-ecf2f936] {
+    width: 4px;
+    height: 4px;
+    background-color: rgb(var(--zw-color-y300));
+    border-radius: 50%;
+    position: absolute;
+    top: 3px;
+    right: 3px;
+}
 
 .zw-button-toggle[data-v-a02f12aa] {
     display: flex;
@@ -409,45 +418,6 @@
     color: rgb(var(--zw-color-red));
 }
 
-.zw-field[data-v-11f4bb7a] {
-    display: flex;
-    flex-direction: column;
-}
-.zw-field__input[data-v-11f4bb7a] {
-    --border-color: rgb(var(--zw-color-n60));
-    --text-color: rgb(var(--zw-color-n85));
-
-    border: 1px solid var(--border-color);
-    background-color: transparent;
-    color: var(--text-color);
-    font-size: var(--zw-font-size-xxs);
-    outline: none;
-    padding: 6px;
-    line-height: var(--zw-line-height-xxs);
-    transition: 0.1s border ease-out, 0.1s color ease-out;
-    will-change: border, color;
-}
-.zw-field__input[data-v-11f4bb7a]:hover {
-    --border-color: rgb(var(--zw-color-n80));
-    --text-color: rgb(var(--zw-color-n85));
-}
-.zw-field__input[data-v-11f4bb7a]:focus,
-.zw-field__input[data-v-11f4bb7a]:focus-within {
-    --border-color: rgb(var(--zw-color-white));
-    --text-color: rgb(var(--zw-color-white));
-}
-.zw-field__label[data-v-11f4bb7a] {
-    display: inline-block;
-    font-size: var(--zw-font-size-xxs);
-    padding-bottom: var(--zw-offset-xxs);
-    line-height: var(--zw-line-height-xxs);
-}
-.zw-field__label--error[data-v-11f4bb7a] {
-    font-size: var(--zw-font-size-xxs);
-    margin: var(--zw-offset-xxs) 0 0;
-    color: rgb(var(--zw-color-red));
-}
-
 .zw-checkbox[data-v-c9d1da12] {
     display: inline-flex;
     align-items: center;
@@ -495,23 +465,31 @@
     font-size: var(--zw-font-size-xs);
 }
 
-.zw-dropdown__activator[data-v-bb5c4efe] {
+.zw-dropdown__activator[data-v-90a571d8] {
     width: 100%;
 }
-.zw-dropdown__activator-title[data-v-bb5c4efe] {
+.zw-dropdown__activator-title[data-v-90a571d8] {
     margin-right: var(--zw-offset-xxs);
 }
-.zw-dropdown__activator-arrow[data-v-bb5c4efe] {
+.zw-dropdown__activator-arrow[data-v-90a571d8] {
     margin-left: auto;
 }
-.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-bb5c4efe] {
+.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-90a571d8] {
     transform: rotateX(180deg);
 }
-.zw-dropdown__activator--gray[data-v-bb5c4efe] {
+.zw-dropdown__activator--gray[data-v-90a571d8] {
     background-color: rgb(var(--zw-color-n20));
     font-size: var(--zw-font-size-xxs);
     color: rgb(var(--zw-color-white));
 }
+.zw-dropdown__customized-indicator[data-v-90a571d8] {
+    position: relative;
+    top: calc(0px - var(--zw-offset-xs));
+    min-width: 4px;
+    height: 4px;
+    background-color: rgb(var(--zw-color-y300));
+    border-radius: 50%;
+}
 
 .zw-dropdown__option[data-v-1355d08c] {
     width: 100%;
@@ -559,61 +537,39 @@
     padding-bottom: var(--zw-offset-xs);
 }
 
-.zw-dropdown[data-v-885109ea] {
+.zw-dropdown[data-v-29e6a104] {
     position: relative;
     font-size: var(--zw-font-size-xs);
     line-height: var(--zw-line-height-xxs);
 }
 
-.zw-style-preset-control[data-v-a1013442] {
-    display: flex;
-    align-items: center;
-}
-.zw-style-preset-control__dropdown[data-v-a1013442] {
-    width: 120px;
-}
-.zw-style-preset-control__reset[data-v-a1013442] {
-    color: rgb(var(--zw-color-n70));
-    background-color: rgb(var(--zw-color-n20));
-}
-.zw-style-preset-control__reset[data-v-a1013442]:disabled {
-    background-color: transparent;
-}
-.zw-style-preset-control__reset[data-v-a1013442]:not(:disabled):hover,
-.zw-style-preset-control__reset[data-v-a1013442]:not(:disabled):focus,
-.zw-style-preset-control__reset[data-v-a1013442]:not(:disabled):focus-within {
-    color: rgb(var(--zw-color-white));
-    background-color: rgb(var(--zw-color-n30));
-}
-
-.zw-font-family-control[data-v-70087590] {
+.zw-font-family-control[data-v-31c5d1bb] {
     width: 96px;
 }
-.zw-font-family-control__option[data-v-70087590] {
+.zw-font-family-control__option[data-v-31c5d1bb] {
     font-weight: 400;
     font-family: var(--zw-font-family-option);
-    width: 150px;
 }
 
-.zw-font-weight-control[data-v-dbb38600] {
+.zw-font-weight-control[data-v-6d7f17c3] {
     width: 60px;
 }
 
-.zw-font-size-control[data-v-6b3c7f37] {
+.zw-font-size-control[data-v-9b69a79c] {
     width: 72px;
 }
 
-.zw-line-height-control__modal[data-v-1fcd599c] {
+.zw-line-height-control__modal[data-v-6dc500fa] {
     padding: var(--zw-offset-sm);
 }
-.zw-line-height-control__row[data-v-1fcd599c] {
+.zw-line-height-control__row[data-v-6dc500fa] {
     display: flex;
     align-items: center;
 }
-.zw-line-height-control__range[data-v-1fcd599c] {
+.zw-line-height-control__range[data-v-6dc500fa] {
     width: 156px;
 }
-.zw-line-height-control__field[data-v-1fcd599c] {
+.zw-line-height-control__field[data-v-6dc500fa] {
     width: 64px;
     margin-left: var(--zw-offset-sm);
 }
@@ -633,81 +589,6 @@
     display: flex;
 }
 
-.zw-link-modal-header[data-v-40738e23] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--zw-offset-sm);
-    border-bottom: 2px solid rgb(var(--zw-color-n5));
-}
-.zw-link-modal-header__title[data-v-40738e23] {
-    text-transform: uppercase;
-    font-weight: var(--zw-font-weight-semibold);
-    font-size: var(--zw-font-size-xxs);
-    color: rgb(var(--zw-color-white));
-}
-
-.zw-ai-component__suggestion[data-v-6652f513] {
-    font-size: 14px;
-    margin-bottom: 8px;
-    padding: 16px 8px;
-    color: #CDD1DC;
-    border-radius: 2px;
-}
-.zw-ai-component-suggestion__request[data-v-6652f513] {
-    font-size: 12px;
-    color: #666;
-}
-.zw-ai-component-suggestion__button[data-v-6652f513] {
-    font-size: 14px;
-    padding: 4px 8px;
-    background-color: #A4A4A4;
-    color: #FFF;
-    border-radius: 2px;
-    margin-right: 8px;
-}
-.zw-ai-component-suggestion__button[data-v-6652f513]:hover {
-    opacity: 0.8;
-    background-color: #3AAA35;
-}
-
-.zw-selectors[data-v-869120f8] {
-    display: flex;
-}
-.zw-ai__dropdown[data-v-869120f8] {
-    width: 100%;
-}
-
-.zw-suggestion-modal[data-v-e7ed0c94] {
-    width: 500px;
-}
-.zw-link-modal__body[data-v-e7ed0c94] {
-    padding: var(--zw-offset-sm);
-}
-.zw-generated-text__suggestion[data-v-e7ed0c94] {
-    font-size: 14px;
-    color: #908E8E;
-}
-.zw-ai-component__send-button[data-v-e7ed0c94] {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 16px;
-}
-.zw-ai-component__icon[data-v-e7ed0c94] {
-    color: #CDD1DC;
-}
-.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-e7ed0c94] {
-    color: #878DA2;
-    transition: color 0.1s ease-in-out;
-}
-.zw-field__label[data-v-e7ed0c94] {
-    display: inline-block;
-    font-size: var(--zw-font-size-xxs);
-    padding-bottom: var(--zw-offset-xxs);
-    line-height: var(--zw-line-height-xxs);
-}
-
 .zw-link-modal-header[data-v-0a0c67c1] {
     display: flex;
     align-items: center;
@@ -753,7 +634,55 @@
     width: 234px;
 }
 
-.zw-toolbar[data-v-d18ac382] {
+.zw-style-preset-control__option[data-v-1c4b4f7e] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.zw-style-preset-control__color[data-v-1c4b4f7e] {
+    width: 10px;
+    height: 10px;
+    border: 1px solid rgba(var(--zw-color-black), 0.15);
+    border-radius: 14.71%;
+    background-color: var(--zw-color-option);
+}
+.zw-style-preset-control__size[data-v-1c4b4f7e] {
+    font-size: 10px;
+    color: rgb(var(--zw-color-n70));
+    margin-left: var(--zw-offset-sm);
+}
+.zw-style-preset-control__title[data-v-1c4b4f7e] {
+    width: 82px;
+    margin-left: var(--zw-offset-xs);
+    font-size: var(--zw-font-size-xxs);
+    font-family: var(--zw-font-family-option);
+    font-style: var(--zw-font-style-option);
+    font-weight: var(--zw-font-weight-option);
+    text-decoration: var(--zw-text-decoration-option);
+}
+
+.zw-style-preset-control[data-v-3f45f060] {
+    display: flex;
+    align-items: center;
+}
+.zw-style-preset-control__dropdown[data-v-3f45f060] {
+    width: 120px;
+}
+.zw-style-preset-control__reset[data-v-3f45f060] {
+    color: rgb(var(--zw-color-n70));
+    background-color: rgb(var(--zw-color-n20));
+}
+.zw-style-preset-control__reset[data-v-3f45f060]:disabled {
+    background-color: transparent;
+}
+.zw-style-preset-control__reset[data-v-3f45f060]:not(:disabled):hover,
+.zw-style-preset-control__reset[data-v-3f45f060]:not(:disabled):focus,
+.zw-style-preset-control__reset[data-v-3f45f060]:not(:disabled):focus-within {
+    color: rgb(var(--zw-color-white));
+    background-color: rgb(var(--zw-color-n30));
+}
+
+.zw-toolbar[data-v-09336b0a] {
     border: 1px solid rgba(var(--zw-color-white), 0.2);
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
@@ -762,8 +691,8 @@
     text-align: left;
     position: absolute;
 }
-.zw-toolbar[data-v-d18ac382]::before,
-.zw-toolbar[data-v-d18ac382]::after {
+.zw-toolbar[data-v-09336b0a]::before,
+.zw-toolbar[data-v-09336b0a]::after {
     content: "";
     display: block;
     width: 100%;
@@ -771,96 +700,23 @@
     position: absolute;
     --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
 }
-.zw-toolbar[data-v-d18ac382]::before {
+.zw-toolbar[data-v-09336b0a]::before {
     top: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar[data-v-d18ac382]::after {
+.zw-toolbar[data-v-09336b0a]::after {
     bottom: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar--enter-active[data-v-d18ac382],
-.zw-toolbar--leave-active[data-v-d18ac382] {
+.zw-toolbar--enter-active[data-v-09336b0a],
+.zw-toolbar--leave-active[data-v-09336b0a] {
     transition: opacity 150ms ease-out;
 }
-.zw-toolbar--leave-active[data-v-d18ac382] {
+.zw-toolbar--leave-active[data-v-09336b0a] {
     transition: opacity 0s ease-in;
 }
-.zw-toolbar--enter[data-v-d18ac382],
-.zw-toolbar--leave-to[data-v-d18ac382] {
+.zw-toolbar--enter[data-v-09336b0a],
+.zw-toolbar--leave-to[data-v-09336b0a] {
     opacity: 0;
 }
-
-.zw-ai-component__suggestion[data-v-6fbdb7d6] {
-    font-size: 14px;
-    margin-bottom: 8px;
-    padding: 16px 8px;
-    background-color: #FFF;
-    border: 0.5px solid #CDD1DC;
-    border-radius: 2px;
-}
-.zw-ai-component-suggestion__request[data-v-6fbdb7d6] {
-    font-size: 12px;
-    color: #666;
-}
-.zw-ai-component-suggestion__button[data-v-6fbdb7d6] {
-    font-size: 14px;
-    padding: 2px 4px;
-    background-color: #3AAA35;
-    color: #FFF;
-    border-radius: 2px;
-}
-.zw-ai-component-suggestion__button[data-v-6fbdb7d6]:hover {
-    opacity: 0.8;
-}
-
-.zw-floating-menu__button[data-v-62b796d5] {
-    padding: 2px;
-    background-color: rgba(255, 252, 252, 1);
-    border-radius: 50%;
-    box-shadow: 0 0 0 0 1px #878DA2;
-}
-.zw-link-modal[data-v-62b796d5] {
-    width: 450px;
-    background-color: #FCFCFC;
-    border-radius: 8px;
-    box-shadow: 0 0 0 0.5px #878DA2, 0 0 2px 0.5px rgba(135, 141, 162, 0.5), 0 1px 8px 0.5px rgba(135, 141, 162, 0.1), 0 2px 12px 0.5px rgba(135, 141, 162, 0.1), 0 4px 20 0.5px rgba(135, 141, 162, 0.25);
-}
-.zw-link-modal__body[data-v-62b796d5] {
-    padding: var(--zw-offset-sm);
-}
-.zw-link-form__body[data-v-62b796d5] {
-    overscroll-behavior: contain;
-    overflow: auto;
-    max-height: max(min(calc(1051.21px - calc(calc(3.5px * 16) + 47.9844px) - calc(0.25px * 16)), calc(34.75px * 16)), calc(10px * 16));
-}
-.zw-ai-component__selected-text[data-v-62b796d5] {
-    font-size: 14px;
-    margin-bottom: 8px;
-    padding: 16px 8px;
-    background-color: #FFF;
-    border: 0.5px solid #000;
-    border-radius: 2px;
-}
-.zw-ai-component__input[data-v-62b796d5] {
-    width: 100%;
-    min-height: 40px;
-    border: 1px solid #E9E9E9;
-    border-radius: 5px;
-    padding: 8px;
-    font-size: 14px;
-}
-.zw-ai-component__send-button[data-v-62b796d5] {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 16px;
-}
-.zw-ai-component__icon[data-v-62b796d5] {
-    color: #CDD1DC;
-}
-.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-62b796d5] {
-    color: #878DA2;
-    transition: color 0.1s ease-in-out;
-}
 .zw-wysiwyg {
     --zw-color-n5: 13, 13, 13;      /* #0D0D0D; */
     --zw-color-n15: 38, 38, 38;     /* #262626; */
@@ -872,6 +728,7 @@
     --zw-color-n85: 217, 217, 217;  /* #D9D9D9 */
     --zw-color-n90: 230, 230, 230;  /* #E6E6E6 */
     --zw-color-n200: 194, 200, 209;  /* #C2C8D1 */
+    --zw-color-y300: 255, 171, 0;  /* #FFAB00 */
     --zw-color-black: 0, 0, 0;
     --zw-color-white: 255, 255, 255;
     --zw-color-green: 59, 180, 74;   /* #3BB44A */
@@ -1043,6 +900,13 @@ to {
 .tippy-box[data-animation=fade][data-state=hidden] {
     opacity: 0
 }
+.zw-dropdown__default-option {
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-n70));
+    font-family: "Lato", sans-serif;
+    font-style: italic;
+    margin-left: var(--zw-offset-xxs);
+}
 .zw-text--truncate {
     white-space: nowrap;
     overflow: hidden;