@pathscale/ui 1.1.55 → 1.1.56

package/dist/components/drawer/Drawer.classes.d.ts

@@ -1,90 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "drawer";
-        readonly state: {
-            readonly open: "drawer--open";
-            readonly entering: "drawer--entering";
-            readonly exiting: "drawer--exiting";
-            readonly closed: "drawer--closed";
-        };
-    };
-    readonly Trigger: {
-        readonly base: "drawer__trigger";
-    };
-    readonly Backdrop: {
-        readonly base: "drawer__backdrop";
-        readonly variant: {
-            readonly opaque: "drawer__backdrop--opaque";
-            readonly blur: "drawer__backdrop--blur";
-            readonly transparent: "drawer__backdrop--transparent";
-        };
-        readonly state: {
-            readonly entering: "drawer__backdrop--entering";
-            readonly exiting: "drawer__backdrop--exiting";
-        };
-    };
-    readonly Content: {
-        readonly base: "drawer__content";
-        readonly placement: {
-            readonly top: "drawer__content--top";
-            readonly bottom: "drawer__content--bottom";
-            readonly left: "drawer__content--left";
-            readonly right: "drawer__content--right";
-        };
-        readonly scroll: {
-            readonly inside: "drawer__content--scroll-inside";
-            readonly outside: "drawer__content--scroll-outside";
-        };
-        readonly state: {
-            readonly entering: "drawer__content--entering";
-            readonly exiting: "drawer__content--exiting";
-        };
-    };
-    readonly Dialog: {
-        readonly base: "drawer__dialog";
-        readonly axis: {
-            readonly side: "drawer__dialog--axis-side";
-            readonly edge: "drawer__dialog--axis-edge";
-        };
-        readonly size: {
-            readonly side: {
-                readonly sm: "drawer__dialog--side-sm";
-                readonly md: "drawer__dialog--side-md";
-                readonly lg: "drawer__dialog--side-lg";
-                readonly full: "drawer__dialog--side-full";
-            };
-            readonly edge: {
-                readonly sm: "drawer__dialog--edge-sm";
-                readonly md: "drawer__dialog--edge-md";
-                readonly lg: "drawer__dialog--edge-lg";
-                readonly full: "drawer__dialog--edge-full";
-            };
-        };
-        readonly state: {
-            readonly entering: "drawer__dialog--entering";
-            readonly exiting: "drawer__dialog--exiting";
-        };
-    };
-    readonly Header: {
-        readonly base: "drawer__header";
-    };
-    readonly Heading: {
-        readonly base: "drawer__heading";
-    };
-    readonly Body: {
-        readonly base: "drawer__body";
-    };
-    readonly Footer: {
-        readonly base: "drawer__footer";
-    };
-    readonly Handle: {
-        readonly base: "drawer__handle";
-        readonly bar: "drawer__handle-bar";
-    };
-    readonly CloseTrigger: {
-        readonly base: "drawer__close-trigger";
-        readonly icon: "drawer__close-icon";
-        readonly iconStart: "drawer__close-icon--start";
-        readonly iconEnd: "drawer__close-icon--end";
-    };
-};

package/dist/components/drawer/Drawer.classes.js

