npm - @edvak99/voice-receptionist-widget - Versions diffs - 1.1.26 → 1.1.29 - Mend

@edvak99/voice-receptionist-widget 1.1.26 → 1.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1321) hide show

package/src/assets/css/custom-elements.scss CHANGED Viewed

@@ -1,742 +1,742 @@
-ed-overlay {
-    position: fixed;
-    // left: 0;
-    // top: 0;
-    // width: 100%;
-    // height: 100%;
-    inset: 0;
-    z-index: 9997;
-    background-color: #00000013;
-    transition: opacity 0.5s;
-}
-ed-overlay.open {
-    display: block;
-    opacity: 1;
-    visibility: visible;
-}
-ed-overlay.close {
-    display: none;
-    opacity: 0;
-    visibility: hidden;
-}
-ed-modal {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    // right: 0;
-    height: 100%;
-    // background-color: white;
-    transform: translateX(100vw);
-    z-index: 9998;
-    // box-shadow: -3px 1em 5px #9fa0a09e;
-    // background: white;
-}
-ed-modal-inner {
-    position: fixed;
-    top: 10px;
-    // left: 0;
-    right: 0px;
-    height: 100%;
-    // background-color: white;
-    z-index: 9997;
-    box-shadow: -3px 1em 5px #9fa0a09e;
-    transition: all 300ms ease;
-}
-ed-chips {
-    display: flex;
-    align-items: center;
-}
-ed-col {
-    display: flex;
-    flex-direction: column;
-}
-ed-row {
-    display: flex;
-    // align-items: center;
-}
-ed-form-row {
-    display: flex;
-    align-items: center;
-    min-height: 36px;
-}
-ed-form-row[direction="col"] {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    // DIRECT CHILD WILL GET 100% WIDTH
-    >* {
-        width: 100%;
-    }
-}
-ed-error {}
-ed-hover-scale {
-    display: inline-block;
-    vertical-align: middle;
-    transform: translateZ(0);
-    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-    backface-visibility: hidden;
-    -moz-osx-font-smoothing: grayscale;
-    transition-duration: 0.3s;
-    transition-property: transform;
-}
-ed-hover-scale:hover,
-ed-hover-scale:focus,
-ed-hover-scale:active {
-    transform: scale(1.1);
-}
-ed-drawer {
-    @apply flex flex-col z-10 h-full bg-white;
-}
-ed-inner-drawer {
-    @apply h-screen flex flex-col absolute bg-white border-r;
-    transform: translateX(-100%);
-    box-shadow: -3px 1em 5px #9fa0a09e;
-}
-ed-drawer-header {
-    @apply flex items-center justify-between gap-sm shadow pl-6 pr-2 py-3 h-14 z-[1];
-}
-ed-drawer-header h2, ed-drawer-header h6 {
-    @apply text-dark fs-md;
-}
-ed-drawer-body {
-    @apply flex-1 overflow-auto px-md py-base;
-}
-ed-drawer-footer {
-    @apply flex items-center gap-sm px-6 py-3 border-t;
-    background-color: #f8fafc; // bg-lighter
-}
-//   chandu
-.ed-main-sidepanel {
-    @apply flex flex-col z-10 h-full bg-white;
-}
-.ed-inner-sidepanel {
-    @apply h-screen flex flex-col absolute bg-white border-r z-10;
-    transform: translateX(-100%);
-    box-shadow: -3px 1em 5px #9fa0a09e;
-}
-.ed-scroll {
-    overflow: auto;
-    padding-right: 12px;
-}
-.ed-scroll:hover {
-    padding-right: 4px;
-}
-.ed-scroll::-webkit-scrollbar {
-    background-color: transparent;
-    width: 0px;
-}
-.ed-scroll:hover::-webkit-scrollbar {
-    width: 8px;
-    position: fixed;
-}
-.ed-scroll::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 4px;
-    width: 4px;
-}
-.ed-scroll:hover::-webkit-scrollbar-thumb {
-    // width: 4px;
-    // border: 1px solid #d5d5d5;
-    // border-radius: 4px;
-    background-color: #d6d6d6;
-}
-.ed-scroll:hover::-webkit-scrollbar-track {
-    background-color: #f1f1f1;
-    // width: 0.625rem;
-    // border-radius: 4px;
-    // border: 1.5px solid #ffffff;
-}
-/*----select dropdown ---*/
-.ed-dropdown {
-    position: relative;
-    cursor: pointer;
-    line-height: 1.25rem;
-}
-.ed-dropdown .svg {
-    margin-left: 5px;
-    vertical-align: middle;
-    display: inline-block;
-    float: none;
-}
-.ed-dropdown li {
-    cursor: pointer;
-    border-bottom: 1px solid #f5f5f5;
-}
-.ed-dropdown li:last-child {
-    border: none;
-}
-.ed-dropdown {
-    text-align: left;
-}
-.ed-dropdown-search-wrapper {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-}
-/*----END select dropdown ---*/
-ed-select {
-    @apply bg-slate-100 cursor-default block relative w-full;
-    height: var(--height-default);
-    font-weight: 500;
-    border-radius: 6px;
-    padding-left: 12px;
-    padding-right: 28px;
-    &:hover {
-        background-color: #f0f0f0;
-        cursor: pointer;
-    }
-    &::after {
-        content: '';
-        width: var(--height-default);
-        height: var(--height-default);
-        position: absolute;
-        right: 0;
-        top: 0;
-        // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' stroke-opacity='0.5' class='w-6 h-6'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /></svg>") !important;
-        background-size: 20px;
-        background-repeat: no-repeat;
-        background-position: center;
-        opacity: 0.5;
-        // animation-name: rotate-arrow;
-        // animation-duration: 0.3s;
-        // animation-delay: 2s;
-    }
-    .selected-value {
-        @apply flex items-center gap-sm h-full justify-start cursor-pointer;
-        // padding-right: var(--height-default);
-        span {
-            @apply flex items-center h-full;
-        }
-        input[type="text"] {
-            cursor: pointer;
-            min-width: 0;
-            background-color: transparent;
-            height: 100%;
-            // padding-left: 16px;
-            &:focus {
-                outline: none;
-            }
-        }
-    }
-    .count {
-        margin-left: 8px;
-    }
-    ed-option-wrapper {
-        display: none;
-        visibility: hidden;
-        height: 0;
-        width: 100%;
-        overflow: hidden;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        z-index: 99;
-        background: white;
-        min-width: 100%;
-        width: max-content;
-        max-width: 540px;
-        max-height: 420px;
-        border: 1px solid #ebebeb;
-        border-radius: 4px;
-        margin-top: 2px;
-        transition: all 0.3s ease-out;
-        // box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-        // #93 by trello
-        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
-        // button {
-        //     display: block;
-        // }
-    }
-    ed-option {
-        display: block;
-        button {
-            padding: 8px 16px;
-            cursor: pointer;
-            border-left-width: 2px;
-            border-left-color: transparent;
-            border-left-style: solid;
-            border-bottom: 1px solid #f5f5f5;
-            display: flex;
-            width: 100%;
-            font-size: 12px;
-            text-align: left;
-            text-transform: capitalize;
-            &:hover {
-                @apply border-l-primary text-primary transition-all duration-300 ease-in-out;
-                background-color: rgba(243, 243, 243, 0.40);
-                // @apply bg-blue-500 text-white;
-                padding-left: 18px;
-            }
-        }
-    }
-}
-.show-options {
-    display: block;
-    visibility: visible;
-    height: auto;
-}
-ed-select:focus-within ed-option-wrapper {
-    display: block;
-    visibility: visible;
-    height: auto;
-}
-ed-select:focus-within {
-    @apply bg-slate-200;
-}
-ed-option-wrapper[position="bottom-right"] {
-    right: 0;
-    left: auto;
-}
-ed-option-wrapper[position="bottom-left"] {
-    left: 0;
-    right: auto;
-}
-ed-select[type="filter"] {
-    &::after {
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-filter'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E");
-        background-size: 16px;
-    }
-}
-ed-select[open] {
-    &::after {
-        transition-property: transform;
-        transition-duration: 0.3s;
-        transform: rotate(-90deg);
-    }
-}
-ed-select[size="2xs"] {
-    height: var(--height-2xs);
-    font-size: 10px;
-    &::after {
-        width: var(--height-2xs);
-        height: var(--height-2xs);
-        background-size: 10px;
-    }
-}
-ed-select[size="xs"] {
-    height: var(--height-xs);
-    font-size: 12px;
-    padding-left: 8px;
-    padding-right: 24px;
-    border-radius: 4px;
-    &::after {
-        width: var(--height-xs);
-        height: var(--height-xs);
-        background-size: 14px;
-    }
-}
-ed-select[size="sm"] {
-    height: var(--height-sm);
-    padding-left: 12px;
-    padding-right: 28px;
-    font-size: 12px;
-    border-radius: 4px;
-    &::after {
-        width: var(--height-sm);
-        height: var(--height-sm);
-        background-size: 18px;
-    }
-}
-ed-select[size="md"] {
-    height: var(--height-md);
-    border-radius: 6px;
-    &::after {
-        width: var(--height-md);
-        height: var(--height-md);
-        background-size: 24px;
-    }
-}
-ed-select[size="lg"] {
-    height: var(--height-lg);
-    border-radius: 8px;
-    &::after {
-        width: var(--height-lg);
-        height: var(--height-lg);
-        background-size: 28px;
-    }
-}
-ed-select[size="xl"] {
-    height: var(--height-xl);
-    border-radius: 12px;
-    &::after {
-        width: var(--height-xl);
-        height: var(--height-xl);
-        background-size: 32px;
-    }
-}
-ed-select[variant="success"] {
-    @apply bg-green-600 text-white;
-}
-ed-select[variant="success"][lighter] {
-    @apply bg-green-100 text-green-600;
-}
-ed-select[variant="danger"] {
-    @apply bg-red-600 text-white;
-}
-ed-select[variant="warning"] {
-    @apply bg-amber-600 text-white;
-}
-ed-select[variant="warning"][lighter] {
-    @apply bg-amber-100 text-amber-600;
-}
-ed-select[variant="info"] {
-    @apply bg-teal-600 text-white;
-}
-ed-select[variant="neutral"] {
-    @apply bg-slate-600 text-white;
-}
-ed-select[variant="primary"] {
-    @apply bg-primary-600 text-white;
-}
-ed-select[variant="success"] {
-    @apply bg-green-600 text-white;
-}
-ed-select[variant="success"][lighter] {
-    @apply bg-green-100 text-green-600;
-}
-ed-select[variant="danger"] {
-    @apply bg-red-600 text-white;
-}
-ed-select[variant="warning"] {
-    @apply bg-amber-600 text-white;
-}
-ed-select[variant="warning"][lighter] {
-    @apply bg-amber-100 text-amber-600;
-}
-ed-select[variant="info"] {
-    @apply bg-teal-600 text-white;
-}
-ed-select[variant="neutral"] {
-    @apply bg-slate-600 text-white;
-}
-ed-select[variant="primary"] {
-    @apply bg-primary-600 text-white;
-}
-@keyframes show-options {
-    0% {
-        opacity: 0.2;
-        height: 0;
-    }
-    50% {
-        opacity: 0.3;
-        height: 50%;
-    }
-    100% {
-        opacity: 1;
-        height: 100%;
-    }
-}
-@keyframes rotate-arrow {
-    50% {
-        transform: rotate(-45deg);
-    }
-    100% {
-        transform: rotate(-90deg);
-    }
-}
-// [tooltip] {
-//     position: relative;
-//     &::after {
-//         display: none;
-//         content: attr(tooltip);
-//         position: absolute;
-//         inset: 0;
-//         top: 100%;
-//         background-color: #F00;
-//         color: red;
-//     }
-//     &:hover {
-//         &::after {
-//             display: block;
-//         }
-//     }
-// }
-ed-drawer[size="xs"] {
-    width: 360px;
-}
-ed-drawer[size="sm"] {
-    width: 420px;
-}
-ed-drawer[size="base"] {
-    width: 540px;
-}
-ed-drawer[size="md"] {
-    width: 640px;
-}
-ed-drawer[size="lg"] {
-    // width: 780px;
-    width: 820px;
-}
-ed-drawer[size="xl"] {
-    width: 960px;
-}
-ed-drawer[size="2xl"] {
-    width: 1080px;
-}
-ed-drawer[size="3xl"] {
-    width: 1240px;
-}
-ed-drawer[size="4xl"] {
-    width: 1560px;
-}
-ed-drawer[size="full"] {
-    width: 100%;
-}
-ed-ripple {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin: 0 5px;
-    position: relative;
-}
-ed-ripple::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: inherit;
-    border-radius: 50%;
-    z-index: -1;
-    animation: ripple 1.5s ease-out infinite;
-}
-ed-ripple[variant="primary"] {
-    @apply bg-primary-600;
-    transform: scale(0.9);
-}
-ed-ripple[variant="danger"] {
-    @apply bg-red-500;
-    transform: scale(0.8);
-}
-ed-ripple[variant="success"] {
-    @apply bg-green-500;
-    transform: scale(0.7);
-}
-ed-ripple[variant="warning"] {
-    @apply bg-amber-500;
-    transform: scale(0.6);
-}
-@keyframes ripple {
-    from {
-        opacity: 1;
-        transform: scale(0);
-    }
-    to {
-        opacity: 0;
-        transform: scale(3);
-    }
-}
-ed-alert {
-    @apply border p-base flex items-center gap-lg;
-}
-ed-alert[rounded] {
-    @apply rounded-md;
-}
-ed-alert[variant="warning"] {
-    @apply bg-amber-50 border-amber-200;
-}
-ed-alert[variant="sucess"] {
-    @apply bg-green-50 border-green-200;
-}
-ed-alert[variant="danger"] {
-    @apply bg-red-50 border-red-200;
-}
-// print html
-ed-print {
-    @apply flex flex-col z-10 h-full bg-white;
-}
-ed-print-header {
-    @apply flex items-center justify-between gap-sm shadow-sm p-base bg-lighter;
-}
-ed-print-center {
-    @apply flex flex-col items-center justify-center gap-sm shadow-sm p-base bg-lighter;
-}
-ed-follow-header {
-    @apply flex flex justify-between gap-sm shadow-sm p-base border-b;
-}
-ed-print-body {
-    @apply flex-1 overflow-auto px-md py-base;
-}
-ed-print-body {
-    h1 {
-        @apply text-lg text-center my-base
-    }
-    h2 {
-        @apply text-base
-    }
-    h3 {
-        @apply text-sm
-    }
-    p {
-        @apply leading-6
-    }
-    .bg-head {
-        @apply bg-light px-base py-xs font-semibold text-lg rounded shadow w-full
-    }
-    hr {
-        @apply border-b
-    }
-    .no-data {
-        @apply text-center w-full border rounded p-sm bg-lighter-2
-    }
-}
-.bg-danger {
-    @apply bg-red-600
-}
-ed-print-footer {
-    @apply flex items-center justify-center gap-sm px-6 py-3 border-t bg-lighter;
+ed-overlay {
+    position: fixed;
+    // left: 0;
+    // top: 0;
+    // width: 100%;
+    // height: 100%;
+    inset: 0;
+    z-index: 9997;
+    background-color: #00000013;
+    transition: opacity 0.5s;
+}
+ed-overlay.open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+}
+ed-overlay.close {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+}
+ed-modal {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    // right: 0;
+    height: 100%;
+    // background-color: white;
+    transform: translateX(100vw);
+    z-index: 9998;
+    // box-shadow: -3px 1em 5px #9fa0a09e;
+    // background: white;
+}
+ed-modal-inner {
+    position: fixed;
+    top: 10px;
+    // left: 0;
+    right: 0px;
+    height: 100%;
+    // background-color: white;
+    z-index: 9997;
+    box-shadow: -3px 1em 5px #9fa0a09e;
+    transition: all 300ms ease;
+}
+ed-chips {
+    display: flex;
+    align-items: center;
+}
+ed-col {
+    display: flex;
+    flex-direction: column;
+}
+ed-row {
+    display: flex;
+    // align-items: center;
+}
+ed-form-row {
+    display: flex;
+    align-items: center;
+    min-height: 36px;
+}
+ed-form-row[direction="col"] {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    // DIRECT CHILD WILL GET 100% WIDTH
+    >* {
+        width: 100%;
+    }
+}
+ed-error {}
+ed-hover-scale {
+    display: inline-block;
+    vertical-align: middle;
+    transform: translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    backface-visibility: hidden;
+    -moz-osx-font-smoothing: grayscale;
+    transition-duration: 0.3s;
+    transition-property: transform;
+}
+ed-hover-scale:hover,
+ed-hover-scale:focus,
+ed-hover-scale:active {
+    transform: scale(1.1);
+}
+ed-drawer {
+    @apply flex flex-col z-10 h-full bg-white;
+}
+ed-inner-drawer {
+    @apply h-screen flex flex-col absolute bg-white border-r;
+    transform: translateX(-100%);
+    box-shadow: -3px 1em 5px #9fa0a09e;
+}
+ed-drawer-header {
+    @apply flex items-center justify-between gap-sm shadow pl-6 pr-2 py-3 h-14 z-[1];
+}
+ed-drawer-header h2, ed-drawer-header h6 {
+    @apply text-dark fs-md;
+}
+ed-drawer-body {
+    @apply flex-1 overflow-auto px-md py-base;
+}
+ed-drawer-footer {
+    @apply flex items-center gap-sm px-6 py-3 border-t;
+    background-color: #f8fafc; // bg-lighter
+}
+//   chandu
+.ed-main-sidepanel {
+    @apply flex flex-col z-10 h-full bg-white;
+}
+.ed-inner-sidepanel {
+    @apply h-screen flex flex-col absolute bg-white border-r z-10;
+    transform: translateX(-100%);
+    box-shadow: -3px 1em 5px #9fa0a09e;
+}
+.ed-scroll {
+    overflow: auto;
+    padding-right: 12px;
+}
+.ed-scroll:hover {
+    padding-right: 4px;
+}
+.ed-scroll::-webkit-scrollbar {
+    background-color: transparent;
+    width: 0px;
+}
+.ed-scroll:hover::-webkit-scrollbar {
+    width: 8px;
+    position: fixed;
+}
+.ed-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+    width: 4px;
+}
+.ed-scroll:hover::-webkit-scrollbar-thumb {
+    // width: 4px;
+    // border: 1px solid #d5d5d5;
+    // border-radius: 4px;
+    background-color: #d6d6d6;
+}
+.ed-scroll:hover::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+    // width: 0.625rem;
+    // border-radius: 4px;
+    // border: 1.5px solid #ffffff;
+}
+/*----select dropdown ---*/
+.ed-dropdown {
+    position: relative;
+    cursor: pointer;
+    line-height: 1.25rem;
+}
+.ed-dropdown .svg {
+    margin-left: 5px;
+    vertical-align: middle;
+    display: inline-block;
+    float: none;
+}
+.ed-dropdown li {
+    cursor: pointer;
+    border-bottom: 1px solid #f5f5f5;
+}
+.ed-dropdown li:last-child {
+    border: none;
+}
+.ed-dropdown {
+    text-align: left;
+}
+.ed-dropdown-search-wrapper {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+}
+/*----END select dropdown ---*/
+ed-select {
+    @apply bg-slate-100 cursor-default block relative w-full;
+    height: var(--height-default);
+    font-weight: 500;
+    border-radius: 6px;
+    padding-left: 12px;
+    padding-right: 28px;
+    &:hover {
+        background-color: #f0f0f0;
+        cursor: pointer;
+    }
+    &::after {
+        content: '';
+        width: var(--height-default);
+        height: var(--height-default);
+        position: absolute;
+        right: 0;
+        top: 0;
+        // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' stroke-opacity='0.5' class='w-6 h-6'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /></svg>") !important;
+        background-size: 20px;
+        background-repeat: no-repeat;
+        background-position: center;
+        opacity: 0.5;
+        // animation-name: rotate-arrow;
+        // animation-duration: 0.3s;
+        // animation-delay: 2s;
+    }
+    .selected-value {
+        @apply flex items-center gap-sm h-full justify-start cursor-pointer;
+        // padding-right: var(--height-default);
+        span {
+            @apply flex items-center h-full;
+        }
+        input[type="text"] {
+            cursor: pointer;
+            min-width: 0;
+            background-color: transparent;
+            height: 100%;
+            // padding-left: 16px;
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+    .count {
+        margin-left: 8px;
+    }
+    ed-option-wrapper {
+        display: none;
+        visibility: hidden;
+        height: 0;
+        width: 100%;
+        overflow: hidden;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 99;
+        background: white;
+        min-width: 100%;
+        width: max-content;
+        max-width: 540px;
+        max-height: 420px;
+        border: 1px solid #ebebeb;
+        border-radius: 4px;
+        margin-top: 2px;
+        transition: all 0.3s ease-out;
+        // box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+        // #93 by trello
+        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
+        // button {
+        //     display: block;
+        // }
+    }
+    ed-option {
+        display: block;
+        button {
+            padding: 8px 16px;
+            cursor: pointer;
+            border-left-width: 2px;
+            border-left-color: transparent;
+            border-left-style: solid;
+            border-bottom: 1px solid #f5f5f5;
+            display: flex;
+            width: 100%;
+            font-size: 12px;
+            text-align: left;
+            text-transform: capitalize;
+            &:hover {
+                @apply border-l-primary text-primary transition-all duration-300 ease-in-out;
+                background-color: rgba(243, 243, 243, 0.40);
+                // @apply bg-blue-500 text-white;
+                padding-left: 18px;
+            }
+        }
+    }
+}
+.show-options {
+    display: block;
+    visibility: visible;
+    height: auto;
+}
+ed-select:focus-within ed-option-wrapper {
+    display: block;
+    visibility: visible;
+    height: auto;
+}
+ed-select:focus-within {
+    @apply bg-slate-200;
+}
+ed-option-wrapper[position="bottom-right"] {
+    right: 0;
+    left: auto;
+}
+ed-option-wrapper[position="bottom-left"] {
+    left: 0;
+    right: auto;
+}
+ed-select[type="filter"] {
+    &::after {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-filter'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E");
+        background-size: 16px;
+    }
+}
+ed-select[open] {
+    &::after {
+        transition-property: transform;
+        transition-duration: 0.3s;
+        transform: rotate(-90deg);
+    }
+}
+ed-select[size="2xs"] {
+    height: var(--height-2xs);
+    font-size: 10px;
+    &::after {
+        width: var(--height-2xs);
+        height: var(--height-2xs);
+        background-size: 10px;
+    }
+}
+ed-select[size="xs"] {
+    height: var(--height-xs);
+    font-size: 12px;
+    padding-left: 8px;
+    padding-right: 24px;
+    border-radius: 4px;
+    &::after {
+        width: var(--height-xs);
+        height: var(--height-xs);
+        background-size: 14px;
+    }
+}
+ed-select[size="sm"] {
+    height: var(--height-sm);
+    padding-left: 12px;
+    padding-right: 28px;
+    font-size: 12px;
+    border-radius: 4px;
+    &::after {
+        width: var(--height-sm);
+        height: var(--height-sm);
+        background-size: 18px;
+    }
+}
+ed-select[size="md"] {
+    height: var(--height-md);
+    border-radius: 6px;
+    &::after {
+        width: var(--height-md);
+        height: var(--height-md);
+        background-size: 24px;
+    }
+}
+ed-select[size="lg"] {
+    height: var(--height-lg);
+    border-radius: 8px;
+    &::after {
+        width: var(--height-lg);
+        height: var(--height-lg);
+        background-size: 28px;
+    }
+}
+ed-select[size="xl"] {
+    height: var(--height-xl);
+    border-radius: 12px;
+    &::after {
+        width: var(--height-xl);
+        height: var(--height-xl);
+        background-size: 32px;
+    }
+}
+ed-select[variant="success"] {
+    @apply bg-green-600 text-white;
+}
+ed-select[variant="success"][lighter] {
+    @apply bg-green-100 text-green-600;
+}
+ed-select[variant="danger"] {
+    @apply bg-red-600 text-white;
+}
+ed-select[variant="warning"] {
+    @apply bg-amber-600 text-white;
+}
+ed-select[variant="warning"][lighter] {
+    @apply bg-amber-100 text-amber-600;
+}
+ed-select[variant="info"] {
+    @apply bg-teal-600 text-white;
+}
+ed-select[variant="neutral"] {
+    @apply bg-slate-600 text-white;
+}
+ed-select[variant="primary"] {
+    @apply bg-primary-600 text-white;
+}
+ed-select[variant="success"] {
+    @apply bg-green-600 text-white;
+}
+ed-select[variant="success"][lighter] {
+    @apply bg-green-100 text-green-600;
+}
+ed-select[variant="danger"] {
+    @apply bg-red-600 text-white;
+}
+ed-select[variant="warning"] {
+    @apply bg-amber-600 text-white;
+}
+ed-select[variant="warning"][lighter] {
+    @apply bg-amber-100 text-amber-600;
+}
+ed-select[variant="info"] {
+    @apply bg-teal-600 text-white;
+}
+ed-select[variant="neutral"] {
+    @apply bg-slate-600 text-white;
+}
+ed-select[variant="primary"] {
+    @apply bg-primary-600 text-white;
+}
+@keyframes show-options {
+    0% {
+        opacity: 0.2;
+        height: 0;
+    }
+    50% {
+        opacity: 0.3;
+        height: 50%;
+    }
+    100% {
+        opacity: 1;
+        height: 100%;
+    }
+}
+@keyframes rotate-arrow {
+    50% {
+        transform: rotate(-45deg);
+    }
+    100% {
+        transform: rotate(-90deg);
+    }
+}
+// [tooltip] {
+//     position: relative;
+//     &::after {
+//         display: none;
+//         content: attr(tooltip);
+//         position: absolute;
+//         inset: 0;
+//         top: 100%;
+//         background-color: #F00;
+//         color: red;
+//     }
+//     &:hover {
+//         &::after {
+//             display: block;
+//         }
+//     }
+// }
+ed-drawer[size="xs"] {
+    width: 360px;
+}
+ed-drawer[size="sm"] {
+    width: 420px;
+}
+ed-drawer[size="base"] {
+    width: 540px;
+}
+ed-drawer[size="md"] {
+    width: 640px;
+}
+ed-drawer[size="lg"] {
+    // width: 780px;
+    width: 820px;
+}
+ed-drawer[size="xl"] {
+    width: 960px;
+}
+ed-drawer[size="2xl"] {
+    width: 1080px;
+}
+ed-drawer[size="3xl"] {
+    width: 1240px;
+}
+ed-drawer[size="4xl"] {
+    width: 1560px;
+}
+ed-drawer[size="full"] {
+    width: 100%;
+}
+ed-ripple {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin: 0 5px;
+    position: relative;
+}
+ed-ripple::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: inherit;
+    border-radius: 50%;
+    z-index: -1;
+    animation: ripple 1.5s ease-out infinite;
+}
+ed-ripple[variant="primary"] {
+    @apply bg-primary-600;
+    transform: scale(0.9);
+}
+ed-ripple[variant="danger"] {
+    @apply bg-red-500;
+    transform: scale(0.8);
+}
+ed-ripple[variant="success"] {
+    @apply bg-green-500;
+    transform: scale(0.7);
+}
+ed-ripple[variant="warning"] {
+    @apply bg-amber-500;
+    transform: scale(0.6);
+}
+@keyframes ripple {
+    from {
+        opacity: 1;
+        transform: scale(0);
+    }
+    to {
+        opacity: 0;
+        transform: scale(3);
+    }
+}
+ed-alert {
+    @apply border p-base flex items-center gap-lg;
+}
+ed-alert[rounded] {
+    @apply rounded-md;
+}
+ed-alert[variant="warning"] {
+    @apply bg-amber-50 border-amber-200;
+}
+ed-alert[variant="sucess"] {
+    @apply bg-green-50 border-green-200;
+}
+ed-alert[variant="danger"] {
+    @apply bg-red-50 border-red-200;
+}
+// print html
+ed-print {
+    @apply flex flex-col z-10 h-full bg-white;
+}
+ed-print-header {
+    @apply flex items-center justify-between gap-sm shadow-sm p-base bg-lighter;
+}
+ed-print-center {
+    @apply flex flex-col items-center justify-center gap-sm shadow-sm p-base bg-lighter;
+}
+ed-follow-header {
+    @apply flex flex justify-between gap-sm shadow-sm p-base border-b;
+}
+ed-print-body {
+    @apply flex-1 overflow-auto px-md py-base;
+}
+ed-print-body {
+    h1 {
+        @apply text-lg text-center my-base
+    }
+    h2 {
+        @apply text-base
+    }
+    h3 {
+        @apply text-sm
+    }
+    p {
+        @apply leading-6
+    }
+    .bg-head {
+        @apply bg-light px-base py-xs font-semibold text-lg rounded shadow w-full
+    }
+    hr {
+        @apply border-b
+    }
+    .no-data {
+        @apply text-center w-full border rounded p-sm bg-lighter-2
+    }
+}
+.bg-danger {
+    @apply bg-red-600
+}
+ed-print-footer {
+    @apply flex items-center justify-center gap-sm px-6 py-3 border-t bg-lighter;
 }