@pathscale/ui 0.0.162 → 0.0.163

package/dist/components/select/select.css

@@ -0,0 +1,351 @@
+@layer components {
+  .select {
+      border: var(--border) solid #0000;
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 1;
+      appearance: none;
+      align-items: center;
+      gap: calc(0.25rem * 1.5);
+      background-color: var(--color-base-100);
+      padding-inline-start: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 7);
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--size);
+      font-size: 0.875rem;
+      touch-action: manipulation;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
+      background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
+      background-size: 4px 4px, 4px 4px;
+      background-repeat: no-repeat;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      border-color: var(--input-color);
+      --input-color: var(--color-base-content);
+      --size: calc(var(--size-field, 0.25rem) * 10);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  [dir="rtl"] .select {
+      background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
+    }
+
+  [dir="rtl"] .select::picker(select),
+    [dir="rtl"] .select select::picker(select) {
+      translate: 0.5rem 0;
+    }
+
+  .select[multiple] {
+      height: auto;
+      overflow: auto;
+      padding-block: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 3);
+      background-image: none;
+    }
+
+  .select select {
+      margin-inline-start: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -7);
+      width: calc(100% + 2.75rem);
+      appearance: none;
+      padding-inline-start: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 7);
+      height: calc(100% - calc(var(--border) * 2));
+      align-items: center;
+      background: inherit;
+      border-radius: inherit;
+      border-style: none;
+    }
+
+  .select select:focus,
+    .select select:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .select select:focus,
+    .select select:focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .select select:not(:last-child) {
+      margin-inline-end: calc(0.25rem * -5.5);
+      background-image: none;
+    }
+
+  .select:focus,
+    .select:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:focus,
+    .select:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  .select:has(> select[disabled]),
+    .select:is(:disabled, [disabled]),
+    fieldset:disabled .select {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:has(> select[disabled]),
+    .select:is(:disabled, [disabled]),
+    fieldset:disabled .select {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .select:has(> select[disabled])::placeholder,
+    .select:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .select::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:has(> select[disabled])::placeholder,
+    .select:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .select::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .select:has(> select[disabled]) > select[disabled] {
+      cursor: not-allowed;
+    }
+
+  @supports (appearance: base-select) {
+    .select,
+    .select select {
+      appearance: base-select;
+    }
+    }
+
+  @supports (appearance: base-select) {
+    .select::picker(select),
+    .select select::picker(select) {
+      appearance: base-select;
+    }
+    }
+
+  .select::picker(select),
+    .select select::picker(select) {
+      color: inherit;
+      max-height: min(24rem, 70dvh);
+      margin-inline: 0.5rem;
+      translate: -0.5rem 0;
+      border: var(--border) solid var(--color-base-200);
+      margin-block: calc(0.25rem * 2);
+      border-radius: var(--radius-box);
+      padding: calc(0.25rem * 2);
+      background-color: inherit;
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
+      box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
+    }
+
+  .select::picker-icon,
+    .select select::picker-icon {
+      display: none;
+    }
+
+  .select optgroup,
+    .select select optgroup {
+      padding-top: 0.5em;
+    }
+
+  .select optgroup option:nth-child(1),
+    .select select optgroup option:nth-child(1) {
+      margin-top: 0.5em;
+    }
+
+  .select option,
+    .select select option {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      transition-property: color, background-color;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      white-space: normal;
+    }
+
+  .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .select option:not(:disabled):active,
+    .select select option:not(:disabled):active {
+      background-color: var(--color-neutral);
+      color: var(--color-neutral-content);
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
+    }
+
+  .select-ghost {
+      background-color: transparent;
+      transition: background-color 0.2s;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .select-ghost:focus,
+    .select-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .select-lg {
+      --size: calc(var(--size-field, 0.25rem) * 12);
+      font-size: 1.125rem;
+    }
+
+  .select-lg option {
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-md {
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      font-size: 0.875rem;
+    }
+
+  .select-md option {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-sm {
+      --size: calc(var(--size-field, 0.25rem) * 8);
+      font-size: 0.75rem;
+    }
+
+  .select-sm option {
+      padding-inline: calc(0.25rem * 2.5);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .select-xl {
+      --size: calc(var(--size-field, 0.25rem) * 14);
+      font-size: 1.375rem;
+    }
+
+  .select-xl option {
+      padding-inline: calc(0.25rem * 5);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-xs {
+      --size: calc(var(--size-field, 0.25rem) * 6);
+      font-size: 0.6875rem;
+    }
+
+  .select-xs option {
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .select-accent,
+    .select-accent:focus,
+    .select-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .select-error,
+    .select-error:focus,
+    .select-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .select-info,
+    .select-info:focus,
+    .select-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .select-neutral,
+    .select-neutral:focus,
+    .select-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .select-primary,
+    .select-primary:focus,
+    .select-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .select-secondary,
+    .select-secondary:focus,
+    .select-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .select-success,
+    .select-success:focus,
+    .select-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .select-warning,
+    .select-warning:focus,
+    .select-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/components/showcase/ShowcaseBlock.js

@@ -0,0 +1,48 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__ from "../flex/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-base-content/70 mb-4">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="bg-base-200 shadow-sm p-6 rounded-lg"><h3 class="text-lg font-semibold mb-2 text-base-content"></h3><div>');
+const ShowcaseBlock = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "title",
+        "description",
+        "code",
+        "preview",
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const previewClass = local.preview ? "border bg-base-100 border-base-content/15 p-8 rounded-lg" : "";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        direction: "col",
+        gap: "md"
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
+        },
+        get children () {
+            var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.title);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return local.description;
+                },
+                get children () {
+                    var _el$3 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.description);
+                    return _el$3;
+                }
+            }), _el$4);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, previewClass);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+            return _el$;
+        }
+    }));
+};
+const showcase_ShowcaseBlock = ShowcaseBlock;
+export { showcase_ShowcaseBlock as default };