@@ -1,91 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "drawer",
-        state: {
-            open: "drawer--open",
-            entering: "drawer--entering",
-            exiting: "drawer--exiting",
-            closed: "drawer--closed"
-        }
-    },
-    Trigger: {
-        base: "drawer__trigger"
-    },
-    Backdrop: {
-        base: "drawer__backdrop",
-        variant: {
-            opaque: "drawer__backdrop--opaque",
-            blur: "drawer__backdrop--blur",
-            transparent: "drawer__backdrop--transparent"
-        },
-        state: {
-            entering: "drawer__backdrop--entering",
-            exiting: "drawer__backdrop--exiting"
-        }
-    },
-    Content: {
-        base: "drawer__content",
-        placement: {
-            top: "drawer__content--top",
-            bottom: "drawer__content--bottom",
-            left: "drawer__content--left",
-            right: "drawer__content--right"
-        },
-        scroll: {
-            inside: "drawer__content--scroll-inside",
-            outside: "drawer__content--scroll-outside"
-        },
-        state: {
-            entering: "drawer__content--entering",
-            exiting: "drawer__content--exiting"
-        }
-    },
-    Dialog: {
-        base: "drawer__dialog",
-        axis: {
-            side: "drawer__dialog--axis-side",
-            edge: "drawer__dialog--axis-edge"
-        },
-        size: {
-            side: {
-                sm: "drawer__dialog--side-sm",
-                md: "drawer__dialog--side-md",
-                lg: "drawer__dialog--side-lg",
-                full: "drawer__dialog--side-full"
-            },
-            edge: {
-                sm: "drawer__dialog--edge-sm",
-                md: "drawer__dialog--edge-md",
-                lg: "drawer__dialog--edge-lg",
-                full: "drawer__dialog--edge-full"
-            }
-        },
-        state: {
-            entering: "drawer__dialog--entering",
-            exiting: "drawer__dialog--exiting"
-        }
-    },
-    Header: {
-        base: "drawer__header"
-    },
-    Heading: {
-        base: "drawer__heading"
-    },
-    Body: {
-        base: "drawer__body"
-    },
-    Footer: {
-        base: "drawer__footer"
-    },
-    Handle: {
-        base: "drawer__handle",
-        bar: "drawer__handle-bar"
-    },
-    CloseTrigger: {
-        base: "drawer__close-trigger",
-        icon: "drawer__close-icon",
-        iconStart: "drawer__close-icon--start",
-        iconEnd: "drawer__close-icon--end"
-    }
-};
-export { CLASSES };

package/dist/components/drawer/Drawer.context.d.ts

@@ -1,27 +0,0 @@
-import type { DrawerAnimState, DrawerBackdropVariant, DrawerCloseReason, DrawerPlacement, DrawerScrollBehavior, DrawerSize } from "./Drawer.a11y";
-export type DrawerContextValue = {
-    isOpen: () => boolean;
-    setIsOpen: (next: boolean) => void;
-    requestClose: (reason: DrawerCloseReason) => void;
-    animState: () => DrawerAnimState;
-    placement: () => DrawerPlacement;
-    size: () => DrawerSize;
-    backdrop: () => DrawerBackdropVariant;
-    scrollBehavior: () => DrawerScrollBehavior;
-    isDismissable: () => boolean;
-    shouldCloseOnEsc: () => boolean;
-    shouldCloseOnBackdropClick: () => boolean;
-    trapFocus: () => boolean;
-    restoreFocus: () => boolean;
-    dialogRef: () => HTMLDivElement | undefined;
-    setDialogRef: (node: HTMLDivElement | undefined) => void;
-    labelledBy: () => string | undefined;
-    setLabelledBy: (id: string | undefined) => void;
-    describedBy: () => string | undefined;
-    setDescribedBy: (id: string | undefined) => void;
-    setPlacementOverride: (value: DrawerPlacement | undefined) => void;
-    setBackdropDismissableOverride: (value: boolean | undefined) => void;
-    setBackdropCloseOnClickOverride: (value: boolean | undefined) => void;
-};
-export declare const DrawerContext: import("solid-js").Context<DrawerContextValue | undefined>;
-export declare const useDrawerContext: () => DrawerContextValue;

package/dist/components/drawer/Drawer.context.js

@@ -1,8 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-const DrawerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
-const useDrawerContext = ()=>{
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DrawerContext);
-    if (!ctx) throw new Error("Drawer compound components must be used within <Drawer.Root>.");
-    return ctx;
-};
-export { DrawerContext, useDrawerContext };

package/dist/components/dropdown/Dropdown.classes.d.ts

@@ -1,11 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "dropdown";
-    readonly slot: {
-        readonly trigger: "dropdown__trigger";
-        readonly popover: "dropdown__popover";
-        readonly menu: "dropdown__menu";
-        readonly item: "dropdown__item";
-        readonly group: "dropdown__group";
-        readonly separator: "dropdown__separator";
-    };
-};

package/dist/components/dropdown/Dropdown.classes.js

@@ -1,12 +0,0 @@
-const CLASSES = {
-    base: "dropdown",
-    slot: {
-        trigger: "dropdown__trigger",
-        popover: "dropdown__popover",
-        menu: "dropdown__menu",
-        item: "dropdown__item",
-        group: "dropdown__group",
-        separator: "dropdown__separator"
-    }
-};
-export { CLASSES };

