@max-ts/components 0.1.0 → 0.2.0

package/lib/components/Description/Description.mjs

@@ -0,0 +1,39 @@
+import { j as t } from "../../_virtual/jsx-runtime.mjs";
+import "./DescriptionContext/DescriptionContext.mjs";
+import { DescriptionContextProvider as c } from "./DescriptionContext/DescriptionContextProvider/DescriptionContextProvider.mjs";
+import { Name as a } from "./Name/Name.mjs";
+import { Value as f } from "./Value/Value.mjs";
+import { DESCRIPTION_ROOT_CLASSNAME as d } from "./constants.mjs";
+import { Wrapper as l } from "./styles.mjs";
+import { useLogic as u } from "./useLogic/useLogic.mjs";
+const e = (o) => {
+  const { descriptionContextProviderProps: i, direction: r } = u(o), {
+    justifyContent: m = "start",
+    component: n = "dl",
+    children: s,
+    leader: p = !1
+  } = o;
+  return /* @__PURE__ */ t.jsx(
+    c,
+    {
+      leader: p,
+      direction: r,
+      ...i,
+      children: /* @__PURE__ */ t.jsx(
+        l,
+        {
+          $justifyContent: m,
+          className: d,
+          $direction: r,
+          as: n,
+          children: s
+        }
+      )
+    }
+  );
+};
+e.Name = a;
+e.Value = f;
+export {
+  e as Description
+};

package/lib/components/Description/DescriptionContext/DescriptionContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../constants.cjs"),r=e.createContext({leader:!1,separator:t.DEFAULT_SEPARATOR,direction:"default"});exports.DescriptionContext=r;

package/lib/components/Description/DescriptionContext/DescriptionContext.d.ts

@@ -0,0 +1,6 @@
+export type DescriptionContextProps = {
+    leader: boolean;
+    separator: string;
+    direction: string;
+};
+export declare const DescriptionContext: import('react').Context<DescriptionContextProps>;

package/lib/components/Description/DescriptionContext/DescriptionContext.mjs

@@ -0,0 +1,10 @@
+import { createContext as t } from "react";
+import { DEFAULT_SEPARATOR as e } from "../constants.mjs";
+const a = t({
+  leader: !1,
+  separator: e,
+  direction: "default"
+});
+export {
+  a as DescriptionContext
+};

package/lib/components/Description/DescriptionContext/DescriptionContextProvider/DescriptionContextProvider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../../_virtual/jsx-runtime.cjs"),n=require("../DescriptionContext.cjs"),s=({children:e,leader:t,separator:r,direction:i})=>o.j.jsx(n.DescriptionContext.Provider,{value:{leader:t,separator:r,direction:i},children:e});exports.DescriptionContextProvider=s;