package/dist/components/showcase/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ShowcaseBlock_js_f1670608__ from "./ShowcaseBlock.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ShowcaseBlock_js_f1670608__["default"];
+export { __webpack_exports__default as default };

package/dist/components/showcase-section/ShowcaseSection.js

@@ -0,0 +1,73 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__copy_button_index_js_612cbdbf__ from "../copy-button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__ from "../flex/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="opacity-0 group-hover/title:opacity-100 text-base-content/70 transition-opacity">#'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<h2 class="text-xl font-semibold group/title">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=space-y-3>");
+const ShowcaseSection = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
+        "title",
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const getSectionUrl = ()=>{
+        const url = new URL(window.location.href);
+        url.hash = local.id;
+        return url.toString();
+    };
+    return (()=>{
+        var _el$ = _tmpl$3(), _el$4 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get id () {
+                return local.id;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("p-3 bg-base-100 rounded-lg shadow-sm scroll-mt-6", local.class, local.className);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+            align: "center",
+            justify: "between",
+            gap: "sm",
+            class: "mb-2",
+            get children () {
+                return [
+                    (()=>{
+                        var _el$2 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                            as: "a",
+                            align: "center",
+                            gap: "sm",
+                            class: "text-inherit hover:text-base-content",
+                            get children () {
+                                return [
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.title),
+                                    _tmpl$()
+                                ];
+                            }
+                        }));
+                        return _el$2;
+                    })(),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__copy_button_index_js_612cbdbf__["default"], {
+                        get text () {
+                            return getSectionUrl();
+                        },
+                        title: "Copy link to section",
+                        class: "opacity-0 group-hover:opacity-100 focus:opacity-100"
+                    })
+                ];
+            }
+        }), _el$4);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$;
+    })();
+};
+const showcase_section_ShowcaseSection = ShowcaseSection;
+export { showcase_section_ShowcaseSection as default };

package/dist/components/showcase-section/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ShowcaseSection_js_a82decf5__ from "./ShowcaseSection.js";
+var __webpack_exports__ShowcaseSection = __WEBPACK_EXTERNAL_MODULE__ShowcaseSection_js_a82decf5__["default"];
+export { __webpack_exports__ShowcaseSection as ShowcaseSection };

package/dist/components/sidenav/Sidenav.css

