@shmidko61/lc-ui-kit 0.0.4 → 0.1.0

package/dist/pagination.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("./arrow-CS6d64Y4.cjs"),u=require("./responsive-style.config-B2m9jVlX.cjs"),_=require("./typography.cjs");function k({boundaryCount:e=1,className:s,currentPage:r,disabled:i=!1,onPageChange:a,pageSize:o,showRangeLabel:h=!0,siblingCount:x=1,totalItems:p,totalPages:t,...d}){const f=Math.max(1,t),c=y(r,1,f),j=$({boundaryCount:e,currentPage:c,siblingCount:x,totalPages:f}),b=c>1&&!i,w=c<f&&!i,M=q({currentPage:c,pageSize:o,totalItems:p,totalPages:f});return n.jsxs("nav",{"aria-label":"Pagination",className:u.cn("inline-flex items-center gap-6",s),...d,children:[h?n.jsx(_.Typography,{as:"span",className:"whitespace-nowrap text-[var(--color-text-secondary)]",variant:"b3",children:M}):null,n.jsxs("div",{className:"inline-flex items-center gap-[6px]",children:[n.jsx(v,{"aria-label":"Предыдущая страница",disabled:!b,onClick:()=>a?.(c-1),children:n.jsx(g.SvgArrow,{className:"h-[9px] w-3"})}),j.map((l,N)=>l==="ellipsis"?n.jsx("span",{"aria-hidden":"true",className:"inline-flex min-h-6 min-w-6 items-center justify-center text-[13px] leading-[18px] text-[var(--color-text-secondary)]",children:"..."},`ellipsis-${N}`):n.jsx(v,{"aria-current":l===c?"page":void 0,"aria-label":`Страница ${l}`,isActive:l===c,disabled:i,onClick:()=>a?.(l),children:l},l)),n.jsx(v,{"aria-label":"Следующая страница",disabled:!w,onClick:()=>a?.(c+1),children:n.jsx(g.SvgArrow,{className:"h-[9px] w-3 rotate-180"})})]})]})}function v({children:e,className:s,disabled:r,isActive:i=!1,...a}){return n.jsx("button",{className:u.cn("inline-flex min-h-6 min-w-6 items-center justify-center rounded-[6px] bg-[var(--color-background-subtle)] px-1 text-[13px] font-normal leading-[18px] text-[var(--color-text-primary)] transition-colors [font-family:var(--font-family)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0",i&&"bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)]",s),disabled:r,type:"button",...a,children:e})}function $({boundaryCount:e,currentPage:s,siblingCount:r,totalPages:i}){const a=e*2+r*2+3;if(i<=a)return m(1,i);const o=m(1,e),h=m(i-e+1,i),x=Math.max(Math.min(s-r,i-e-r*2-1),e+2),p=Math.min(Math.max(s+r,e+r*2+2),i-e-1),t=[...o];return x>e+2?t.push("ellipsis"):e+1<i-e&&t.push(e+1),t.push(...m(x,p)),p<i-e-1?t.push("ellipsis"):i-e>e&&t.push(i-e),t.push(...h),t}function m(e,s){if(s<e)return[];const r=[];for(let i=e;i<=s;i+=1)r.push(i);return r}function y(e,s,r){return Math.min(Math.max(e,s),r)}function q({currentPage:e,pageSize:s,totalItems:r,totalPages:i}){if(!s||!r)return`${e} из ${i}`;const a=(e-1)*s+1,o=Math.min(e*s,r);return`${a}-${o} из ${r}`}exports.Pagination=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("./icons.cjs"),u=require("./responsive-style.config-B2m9jVlX.cjs"),_=require("./typography.cjs");function k({boundaryCount:e=1,className:n,currentPage:s,disabled:i=!1,onPageChange:a,pageSize:o,showRangeLabel:h=!0,siblingCount:x=1,totalItems:p,totalPages:c,...d}){const f=Math.max(1,c),t=y(s,1,f),j=$({boundaryCount:e,currentPage:t,siblingCount:x,totalPages:f}),b=t>1&&!i,M=t<f&&!i,w=q({currentPage:t,pageSize:o,totalItems:p,totalPages:f});return r.jsxs("nav",{"aria-label":"Pagination",className:u.cn("inline-flex items-center gap-6",n),...d,children:[h?r.jsx(_.Typography,{as:"span",className:"whitespace-nowrap text-[var(--color-text-secondary)]",variant:"b3",children:w}):null,r.jsxs("div",{className:"inline-flex items-center gap-[6px]",children:[r.jsx(v,{"aria-label":"Предыдущая страница",disabled:!b,onClick:()=>a?.(t-1),children:r.jsx(g.ArrowIcon,{className:"h-[9px] w-3"})}),j.map((l,N)=>l==="ellipsis"?r.jsx("span",{"aria-hidden":"true",className:"inline-flex min-h-6 min-w-6 items-center justify-center text-[13px] leading-[18px] text-[var(--color-text-secondary)]",children:"..."},`ellipsis-${N}`):r.jsx(v,{"aria-current":l===t?"page":void 0,"aria-label":`Страница ${l}`,isActive:l===t,disabled:i,onClick:()=>a?.(l),children:l},l)),r.jsx(v,{"aria-label":"Следующая страница",disabled:!M,onClick:()=>a?.(t+1),children:r.jsx(g.ArrowIcon,{className:"h-[9px] w-3 rotate-180"})})]})]})}function v({children:e,className:n,disabled:s,isActive:i=!1,...a}){return r.jsx("button",{className:u.cn("inline-flex min-h-6 min-w-6 items-center justify-center rounded-[6px] bg-[var(--color-background-subtle)] px-1 text-[13px] font-normal leading-[18px] text-[var(--color-text-primary)] transition-colors [font-family:var(--font-family)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0",i&&"bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)]",n),disabled:s,type:"button",...a,children:e})}function $({boundaryCount:e,currentPage:n,siblingCount:s,totalPages:i}){const a=e*2+s*2+3;if(i<=a)return m(1,i);const o=m(1,e),h=m(i-e+1,i),x=Math.max(Math.min(n-s,i-e-s*2-1),e+2),p=Math.min(Math.max(n+s,e+s*2+2),i-e-1),c=[...o];return x>e+2?c.push("ellipsis"):e+1<i-e&&c.push(e+1),c.push(...m(x,p)),p<i-e-1?c.push("ellipsis"):i-e>e&&c.push(i-e),c.push(...h),c}function m(e,n){if(n<e)return[];const s=[];for(let i=e;i<=n;i+=1)s.push(i);return s}function y(e,n,s){return Math.min(Math.max(e,n),s)}function q({currentPage:e,pageSize:n,totalItems:s,totalPages:i}){if(!n||!s)return`${e} из ${i}`;const a=(e-1)*n+1,o=Math.min(e*n,s);return`${a}-${o} из ${s}`}exports.Pagination=k;

