@dss-kit/ui-kit 1.0.0 → 1.0.1

package/dist/components/shared/Counter/Counter.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cx as s } from "@emotion/css";
+import { useMemo as c } from "react";
+import { DEFAULT_MAX_NUMBER as p, COUNTER_BACKGROUND as d, COUNTER_CUTOUT_COLOR as f, COUNTER_CUTOUT_WIDTH as u, COUNTER_HEIGHT as n } from "./Counter.const.js";
+import { getCounterLabel as C } from "./Counter.utils.js";
+import { counterLabelStyles as T, counterStyles as U } from "./styles.js";
+import { Box as R } from "../../builders/Box/Box.js";
+import { theme as h } from "../../../utils/theme/index.js";
+import { Text as O } from "../../builders/Text/Text.js";
+const { cornerRadius: b, spacing: x } = h;
+function A({
+  value: r,
+  maxNumber: e = p,
+  colorName: i = "negative",
+  size: o = "md",
+  withBorder: m = !0,
+  className: a
+}) {
+  const l = c(
+    () => C({ value: r, maxNumber: e }),
+    [r, e]
+  );
+  return /* @__PURE__ */ t(
+    R,
+    {
+      row: !0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      h: n[o],
+      minWidth: n[o],
+      px: x.xs,
+      borderRadius: b.fullRound,
+      borderWidth: u,
+      borderStyle: "solid",
+      borderColor: m ? f : "transparent",
+      backgroundColor: d[i],
+      className: s(U, a),
+      children: /* @__PURE__ */ t(
+        O,
+        {
+          tag: "span",
+          variant: "caption-2",
+          fontWeight: "semibold",
+          colorName: "inverse",
+          whiteSpace: "nowrap",
+          center: !0,
+          className: T,
+          children: l
+        }
+      )
+    }
+  );
+}
+export {
+  A as Counter
+};

package/dist/components/shared/Counter/Counter.types.d.ts

@@ -0,0 +1,29 @@
+import { AccentType, NegativeType, NeutralType, Size } from '../../../types/tokens.types';
+export type CounterColorName = NegativeType | AccentType | NeutralType;
+export type CounterSize = Extract<Size, "sm" | "md">;
+export interface CounterProps {
+    /** Значение счётчика. Строка выводится как есть, число ограничивается через `maxNumber`. */
+    value: number | string;
+    /**
+     * Верхняя граница для числового `value`: при превышении выводится `${maxNumber}+`.
+     * `null` снимает ограничение. На строки не действует.
+     * @default 99
+     */
+    maxNumber?: number | null;
+    /** Цветовая схема счётчика. @default "negative" */
+    colorName?: CounterColorName;
+    /** Размер счётчика: "sm" (16px) или "md" (20px). @default "md" */
+    size?: CounterSize;
+    /**
+     * Обводка цветом фона страницы. Отделяет счётчик от элемента, на который он наложен.
+     * При `false` рамка становится прозрачной, место под неё и размеры счётчика сохраняются.
+     * @default true
+     */
+    withBorder?: boolean;
+    /** Класс для корневого элемента. Добавляется к внутренним классам, например для позиционирования снаружи. */
+    className?: string;
+}
+export interface GetCounterLabelParams {
+    value: number | string;
+    maxNumber: number | null;
+}

package/dist/components/shared/Counter/Counter.utils.d.ts

@@ -0,0 +1,2 @@
+import { GetCounterLabelParams } from './Counter.types';
+export declare function getCounterLabel({ value, maxNumber }: GetCounterLabelParams): string;

package/dist/components/shared/Counter/Counter.utils.js

@@ -0,0 +1,6 @@
+function r({ value: t, maxNumber: n }) {
+  return typeof t == "string" ? t : n !== null && t > n ? `${n}+` : String(t);
+}
+export {
+  r as getCounterLabel
+};

package/dist/components/shared/Counter/index.d.ts

@@ -0,0 +1,2 @@
+export { Counter } from './Counter';
+export type { CounterColorName, CounterProps, CounterSize, } from './Counter.types';

package/dist/components/shared/Counter/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const counterStyles: string;
+export declare const counterLabelStyles: string;

package/dist/components/shared/Counter/styles.js

@@ -0,0 +1,11 @@
+import { css as t } from "@emotion/css";
+const e = t({
+  backgroundClip: "padding-box"
+}), c = t({
+  textBoxTrim: "trim-both",
+  textBoxEdge: "cap alphabetic"
+});
+export {
+  c as counterLabelStyles,
+  e as counterStyles
+};

