@pathscale/ui 0.0.163 → 0.0.165

package/dist/components/tooltip/tooltip.css

@@ -1,198 +0,0 @@
-@layer components {
-  .tooltip {
-      position: relative;
-      display: inline-block;
-      --tt-bg: var(--color-neutral);
-      --tt-off: calc(100% + 0.5rem);
-      --tt-tail: calc(100% + 1px + 0.25rem);
-    }
-
-  .tooltip > .tooltip-content,
-    .tooltip[data-tip]:before {
-      position: absolute;
-      max-width: 20rem;
-      border-radius: var(--radius-field);
-      padding-inline: calc(0.25rem * 2);
-      padding-block: calc(0.25rem * 1);
-      text-align: center;
-      white-space: normal;
-      color: var(--color-neutral-content);
-      opacity: 0%;
-      font-size: 0.875rem;
-      line-height: 1.25;
-      background-color: var(--tt-bg);
-      width: max-content;
-      pointer-events: none;
-      z-index: 2;
-      --tw-content: attr(data-tip);
-      content: var(--tw-content);
-    }
-
-  .tooltip:after {
-      opacity: 0%;
-      background-color: var(--tt-bg);
-      content: "";
-      pointer-events: none;
-      width: 0.625rem;
-      height: 0.25rem;
-      display: block;
-      position: absolute;
-      mask-repeat: no-repeat;
-      mask-position: -1px 0;
-      --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
-      mask-image: var(--mask-tooltip);
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .tooltip > .tooltip-content,
-    .tooltip[data-tip]:before,
-    .tooltip:after {
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
-    }
-    }
-
-  .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
-      opacity: 100%;
-      --tt-pos: 0rem;
-    }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))).tooltip-open:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):hover:after,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible) > .tooltip-content,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible)[data-tip]:before,
-    .tooltip:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))):has(:focus-visible):after {
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-    }
-    }
-
-  .tooltip > .tooltip-content,
-    .tooltip[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-off) 50%;
-    }
-
-  .tooltip:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-tail) 50%;
-    }
-
-  .tooltip-bottom > .tooltip-content,
-    .tooltip-bottom[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
-      inset: var(--tt-off) auto auto 50%;
-    }
-
-  .tooltip-bottom:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
-      inset: var(--tt-tail) auto auto 50%;
-    }
-
-  .tooltip-left > .tooltip-content,
-    .tooltip-left[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
-      inset: 50% var(--tt-off) auto auto;
-    }
-
-  .tooltip-left:after {
-      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
-      inset: 50% calc(var(--tt-tail) + 1px) auto auto;
-    }
-
-  .tooltip-right > .tooltip-content,
-    .tooltip-right[data-tip]:before {
-      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
-      inset: 50% auto auto var(--tt-off);
-    }
-
-  .tooltip-right:after {
-      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
-      inset: 50% auto auto calc(var(--tt-tail) + 1px);
-    }
-
-  .tooltip-top > .tooltip-content,
-    .tooltip-top[data-tip]:before {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-off) 50%;
-    }
-
-  .tooltip-top:after {
-      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-      inset: auto auto var(--tt-tail) 50%;
-    }
-
-  .tooltip-accent {
-      --tt-bg: var(--color-accent);
-    }
-
-  .tooltip-accent > .tooltip-content,
-    .tooltip-accent[data-tip]:before {
-      color: var(--color-accent-content);
-    }
-
-  .tooltip-error {
-      --tt-bg: var(--color-error);
-    }
-
-  .tooltip-error > .tooltip-content,
-    .tooltip-error[data-tip]:before {
-      color: var(--color-error-content);
-    }
-
-  .tooltip-info {
-      --tt-bg: var(--color-info);
-    }
-
-  .tooltip-info > .tooltip-content,
-    .tooltip-info[data-tip]:before {
-      color: var(--color-info-content);
-    }
-
-  .tooltip-primary {
-      --tt-bg: var(--color-primary);
-    }
-
-  .tooltip-primary > .tooltip-content,
-    .tooltip-primary[data-tip]:before {
-      color: var(--color-primary-content);
-    }
-
-  .tooltip-secondary {
-      --tt-bg: var(--color-secondary);
-    }
-
-  .tooltip-secondary > .tooltip-content,
-    .tooltip-secondary[data-tip]:before {
-      color: var(--color-secondary-content);
-    }
-
-  .tooltip-success {
-      --tt-bg: var(--color-success);
-    }
-
-  .tooltip-success > .tooltip-content,
-    .tooltip-success[data-tip]:before {
-      color: var(--color-success-content);
-    }
-
-  .tooltip-warning {
-      --tt-bg: var(--color-warning);
-    }
-
-  .tooltip-warning > .tooltip-content,
-    .tooltip-warning[data-tip]:before {
-      color: var(--color-warning-content);
-    }
-}