package/lib/components/Description/DescriptionContext/DescriptionContextProvider/DescriptionContextProvider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { DescriptionContextProps } from '../DescriptionContext';
+type Props = DescriptionContextProps & {
+    children: ReactNode;
+};
+export declare const DescriptionContextProvider: ({ children, leader, separator, direction, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/Description/DescriptionContext/DescriptionContextProvider/DescriptionContextProvider.mjs

@@ -0,0 +1,11 @@
+import { j as i } from "../../../../_virtual/jsx-runtime.mjs";
+import { DescriptionContext as s } from "../DescriptionContext.mjs";
+const x = ({
+  children: o,
+  leader: r,
+  separator: t,
+  direction: e
+}) => /* @__PURE__ */ i.jsx(s.Provider, { value: { leader: r, separator: t, direction: e }, children: o });
+export {
+  x as DescriptionContextProvider
+};

package/lib/components/Description/Name/Name.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),a=require("react"),u=require("../../Typography/Typography.cjs"),c=require("../DescriptionContext/DescriptionContext.cjs"),t=require("./styles.cjs"),j=({children:s,color:i="textSecondary",...n})=>{const{leader:r,separator:o}=a.useContext(c.DescriptionContext);return e.j.jsxs(e.j.Fragment,{children:[e.j.jsx(t.Wrapper,{$leader:r,children:e.j.jsxs(u.Typography,{...n,color:i,children:[s,!r&&o]})}),r&&e.j.jsx(t.DashedSeparator,{})]})};exports.Name=j;

package/lib/components/Description/Name/Name.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from '../../Typography';
+export type NameProps = Pick<TypographyProps, 'color' | 'variant' | 'children'>;
+export declare const Name: ({ children, color, ...props }: NameProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Description/Name/Name.mjs

@@ -0,0 +1,22 @@
+import { j as r } from "../../../_virtual/jsx-runtime.mjs";
+import { useContext as a } from "react";
+import { Typography as m } from "../../Typography/Typography.mjs";
+import { DescriptionContext as n } from "../DescriptionContext/DescriptionContext.mjs";
+import { Wrapper as i, DashedSeparator as x } from "./styles.mjs";
+const l = ({
+  children: o,
+  color: t = "textSecondary",
+  ...s
+}) => {
+  const { leader: e, separator: p } = a(n);
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(i, { $leader: e, children: /* @__PURE__ */ r.jsxs(m, { ...s, color: t, children: [
+      o,
+      !e && p
+    ] }) }),
+    e && /* @__PURE__ */ r.jsx(x, {})
+  ] });
+};
+export {
+  l as Name
+};