package/dist/components/empty-state/EmptyState.classes.d.ts

@@ -1,9 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "empty-state";
-    readonly slot: {
-        readonly icon: "empty-state__icon";
-        readonly title: "empty-state__title";
-        readonly description: "empty-state__description";
-        readonly actions: "empty-state__actions";
-    };
-};

package/dist/components/empty-state/EmptyState.classes.js

@@ -1,10 +0,0 @@
-const CLASSES = {
-    base: "empty-state",
-    slot: {
-        icon: "empty-state__icon",
-        title: "empty-state__title",
-        description: "empty-state__description",
-        actions: "empty-state__actions"
-    }
-};
-export { CLASSES };

package/dist/components/error-message/ErrorMessage.classes.d.ts

@@ -1,3 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "error-message";
-};

package/dist/components/error-message/ErrorMessage.classes.js

@@ -1,4 +0,0 @@
-const CLASSES = {
-    base: "error-message"
-};
-export { CLASSES };

package/dist/components/error-message/ErrorMessage.css

@@ -1,20 +0,0 @@
-@layer components {
-  .error-message {
-    height: auto;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    text-wrap: wrap;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    color: var(--color-danger);
-    transition:
-      opacity 150ms var(--ease-out),
-      height 350ms var(--ease-smooth);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .error-message {
-      transition: none;
-    }
-  }
-}

package/dist/components/error-message/ErrorMessage.d.ts

@@ -1,11 +0,0 @@
-import "./ErrorMessage.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ErrorMessageRootProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
-declare const ErrorMessageRoot: Component<ErrorMessageRootProps>;
-declare const ErrorMessage: Component<ErrorMessageRootProps> & {
-    Root: Component<ErrorMessageRootProps>;
-};
-export default ErrorMessage;
-export { ErrorMessage, ErrorMessageRoot };
-export type { ErrorMessageRootProps as ErrorMessageProps };

package/dist/components/error-message/index.d.ts

@@ -1 +0,0 @@
-export { default, ErrorMessage, ErrorMessageRoot, type ErrorMessageProps, type ErrorMessageRootProps, } from "./ErrorMessage";

package/dist/components/error-message/index.js

@@ -1,5 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE__ErrorMessage_js_a8db9ade__ from "./ErrorMessage.js";
-var __webpack_exports__ErrorMessage = __WEBPACK_EXTERNAL_MODULE__ErrorMessage_js_a8db9ade__.ErrorMessage;
-var __webpack_exports__ErrorMessageRoot = __WEBPACK_EXTERNAL_MODULE__ErrorMessage_js_a8db9ade__.ErrorMessageRoot;
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ErrorMessage_js_a8db9ade__["default"];
-export { __webpack_exports__ErrorMessage as ErrorMessage, __webpack_exports__ErrorMessageRoot as ErrorMessageRoot, __webpack_exports__default as default };

package/dist/components/field-error/FieldError.classes.d.ts

@@ -1,3 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "field-error";
-};

package/dist/components/field-error/FieldError.classes.js

@@ -1,4 +0,0 @@
-const CLASSES = {
-    base: "field-error"
-};
-export { CLASSES };

package/dist/components/field-error/FieldError.css

@@ -1,27 +0,0 @@
-@layer components {
-  .field-error {
-    height: 0;
-    padding-inline: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    text-wrap: wrap;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    color: var(--color-danger);
-    opacity: 0;
-    transition:
-      opacity 150ms var(--ease-out),
-      height 350ms var(--ease-smooth);
-  }
-
-  .field-error[data-visible="true"] {
-    height: auto;
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .field-error {
-      transition: none;
-    }
-  }
-}

package/dist/components/field-error/FieldError.d.ts

@@ -1,21 +0,0 @@
-import "./FieldError.css";
-import { type Component, type JSX } from "solid-js";
-import { type AnyFormApi } from "../../hooks/form";
-import type { IComponentBaseProps } from "../types";
-export type FieldErrorRenderProps = {
-    isVisible: boolean;
-};
-export type FieldErrorRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element | ((props: FieldErrorRenderProps) => JSX.Element);
-    isVisible?: boolean;
-    name?: string;
-    form?: AnyFormApi;
-    showWhenTouched?: boolean;
-};
-declare const FieldErrorRoot: Component<FieldErrorRootProps>;
-declare const FieldError: Component<FieldErrorRootProps> & {
-    Root: Component<FieldErrorRootProps>;
-};
-export default FieldError;
-export { FieldError, FieldErrorRoot };
-export type { FieldErrorRootProps as FieldErrorProps };

