@usefragments/ui 1.0.0

package/dist/components/Accordion/index.js

@@ -0,0 +1,184 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+import styles from "./Accordion.module.scss.js";
+const AccordionContext = React.createContext(null);
+const AccordionItemContext = React.createContext(null);
+function useAccordionContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
+function useAccordionItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("Accordion.Trigger/Content must be used within an Accordion.Item");
+  }
+  return context;
+}
+function AccordionRoot({
+  children,
+  type = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  collapsible = false,
+  headingLevel = 3,
+  className,
+  ...htmlProps
+}) {
+  const normalizeValue = (val) => {
+    if (val === void 0) return [];
+    return Array.isArray(val) ? val : [val];
+  };
+  const [openItems, setOpenItems] = React.useState(() => normalizeValue(defaultValue));
+  const controlledOpenItems = value !== void 0 ? normalizeValue(value) : void 0;
+  const currentOpenItems = controlledOpenItems ?? openItems;
+  const toggle = React.useCallback(
+    (itemValue) => {
+      const newItems = (() => {
+        if (type === "single") {
+          if (currentOpenItems.includes(itemValue)) {
+            return collapsible ? [] : currentOpenItems;
+          }
+          return [itemValue];
+        } else {
+          if (currentOpenItems.includes(itemValue)) {
+            return currentOpenItems.filter((v) => v !== itemValue);
+          }
+          return [...currentOpenItems, itemValue];
+        }
+      })();
+      if (controlledOpenItems === void 0) {
+        setOpenItems(newItems);
+      }
+      if (type === "single") {
+        onValueChange == null ? void 0 : onValueChange(newItems[0]);
+      } else {
+        onValueChange == null ? void 0 : onValueChange(newItems);
+      }
+    },
+    [type, currentOpenItems, collapsible, controlledOpenItems, onValueChange]
+  );
+  const classes = [styles.accordion, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    AccordionContext.Provider,
+    {
+      value: { type, openItems: currentOpenItems, toggle, collapsible, headingLevel },
+      children: /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, "data-orientation": "vertical", children })
+    }
+  );
+}
+function AccordionItem({
+  children,
+  value,
+  disabled = false,
+  className,
+  ...htmlProps
+}) {
+  const { openItems } = useAccordionContext();
+  const isOpen = openItems.includes(value);
+  const baseId = React.useId();
+  const triggerId = `accordion-trigger-${baseId}`;
+  const contentId = `accordion-content-${baseId}`;
+  const classes = [
+    styles.item,
+    isOpen && styles.itemOpen,
+    disabled && styles.itemDisabled,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled, triggerId, contentId }, children: /* @__PURE__ */ jsx(Collapsible.Root, { open: isOpen, disabled, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      "data-state": isOpen ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  ) }) });
+}
+function AccordionTrigger({
+  children,
+  className,
+  type: buttonType,
+  onClick,
+  ...htmlProps
+}) {
+  const { toggle, headingLevel } = useAccordionContext();
+  const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (event.defaultPrevented) return;
+    if (!disabled) {
+      toggle(value);
+    }
+  };
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  const HeadingTag = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(HeadingTag, { className: styles.heading, children: /* @__PURE__ */ jsxs(
+    Collapsible.Trigger,
+    {
+      ...htmlProps,
+      type: buttonType ?? "button",
+      id: triggerId,
+      className: classes,
+      onClick: handleClick,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "data-state": isOpen ? "open" : "closed",
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.triggerContent, children }),
+        /* @__PURE__ */ jsx("svg", { className: styles.chevron, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 6L8 10L12 6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  children,
+  keepMounted = false,
+  hiddenUntilFound = false,
+  className,
+  ...htmlProps
+}) {
+  const { isOpen, triggerId, contentId } = useAccordionItemContext();
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Collapsible.Panel,
+    {
+      ...htmlProps,
+      id: contentId,
+      className: classes,
+      "data-state": isOpen ? "open" : "closed",
+      role: "region",
+      "aria-labelledby": triggerId,
+      keepMounted,
+      hiddenUntilFound,
+      children: /* @__PURE__ */ jsx("div", { className: styles.contentInner, children })
+    }
+  );
+}
+const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger
+};