package/dist/components/shared/Dot/Dot.const.d.ts

@@ -0,0 +1,5 @@
+import { DotColorName, DotSize } from './Dot.types';
+export declare const DOT_CUTOUT_WIDTH = 1;
+export declare const DOT_CUTOUT_COLOR: "var(--fill-bg-primary)";
+export declare const DOT_BACKGROUND: Record<DotColorName, string>;
+export declare const DOT_SIZE: Record<DotSize, number>;

package/dist/components/shared/Dot/Dot.const.js

@@ -0,0 +1,15 @@
+import { theme as o } from "../../../utils/theme/index.js";
+const { color: t } = o, e = 1, n = t.fill.bg_primary, c = {
+  negative: t.status.negative,
+  accent: t.status.accent,
+  neutral: t.status.neutral
+}, a = {
+  sm: 6,
+  md: 8
+};
+export {
+  c as DOT_BACKGROUND,
+  n as DOT_CUTOUT_COLOR,
+  e as DOT_CUTOUT_WIDTH,
+  a as DOT_SIZE
+};

package/dist/components/shared/Dot/Dot.d.ts

@@ -0,0 +1,10 @@
+import { DotProps } from './Dot.types';
+/**
+ * Точка-индикатор без текста, например отметка непрочитанного.
+ * @example
+ * ```tsx
+ * <Dot />
+ * <Dot colorName="accent" size="sm" />
+ * ```
+ */
+export declare function Dot({ colorName, size, withBorder, className, }: DotProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/Dot/Dot.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cx as d } from "@emotion/css";
+import { DOT_BACKGROUND as n, DOT_CUTOUT_COLOR as l, DOT_CUTOUT_WIDTH as f, DOT_SIZE as o } from "./Dot.const.js";
+import { dotStyles as a } from "./styles.js";
+import { Box as p } from "../../builders/Box/Box.js";
+import { theme as s } from "../../../utils/theme/index.js";
+const { cornerRadius: O } = s;
+function _({
+  colorName: t = "negative",
+  size: r = "md",
+  withBorder: e = !0,
+  className: i
+}) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      display: "inline-flex",
+      flexShrink: 0,
+      w: o[r],
+      h: o[r],
+      borderRadius: O.fullRound,
+      borderWidth: f,
+      borderStyle: "solid",
+      borderColor: e ? l : "transparent",
+      backgroundColor: n[t],
+      className: d(a, i)
+    }
+  );
+}
+export {
+  _ as Dot
+};

package/dist/components/shared/Dot/Dot.types.d.ts

@@ -0,0 +1,17 @@
+import { AccentType, NegativeType, NeutralType, Size } from '../../../types/tokens.types';
+export type DotColorName = NegativeType | AccentType | NeutralType;
+export type DotSize = Extract<Size, "sm" | "md">;
+export interface DotProps {
+    /** Цветовая схема точки. @default "negative" */
+    colorName?: DotColorName;
+    /** Размер точки вместе с обводкой: "sm" (6px) или "md" (8px). @default "md" */
+    size?: DotSize;
+    /**
+     * Обводка цветом фона страницы. Отделяет точку от элемента, на который она наложена.
+     * При `false` рамка становится прозрачной, место под неё и размеры точки сохраняются.
+     * @default true
+     */
+    withBorder?: boolean;
+    /** Класс для корневого элемента. Добавляется к внутренним классам, например для позиционирования снаружи. */
+    className?: string;
+}

package/dist/components/shared/Dot/index.d.ts

@@ -0,0 +1,2 @@
+export { Dot } from './Dot';
+export type { DotColorName, DotProps, DotSize } from './Dot.types';

package/dist/components/shared/Dot/styles.d.ts

@@ -0,0 +1 @@
+export declare const dotStyles: string;

package/dist/components/shared/Dot/styles.js

@@ -0,0 +1,7 @@
+import { css as o } from "@emotion/css";
+const d = o({
+  backgroundClip: "padding-box"
+});
+export {
+  d as dotStyles
+};

package/dist/components/shared/MarkdownText/MarkdownText.js

@@ -6,11 +6,11 @@ import { ContentEditable as f } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary as c } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin as p } from "@lexical/react/LexicalRichTextPlugin";
 import { useMemo as s } from "react";