package/dist/components/field-error/FieldError.js

@@ -1,69 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./FieldError.css";
-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__hooks_form_getFirstFieldError_js_b4e4d106__ from "../../hooks/form/getFirstFieldError.js";
-import * as __WEBPACK_EXTERNAL_MODULE__hooks_form_index_js_98c491ae__ from "../../hooks/form/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__FieldError_classes_js_e17d0a0a__ from "./FieldError.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const FieldErrorRoot = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "slot",
-        "isVisible",
-        "name",
-        "form",
-        "showWhenTouched"
-    ]);
-    const hookMessage = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-        if (!local.name) return;
-        const form = local.form ?? (0, __WEBPACK_EXTERNAL_MODULE__hooks_form_index_js_98c491ae__.useFormContext)();
-        const fieldMeta = form._tsForm.getFieldMeta(local.name);
-        if (!fieldMeta) return;
-        if ((local.showWhenTouched ?? true) && !fieldMeta.isTouched) return;
-        return (0, __WEBPACK_EXTERNAL_MODULE__hooks_form_getFirstFieldError_js_b4e4d106__.getFirstFieldError)(fieldMeta.errors ?? []);
-    });
-    const isVisible = ()=>{
-        if ("boolean" == typeof local.isVisible) return local.isVisible;
-        if (hookMessage()) return true;
-        return null != local.children;
-    };
-    const content = ()=>{
-        if ("function" == typeof local.children) return local.children({
-            isVisible: isVisible()
-        });
-        if (null != local.children) return local.children;
-        return hookMessage();
-    };
-    return (()=>{
-        var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__FieldError_classes_js_e17d0a0a__.CLASSES.base, local.class, local.className)
-            }), {
-            "data-slot": "field-error",
-            get ["data-visible"] () {
-                return isVisible() ? "true" : "false";
-            },
-            get slot () {
-                return local.slot ?? "errorMessage";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, content);
-        return _el$;
-    })();
-};
-const FieldError_FieldError = Object.assign(FieldErrorRoot, {
-    Root: FieldErrorRoot
-});
-const FieldError = FieldError_FieldError;
-export { FieldError_FieldError as FieldError, FieldErrorRoot, FieldError as default };

package/dist/components/field-error/index.d.ts

@@ -1 +0,0 @@
-export { default, FieldError, FieldErrorRoot, type FieldErrorProps, type FieldErrorRootProps, type FieldErrorRenderProps, } from "./FieldError";

package/dist/components/field-error/index.js

@@ -1,5 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE__FieldError_js_e28dd93b__ from "./FieldError.js";
-var __webpack_exports__FieldError = __WEBPACK_EXTERNAL_MODULE__FieldError_js_e28dd93b__.FieldError;
-var __webpack_exports__FieldErrorRoot = __WEBPACK_EXTERNAL_MODULE__FieldError_js_e28dd93b__.FieldErrorRoot;
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__FieldError_js_e28dd93b__["default"];
-export { __webpack_exports__FieldError as FieldError, __webpack_exports__FieldErrorRoot as FieldErrorRoot, __webpack_exports__default as default };

package/dist/components/fieldset/Fieldset.classes.d.ts

@@ -1,14 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "fieldset";
-    };
-    readonly Legend: {
-        readonly base: "fieldset__legend";
-    };
-    readonly Group: {
-        readonly base: "fieldset__group";
-    };
-    readonly Actions: {
-        readonly base: "fieldset__actions";
-    };
-};

package/dist/components/fieldset/Fieldset.classes.js

@@ -1,15 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "fieldset"
-    },
-    Legend: {
-        base: "fieldset__legend"
-    },
-    Group: {
-        base: "fieldset__group"
-    },
-    Actions: {
-        base: "fieldset__actions"
-    }
-};
-export { CLASSES };

package/dist/components/fieldset/Fieldset.css