package/dist/components/Alert/Alert.module.scss.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const alert = "_alert_132r8_1";
+const info = "_info_132r8_12";
+const success = "_success_132r8_18";
+const warning = "_warning_132r8_24";
+const error = "_error_132r8_30";
+const icon = "_icon_132r8_36";
+const body = "_body_132r8_66";
+const title = "_title_132r8_71";
+const content = "_content_132r8_76";
+const actions = "_actions_132r8_80";
+const close = "_close_132r8_86";
+const action = "_action_132r8_80";
+const styles = {
+  alert,
+  info,
+  success,
+  warning,
+  error,
+  icon,
+  body,
+  title,
+  content,
+  actions,
+  close,
+  action
+};
+exports.action = action;
+exports.actions = actions;
+exports.alert = alert;
+exports.body = body;
+exports.close = close;
+exports.content = content;
+exports.default = styles;
+exports.error = error;
+exports.icon = icon;
+exports.info = info;
+exports.success = success;
+exports.title = title;
+exports.warning = warning;

package/dist/components/Alert/Alert.module.scss.js

@@ -0,0 +1,41 @@
+const alert = "_alert_132r8_1";
+const info = "_info_132r8_12";
+const success = "_success_132r8_18";
+const warning = "_warning_132r8_24";
+const error = "_error_132r8_30";
+const icon = "_icon_132r8_36";
+const body = "_body_132r8_66";
+const title = "_title_132r8_71";
+const content = "_content_132r8_76";
+const actions = "_actions_132r8_80";
+const close = "_close_132r8_86";
+const action = "_action_132r8_80";
+const styles = {
+  alert,
+  info,
+  success,
+  warning,
+  error,
+  icon,
+  body,
+  title,
+  content,
+  actions,
+  close,
+  action
+};
+export {
+  action,
+  actions,
+  alert,
+  body,
+  close,
+  content,
+  styles as default,
+  error,
+  icon,
+  info,
+  success,
+  title,
+  warning
+};