package/lib/components/Description/Name/styles.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@mui/material"),a=r.styled("dt",{shouldForwardProp:e=>e!=="$leader"})`
+  flex-shrink: 0;
+
+  max-width: ${({$leader:e})=>e?"calc(100% - 36px)":"calc(100% - 12px)"};
+  margin-right: ${({theme:e})=>e.spacing(2)};
+`,t=r.styled("div")`
+  flex: 1;
+
+  min-width: 12px;
+  height: 4px;
+  margin-right: ${({theme:e})=>e.spacing(2)};
+
+  border-bottom: 1px dashed ${({theme:e})=>e.palette.grey[400]};
+
+  ${({theme:e})=>e.breakpoints.down("sm")} {
+    display: none;
+  }
+`;exports.DashedSeparator=t;exports.Wrapper=a;

package/lib/components/Description/Name/styles.d.ts

@@ -0,0 +1,6 @@
+type WrapperProps = {
+    $leader?: boolean;
+};
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & WrapperProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const DashedSeparator: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/components/Description/Name/styles.mjs

@@ -0,0 +1,25 @@
+import { styled as a } from "@mui/material";
+const t = a("dt", {
+  shouldForwardProp: (r) => r !== "$leader"
+})`
+  flex-shrink: 0;
+
+  max-width: ${({ $leader: r }) => r ? "calc(100% - 36px)" : "calc(100% - 12px)"};
+  margin-right: ${({ theme: r }) => r.spacing(2)};
+`, p = a("div")`
+  flex: 1;
+
+  min-width: 12px;
+  height: 4px;
+  margin-right: ${({ theme: r }) => r.spacing(2)};
+
+  border-bottom: 1px dashed ${({ theme: r }) => r.palette.grey[400]};
+
+  ${({ theme: r }) => r.breakpoints.down("sm")} {
+    display: none;
+  }
+`;
+export {
+  p as DashedSeparator,
+  t as Wrapper
+};

package/lib/components/Description/Value/Value.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.cjs"),r=require("./styles.cjs"),u=require("./useLogic/useLogic.cjs"),a=t=>{const{valueToRender:o,isDefaultValueRender:d,leader:i,direction:n}=u.useLogic(t),{copyPosition:l="right",copyText:s,canCopy:y,children:p,stub:j,...c}=t;return d?e.j.jsx(r.StyledTypography,{$direction:n,component:"dd",$leader:i,...c,children:o}):e.j.jsx(r.Wrapper,{children:e.j.jsx(r.StyledCopyTypography,{copyPosition:l,copyText:s,$direction:n,$leader:i,component:"div",...c,children:o})})};exports.Value=a;

package/lib/components/Description/Value/Value.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TypographyProps } from '../../Typography';
+export type ValueProps = Pick<TypographyProps, 'color' | 'variant' | 'children'> & {
+    /**
+     * @example <Description.Item stub="нет значения">value</Description.Item>
+     * Заглушка, отображающаяся, если нет значения
+     */
+    stub?: ReactNode;
+    /**
+     * Добавляет возможность копирования
+     */
+    canCopy?: boolean;
+    /**
+     * Позиционирует иконку "копировать" (слева / справа от текста)
+     */
+    copyPosition?: 'left' | 'right';
+    /**
+     * Текст, который будет скопирован. Перекрывает обычное копирование если children является строкой
+     */
+    copyText?: string;
+};
+export declare const Value: (props: ValueProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Description/Value/Value.mjs

@@ -0,0 +1,37 @@
+import { j as e } from "../../../_virtual/jsx-runtime.mjs";
+import { StyledTypography as s, Wrapper as l, StyledCopyTypography as a } from "./styles.mjs";
+import { useLogic as y } from "./useLogic/useLogic.mjs";
+const g = (r) => {
+  const { valueToRender: o, isDefaultValueRender: d, leader: t, direction: i } = y(r), {
+    copyPosition: c = "right",
+    copyText: p,
+    canCopy: m,
+    children: u,
+    stub: h,
+    ...n
+  } = r;
+  return d ? /* @__PURE__ */ e.jsx(
+    s,
+    {
+      $direction: i,
+      component: "dd",
+      $leader: t,
+      ...n,
+      children: o
+    }
+  ) : /* @__PURE__ */ e.jsx(l, { children: /* @__PURE__ */ e.jsx(
+    a,
+    {
+      copyPosition: c,
+      copyText: p,
+      $direction: i,
+      $leader: t,
+      component: "div",
+      ...n,
+      children: o
+    }
+  ) });
+};
+export {
+  g as Value
+};

package/lib/components/Description/Value/styles.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),o=require("../../CopyTypography/CopyTypography.cjs"),t=require("../../Typography/Typography.cjs"),a=e.styled(t.Typography,{shouldForwardProp:r=>!["$canCopy","$leader","$direction"].includes(r.toString())})`
+  cursor: ${({$canCopy:r})=>r?"pointer":"default"};
+
+  overflow: hidden;
+
+  hyphens: auto;
+  text-align: ${({$leader:r})=>r?"right":"left"};
+  overflow-wrap: break-word;
+
+  ${({theme:r})=>r.breakpoints.down("sm")} {
+    text-align: ${({$direction:r})=>r!=="row"?"left":"right"};
+  }
+
+  &:hover {
+    text-decoration: ${({$canCopy:r})=>r?"underline":"none"};
+  }
+`,p=e.styled(o.CopyTypography,{shouldForwardProp:r=>!["$leader","$direction"].includes(r.toString())})`
+  display: unset;
+
+  hyphens: auto;
+  text-align: ${({$leader:r})=>r?"right":"left"};
+  overflow-wrap: break-word;
+
+  ${({theme:r})=>r.breakpoints.down("sm")} {
+    text-align: ${({$direction:r})=>r!=="row"?"left":"right"};
+  }
+
+  & > svg {
+    margin-bottom: ${({theme:r})=>r.spacing(-1)};
+  }
+`,n=e.styled("dd")`
+  overflow: hidden;
+
+  margin: 0;
+`;exports.StyledCopyTypography=p;exports.StyledTypography=a;exports.Wrapper=n;

package/lib/components/Description/Value/styles.d.ts

@@ -0,0 +1,43 @@
+type StyledTypographyProps = {
+    $leader?: boolean;
+    $canCopy?: boolean;
+    $direction: string;
+};
+type StyledCopyTypographyProps = {
+    $leader?: boolean;
+    $direction: string;
+};
+export declare const StyledTypography: import('@emotion/styled').StyledComponent<{
+    ref?: import('react').Ref<HTMLSpanElement> | undefined;
+    children?: import('react').ReactNode;
+    align?: "inherit" | "left" | "center" | "right" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import('../../Typography').TypographyColor;
+    variant?: import('../../Typography').TypographyVariant;
+    colorIntensity?: import('../../Typography').Intensity;
+    component?: "symbol" | "object" | "style" | "clipPath" | "filter" | "mask" | "path" | import('react').ComponentType<any> | "map" | "search" | "big" | "link" | "small" | "sub" | "sup" | "marker" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view";
+    isUpperCase?: boolean;
+} & import('react').HTMLAttributes<HTMLParagraphElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & StyledTypographyProps, {}, {}>;
+export declare const StyledCopyTypography: import('@emotion/styled').StyledComponent<{
+    ref?: import('react').Ref<HTMLSpanElement> | undefined;
+    children?: import('react').ReactNode;
+    align?: "inherit" | "left" | "center" | "right" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import('../../Typography').TypographyColor;
+    variant?: import('../../Typography').TypographyVariant;
+    colorIntensity?: import('../../Typography').Intensity;
+    component?: "symbol" | "object" | "style" | "clipPath" | "filter" | "mask" | "path" | import('react').ComponentType<any> | "map" | "search" | "big" | "link" | "small" | "sub" | "sup" | "marker" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view";
+    isUpperCase?: boolean;
+} & import('react').HTMLAttributes<HTMLParagraphElement> & {
+    copyText?: string;
+    copyPosition?: "right" | "left";
+    isShowCopyText?: boolean;
+} & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & StyledCopyTypographyProps, {}, {}>;
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export {};

package/lib/components/Description/Value/styles.mjs

@@ -0,0 +1,47 @@
+import { styled as r } from "@mui/material";
+import { CopyTypography as t } from "../../CopyTypography/CopyTypography.mjs";
+import { Typography as e } from "../../Typography/Typography.mjs";
+const p = r(e, {
+  shouldForwardProp: (o) => !["$canCopy", "$leader", "$direction"].includes(o.toString())
+})`
+  cursor: ${({ $canCopy: o }) => o ? "pointer" : "default"};
+
+  overflow: hidden;
+
+  hyphens: auto;
+  text-align: ${({ $leader: o }) => o ? "right" : "left"};
+  overflow-wrap: break-word;
+
+  ${({ theme: o }) => o.breakpoints.down("sm")} {
+    text-align: ${({ $direction: o }) => o !== "row" ? "left" : "right"};
+  }
+
+  &:hover {
+    text-decoration: ${({ $canCopy: o }) => o ? "underline" : "none"};
+  }
+`, d = r(t, {
+  shouldForwardProp: (o) => !["$leader", "$direction"].includes(o.toString())
+})`
+  display: unset;
+
+  hyphens: auto;
+  text-align: ${({ $leader: o }) => o ? "right" : "left"};
+  overflow-wrap: break-word;
+
+  ${({ theme: o }) => o.breakpoints.down("sm")} {
+    text-align: ${({ $direction: o }) => o !== "row" ? "left" : "right"};
+  }
+
+  & > svg {
+    margin-bottom: ${({ theme: o }) => o.spacing(-1)};
+  }
+`, l = r("dd")`
+  overflow: hidden;
+
+  margin: 0;
+`;
+export {
+  d as StyledCopyTypography,
+  p as StyledTypography,
+  l as Wrapper
+};

package/lib/components/Description/Value/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),s=require("../../../ConfigProvider/ConfigProvider.cjs"),c=require("../../DescriptionContext/DescriptionContext.cjs");require("../../../../_virtual/jsx-runtime.cjs");const l=({canCopy:o,children:e,stub:r})=>{const{emptySymbol:n}=t.useContext(s.ConfigContext),{leader:i,direction:u}=t.useContext(c.DescriptionContext);return{valueToRender:e||r||n,isDefaultValueRender:!o||!e,leader:i,direction:u}};exports.useLogic=l;

package/lib/components/Description/Value/useLogic/useLogic.d.ts

@@ -0,0 +1,9 @@
+import { ValueProps } from '../Value';
+type UseLogicParams = ValueProps;
+export declare const useLogic: ({ canCopy, children, stub }: UseLogicParams) => {
+    valueToRender: string | number | bigint | true | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined>;
+    isDefaultValueRender: boolean;
+    leader: boolean;
+    direction: string;
+};
+export {};

package/lib/components/Description/Value/useLogic/useLogic.mjs

@@ -0,0 +1,11 @@
+import { useContext as o } from "react";
+import { ConfigContext as m } from "../../../ConfigProvider/ConfigProvider.mjs";
+import { DescriptionContext as u } from "../../DescriptionContext/DescriptionContext.mjs";
+import "../../../../_virtual/jsx-runtime.mjs";
+const x = ({ canCopy: t, children: e, stub: n }) => {
+  const { emptySymbol: r } = o(m), { leader: i, direction: s } = o(u);
+  return { valueToRender: e || n || r, isDefaultValueRender: !t || !e, leader: i, direction: s };
+};
+export {
+  x as useLogic
+};

package/lib/components/Description/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=":",A="—",S="astral-ui_descriptionRoot";exports.DEFAULT_SEPARATOR=t;exports.DEFAULT_SYMBOL=A;exports.DESCRIPTION_ROOT_CLASSNAME=S;

package/lib/components/Description/constants.mjs

@@ -0,0 +1,6 @@
+const o = ":", t = "—", A = "astral-ui_descriptionRoot";
+export {
+  o as DEFAULT_SEPARATOR,
+  t as DEFAULT_SYMBOL,
+  A as DESCRIPTION_ROOT_CLASSNAME
+};

package/lib/components/Description/styles.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),o=t.styled("div",{shouldForwardProp:e=>!["$justifyContent","as","$direction"].includes(e.toString())})`
+  overflow: hidden;
+  display: flex;
+  flex-direction: ${({$direction:e})=>e==="default"?"row":e};
+  align-items: baseline;
+  justify-content: ${({$justifyContent:e})=>e};
+
+  margin: 0;
+
+  ${({theme:e})=>e.breakpoints.down("sm")} {
+    flex-direction: ${({$direction:e})=>e==="default"?"column":e};
+
+    .MuiTypography-root {
+      font-size: ${({theme:e})=>e.typography.fontSize};
+    }
+  }
+`;exports.Wrapper=o;

package/lib/components/Description/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & {
+    $justifyContent?: "space-between" | "start";
+    $direction?: "default" | "column" | "row";
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Description/styles.mjs

@@ -0,0 +1,23 @@
+import { styled as t } from "@mui/material";
+const i = t("div", {
+  shouldForwardProp: (o) => !["$justifyContent", "as", "$direction"].includes(o.toString())
+})`
+  overflow: hidden;
+  display: flex;
+  flex-direction: ${({ $direction: o }) => o === "default" ? "row" : o};
+  align-items: baseline;
+  justify-content: ${({ $justifyContent: o }) => o};
+
+  margin: 0;
+
+  ${({ theme: o }) => o.breakpoints.down("sm")} {
+    flex-direction: ${({ $direction: o }) => o === "default" ? "column" : o};
+
+    .MuiTypography-root {
+      font-size: ${({ theme: o }) => o.typography.fontSize};
+    }
+  }
+`;
+export {
+  i as Wrapper
+};

package/lib/components/Description/useLogic/useLogic.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../hooks/useViewportType/useViewportType.cjs");require("react");const s=require("../constants.cjs"),i=({direction:e="default",separator:o=s.DEFAULT_SEPARATOR})=>{const{isMobile:r}=t.useViewportType();return{descriptionContextProviderProps:{separator:e==="column"||r&&e==="default"?"":o},direction:e}};exports.useLogic=i;

package/lib/components/Description/useLogic/useLogic.d.ts

@@ -0,0 +1,9 @@
+import { DescriptionProps } from '../Description';
+type UseLogicParams = DescriptionProps;
+export declare const useLogic: ({ direction, separator, }: UseLogicParams) => {
+    descriptionContextProviderProps: {
+        separator: string;
+    };
+    direction: "row" | "default" | "column";
+};
+export {};

package/lib/components/Description/useLogic/useLogic.mjs

@@ -0,0 +1,15 @@
+import { useViewportType as e } from "../../../hooks/useViewportType/useViewportType.mjs";
+import "react";
+import { DEFAULT_SEPARATOR as s } from "../constants.mjs";
+const m = ({
+  direction: o = "default",
+  separator: r = s
+}) => {
+  const { isMobile: t } = e();
+  return { descriptionContextProviderProps: {
+    separator: o === "column" || t && o === "default" ? "" : r
+  }, direction: o };
+};
+export {
+  m as useLogic
+};

package/lib/components/DescriptionList/DescriptionList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../_virtual/jsx-runtime.cjs"),q=require("react"),a=require("../Description/Description.cjs"),$=require("../GuidTypography/GuidTypography.cjs"),D=require("../Tag/Tag.cjs"),f=require("../Typography/Typography.cjs"),p=require("./styles.cjs"),m=require("./utils/getTooltipProps/getTooltipProps.cjs"),b=({items:l,variant:j="default",title:s,direction:c,...y})=>{const h=q.useCallback((e,t)=>{const{renderValue:o,color:n,canCopy:i,copyPosition:u,variant:d,copyText:x}=t;if(o)return o(e,t);if(d==="tag")return r.j.jsx(a.Description.Value,{children:r.j.jsx(D.Tag,{label:e,color:n,variant:"light"})});if(d==="guid"){const T=m.getTooltipProps(i);return r.j.jsx(p.StyledDescriptionValue,{canCopy:i,$isCopy:i,color:n,copyPosition:u,copyText:x,children:r.j.jsx($.GuidTypography,{tooltipProps:T,children:e})})}return r.j.jsx(a.Description.Value,{canCopy:i,color:n,copyPosition:u,children:e})},[]),g=()=>typeof s=="string"?r.j.jsx(f.Typography,{variant:"h6",children:s}):s;return r.j.jsxs(p.Wrapper,{$variant:j,children:[s&&g(),r.j.jsx(p.ListWrapper,{$direction:c,children:l.map(({name:e,value:t,options:o})=>{const{nameMaxWidth:n,...i}=o||{};return r.j.jsxs(a.Description,{direction:c,...y,component:"div",children:[r.j.jsx(p.StyledDescriptionName,{$nameMaxWidth:n,$direction:c,children:e}),h(t,i)]},`${e}:${t}`)})})]})};exports.DescriptionList=b;

package/lib/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,2 @@
+import { DescriptionListProps } from './types';
+export declare const DescriptionList: ({ items, variant: listVariant, title, direction, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/DescriptionList/DescriptionList.mjs

@@ -0,0 +1,78 @@
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { useCallback as y } from "react";
+import { Description as a } from "../Description/Description.mjs";
+import { GuidTypography as g } from "../GuidTypography/GuidTypography.mjs";
+import { Tag as $ } from "../Tag/Tag.mjs";
+import { Typography as T } from "../Typography/Typography.mjs";
+import { StyledDescriptionValue as D, Wrapper as V, ListWrapper as W, StyledDescriptionName as C } from "./styles.mjs";
+import { getTooltipProps as b } from "./utils/getTooltipProps/getTooltipProps.mjs";
+const N = ({
+  items: d,
+  variant: l = "default",
+  title: e,
+  direction: p,
+  ...x
+}) => {
+  const h = y(
+    (t, o) => {
+      const { renderValue: s, color: n, canCopy: i, copyPosition: c, variant: m, copyText: u } = o;
+      if (s)
+        return s(t, o);
+      if (m === "tag")
+        return /* @__PURE__ */ r.jsx(a.Value, { children: /* @__PURE__ */ r.jsx($, { label: t, color: n, variant: "light" }) });
+      if (m === "guid") {
+        const j = b(i);
+        return /* @__PURE__ */ r.jsx(
+          D,
+          {
+            canCopy: i,
+            $isCopy: i,
+            color: n,
+            copyPosition: c,
+            copyText: u,
+            children: /* @__PURE__ */ r.jsx(g, { tooltipProps: j, children: t })
+          }
+        );
+      }
+      return /* @__PURE__ */ r.jsx(
+        a.Value,
+        {
+          canCopy: i,
+          color: n,
+          copyPosition: c,
+          children: t
+        }
+      );
+    },
+    []
+  ), f = () => typeof e == "string" ? /* @__PURE__ */ r.jsx(T, { variant: "h6", children: e }) : e;
+  return /* @__PURE__ */ r.jsxs(V, { $variant: l, children: [
+    e && f(),
+    /* @__PURE__ */ r.jsx(W, { $direction: p, children: d.map(({ name: t, value: o, options: s }) => {
+      const { nameMaxWidth: n, ...i } = s || {};
+      return /* @__PURE__ */ r.jsxs(
+        a,
+        {
+          direction: p,
+          ...x,
+          component: "div",
+          children: [
+            /* @__PURE__ */ r.jsx(
+              C,
+              {
+                $nameMaxWidth: n,
+                $direction: p,
+                children: t
+              }
+            ),
+            h(o, i)
+          ]
+        },
+        `${t}:${o}`
+      );
+    }) })
+  ] });
+};
+export {
+  N as DescriptionList
+};

package/lib/components/DescriptionList/styles.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),t=require("../Description/Description.cjs"),o=e.styled(t.Description.Name,{shouldForwardProp:r=>!["$nameMaxWidth, $direction"].includes(r.toString())})`
+  max-width: ${({$nameMaxWidth:r})=>r||"none"};
+  margin-bottom: ${({theme:r,$direction:i})=>Object.is(i,"column")?r.spacing(1):0};
+
+  ${({theme:r})=>r.breakpoints.down("sm")} {
+    margin-bottom: ${({theme:r,$direction:i})=>Object.is(i,"row")?0:r.spacing(1)};
+  }
+`,a=e.styled("article",{shouldForwardProp:r=>!["$variant"].includes(r.toString())})`
+  display: grid;
+  row-gap: ${({theme:r})=>r.spacing(3)};
+
+  padding: ${({$variant:r,theme:i})=>r==="contained"?i.spacing(4):0};
+
+  background-color: ${({$variant:r,theme:i})=>r==="contained"?i.palette.background.default:"transparent"};
+  border: ${({$variant:r,theme:i})=>r==="contained"?`1px solid ${i.palette.grey[300]}`:"unset"};
+  border-radius: ${({theme:r})=>r.shape.small};
+`,n=e.styled("dl",{shouldForwardProp:r=>!["$direction"].includes(r.toString())})`
+  display: grid;
+  row-gap: ${({theme:r,$direction:i})=>Object.is(i,"column")?r.spacing(3):r.spacing(1)};
+
+  margin: 0;
+
+  ${({theme:r})=>r.breakpoints.down("sm")} {
+    row-gap: ${({theme:r})=>r.spacing(3)};
+  }
+`,s=e.styled(t.Description.Value,{shouldForwardProp:r=>!["$isCopy"].includes(r.toString())})`
+  display: ${({$isCopy:r})=>r&&"flex"};
+
+  width: ${({$isCopy:r})=>r&&"calc(100% - 20px)"};
+`;exports.ListWrapper=n;exports.StyledDescriptionName=o;exports.StyledDescriptionValue=s;exports.Wrapper=a;