@@ -0,0 +1,176 @@
+.sidenav {
+  @apply h-screen bg-base-200 border-r border-base-300 flex flex-col transition-all duration-300 ease-in-out sticky top-0;
+  width: 16rem;
+}
+
+.sidenav-closed {
+  @apply -translate-x-full;
+}
+
+.sidenav-open {
+  @apply translate-x-0;
+}
+
+.sidenav-desktop {
+  @apply relative transform-none shadow-none;
+}
+
+.sidenav-collapsed {
+  width: 4rem;
+  @apply flex flex-col items-center py-8;
+}
+
+.sidenav-header {
+  @apply p-4 border-b border-base-300 flex items-center justify-between flex-shrink-0;
+}
+
+.sidenav-collapsed .sidenav-header {
+  @apply p-0 border-none;
+}
+
+.sidenav-title {
+  @apply text-lg font-semibold text-base-content truncate;
+}
+
+.sidenav-close {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-field, 0.5rem);
+  color: var(--color-base-content);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  justify-content: center;
+  min-height: 2rem;
+  padding: 0.25rem;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.sidenav-close:hover {
+  background-color: var(--color-base-300);
+}
+
+.sidenav-close:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--color-primary) 55%, transparent);
+  outline-offset: 2px;
+}
+
+.sidenav-close:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.sidenav-content {
+  @apply flex-1 overflow-y-auto;
+}
+
+.sidenav-menu {
+  @apply flex flex-col flex-1 p-4 space-y-4;
+}
+
+.sidenav-collapsed .sidenav-menu {
+  @apply p-0 items-center space-y-6;
+}
+
+.sidenav-item {
+  @apply w-full;
+}
+
+.sidenav-collapsed .sidenav-item {
+  @apply w-auto;
+}
+
+.sidenav-item-link,
+.sidenav-item-button {
+  @apply flex items-center px-3 py-2 text-base-content transition-colors duration-300 transform rounded-lg hover:bg-base-300 gap-3;
+}
+
+.sidenav-collapsed .sidenav-item-link,
+.sidenav-collapsed .sidenav-item-button {
+  @apply w-10 h-10 p-1.5 justify-center;
+}
+
+.sidenav-item-active .sidenav-item-link,
+.sidenav-item-active .sidenav-item-button {
+  @apply bg-primary text-primary-content hover:bg-primary/90;
+}
+
+.sidenav-children {
+  @apply p-4 text-base-content;
+}
+
+.sidenav-footer {
+  @apply mt-auto p-4 border-t border-base-300 flex-shrink-0 text-base-content/70;
+}
+
+.sidenav-collapsed .sidenav-footer {
+  @apply p-0 border-none flex flex-col items-center space-y-6;
+}
+
+.sidenav-group {
+  @apply space-y-2 mb-4 w-full;
+}
+
+.sidenav-collapsed .sidenav-group {
+  @apply mb-0 space-y-2;
+}
+
+.sidenav-group-label {
+  @apply px-3 py-2 text-xs font-semibold text-base-content/70 uppercase tracking-wider;
+}
+
+.sidenav-group-items {
+  @apply space-y-1 w-full pl-3;
+}
+
+.sidenav-collapsed .sidenav-group-items {
+  @apply pl-0 space-y-2;
+}
+
+.sidenav-collapsed .sidenav-group-label {
+  @apply hidden;
+}
+
+.sidenav-collapsed .sidenav-item-label {
+  @apply hidden;
+}
+
+.sidenav-item-link svg,
+.sidenav-item-button svg {
+  @apply w-5 h-5 flex-shrink-0;
+}
+
+.sidenav-collapsed .sidenav-item-link,
+.sidenav-collapsed .sidenav-item-button {
+  @apply relative;
+}
+
+.sidenav-collapsed .sidenav-item-link:hover::after,
+.sidenav-collapsed .sidenav-item-button:hover::after {
+  content: attr(title);
+  @apply absolute left-full ml-2 px-2 py-1 bg-base-300 text-base-content rounded text-sm whitespace-nowrap z-50;
+}
+
+.sidenav-overlay {
+  @apply fixed inset-0 bg-base-content/50 z-40 transition-opacity duration-300;
+}
+
+.sidenav-overlay-hidden {
+  @apply opacity-0 pointer-events-none;
+}
+
+.sidenav-overlay-visible {
+  @apply opacity-100;
+}
+
+@media (min-width: 768px) {
+  .sidenav-desktop {
+    @apply relative transform-none shadow-none;
+  }
+
+  .sidenav-overlay {
+    @apply hidden;
+  }
+}