@@ -1,30 +0,0 @@
-@layer components {
-  .fieldset {
-    display: flex;
-    flex: 1 1 0;
-    min-width: 0;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .fieldset__legend {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 500;
-    color: var(--color-foreground, var(--color-base-content));
-  }
-
-  .fieldset__group {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .fieldset__actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding-top: 0.25rem;
-  }
-}

package/dist/components/flex/Flex.classes.d.ts

@@ -1,65 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "flex-layout";
-    readonly direction: {
-        readonly row: "flex-row";
-        readonly col: "flex-col";
-        readonly "row-reverse": "flex-row-reverse";
-        readonly "col-reverse": "flex-col-reverse";
-    };
-    readonly justify: {
-        readonly start: "justify-start";
-        readonly center: "justify-center";
-        readonly end: "justify-end";
-        readonly between: "justify-between";
-        readonly around: "justify-around";
-        readonly evenly: "justify-evenly";
-    };
-    readonly align: {
-        readonly start: "items-start";
-        readonly center: "items-center";
-        readonly end: "items-end";
-        readonly stretch: "items-stretch";
-        readonly baseline: "items-baseline";
-    };
-    readonly wrap: {
-        readonly wrap: "flex-wrap";
-        readonly nowrap: "flex-nowrap";
-        readonly "wrap-reverse": "flex-wrap-reverse";
-    };
-    readonly gap: {
-        readonly none: "gap-0";
-        readonly sm: "gap-2";
-        readonly md: "gap-4";
-        readonly lg: "gap-6";
-        readonly xl: "gap-8";
-    };
-    readonly gapX: {
-        readonly none: "gap-x-0";
-        readonly sm: "gap-x-2";
-        readonly md: "gap-x-4";
-        readonly lg: "gap-x-6";
-        readonly xl: "gap-x-8";
-    };
-    readonly gapY: {
-        readonly none: "gap-y-0";
-        readonly sm: "gap-y-2";
-        readonly md: "gap-y-4";
-        readonly lg: "gap-y-6";
-        readonly xl: "gap-y-8";
-    };
-    readonly grow: {
-        readonly true: "flex-grow";
-        readonly false: "flex-grow-0";
-    };
-    readonly shrink: {
-        readonly true: "flex-shrink";
-        readonly false: "flex-shrink-0";
-    };
-    readonly basis: {
-        readonly none: "basis-0";
-        readonly sm: "basis-8";
-        readonly md: "basis-16";
-        readonly lg: "basis-24";
-        readonly xl: "basis-32";
-    };
-};

package/dist/components/flex/Flex.classes.js

@@ -1,66 +0,0 @@
-const CLASSES = {
-    base: "flex-layout",
-    direction: {
-        row: "flex-row",
-        col: "flex-col",
-        "row-reverse": "flex-row-reverse",
-        "col-reverse": "flex-col-reverse"
-    },
-    justify: {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between",
-        around: "justify-around",
-        evenly: "justify-evenly"
-    },
-    align: {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end",
-        stretch: "items-stretch",
-        baseline: "items-baseline"
-    },
-    wrap: {
-        wrap: "flex-wrap",
-        nowrap: "flex-nowrap",
-        "wrap-reverse": "flex-wrap-reverse"
-    },
-    gap: {
-        none: "gap-0",
-        sm: "gap-2",
-        md: "gap-4",
-        lg: "gap-6",
-        xl: "gap-8"
-    },
-    gapX: {
-        none: "gap-x-0",
-        sm: "gap-x-2",
-        md: "gap-x-4",
-        lg: "gap-x-6",
-        xl: "gap-x-8"
-    },
-    gapY: {
-        none: "gap-y-0",
-        sm: "gap-y-2",
-        md: "gap-y-4",
-        lg: "gap-y-6",
-        xl: "gap-y-8"
-    },
-    grow: {
-        true: "flex-grow",
-        false: "flex-grow-0"
-    },
-    shrink: {
-        true: "flex-shrink",
-        false: "flex-shrink-0"
-    },
-    basis: {
-        none: "basis-0",
-        sm: "basis-8",
-        md: "basis-16",
-        lg: "basis-24",
-        xl: "basis-32"
-    }
-};
-export { CLASSES };

package/dist/components/flex/Flex.css

@@ -1,5 +0,0 @@
-@layer components {
-  .flex-layout {
-    display: flex;
-  }
-}