package/dist/components/types.js

@@ -1,8 +0,0 @@
-const breakpoints = [
-    "base",
-    "sm",
-    "md",
-    "lg",
-    "xl"
-];
-export { breakpoints };

package/dist/components/utils.js

@@ -1,46 +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__types_js_7eec16d2__ from "./types.js";
-function isJSXElement(node) {
-    return "object" == typeof node && null !== node;
-}
-function wrapWithElementIfInvalid({ node, wrapper = "div", className = "" }) {
-    null == node || "string" == typeof node || "number" == typeof node || isJSXElement(node);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, {
-        component: wrapper,
-        class: className,
-        children: node
-    });
-}
-function mapResponsiveProp(prop, classMap) {
-    if (void 0 === prop) return [];
-    if ("string" == typeof prop || "boolean" == typeof prop) return [
-        classMap[String(prop)]
-    ];
-    return __WEBPACK_EXTERNAL_MODULE__types_js_7eec16d2__.breakpoints.flatMap((bp)=>{
-        const value = prop[bp];
-        if (void 0 === value) return [];
-        const className = classMap[String(value)];
-        return "base" === bp ? [
-            className
-        ] : [
-            `${bp}:${className}`
-        ];
-    });
-}
-function useDesktop(breakpoint = 1024) {
-    const [isDesktop, setIsDesktop] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const checkIfDesktop = ()=>{
-        const width = window.innerWidth;
-        setIsDesktop(width >= breakpoint);
-    };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        checkIfDesktop();
-        window.addEventListener("resize", checkIfDesktop);
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        window.removeEventListener("resize", checkIfDesktop);
-    });
-    return isDesktop;
-}
-export { mapResponsiveProp, useDesktop, wrapWithElementIfInvalid };

package/dist/components/video-preview/VideoPreview.js

@@ -1,55 +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";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<video>");
-const VideoPreview = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "stream",
-        "muted",
-        "mirror",
-        "dataTheme",
-        "class",
-        "className",
-        "style"
-    ]);
-    const muted = ()=>local.muted ?? true;
-    const mirror = ()=>local.mirror ?? false;
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-        get when () {
-            return local.stream();
-        },
-        children: (stream)=>{
-            let videoRef;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-                videoRef.srcObject = stream();
-            });
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-                videoRef.srcObject = null;
-            });
-            return (()=>{
-                var _el$ = _tmpl$();
-                var _ref$ = videoRef;
-                "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : videoRef = _el$;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                    autoplay: true,
-                    playsinline: true,
-                    get muted () {
-                        return muted();
-                    },
-                    get ["data-theme"] () {
-                        return local.dataTheme;
-                    },
-                    get ["class"] () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(mirror() && "-scale-x-100", local.class, local.className);
-                    },
-                    get style () {
-                        return local.style;
-                    }
-                }), false, false);
-                return _el$;
-            })();
-        }
-    });
-};
-const video_preview_VideoPreview = VideoPreview;
-export { VideoPreview, video_preview_VideoPreview as default };

package/dist/components/video-preview/index.js

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

package/dist/components/windowmockup/WindowMockup.js