-import { EDITOR_TRANSFORMERS as u } from "../../controls/MarkdownTextEditor/transformers/index.js";
-import { markdownTextStyle as x } from "./MarkdownText.styles.js";
-import { Text as w } from "../../builders/Text/Text.js";
-import { EditorStateContext as E } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
-import { getEditorConfig as k } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+import { getEditorConfig as u } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+import { EDITOR_TRANSFORMERS as x } from "../../controls/MarkdownTextEditor/transformers/index.js";
+import { markdownTextStyle as w } from "./MarkdownText.styles.js";
+import { Text as E } from "../../builders/Text/Text.js";
+import { EditorStateContext as k } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
 function F({
   markdown: t,
   className: i,
@@ -27,15 +27,15 @@ function F({
     }),
     [r]
   );
-  return r ? /* @__PURE__ */ o(E.Provider, { value: a, children: /* @__PURE__ */ o(
+  return r ? /* @__PURE__ */ o(k.Provider, { value: a, children: /* @__PURE__ */ o(
     d,
     {
       initialConfig: {
-        ...k(),
+        ...u(),
         editable: !1,
         namespace: "ui-kit-markdown-text-viewer",
         editorState: () => {
-          l(r, u);
+          l(r, x);
         }
       },
       children: /* @__PURE__ */ o(
@@ -44,7 +44,7 @@ function F({
           contentEditable: /* @__PURE__ */ o(
             f,
             {
-              className: m(x, i),
+              className: m(w, i),
               "aria-placeholder": "markdown text",
               placeholder: () => null
             }
@@ -56,7 +56,7 @@ function F({
     },
     r
   ) }) : typeof e == "string" ? /* @__PURE__ */ o(
-    w,
+    E,
     {
       variant: "body-2",
       colorName: "tertiary",

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

@@ -1,5 +1,7 @@
 export * from './Avatar';
 export * from './Badge';
+export * from './Counter';
+export * from './Dot';
 export * from './Hint';
 export * from './MarkdownText';
 export * from './Popover';

package/dist/index.js

@@ -2,7 +2,7 @@
 import { UiKitLocaleProvider as t } from "./locale/UiKitLocaleProvider/UiKitLocaleProvider.js";
 import { Box as m } from "./components/builders/Box/Box.js";
 import { Loader as f } from "./components/builders/Loader/Loader.js";
-import { Modal as i } from "./components/builders/Modal/index.js";
+import { Modal as n } from "./components/builders/Modal/index.js";
 import { Portal as T } from "./components/builders/Portal/Portal.js";
 import { Ripple as l } from "./components/builders/Ripple/Ripple.js";
 import { Table as C } from "./components/builders/Table/Table.js";
@@ -14,8 +14,8 @@ import { Button as P } from "./components/controls/Button/Button.js";
 import { Checkbox as _ } from "./components/controls/Checkbox/Checkbox.js";
 import { IconButton as I } from "./components/controls/IconButton/IconButton.js";
 import { Input as v } from "./components/controls/Input/Input.js";
-import { MarkdownToolbarAction as K } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
-import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as D } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
+import { MarkdownToolbarAction as D } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
+import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as O } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
 import { MarkdownTextEditor as U } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.js";
 import { OtpInput as y } from "./components/controls/OtpInput/OtpInput.js";
 import { Radio as F } from "./components/controls/RadioGroup/Radio.js";
@@ -27,76 +27,80 @@ import { Tabs as Z } from "./components/controls/Tabs/Tabs.js";
 import { Breadcrumbs as oo } from "./components/navigation/Breadcrumbs/Breadcrumbs.js";
 import { Avatar as eo } from "./components/shared/Avatar/Avatar.js";
 import { Badge as po } from "./components/shared/Badge/Badge.js";
-import { Hint as xo } from "./components/shared/Hint/Hint.js";
-import { MarkdownText as ao } from "./components/shared/MarkdownText/MarkdownText.js";
-import { Popover as no } from "./components/shared/Popover/Popover.js";
-import { Skeleton as so } from "./components/shared/Skeleton/Skeleton.js";
-import { Tag as Co } from "./components/shared/Tag/Tag.js";
-import { Toast as Bo } from "./components/shared/Toast/Toast.js";
-import { useToast as ho } from "./components/shared/Toast/Toast.hooks.js";
-import { toast as ko } from "./components/shared/Toast/Toast.utils.js";
-import { ToastContainer as Eo } from "./components/shared/Toast/ToastContainer.js";
-import { Tooltip as Mo } from "./components/shared/Tooltip/Tooltip.js";
-import { ThemeProviderScoped as Ro } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
-import { THEME_DATA_ATTRIBUTE as bo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
-import { ThemeContext as Lo, useUiKitTheme as vo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
-import { useControlled as Ko } from "./utils/hooks/useControlled.js";
-import { useBreakpoint as Do } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
-import { Breakpoints as Uo, BreakpointsBase as Wo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
-import { getFontWeightClass as zo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
-import { getSizeClass as Go } from "./utils/styles/getSizeClass/getSizeClass.js";
-import { getStyleClass as Xo } from "./utils/styles/getStyleClass/getStyleClass.js";
-import { theme as jo } from "./utils/theme/index.js";
+import { Counter as xo } from "./components/shared/Counter/Counter.js";
+import { Dot as ao } from "./components/shared/Dot/Dot.js";
+import { Hint as io } from "./components/shared/Hint/Hint.js";
+import { MarkdownText as so } from "./components/shared/MarkdownText/MarkdownText.js";
+import { Popover as Co } from "./components/shared/Popover/Popover.js";
+import { Skeleton as Bo } from "./components/shared/Skeleton/Skeleton.js";
+import { Tag as ho } from "./components/shared/Tag/Tag.js";
+import { Toast as ko } from "./components/shared/Toast/Toast.js";
+import { useToast as Eo } from "./components/shared/Toast/Toast.hooks.js";
+import { toast as Mo } from "./components/shared/Toast/Toast.utils.js";
+import { ToastContainer as Ro } from "./components/shared/Toast/ToastContainer.js";
+import { Tooltip as bo } from "./components/shared/Tooltip/Tooltip.js";
+import { ThemeProviderScoped as Lo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
+import { THEME_DATA_ATTRIBUTE as wo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
+import { ThemeContext as Ko, useUiKitTheme as Oo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
+import { useControlled as Uo } from "./utils/hooks/useControlled.js";
+import { useBreakpoint as yo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
+import { Breakpoints as Fo, BreakpointsBase as Go } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
+import { getFontWeightClass as Xo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
+import { getSizeClass as jo } from "./utils/styles/getSizeClass/getSizeClass.js";
+import { getStyleClass as Jo } from "./utils/styles/getStyleClass/getStyleClass.js";
+import { theme as Vo } from "./utils/theme/index.js";
 export {
   h as AnimatedText,
   eo as Avatar,
   po as Badge,
   m as Box,
   oo as Breadcrumbs,
-  Uo as Breakpoints,
-  Wo as BreakpointsBase,
+  Fo as Breakpoints,
+  Go as BreakpointsBase,
   P as Button,
   _ as Checkbox,
-  xo as Hint,
+  xo as Counter,
+  ao as Dot,
+  io as Hint,
   I as IconButton,
   v as Input,
   A as LineChart,
   f as Loader,
-  D as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
-  ao as MarkdownText,
+  O as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
+  so as MarkdownText,
   U as MarkdownTextEditor,
-  K as MarkdownToolbarAction,
-  i as Modal,
+  D as MarkdownToolbarAction,
+  n as Modal,
   y as OtpInput,
   S as PieProgressChart,
-  no as Popover,
+  Co as Popover,
   T as Portal,
   F as Radio,
   N as RadioGroup,
   l as Ripple,
   Y as SegmentControl,
   q as Select,
-  so as Skeleton,
+  Bo as Skeleton,
   Q as Switch,
-  bo as THEME_DATA_ATTRIBUTE,
+  wo as THEME_DATA_ATTRIBUTE,
   C as Table,
   Z as Tabs,
-  Co as Tag,
+  ho as Tag,
   g as Text,
-  Lo as ThemeContext,
-  Ro as ThemeProviderScoped,
-  Bo as Toast,
-  Eo as ToastContainer,
-  Mo as Tooltip,
+  Ko as ThemeContext,
+  Lo as ThemeProviderScoped,
+  ko as Toast,
+  Ro as ToastContainer,
+  bo as Tooltip,
   t as UiKitLocaleProvider,
   B as createColumnHelper,
-  zo as getFontWeightClass,
-  Go as getSizeClass,
-  Xo as getStyleClass,
-  jo as theme,
-  ko as toast,
-  Do as useBreakpoint,
-  Ko as useControlled,
-  ho as useToast,
-  vo as useUiKitTheme
+  Xo as getFontWeightClass,
+  jo as getSizeClass,
+  Jo as getStyleClass,
+  Vo as theme,
+  Mo as toast,
+  yo as useBreakpoint,
+  Uo as useControlled,
+  Eo as useToast,
+  Oo as useUiKitTheme
 };

package/dist/styles/utils/breakpoints/base.scss

@@ -1,11 +1,11 @@
-@mixin breakpoint($breakpoint, $direction: max) {
-  @if $direction == min {
-    @media (min-width: $breakpoint) {
-      @content;
-    }
-  } @else if $direction == max {
-    @media (max-width: ($breakpoint - 1px)) {
-      @content;
-    }
-  }
-}
+@mixin breakpoint($breakpoint, $direction: max) {
+  @if $direction == min {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  } @else if $direction == max {
+    @media (max-width: ($breakpoint - 1px)) {
+      @content;
+    }
+  }
+}

package/dist/styles/utils/breakpoints/index.scss

@@ -1,3 +1,3 @@
-@forward "base";
-@forward "screen";
-@forward "semantic";
+@forward "base";
+@forward "screen";
+@forward "semantic";

package/dist/styles/utils/breakpoints/screen.scss

@@ -1,61 +1,61 @@
-@use "./base.scss";
-
-@mixin bp-1920($direction: max) {
-  @include base.breakpoint(1920px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1440($direction: max) {
-  @include base.breakpoint(1440px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1280($direction: max) {
-  @include base.breakpoint(1280px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1200($direction: max) {
-  @include base.breakpoint(1200px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-1024($direction: max) {
-  @include base.breakpoint(1024px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-992($direction: max) {
-  @include base.breakpoint(992px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-768($direction: max) {
-  @include base.breakpoint(768px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-576($direction: max) {
-  @include base.breakpoint(576px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-480($direction: max) {
-  @include base.breakpoint(480px, $direction) {
-    @content;
-  }
-}
-
-@mixin bp-375($direction: max) {
-  @include base.breakpoint(375px, $direction) {
-    @content;
-  }
-}
+@use "./base.scss";
+
+@mixin bp-1920($direction: max) {
+  @include base.breakpoint(1920px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1440($direction: max) {
+  @include base.breakpoint(1440px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1280($direction: max) {
+  @include base.breakpoint(1280px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1200($direction: max) {
+  @include base.breakpoint(1200px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-1024($direction: max) {
+  @include base.breakpoint(1024px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-992($direction: max) {
+  @include base.breakpoint(992px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-768($direction: max) {
+  @include base.breakpoint(768px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-576($direction: max) {
+  @include base.breakpoint(576px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-480($direction: max) {
+  @include base.breakpoint(480px, $direction) {
+    @content;
+  }
+}
+
+@mixin bp-375($direction: max) {
+  @include base.breakpoint(375px, $direction) {
+    @content;
+  }
+}

package/dist/styles/utils/breakpoints/semantic.scss

@@ -1,31 +1,31 @@
-@use "./screen.scss";
-
-@mixin bp-xs($direction: max) {
-  @include screen.bp-480($direction) {
-    @content;
-  }
-}
-
-@mixin bp-sm($direction: max) {
-  @include screen.bp-576($direction) {
-    @content;
-  }
-}
-
-@mixin bp-md($direction: max) {
-  @include screen.bp-768($direction) {
-    @content;
-  }
-}
-
-@mixin bp-lg($direction: max) {
-  @include screen.bp-992($direction) {
-    @content;
-  }
-}
-
-@mixin bp-xl($direction: max) {
-  @include screen.bp-1200($direction) {
-    @content;
-  }
-}
+@use "./screen.scss";
+
+@mixin bp-xs($direction: max) {
+  @include screen.bp-480($direction) {
+    @content;
+  }
+}
+
+@mixin bp-sm($direction: max) {
+  @include screen.bp-576($direction) {
+    @content;
+  }
+}
+
+@mixin bp-md($direction: max) {
+  @include screen.bp-768($direction) {
+    @content;
+  }
+}
+
+@mixin bp-lg($direction: max) {
+  @include screen.bp-992($direction) {
+    @content;
+  }
+}
+
+@mixin bp-xl($direction: max) {
+  @include screen.bp-1200($direction) {
+    @content;
+  }
+}