package/dist/pagination.js

@@ -1,5 +1,5 @@
-import { jsxs as g, jsx as c } from "react/jsx-runtime";
-import { S as d } from "./arrow-DBc2opRL.js";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { ArrowIcon as d } from "./icons.js";
 import { c as b } from "./responsive-style.config-DFuATrIM.js";
 import { Typography as $ } from "./typography.js";
 function P({
@@ -15,13 +15,13 @@ function P({
   totalPages: a,
   ...u
 }) {
-  const f = Math.max(1, a), t = A(r, 1, f), M = j({
+  const f = Math.max(1, a), c = I(r, 1, f), M = j({
     boundaryCount: e,
-    currentPage: t,
+    currentPage: c,
     siblingCount: m,
     totalPages: f
-  }), N = t > 1 && !i, k = t < f && !i, w = G({
-    currentPage: t,
+  }), N = c > 1 && !i, k = c < f && !i, w = A({
+    currentPage: c,
     pageSize: o,
     totalItems: p,
     totalPages: f
@@ -33,7 +33,7 @@ function P({
       className: b("inline-flex items-center gap-6", n),
       ...u,
       children: [
-        h ? /* @__PURE__ */ c(
+        h ? /* @__PURE__ */ t(
           $,
           {
             as: "span",
@@ -43,17 +43,17 @@ function P({
           }
         ) : null,
         /* @__PURE__ */ g("div", { className: "inline-flex items-center gap-[6px]", children: [
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ t(
             v,
             {
               "aria-label": "Предыдущая страница",
               disabled: !N,
-              onClick: () => s?.(t - 1),
-              children: /* @__PURE__ */ c(d, { className: "h-[9px] w-3" })
+              onClick: () => s?.(c - 1),
+              children: /* @__PURE__ */ t(d, { className: "h-[9px] w-3" })
             }
           ),
           M.map(
-            (l, _) => l === "ellipsis" ? /* @__PURE__ */ c(
+            (l, _) => l === "ellipsis" ? /* @__PURE__ */ t(
               "span",
               {
                 "aria-hidden": "true",
@@ -61,12 +61,12 @@ function P({
                 children: "..."
               },
               `ellipsis-${_}`
-            ) : /* @__PURE__ */ c(
+            ) : /* @__PURE__ */ t(
               v,
               {
-                "aria-current": l === t ? "page" : void 0,
+                "aria-current": l === c ? "page" : void 0,
                 "aria-label": `Страница ${l}`,
-                isActive: l === t,
+                isActive: l === c,
                 disabled: i,
                 onClick: () => s?.(l),
                 children: l
@@ -74,13 +74,13 @@ function P({
               l
             )
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ t(
             v,
             {
               "aria-label": "Следующая страница",
               disabled: !k,
-              onClick: () => s?.(t + 1),
-              children: /* @__PURE__ */ c(d, { className: "h-[9px] w-3 rotate-180" })
+              onClick: () => s?.(c + 1),
+              children: /* @__PURE__ */ t(d, { className: "h-[9px] w-3 rotate-180" })
             }
           )
         ] })
@@ -95,7 +95,7 @@ function v({
   isActive: i = !1,
   ...s
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ t(
     "button",
     {
       className: b(
@@ -136,10 +136,10 @@ function x(e, n) {
     r.push(i);
   return r;
 }
-function A(e, n, r) {
+function I(e, n, r) {
   return Math.min(Math.max(e, n), r);
 }
-function G({
+function A({
   currentPage: e,
   pageSize: n,
   totalItems: r,

package/dist/picture/picture.d.ts

@@ -8,5 +8,5 @@ import { PictureProps } from './picture.types';
  * внутреннего `img`, а остальные значения преобразуются в `source` с
  * min-width из общего responsive-конфига ui-kit.
  */
-export declare function Picture({ display, image, sources, ...props }: PictureProps): ReactNode;
-export type { PictureBreakpoint, PictureBreakpointSource, PictureBreakpointSources, PictureProps, } from './picture.types';
+export declare function Picture({ display, fill, image, objectFit, objectPosition, sources, md, lg, xl, ...props }: PictureProps): ReactNode;
+export type { PictureBreakpoint, PictureBreakpointProps, PictureBreakpointSource, PictureBreakpointSources, PictureImageLayoutProps, PictureObjectFit, PictureObjectPosition, PictureProps, } from './picture.types';

package/dist/picture/picture.helpers.d.ts

@@ -1,9 +1,27 @@
-import { SourceHTMLAttributes } from 'react';
-import { PictureBreakpoint, PictureBreakpointSource, PictureBreakpointSources } from './picture.types';
+import { CSSProperties, SourceHTMLAttributes } from 'react';
+import { BoxBreakpointProps } from '../box/box.types';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { PictureBreakpoint, PictureBreakpointProps, PictureBreakpointSource, PictureBreakpointSources, PictureImageLayoutProps } from './picture.types';
+/** Результат преобразования image-layout props в responsive Tailwind-классы. */
+export type PictureImageTailwindClassNamePlan = {
+    /** Классы, применяемые к внутреннему `img`. */
+    className: string;
+    /** CSS-переменные со значениями для base/md/lg/xl. */
+    style: CSSProperties;
+};
+type PictureImageStyleBuildProps = PictureImageLayoutProps & Partial<Record<ResponsiveStyleBreakpoint, PictureImageLayoutProps>>;
+/**
+ * Преобразует публичные responsive props изображения в классы и CSS-переменные.
+ * Базовая высота `auto` сохраняет прежнее поведение `Picture`.
+ */
+export declare function buildPictureImageTailwindClassNamePlan(props: PictureImageStyleBuildProps): PictureImageTailwindClassNamePlan;
+/** Удаляет image-layout props перед передачей breakpoint-настроек в `Box`. */
+export declare function getPictureBoxBreakpointProps({ fill: _fill, objectFit: _objectFit, objectPosition: _objectPosition, ...boxProps }: PictureBreakpointProps): BoxBreakpointProps;
 export type PictureResolvedBreakpointSource = {
     breakpoint: Exclude<PictureBreakpoint, 'sm'>;
     source: PictureBreakpointSource;
 };
-export declare function buildBreakpointSources(sources: PictureBreakpointSources): PictureResolvedBreakpointSource[];
+export declare function buildBreakpointSources(sources: PictureBreakpointSources): Array<PictureResolvedBreakpointSource>;
 export declare function getSourceSrcSet(source: PictureBreakpointSource): string;
 export declare function getSourceProps(source: PictureBreakpointSource): SourceHTMLAttributes<HTMLSourceElement>;
+export {};

package/dist/picture/picture.types.d.ts

@@ -1,5 +1,6 @@
-import { ImgHTMLAttributes, SourceHTMLAttributes } from 'react';
-import { BoxProps } from '../box/box.types';
+import { CSSProperties, ImgHTMLAttributes, SourceHTMLAttributes } from 'react';
+import { BoxBreakpointProps, BoxProps } from '../box/box.types';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
 /**
  * Поддерживаемые проектные брейкпоинты для компонента `Picture`.
  *
@@ -31,13 +32,34 @@ export type PictureBreakpointSource = string | (Omit<SourceHTMLAttributes<HTMLSo
 export type PictureBreakpointSources = {
     sm: PictureBreakpointSource;
 } & Partial<Record<Exclude<PictureBreakpoint, 'sm'>, PictureBreakpointSource>>;
+/** Допустимое CSS-значение способа масштабирования внутреннего `img`. */
+export type PictureObjectFit = NonNullable<CSSProperties['objectFit']>;
+/** Допустимое CSS-положение внутреннего изображения относительно его области. */
+export type PictureObjectPosition = NonNullable<CSSProperties['objectPosition']>;
+/**
+ * Настройки отображения внутреннего `img`.
+ *
+ * `fill` растягивает изображение по высоте и ширине `picture`. Для заметного
+ * результата у внешнего `Picture` должна быть задана высота.
+ */
+export type PictureImageLayoutProps = {
+    /** Растянуть внутренний `img` на всю ширину и высоту `picture`. */
+    fill?: boolean;
+    /** Способ масштабирования изображения внутри доступной области. */
+    objectFit?: PictureObjectFit;
+    /** Положение изображения внутри доступной области. */
+    objectPosition?: PictureObjectPosition;
+};
+/** Свойства `Picture`, которые можно переопределить на одном breakpoint. */
+export type PictureBreakpointProps = BoxBreakpointProps & PictureImageLayoutProps;
+type PictureResponsiveProps = Partial<Record<ResponsiveStyleBreakpoint, PictureBreakpointProps>>;
 /**
  * Свойства компонента `Picture`.
  *
  * Компонент наследует свойства `Box`, кроме `as` и `children`: тег всегда
  * фиксирован как `picture`, а содержимое формируется из `sources` и `image`.
  */
-export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children'> & {
+export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children' | 'md' | 'lg' | 'xl' | keyof PictureImageLayoutProps> & PictureImageLayoutProps & PictureResponsiveProps & {
     /**
      * Атрибуты для внутреннего элемента `img`.
      *
@@ -54,3 +76,4 @@ export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children'> & {
      */
     sources: PictureBreakpointSources;
 };
+export {};

package/dist/picture.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("./box.cjs"),p=require("./responsive-style.config-B2m9jVlX.cjs");function S(e){return[...p.responsiveBreakpoints].reverse().flatMap(t=>{const i=e[t];return i?[{breakpoint:t,source:i}]:[]})}function o(e){return typeof e=="string"?e:e.srcSet}function y(e){if(typeof e!="string")return e;const t=e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(),i={avif:"image/avif",jpeg:"image/jpeg",jpg:"image/jpeg",png:"image/png",webp:"image/webp"};return t&&i[t]?{type:i[t]}:{}}function d({display:e="block",image:t,sources:i,...c}){const{alt:a="",style:g,...u}=t??{},l=o(i.sm),m=S(i);return n.jsxs(f.Box,{...c,as:"picture",display:e,children:[m.map(({breakpoint:r,source:s})=>n.jsx("source",{...y(s),media:`(min-width: ${p.responsiveBreakpointMinWidth[r]})`,srcSet:o(s)},r)),n.jsx("img",{alt:a,src:l,style:{display:"block",height:"auto",width:"100%",...g},...u})]})}exports.Picture=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),B=require("./box.cjs"),g=require("./responsive-style.config-B2m9jVlX.cjs");function d({fill:e,objectFit:t,objectPosition:i},o,s,{classPrefix:c,isBase:n=!1,variablePrefix:r}){const a={height:e===void 0?n?"auto":void 0:e?"100%":"auto",objectFit:t,objectPosition:i},m={height:"height",objectFit:"object-fit",objectPosition:"object-position"};for(const[f,p]of Object.entries(a)){if(p===void 0)continue;const l=m[f],u=`${r}picture-image-${l}`;s[`--${u}`]=String(p),o.push(`${c}[${l}:var(--${u})]`)}}function k(e){const t=[],i={};d(e,t,i,{classPrefix:"",isBase:!0,variablePrefix:""});for(const o of g.responsiveBreakpoints){const s=e[o];s&&d(s,t,i,{classPrefix:`${o}:`,variablePrefix:`${o}-`})}return{className:t.join(" "),style:i}}function P({fill:e,objectFit:t,objectPosition:i,...o}){return o}function N(e){return[...g.responsiveBreakpoints].reverse().flatMap(t=>{const i=e[t];return i?[{breakpoint:t,source:i}]:[]})}function S(e){return typeof e=="string"?e:e.srcSet}function $(e){if(typeof e!="string")return e;const t=e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(),i={avif:"image/avif",jpeg:"image/jpeg",jpg:"image/jpeg",png:"image/png",webp:"image/webp"};return t&&i[t]?{type:i[t]}:{}}function w({display:e="block",fill:t,image:i,objectFit:o,objectPosition:s,sources:c,md:n,lg:r,xl:a,...m}){const{alt:f="",className:p,style:l,...u}=i??{},x=S(c.sm),h=N(c),j=k({fill:t,objectFit:o,objectPosition:s,md:n,lg:r,xl:a});return b.jsxs(B.Box,{...m,as:"picture",display:e,md:n?P(n):void 0,lg:r?P(r):void 0,xl:a?P(a):void 0,children:[h.map(({breakpoint:v,source:y})=>b.jsx("source",{...$(y),media:`(min-width: ${g.responsiveBreakpointMinWidth[v]})`,srcSet:S(y)},v)),b.jsx("img",{alt:f,className:g.cn(j.className,p),src:x,style:{display:"block",width:"100%",...j.style,...l},...u})]})}exports.Picture=w;

package/dist/picture.js

@@ -1,16 +1,60 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { Box as u } from "./box.js";
-import { a as S, r as y } from "./responsive-style.config-DFuATrIM.js";
-function d(e) {
-  return [...S].reverse().flatMap((t) => {
+import { jsxs as B, jsx as v } from "react/jsx-runtime";
+import { Box as N } from "./box.js";
+import { a as h, r as k, c as $ } from "./responsive-style.config-DFuATrIM.js";
+function y({ fill: e, objectFit: t, objectPosition: i }, o, s, { classPrefix: c, isBase: n = !1, variablePrefix: a }) {
+  const r = {
+    height: e === void 0 ? n ? "auto" : void 0 : e ? "100%" : "auto",
+    objectFit: t,
+    objectPosition: i
+  }, f = {
+    height: "height",
+    objectFit: "object-fit",
+    objectPosition: "object-position"
+  };
+  for (const [u, p] of Object.entries(r)) {
+    if (p === void 0)
+      continue;
+    const l = f[u], m = `${a}picture-image-${l}`;
+    s[`--${m}`] = String(p), o.push(`${c}[${l}:var(--${m})]`);
+  }
+}
+function w(e) {
+  const t = [], i = {};
+  y(e, t, i, {
+    classPrefix: "",
+    isBase: !0,
+    variablePrefix: ""
+  });
+  for (const o of h) {
+    const s = e[o];
+    s && y(s, t, i, {
+      classPrefix: `${o}:`,
+      variablePrefix: `${o}-`
+    });
+  }
+  return {
+    className: t.join(" "),
+    style: i
+  };
+}
+function g({
+  fill: e,
+  objectFit: t,
+  objectPosition: i,
+  ...o
+}) {
+  return o;
+}
+function C(e) {
+  return [...h].reverse().flatMap((t) => {
     const i = e[t];
     return i ? [{ breakpoint: t, source: i }] : [];
   });
 }
-function s(e) {
+function d(e) {
   return typeof e == "string" ? e : e.srcSet;
 }
-function h(e) {
+function F(e) {
   if (typeof e != "string")
     return e;
   const t = e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(), i = {
@@ -22,34 +66,64 @@ function h(e) {
   };
   return t && i[t] ? { type: i[t] } : {};
 }
-function k({ display: e = "block", image: t, sources: i, ...p }) {
-  const { alt: a = "", style: c, ...m } = t ?? {}, g = s(i.sm), l = d(i);
-  return /* @__PURE__ */ f(u, { ...p, as: "picture", display: e, children: [
-    l.map(({ breakpoint: r, source: n }) => /* @__PURE__ */ o(
-      "source",
-      {
-        ...h(n),
-        media: `(min-width: ${y[r]})`,
-        srcSet: s(n)
-      },
-      r
-    )),
-    /* @__PURE__ */ o(
-      "img",
-      {
-        alt: a,
-        src: g,
-        style: {
-          display: "block",
-          height: "auto",
-          width: "100%",
-          ...c
-        },
-        ...m
-      }
-    )
-  ] });
+function T({
+  display: e = "block",
+  fill: t,
+  image: i,
+  objectFit: o,
+  objectPosition: s,
+  sources: c,
+  md: n,
+  lg: a,
+  xl: r,
+  ...f
+}) {
+  const { alt: u = "", className: p, style: l, ...m } = i ?? {}, S = d(c.sm), x = C(c), b = w({
+    fill: t,
+    objectFit: o,
+    objectPosition: s,
+    md: n,
+    lg: a,
+    xl: r
+  });
+  return /* @__PURE__ */ B(
+    N,
+    {
+      ...f,
+      as: "picture",
+      display: e,
+      md: n ? g(n) : void 0,
+      lg: a ? g(a) : void 0,
+      xl: r ? g(r) : void 0,
+      children: [
+        x.map(({ breakpoint: P, source: j }) => /* @__PURE__ */ v(
+          "source",
+          {
+            ...F(j),
+            media: `(min-width: ${k[P]})`,
+            srcSet: d(j)
+          },
+          P
+        )),
+        /* @__PURE__ */ v(
+          "img",
+          {
+            alt: u,
+            className: $(b.className, p),
+            src: S,
+            style: {
+              display: "block",
+              width: "100%",
+              ...b.style,
+              ...l
+            },
+            ...m
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  k as Picture
+  T as Picture
 };

package/dist/shared/responsive-style/responsive-style.types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { UiKitTypography } from '../../design-tokens/typography.tokens';
-import { UiKitColors } from '../../types';
+import { UiKitColors } from '../../types/index';
 /**
  * Поддерживаемые responsive breakpoints.
  *