@dss-kit/ui-kit 1.0.3 → 1.1.0

package/dist/components/controls/Switch/styles.js

@@ -1,128 +1,131 @@
-import { css as i } from "@emotion/css";
-import { theme as c } from "../../../utils/theme/index.js";
-const { color: t, cornerRadius: r, height: h, spacing: s, transition: e } = c, l = {
-  container: i({
+import { css as t } from "@emotion/css";
+import { theme as s } from "../../../utils/theme/index.js";
+const { color: i, cornerRadius: h, height: e, spacing: r, transition: c } = s, l = {
+  container: t({
     width: "100%",
     cursor: "pointer",
-    outline: "none",
     userSelect: "none",
     display: "flex",
     justifyContent: "space-between",
-    gap: s.md,
-    "&.disabled": {
-      cursor: "not-allowed",
-      opacity: 0.5
-    },
-    "&.reverse": {
-      flexDirection: "row-reverse"
-    }
+    gap: r.md
   }),
-  disabled: i({
+  disabled: t({
     cursor: "not-allowed",
     opacity: 0.5
   }),
-  reverse: i({
+  reverse: t({
     flexDirection: "row-reverse"
   }),
-  switchContainer: i({
+  switchContainer: t({
+    position: "relative",
+    display: "flex",
+    flexShrink: 0,
+    alignSelf: "flex-start",
     "--width-switch-sm": "34px",
     "--width-switch-md": "40px",
     "--width-switch-lg": "52px",
     "--size-thumb-sm": "18px",
     "--size-thumb-md": "20px",
     "--size-thumb-lg": "28px",
-    "--thumb-translate": "0px",
-    "&:has(input:checked)": {
-      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
-    }
+    // Выключенное состояние у всех вариантов одинаковое
+    "--switch-bg-unchecked": i.fill.bg_tertiary,
+    "--thumb-bg-unchecked": i.fill.bg_primary
   }),
-  // Variant classes — each handles both checked and unchecked states
-  variant_accent: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.accent_primary,
-      "--thumb-bg-color": t.fill.bg_primary
-    }
+  // Нативный input прозрачен и лежит поверх трека: остаётся в tab-порядке и
+  // в дереве доступности, а relative-контейнер не даёт фокусу прокручивать
+  // страницу к случайной точке.
+  input: t({
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    opacity: 0,
+    cursor: "inherit"
   }),
-  variant_secondary: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.accent_secondary,
-      "--thumb-bg-color": t.fill.accent_primary
-    }
+  // Variant classes — задают цвета включённого состояния
+  variant_accent: t({
+    "--switch-bg-checked": i.fill.accent_primary,
+    "--thumb-bg-checked": i.fill.bg_primary
   }),
-  variant_positive: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.positive_primary,
-      "--thumb-bg-color": t.fill.bg_primary
-    }
+  variant_secondary: t({
+    "--switch-bg-checked": i.fill.accent_secondary,
+    "--thumb-bg-checked": i.fill.accent_primary
   }),
-  variant_theme: i({
-    "&:has(input:not(:checked))": {
-      "--switch-bg-color": t.fill.bg_tertiary,
-      "--thumb-bg-color": t.fill.bg_primary
-    },
-    "&:has(input:checked)": {
-      "--switch-bg-color": t.fill.bg_secondary,
-      "--thumb-bg-color": t.fill.bg_tertiary
-    }
+  variant_positive: t({
+    "--switch-bg-checked": i.fill.positive_primary,
+    "--thumb-bg-checked": i.fill.bg_primary
+  }),
+  variant_theme: t({
+    "--switch-bg-checked": i.fill.bg_secondary,
+    "--thumb-bg-checked": i.fill.bg_tertiary
   }),
   // Size classes
-  size_sm: i({
+  size_sm: t({
     "--switch-width": "var(--width-switch-sm)",
-    "--switch-height": h.switch.sm,
+    "--switch-height": e.switch.sm,
     "--thumb-width": "var(--size-thumb-sm)",
     "--thumb-height": "var(--size-thumb-sm)"
   }),
-  size_md: i({
+  size_md: t({
     "--switch-width": "var(--width-switch-md)",
-    "--switch-height": h.switch.md,
+    "--switch-height": e.switch.md,
     "--thumb-width": "var(--size-thumb-md)",
     "--thumb-height": "var(--size-thumb-md)"
   }),
-  size_lg: i({
+  size_lg: t({
     "--switch-width": "var(--width-switch-lg)",
-    "--switch-height": h.switch.lg,
+    "--switch-height": e.switch.lg,
     "--thumb-width": "var(--size-thumb-lg)",
     "--thumb-height": "var(--size-thumb-lg)"
   }),
-  switch: i({
+  switch: t({
+    "--switch-bg-color": "var(--switch-bg-unchecked)",
+    "--thumb-bg-color": "var(--thumb-bg-unchecked)",
+    "--thumb-translate": "0px",
     width: "var(--switch-width)",
     height: "var(--switch-height)",
-    transition: e.general,
+    transition: c.general,
+    transitionProperty: "background-color",
     display: "flex",
     alignItems: "center",
     padding: 2,
     backgroundColor: "var(--switch-bg-color)",
-    borderRadius: r.xl
+    borderRadius: h.xl,
+    // Прозрачный outline не виден, но в режиме высокой контрастности
+    // (forced-colors) браузер красит его системным цветом — без него фон
+    // трека и ручки заменяется на Canvas и переключатель пропадает.
+    outline: "1px solid transparent",
+    "input:checked + &": {
+      "--switch-bg-color": "var(--switch-bg-checked)",
+      "--thumb-bg-color": "var(--thumb-bg-checked)",
+      "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - 4px)"
+    },
+    "input:focus-visible + &": {
+      outline: `2px solid ${i.border.accent_primary}`,
+      outlineOffset: 2
+    }
   }),
-  thumb: i({
+  thumb: t({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: 4,
-    transition: e.general,
+    transition: c.general,
+    transitionProperty: "transform, background-color",
     transform: "translateX(var(--thumb-translate, 0))",
     width: "var(--thumb-width)",
     height: "var(--thumb-height)",
     backgroundColor: "var(--thumb-bg-color)",
-    borderRadius: r.fullRound
+    borderRadius: h.fullRound,
+    outline: "1px solid transparent"
   }),
-  moon: i({
-    width: "100%",
-    height: "100%"
+  labelsContainer: t({
+    display: "flex",
+    flexDirection: "column",
+    gap: r.xs
   }),
-  fire: i({
+  icon: t({
     width: "100%",
     height: "100%"
   })

package/dist/components/shared/Toast/ToastContainer.d.ts

@@ -3,7 +3,7 @@ interface ToastContainerProps {
     position?: ToastPosition;
     /** Кастомный CSS-класс для корневого `<div>` контейнера тостов. */
     className?: string;
-    /** Класс для каждого `motion.div` обёртки тоста. */
+    /** Класс для каждого `m.div` обёртки тоста. */
     itemClassName?: string;
     /** Класс, прокидываемый в каждый `Toast` (на корневой `Box`). */
     toastClassName?: string;

package/dist/components/shared/Toast/ToastContainer.js

@@ -1,11 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
 import { cx as m, css as c } from "@emotion/css";
-import { AnimatePresence as p, motion as f } from "framer-motion";
+import { AnimatePresence as f, m as p } from "framer-motion";
 import { useSyncExternalStore as d } from "react";
-import { Toast as h } from "./Toast.js";
+import { getLoadedMotionFeatures as h } from "../../../providers/MotionProvider/loadMotionFeatures.js";
+import { Toast as g } from "./Toast.js";
 import { toastStore as o } from "./Toast.store.js";
-import { Portal as g } from "../../builders/Portal/Portal.js";
-const x = {
+import { Portal as x } from "../../builders/Portal/Portal.js";
+import { MotionProvider as u } from "../../../providers/MotionProvider/MotionProvider.js";
+const y = {
   "top-left": { top: 16, left: 16, alignItems: "flex-start" },
   "top-center": {
     top: 16,
@@ -22,14 +24,14 @@ const x = {
     alignItems: "center"
   },
   "bottom-right": { bottom: 16, right: 16, alignItems: "flex-end" }
-}, u = (t) => {
-  const s = t.startsWith("top"), r = t.endsWith("left"), a = t.endsWith("right"), l = t.endsWith("center"), i = r ? -40 : a ? 40 : 0;
+}, b = (t) => {
+  const r = t.startsWith("top"), s = t.endsWith("left"), a = t.endsWith("right"), l = t.endsWith("center"), i = s ? -40 : a ? 40 : 0;
   return {
-    initial: { opacity: 0, x: i, y: s ? -16 : 16, scale: 0.95 },
+    initial: { opacity: 0, x: i, y: r ? -16 : 16, scale: 0.95 },
     animate: { opacity: 1, x: 0, y: 0, scale: 1 },
     exit: { opacity: 0, x: i, scale: 0.95, transition: { duration: 0.15 } }
   };
-}, y = c({
+}, I = c({
   position: "fixed",
   zIndex: 2,
   display: "flex",
@@ -38,37 +40,37 @@ const x = {
   pointerEvents: "none",
   maxWidth: 325,
   width: "100%"
-}), b = c({
+}), v = c({
   pointerEvents: "auto",
   width: "100%"
 });
-function N({
+function M({
   position: t = "top-right",
-  className: s,
-  itemClassName: r,
+  className: r,
+  itemClassName: s,
   toastClassName: a
 }) {
   const l = d(
     o.subscribe,
     o.getSnapshot,
     o.getSnapshot
-  ), i = u(t);
-  return /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(
+  ), i = b(t);
+  return /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(
     "div",
     {
-      className: m(y, s),
-      style: x[t],
-      children: /* @__PURE__ */ n(p, { initial: !1, children: l.map((e) => /* @__PURE__ */ n(
-        f.div,
+      className: m(I, r),
+      style: y[t],
+      children: /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(f, { initial: !1, children: l.map((e) => /* @__PURE__ */ n(
+        p.div,
         {
-          className: m(b, r),
+          className: m(v, s),
           layout: !0,
-          initial: i.initial,
+          initial: h() ? i.initial : !1,
           animate: i.animate,
           exit: i.exit,
           transition: { type: "spring", stiffness: 400, damping: 30 },
           children: /* @__PURE__ */ n(
-            h,
+            g,
             {
               title: e.title,
               subtitle: e.subtitle,
@@ -80,10 +82,10 @@ function N({
           )
         },
         e.id
-      )) })
+      )) }) })
     }
   ) });
 }
 export {
-  N as ToastContainer
+  M as ToastContainer
 };

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 n } from "./components/builders/Modal/index.js";
+import { Modal as i } 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 { Sheet as C } from "./components/builders/Sheet/index.js";
@@ -12,8 +12,8 @@ import { AnimatedText as k, Text as A } from "./components/builders/Text/Text.js
 import { LineChart as S } from "./components/charts/LineChart/LineChart.js";
 import { PieProgressChart as P } from "./components/charts/PieProgressChart/PieProgressChart.js";
 import { Button as _ } from "./components/controls/Button/Button.js";
-import { Checkbox as I } from "./components/controls/Checkbox/Checkbox.js";
-import { IconButton as v } from "./components/controls/IconButton/IconButton.js";
+import { Checkbox as v } from "./components/controls/Checkbox/Checkbox.js";
+import { IconButton as L } from "./components/controls/IconButton/IconButton.js";
 import { Input as D } from "./components/controls/Input/Input.js";
 import { MarkdownToolbarAction as O } from "./components/controls/MarkdownTextEditor/hooks/useToolbarActions/useToolbarActions.const.js";
 import { MARKDOWN_TEXT_EDITOR_LOCALE_KEY as U } from "./components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js";
@@ -29,7 +29,7 @@ import { Breadcrumbs as eo } from "./components/navigation/Breadcrumbs/Breadcrum
 import { Avatar as po } from "./components/shared/Avatar/Avatar.js";
 import { Badge as xo } from "./components/shared/Badge/Badge.js";
 import { Counter as ao } from "./components/shared/Counter/Counter.js";
-import { Dot as io } from "./components/shared/Dot/Dot.js";
+import { Dot as no } from "./components/shared/Dot/Dot.js";
 import { Hint as so } from "./components/shared/Hint/Hint.js";
 import { MarkdownText as Co } from "./components/shared/MarkdownText/MarkdownText.js";
 import { Popover as ho } from "./components/shared/Popover/Popover.js";
@@ -39,31 +39,32 @@ import { Toast as Eo } from "./components/shared/Toast/Toast.js";
 import { useToast as Mo } from "./components/shared/Toast/Toast.hooks.js";
 import { toast as Ro } from "./components/shared/Toast/Toast.utils.js";
 import { ToastContainer as bo } from "./components/shared/Toast/ToastContainer.js";
-import { Tooltip as Lo } from "./components/shared/Tooltip/Tooltip.js";
-import { ThemeProviderScoped as wo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
-import { THEME_DATA_ATTRIBUTE as Ko } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
-import { ThemeContext as Ho, useUiKitTheme as Uo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
-import { useControlled as yo } from "./utils/hooks/useControlled.js";
-import { useBreakpoint as Fo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
-import { Breakpoints as No, BreakpointsBase as Xo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
-import { getFontWeightClass as jo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
-import { getSizeClass as Jo } from "./utils/styles/getSizeClass/getSizeClass.js";
-import { getStyleClass as Vo } from "./utils/styles/getStyleClass/getStyleClass.js";
-import { theme as $o } from "./utils/theme/index.js";
+import { Tooltip as Io } from "./components/shared/Tooltip/Tooltip.js";
+import { MotionProvider as wo } from "./providers/MotionProvider/MotionProvider.js";
+import { ThemeProviderScoped as Ko } from "./providers/ThemeProviderScoped/ThemeProviderScoped.js";
+import { THEME_DATA_ATTRIBUTE as Ho } from "./providers/ThemeProviderScoped/ThemeProviderScoped.const.js";
+import { ThemeContext as Wo, useUiKitTheme as yo } from "./providers/ThemeProviderScoped/ThemeProviderScoped.context.js";
+import { useControlled as Fo } from "./utils/hooks/useControlled.js";
+import { useBreakpoint as No } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.js";
+import { Breakpoints as Yo, BreakpointsBase as jo } from "./utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
+import { getFontWeightClass as Jo } from "./utils/styles/getFontWeightClass/getFontWeightClass.js";
+import { getSizeClass as Vo } from "./utils/styles/getSizeClass/getSizeClass.js";
+import { getStyleClass as $o } from "./utils/styles/getStyleClass/getStyleClass.js";
+import { theme as rr } from "./utils/theme/index.js";
 export {
   k as AnimatedText,
   po as Avatar,
   xo as Badge,
   m as Box,
   eo as Breadcrumbs,
-  No as Breakpoints,
-  Xo as BreakpointsBase,
+  Yo as Breakpoints,
+  jo as BreakpointsBase,
   _ as Button,
-  I as Checkbox,
+  v as Checkbox,
   ao as Counter,
-  io as Dot,
+  no as Dot,
   so as Hint,
-  v as IconButton,
+  L as IconButton,
   D as Input,
   S as LineChart,
   f as Loader,
@@ -71,7 +72,8 @@ export {
   Co as MarkdownText,
   y as MarkdownTextEditor,
   O as MarkdownToolbarAction,
-  n as Modal,
+  i as Modal,
+  wo as MotionProvider,
   F as OtpInput,
   P as PieProgressChart,
   ho as Popover,
@@ -84,25 +86,25 @@ export {
   C as Sheet,
   co as Skeleton,
   Z as Switch,
-  Ko as THEME_DATA_ATTRIBUTE,
+  Ho as THEME_DATA_ATTRIBUTE,
   h as Table,
   oo as Tabs,
   ko as Tag,
   A as Text,
-  Ho as ThemeContext,
-  wo as ThemeProviderScoped,
+  Wo as ThemeContext,
+  Ko as ThemeProviderScoped,
   Eo as Toast,
   bo as ToastContainer,
-  Lo as Tooltip,
+  Io as Tooltip,
   t as UiKitLocaleProvider,
   c as createColumnHelper,
-  jo as getFontWeightClass,
-  Jo as getSizeClass,
-  Vo as getStyleClass,
-  $o as theme,
+  Jo as getFontWeightClass,
+  Vo as getSizeClass,
+  $o as getStyleClass,
+  rr as theme,
   Ro as toast,
-  Fo as useBreakpoint,
-  yo as useControlled,
+  No as useBreakpoint,
+  Fo as useControlled,
   Mo as useToast,
-  Uo as useUiKitTheme
+  yo as useUiKitTheme
 };

package/dist/providers/MotionProvider/MotionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IMotionProviderProps } from './MotionProvider.types';
+/**
+ * Подгружает фичи Motion (анимации, жесты, exit, drag, layout) отдельным
+ * чанком. Без провайдера `m.*` рендерится, но не анимируется.
+ *
+ * Компоненты UI Kit оборачивают себя сами, приложению провайдер нужен только
+ * для собственных `m.*` компонентов.
+ */
+export declare function MotionProvider({ children, strict, }: IMotionProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/MotionProvider/MotionProvider.js

@@ -0,0 +1,21 @@
+import { jsx as o, Fragment as i } from "react/jsx-runtime";
+import { LazyMotion as n } from "framer-motion";
+import { useContext as s, createContext as a } from "react";
+import { loadMotionFeatures as f, getLoadedMotionFeatures as m } from "./loadMotionFeatures.js";
+const r = a(!1);
+function l({
+  children: e,
+  strict: t = !1
+}) {
+  return s(r) && !t ? /* @__PURE__ */ o(i, { children: e }) : /* @__PURE__ */ o(r.Provider, { value: !0, children: /* @__PURE__ */ o(
+    n,
+    {
+      features: m() ?? f,
+      strict: t,
+      children: e
+    }
+  ) });
+}
+export {
+  l as MotionProvider
+};

package/dist/providers/MotionProvider/MotionProvider.types.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export interface IMotionProviderProps extends PropsWithChildren {
+    /**
+     * Бросать ошибку, если внутри провайдера отрендерен `motion.*` вместо `m.*`
+     * (только в dev). `motion.*` тянет все фичи Motion во вход приложения.
+     *
+     * Строгость распространяется на всё поддерево, включая children,
+     * переданные потребителем, поэтому компоненты UI Kit её не включают.
+     * @default false
+     */
+    strict?: boolean;
+}

package/dist/providers/MotionProvider/features.d.ts

@@ -0,0 +1 @@
+export { domMax as default } from 'framer-motion';

package/dist/providers/MotionProvider/features.js

@@ -0,0 +1,4 @@
+import { domMax as d } from "framer-motion";
+export {
+  d as default
+};

package/dist/providers/MotionProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MotionProvider';
+export type * from './MotionProvider.types';

package/dist/providers/MotionProvider/loadMotionFeatures.d.ts

@@ -0,0 +1,13 @@
+import { FeatureBundle } from 'framer-motion';
+/** Фичи Motion, если чанк уже загружен, иначе `undefined`. */
+export declare const getLoadedMotionFeatures: () => FeatureBundle | undefined;
+/**
+ * Загружает фичи Motion одним запросом на всё приложение.
+ *
+ * LazyMotion не обрабатывает ошибку загрузки, поэтому при сбое отдаём пустой
+ * бандл: компоненты остаются статичными, а не сыплют необработанным rejection
+ * из каждого провайдера. Промис при этом сбрасывается, и следующий
+ * смонтированный провайдер попробует ещё раз, если браузер не закэшировал
+ * неудачный импорт.
+ */
+export declare const loadMotionFeatures: () => Promise<FeatureBundle>;

package/dist/providers/MotionProvider/loadMotionFeatures.js

@@ -0,0 +1,9 @@
+let o, t;
+const r = () => o, n = () => (t || (t = import("./features.js").then(
+  (e) => (o = e.default, e.default),
+  (e) => (t = void 0, console.error("[ui-kit] Не удалось загрузить фичи Motion:", e), {})
+)), t);
+export {
+  r as getLoadedMotionFeatures,
+  n as loadMotionFeatures
+};

package/dist/providers/index.d.ts

@@ -1 +1,2 @@
+export * from './MotionProvider';
 export * from './ThemeProviderScoped';

package/dist/styles/utils/breakpoints.d.ts

@@ -11,3 +11,15 @@ export declare const bp: {
     readonly bp1440: (direction?: BreakpointDirection) => string;
     readonly bp1920: (direction?: BreakpointDirection) => string;
 };
+/**
+ * Брейкпоинты `bp` для контейнерных запросов: ориентир — ширина ближайшего
+ * предка с `container-name: <name>`, а не окна. Смысл `direction` тот же:
+ * `max` — уже брейкпоинта, `min` — от него и шире.
+ */
+export declare const bpContainer: {
+    readonly xs: (name: string, direction?: BreakpointDirection) => string;
+    readonly sm: (name: string, direction?: BreakpointDirection) => string;
+    readonly md: (name: string, direction?: BreakpointDirection) => string;
+    readonly lg: (name: string, direction?: BreakpointDirection) => string;
+    readonly xl: (name: string, direction?: BreakpointDirection) => string;
+};

package/dist/styles/utils/breakpoints.js

@@ -1,16 +1,23 @@
-import { BreakpointsBase as x, Breakpoints as p } from "../../utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
-const a = (m, i = "max") => i === "min" ? `@media (min-width: ${m}px)` : `@media (max-width: ${m - 1}px)`, r = {
-  xs: (m = "max") => a(p.xs, m),
-  sm: (m = "max") => a(p.sm, m),
-  md: (m = "max") => a(p.md, m),
-  lg: (m = "max") => a(p.lg, m),
-  xl: (m = "max") => a(p.xl, m),
-  bp375: (m = "max") => a(x._375, m),
-  bp1024: (m = "max") => a(x._1024, m),
-  bp1280: (m = "max") => a(x._1280, m),
-  bp1440: (m = "max") => a(x._1440, m),
-  bp1920: (m = "max") => a(x._1920, m)
+import { BreakpointsBase as t, Breakpoints as n } from "../../utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
+const a = (m, x = "max") => x === "min" ? `@media (min-width: ${m}px)` : `@media (max-width: ${m - 1}px)`, o = {
+  xs: (m = "max") => a(n.xs, m),
+  sm: (m = "max") => a(n.sm, m),
+  md: (m = "max") => a(n.md, m),
+  lg: (m = "max") => a(n.lg, m),
+  xl: (m = "max") => a(n.xl, m),
+  bp375: (m = "max") => a(t._375, m),
+  bp1024: (m = "max") => a(t._1024, m),
+  bp1280: (m = "max") => a(t._1280, m),
+  bp1440: (m = "max") => a(t._1440, m),
+  bp1920: (m = "max") => a(t._1920, m)
+}, i = (m, x, r = "max") => r === "min" ? `@container ${m} (width >= ${x}px)` : `@container ${m} (width < ${x}px)`, p = {
+  xs: (m, x = "max") => i(m, n.xs, x),
+  sm: (m, x = "max") => i(m, n.sm, x),
+  md: (m, x = "max") => i(m, n.md, x),
+  lg: (m, x = "max") => i(m, n.lg, x),
+  xl: (m, x = "max") => i(m, n.xl, x)
 };
 export {
-  r as bp
+  o as bp,
+  p as bpContainer
 };