@pathscale/ui 0.0.163 → 0.0.164

package/dist/components/select/select.css

@@ -1,351 +0,0 @@
-@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

@@ -1,48 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,176 +0,0 @@
-.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;
-  }
-}