@@ -1,85 +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_clsx__ from "clsx";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div aria-label="Window mockup">');
-const WindowMockup = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "border",
-        "borderColor",
-        "backgroundColor",
-        "frameColor"
-    ]);
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const borderColorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.borderColor || local.frameColor || "neutral");
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mockup-window", local.class, local.className, local.border && `border border-${borderColorValue()}`, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "border-neutral": "neutral" === borderColorValue(),
-            "border-primary": "primary" === borderColorValue(),
-            "border-secondary": "secondary" === borderColorValue(),
-            "border-accent": "accent" === borderColorValue(),
-            "border-info": "info" === borderColorValue(),
-            "border-success": "success" === borderColorValue(),
-            "border-warning": "warning" === borderColorValue(),
-            "border-error": "error" === borderColorValue(),
-            "bg-neutral": "neutral" === local.frameColor,
-            "bg-primary": "primary" === local.frameColor,
-            "bg-secondary": "secondary" === local.frameColor,
-            "bg-accent": "accent" === local.frameColor,
-            "bg-info": "info" === local.frameColor,
-            "bg-success": "success" === local.frameColor,
-            "bg-warning": "warning" === local.frameColor,
-            "bg-error": "error" === local.frameColor
-        })));
-    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("p-4", local.backgroundColor && `bg-${local.backgroundColor}`, local.border && `border-t border-${borderColorValue()}`, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "bg-neutral": "neutral" === local.backgroundColor,
-            "bg-primary": "primary" === local.backgroundColor,
-            "bg-secondary": "secondary" === local.backgroundColor,
-            "bg-accent": "accent" === local.backgroundColor,
-            "bg-info": "info" === local.backgroundColor,
-            "bg-success": "success" === local.backgroundColor,
-            "bg-warning": "warning" === local.backgroundColor,
-            "bg-error": "error" === local.backgroundColor
-        })));
-    const innerElement = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-        const childrenArray = Array.isArray(resolvedChildren()) ? resolvedChildren() : [
-            resolvedChildren()
-        ];
-        const firstChild = childrenArray[0];
-        if (1 === childrenArray.length && "object" == typeof firstChild && null != firstChild && "type" in firstChild) {
-            const existingClass = firstChild.props?.class || firstChild.props?.className || "";
-            const mergedClass = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(innerClasses(), existingClass);
-            return {
-                ...firstChild,
-                props: {
-                    ...firstChild.props,
-                    class: mergedClass
-                }
-            };
-        }
-        return (()=>{
-            var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, innerClasses()));
-            return _el$;
-        })();
-    });
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, innerElement);
-        return _el$2;
-    })();
-};
-const windowmockup_WindowMockup = WindowMockup;
-export { windowmockup_WindowMockup as default };

package/dist/components/windowmockup/index.js

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

package/dist/countdown/countdown.css

@@ -1,58 +0,0 @@
-@layer components {
-  .countdown {
-      display: inline-flex;
-    }
-
-  .countdown.countdown {
-      line-height: 1em;
-    }
-
-  .countdown > * {
-      visibility: hidden;
-      position: relative;
-      display: inline-block;
-      overflow-y: clip;
-      transition: width 0.4s ease-out 0.2s;
-      height: 1em;
-      --value-v: calc(mod(max(0, var(--value)), 1000));
-      --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1));
-      --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1));
-      --value-ones: calc(mod(var(--value-v), 100));
-      --show-hundreds: clamp(clamp(0, var(--digits, 1) - 2, 1), var(--value-hundreds), 1);
-      --show-tens: clamp(
-          clamp(0, var(--digits, 1) - 1, 1),
-          var(--value-tens) + var(--show-hundreds),
-          1
-        );
-      --first-digits: calc(round(to-zero, var(--value-v) / 10, 1));
-      width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch);
-      direction: ltr;
-    }
-
-  .countdown > *:before,
-    .countdown > *:after {
-      visibility: visible;
-      position: absolute;
-      overflow-x: clip;
-      --tw-content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
-      content: var(--tw-content);
-      font-variant-numeric: tabular-nums;
-      white-space: pre;
-      text-align: end;
-      direction: rtl;
-      transition: all 1s cubic-bezier(1, 0, 0, 1), width 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
-    }
-
-  .countdown > *:before {
-      width: calc(1ch + var(--show-hundreds) * 1ch);
-      top: calc(var(--first-digits) * -1em);
-      inset-inline-end: 0;
-      opacity: var(--show-tens);
-    }
-
-  .countdown > *:after {
-      width: 1ch;
-      top: calc(var(--value-ones) * -1em);
-      inset-inline-start: 0;
-    }
-}