package/dist/components/Alert/index.cjs

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const button = require("@base-ui/react/button");
+const Alert_module = require("./Alert.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AlertContext = React__namespace.createContext(null);
+function useAlertContext() {
+  const context = React__namespace.useContext(AlertContext);
+  if (!context) {
+    throw new Error("Alert compound components must be used within an Alert");
+  }
+  return context;
+}
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler == null ? void 0 : internalHandler(event);
+  };
+}
+const severityIcons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "✗"
+};
+function AlertRoot({
+  children,
+  severity = "info",
+  className,
+  ...htmlProps
+}) {
+  const [dismissed, setDismissed] = React__namespace.useState(false);
+  const titleId = React__namespace.useId();
+  const descId = React__namespace.useId();
+  const dismiss = React__namespace.useCallback(() => {
+    setDismissed(true);
+  }, []);
+  if (dismissed) return null;
+  const classes = [Alert_module.default.alert, Alert_module.default[severity], className].filter(Boolean).join(" ");
+  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const contextValue = {
+    severity,
+    titleId,
+    descId,
+    dismiss
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      role,
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      className: classes,
+      children
+    }
+  ) });
+}
+function AlertIcon({ children, className, ...htmlProps }) {
+  const { severity } = useAlertContext();
+  const classes = [Alert_module.default.icon, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+}
+function AlertBody({ children, className, ...htmlProps }) {
+  const classes = [Alert_module.default.body, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
+}
+function AlertTitle({ children, className, ...htmlProps }) {
+  const { titleId } = useAlertContext();
+  const classes = [Alert_module.default.title, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, id: htmlProps.id ?? titleId, className: classes, children });
+}
+function AlertContent({ children, className, ...htmlProps }) {
+  const { descId } = useAlertContext();
+  const classes = [Alert_module.default.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, id: htmlProps.id ?? descId, className: classes, children });
+}
+function AlertActions({ children, className, ...htmlProps }) {
+  const classes = [Alert_module.default.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
+}
+function AlertAction({
+  children,
+  onClick,
+  type = "button",
+  className,
+  ...htmlProps
+}) {
+  const classes = [Alert_module.default.action, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, { ...htmlProps, onClick, type, className: classes, children });
+}
+function AlertClose({
+  children,
+  className,
+  onClick,
+  type = "button",
+  "aria-label": ariaLabel = "Dismiss alert",
+  ...htmlProps
+}) {
+  const { dismiss } = useAlertContext();
+  const classes = [Alert_module.default.close, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      ...htmlProps,
+      onClick: composeEventHandlers(onClick, dismiss),
+      type,
+      "aria-label": ariaLabel,
+      className: classes,
+      children: children ?? "×"
+    }
+  );
+}
+const Alert = Object.assign(AlertRoot, {
+  Icon: AlertIcon,
+  Body: AlertBody,
+  Title: AlertTitle,
+  Content: AlertContent,
+  Actions: AlertActions,
+  Action: AlertAction,
+  Close: AlertClose
+});
+exports.Alert = Alert;
+exports.AlertAction = AlertAction;
+exports.AlertActions = AlertActions;
+exports.AlertBody = AlertBody;
+exports.AlertClose = AlertClose;
+exports.AlertContent = AlertContent;
+exports.AlertIcon = AlertIcon;
+exports.AlertRoot = AlertRoot;
+exports.AlertTitle = AlertTitle;
+exports.useAlertContext = useAlertContext;

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+export type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Alert for contextual feedback messages (info, success, warning, error).
+ * @see https://usefragments.com/components/alert
+ */
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Alert severity level. Controls color and default icon.
+     * @default "info"
+     * @see https://usefragments.com/components/alert#variants */
+    severity?: AlertSeverity;
+}
+export interface AlertIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+}
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface AlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface AlertActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    children: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    children?: React.ReactNode;
+}
+export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface AlertContextValue {
+    severity: AlertSeverity;
+    titleId: string;
+    descId: string;
+    dismiss: () => void;
+}
+declare function useAlertContext(): AlertContextValue;
+declare function AlertRoot({ children, severity, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AlertIcon({ children, className, ...htmlProps }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertBody({ children, className, ...htmlProps }: AlertBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertContent({ children, className, ...htmlProps }: AlertContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertActions({ children, className, ...htmlProps }: AlertActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertAction({ children, onClick, type, className, ...htmlProps }: AlertActionProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertClose({ children, className, onClick, type, 'aria-label': ariaLabel, ...htmlProps }: AlertCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Alert: typeof AlertRoot & {
+    Icon: typeof AlertIcon;
+    Body: typeof AlertBody;
+    Title: typeof AlertTitle;
+    Content: typeof AlertContent;
+    Actions: typeof AlertActions;
+    Action: typeof AlertAction;
+    Close: typeof AlertClose;
+};
+export { AlertRoot, AlertIcon, AlertBody, AlertTitle, AlertContent, AlertActions, AlertAction, AlertClose, useAlertContext, };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Alert/index.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+import styles from "./Alert.module.scss.js";
+const AlertContext = React.createContext(null);
+function useAlertContext() {
+  const context = React.useContext(AlertContext);
+  if (!context) {
+    throw new Error("Alert compound components must be used within an Alert");
+  }
+  return context;
+}
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler == null ? void 0 : internalHandler(event);
+  };
+}
+const severityIcons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "✗"
+};
+function AlertRoot({
+  children,
+  severity = "info",
+  className,
+  ...htmlProps
+}) {
+  const [dismissed, setDismissed] = React.useState(false);
+  const titleId = React.useId();
+  const descId = React.useId();
+  const dismiss = React.useCallback(() => {
+    setDismissed(true);
+  }, []);
+  if (dismissed) return null;
+  const classes = [styles.alert, styles[severity], className].filter(Boolean).join(" ");
+  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const contextValue = {
+    severity,
+    titleId,
+    descId,
+    dismiss
+  };
+  return /* @__PURE__ */ jsx(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role,
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      className: classes,
+      children
+    }
+  ) });
+}
+function AlertIcon({ children, className, ...htmlProps }) {
+  const { severity } = useAlertContext();
+  const classes = [styles.icon, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+}
+function AlertBody({ children, className, ...htmlProps }) {
+  const classes = [styles.body, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function AlertTitle({ children, className, ...htmlProps }) {
+  const { titleId } = useAlertContext();
+  const classes = [styles.title, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, id: htmlProps.id ?? titleId, className: classes, children });
+}
+function AlertContent({ children, className, ...htmlProps }) {
+  const { descId } = useAlertContext();
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, id: htmlProps.id ?? descId, className: classes, children });
+}
+function AlertActions({ children, className, ...htmlProps }) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function AlertAction({
+  children,
+  onClick,
+  type = "button",
+  className,
+  ...htmlProps
+}) {
+  const classes = [styles.action, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Button, { ...htmlProps, onClick, type, className: classes, children });
+}
+function AlertClose({
+  children,
+  className,
+  onClick,
+  type = "button",
+  "aria-label": ariaLabel = "Dismiss alert",
+  ...htmlProps
+}) {
+  const { dismiss } = useAlertContext();
+  const classes = [styles.close, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...htmlProps,
+      onClick: composeEventHandlers(onClick, dismiss),
+      type,
+      "aria-label": ariaLabel,
+      className: classes,
+      children: children ?? "×"
+    }
+  );
+}
+const Alert = Object.assign(AlertRoot, {
+  Icon: AlertIcon,
+  Body: AlertBody,
+  Title: AlertTitle,
+  Content: AlertContent,
+  Actions: AlertActions,
+  Action: AlertAction,
+  Close: AlertClose
+});
+export {
+  Alert,
+  AlertAction,
+  AlertActions,
+  AlertBody,
+  AlertClose,
+  AlertContent,
+  AlertIcon,
+  AlertRoot,
+  AlertTitle,
+  useAlertContext
+};

package/dist/components/AppShell/AppShell.module.scss.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_5t5y8_1";
+const sidebarLayout = "_sidebarLayout_5t5y8_20";
+const header = "_header_5t5y8_30";
+const sidebar = "_sidebar_5t5y8_20";
+const sidebarFullHeight = "_sidebarFullHeight_5t5y8_80";
+const sidebarFloating = "_sidebarFloating_5t5y8_90";
+const main = "_main_5t5y8_94";
+const mainFloating = "_mainFloating_5t5y8_101";
+const aside = "_aside_5t5y8_123";
+const asideFloating = "_asideFloating_5t5y8_144";
+const styles = {
+  root,
+  sidebarLayout,
+  header,
+  sidebar,
+  sidebarFullHeight,
+  sidebarFloating,
+  main,
+  mainFloating,
+  aside,
+  asideFloating
+};
+exports.aside = aside;
+exports.asideFloating = asideFloating;
+exports.default = styles;
+exports.header = header;
+exports.main = main;
+exports.mainFloating = mainFloating;
+exports.root = root;
+exports.sidebar = sidebar;
+exports.sidebarFloating = sidebarFloating;
+exports.sidebarFullHeight = sidebarFullHeight;
+exports.sidebarLayout = sidebarLayout;

package/dist/components/AppShell/AppShell.module.scss.js

@@ -0,0 +1,35 @@
+const root = "_root_5t5y8_1";
+const sidebarLayout = "_sidebarLayout_5t5y8_20";
+const header = "_header_5t5y8_30";
+const sidebar = "_sidebar_5t5y8_20";
+const sidebarFullHeight = "_sidebarFullHeight_5t5y8_80";
+const sidebarFloating = "_sidebarFloating_5t5y8_90";
+const main = "_main_5t5y8_94";
+const mainFloating = "_mainFloating_5t5y8_101";
+const aside = "_aside_5t5y8_123";
+const asideFloating = "_asideFloating_5t5y8_144";
+const styles = {
+  root,
+  sidebarLayout,
+  header,
+  sidebar,
+  sidebarFullHeight,
+  sidebarFloating,
+  main,
+  mainFloating,
+  aside,
+  asideFloating
+};
+export {
+  aside,
+  asideFloating,
+  styles as default,
+  header,
+  main,
+  mainFloating,
+  root,
+  sidebar,
+  sidebarFloating,
+  sidebarFullHeight,
+  sidebarLayout
+};