package/dist/diff/diff.css

@@ -1,162 +0,0 @@
-@layer components {
-  .diff {
-      position: relative;
-      display: grid;
-      width: 100%;
-      overflow: hidden;
-      webkit-user-select: none;
-      user-select: none;
-      grid-template-rows: 1fr 1.8rem 1fr;
-      direction: ltr;
-      container-type: inline-size;
-      grid-template-columns: auto 1fr;
-    }
-
-  .diff:focus-visible,
-    .diff:has(.diff-item-1:focus-visible) {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-      outline-offset: 1px;
-      outline-color: var(--color-base-content);
-    }
-
-  .diff:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-      outline-offset: 1px;
-      outline-color: var(--color-base-content);
-    }
-
-  .diff:focus-visible .diff-resizer {
-      min-width: 95cqi;
-      max-width: 95cqi;
-    }
-
-  .diff:has(.diff-item-1:focus-visible) {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-      outline-offset: 1px;
-    }
-
-  .diff:has(.diff-item-1:focus-visible) .diff-resizer {
-      min-width: 5cqi;
-      max-width: 5cqi;
-    }
-
-  @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
-    .diff:focus .diff-resizer {
-      min-width: 5cqi;
-      max-width: 5cqi;
-    }
-    .diff:has(.diff-item-1:focus) .diff-resizer {
-      min-width: 95cqi;
-      max-width: 95cqi;
-    }
-    }
-
-  .diff-item-2 {
-      position: relative;
-      grid-column-start: 1;
-      grid-row: span 3 / span 3;
-      grid-row-start: 1;
-    }
-
-  .diff-item-2:after {
-      pointer-events: none;
-      position: absolute;
-      top: calc(1/2 * 100%);
-      right: 1px;
-      bottom: calc(0.25rem * 0);
-      z-index: 2;
-      border-radius: calc(infinity * 1px);
-      background-color: var(--color-base-100);
-      width: 1.2rem;
-      height: 1.8rem;
-      border: 2px solid var(--color-base-100);
-      border: 0.5px solid #0000001f;
-      content: "";
-      outline: 1px solid var(--color-base-content);
-      outline-offset: -3px;
-      translate: 50% -50%;
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .diff-item-2:after {
-      background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent);
-    }
-    }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .diff-item-2:after {
-      outline: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
-    }
-    }
-
-  .diff-item-2 > * {
-      pointer-events: none;
-      position: absolute;
-      top: calc(0.25rem * 0);
-      bottom: calc(0.25rem * 0);
-      left: calc(0.25rem * 0);
-      height: 100%;
-      width: 100cqi;
-      max-width: none;
-      object-fit: cover;
-      object-position: center;
-    }
-
-  @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
-    .diff-item-2:after {
-      --tw-content: none;
-      content: var(--tw-content);
-    }
-    }
-
-  .diff-item-1 {
-      position: relative;
-      z-index: 1;
-      grid-column-start: 1;
-      grid-row: span 3 / span 3;
-      grid-row-start: 1;
-      overflow: hidden;
-      border-right: 2px solid var(--color-base-100);
-    }
-
-  .diff-item-1:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-
-  .diff-item-1 > * {
-      pointer-events: none;
-      position: absolute;
-      top: calc(0.25rem * 0);
-      bottom: calc(0.25rem * 0);
-      left: calc(0.25rem * 0);
-      height: 100%;
-      width: 100cqi;
-      max-width: none;
-      object-fit: cover;
-      object-position: center;
-    }
-
-  .diff-resizer {
-      position: relative;
-      isolation: isolate;
-      z-index: 2;
-      grid-column-start: 1;
-      grid-row-start: 2;
-      height: calc(0.25rem * 3);
-      width: 50cqi;
-      max-width: calc(100cqi - 1rem);
-      min-width: 1rem;
-      resize: horizontal;
-      overflow: hidden;
-      opacity: 0%;
-      transform: scaleY(5) translate(0.32rem, 50%);
-      cursor: ew-resize;
-      transform-origin: 100% 100%;
-      clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem));
-      transition: min-width 0.3s ease-out, max-width 0.3s ease-out;
-    }
-}