jvetrau-ds 0.2.13 → 0.2.15

package/components/attach/attach.cjs

@@ -2,8 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 require('./attach.css');
+var Button = require('../button');
 var classnames = require('../helpers/classnames');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+
 function isImageAttach(item) {
   return item.mimeType?.startsWith("image/") ?? false;
 }
@@ -15,12 +20,13 @@ function formatFileSize(sizeBytes) {
     return "Size unknown";
   }
   if (sizeBytes < 1024) {
-    return `${sizeBytes} B`;
+    return `${sizeBytes} \u0411`;
   }
   if (sizeBytes < 1024 * 1024) {
-    return `${Math.round(sizeBytes / 1024)} KB`;
+    return `${Math.round(sizeBytes / 1024)} \u041A\u0411`;
   }
-  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
+  const megabytes = (sizeBytes / 1024 / 1024).toFixed(1).replace(".", ",");
+  return `${megabytes} \u041C\u0411`;
 }
 function getLinkHostname(url) {
   try {
@@ -40,7 +46,11 @@ const Attach = ({
   if (items.length === 0) {
     return null;
   }
-  const classes = classnames.classnames("attach", className, {});
+  const classes = classnames.classnames(
+    "attach",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -49,12 +59,20 @@ const Attach = ({
       children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "attach__list", children: items.map((item) => {
         const isLink = isLinkAttach(item);
         const isImage = !isLink && isImageAttach(item);
-        const itemClasses = classnames.classnames("attach__item", {
-          "attach__item--link": isLink,
-          "attach__item--image": isImage,
-          "attach__item--file": !isLink && !isImage
-        });
-        const meta = isLink ? getLinkHostname(item.url) : formatFileSize(item.sizeBytes);
+        const itemClasses = classnames.classnames(
+          "attach__item",
+          "",
+          {
+            "attach__item--link": isLink,
+            "attach__item--image": isImage,
+            "attach__item--file": !isLink && !isImage
+          }
+        );
+        const meta = isLink ? getLinkHostname(
+          item.url
+        ) : formatFileSize(
+          item.sizeBytes
+        );
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
@@ -81,13 +99,13 @@ const Attach = ({
                 }
               ),
               onRemove && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                Button__default.default,
                 {
+                  mode: "toolbar",
                   className: "attach__remove",
-                  type: "button",
+                  icon: "close",
                   "aria-label": `${removeLabel}: ${item.name}`,
-                  onClick: () => onRemove(item.id),
-                  children: removeLabel
+                  onClick: () => onRemove(item.id)
                 }
               )
             ]

package/components/attach/attach.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"attach.cjs","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink = isLinkAttach(item);\n          const isImage = !isLink && isImageAttach(item);\n\n          const itemClasses = classnames('attach__item', {\n            'attach__item--link': isLink,\n            'attach__item--image': isImage,\n            'attach__item--file': !isLink && !isImage,\n          });\n\n          const meta = isLink\n            ? getLinkHostname(item.url)\n            : formatFileSize(item.sizeBytes);\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}
+{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":["classnames","jsx","jsxs","Button"],"mappings":"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","file":"attach.cjs","sourcesContent":["import React from 'react';\n\nimport './attach.css';\nimport Button from '../button';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} Б`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} КБ`;\n  }\n\n  const megabytes = (\n    sizeBytes /\n    1024 /\n    1024\n  )\n    .toFixed(1)\n    .replace('.', ',');\n\n  return `${megabytes} МБ`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'attach',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink =\n            isLinkAttach(item);\n\n          const isImage =\n            !isLink &&\n            isImageAttach(item);\n\n          const itemClasses =\n            classnames(\n              'attach__item',\n              '',\n              {\n                'attach__item--link':\n                  isLink,\n                'attach__item--image':\n                  isImage,\n                'attach__item--file':\n                  !isLink &&\n                  !isImage,\n              },\n            );\n\n          const meta = isLink\n            ? getLinkHostname(\n                item.url,\n              )\n            : formatFileSize(\n                item.sizeBytes,\n              );\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <Button\n                  mode=\"toolbar\"\n                  className=\"attach__remove\"\n                  icon=\"close\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() =>\n                    onRemove(item.id)\n                  }\n                />\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;\n"]}

package/components/attach/attach.css

@@ -1,10 +1,9 @@
 .attach {
   /* color */
   --attachment-color: var(--color-text);
-  --attachment-item-bg: var(--color-control);
-  --attachment-item-color: var(--color-text-control);
-  --attachment-border-color: var(--color-line);
-  --attachment-item-meta-color: var(--color-text-note);
+  --attachment-item-bg: var(--color-bg-media);
+  --attachment-item-color: var(--color-text);
+  --attachment-item-meta-color: var(--color-text);
 
   color: var(--attachment-color);
 
@@ -22,15 +21,16 @@
   letter-spacing: var(--attachment-letter-spacing);
 
   /* size */
-  --attachment-gap: var(--margin-control);
-  --attachment-item-gap: var(--margin-icon);
-  --attachment-item-padding: var(--padding-control-vert);
-  --attachment-preview-max-width: 240px;
-  --attachment-preview-max-height: 180px;
+  --attachment-gap: var(--margin-container);
+  --attachment-item-padding: var(--padding-container);
+  --attachment-remove-offset: var(--margin-container);
+  --attachment-aspect-ratio: 9 / 6;
+
+  width: 100%;
+  min-width: 0;
 
   /* border */
-  --attachment-radius: var(--radius-control);
-  --attachment-border-width: var(--size-border-width-base);
+  --attachment-radius: var(--radius-container);
 
   /* depth */
 
@@ -43,9 +43,13 @@
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns:
+    repeat(3, minmax(0, 1fr));
   gap: var(--attachment-gap);
+
+  width: 100%;
+  min-width: 0;
   margin: 0;
   padding: 0;
 
@@ -65,17 +69,14 @@
   /* typography */
 
   /* size */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--attachment-item-gap);
-  padding: var(--attachment-item-padding);
+  position: relative;
+  min-width: 0;
+  aspect-ratio:
+    var(--attachment-aspect-ratio);
+
+  overflow: hidden;
 
   /* border */
-  border:
-    var(--attachment-border-width)
-    solid
-    var(--attachment-border-color);
   border-radius: var(--attachment-radius);
 
   /* depth */
@@ -91,6 +92,9 @@
   text-decoration: none;
 
   /* size */
+  display: block;
+  width: 100%;
+  height: 100%;
   min-width: 0;
 
   /* border */
@@ -100,6 +104,25 @@
   /* motion */
 }
 
+.attach__item--file .attach__link,
+.attach__item--link .attach__link {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-end;
+
+  padding: var(--attachment-item-padding);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .attach__link:hover .attach__name {
   /* color */
 
@@ -122,12 +145,13 @@
 
   /* size */
   display: block;
-  max-width: var(--attachment-preview-max-width);
-  max-height: var(--attachment-preview-max-height);
-  object-fit: contain;
+
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
 
   /* border */
-  border-radius: var(--attachment-radius);
 
   /* depth */
 
@@ -142,6 +166,8 @@
   /* size */
   display: flex;
   flex-direction: column;
+
+  width: 100%;
   min-width: 0;
 
   /* border */
@@ -159,6 +185,8 @@
   white-space: nowrap;
 
   /* size */
+  min-width: 0;
+
   overflow: hidden;
 
   /* border */
@@ -173,7 +201,11 @@
   color: var(--attachment-item-meta-color);
 
   /* typography */
-  font-size: 0.85em;
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
 
   /* size */
 
@@ -186,30 +218,28 @@
 
 .attach__remove {
   /* color */
-  background: transparent;
   color: inherit;
 
   /* typography */
-  font: inherit;
 
   /* size */
-  flex-shrink: 0;
-  padding: 0;
+  position: absolute;
+  top: var(--attachment-remove-offset);
+  right: var(--attachment-remove-offset);
+  z-index: 1;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.attach__remove:hover {
+.attach__item--image .attach__remove {
   /* color */
+  color: var(--color-contrast);
 
   /* typography */
-  text-decoration: underline;
 
   /* size */
 

package/components/attach/attach.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import './attach.css';
+import Button from '../button';
 import { classnames } from '../helpers/classnames';
 
 function isImageAttach(item) {
@@ -13,12 +14,13 @@ function formatFileSize(sizeBytes) {
     return "Size unknown";
   }
   if (sizeBytes < 1024) {
-    return `${sizeBytes} B`;
+    return `${sizeBytes} \u0411`;
   }
   if (sizeBytes < 1024 * 1024) {
-    return `${Math.round(sizeBytes / 1024)} KB`;
+    return `${Math.round(sizeBytes / 1024)} \u041A\u0411`;
   }
-  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
+  const megabytes = (sizeBytes / 1024 / 1024).toFixed(1).replace(".", ",");
+  return `${megabytes} \u041C\u0411`;
 }
 function getLinkHostname(url) {
   try {
@@ -38,7 +40,11 @@ const Attach = ({
   if (items.length === 0) {
     return null;
   }
-  const classes = classnames("attach", className, {});
+  const classes = classnames(
+    "attach",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -47,12 +53,20 @@ const Attach = ({
       children: /* @__PURE__ */ jsx("ul", { className: "attach__list", children: items.map((item) => {
         const isLink = isLinkAttach(item);
         const isImage = !isLink && isImageAttach(item);
-        const itemClasses = classnames("attach__item", {
-          "attach__item--link": isLink,
-          "attach__item--image": isImage,
-          "attach__item--file": !isLink && !isImage
-        });
-        const meta = isLink ? getLinkHostname(item.url) : formatFileSize(item.sizeBytes);
+        const itemClasses = classnames(
+          "attach__item",
+          "",
+          {
+            "attach__item--link": isLink,
+            "attach__item--image": isImage,
+            "attach__item--file": !isLink && !isImage
+          }
+        );
+        const meta = isLink ? getLinkHostname(
+          item.url
+        ) : formatFileSize(
+          item.sizeBytes
+        );
         return /* @__PURE__ */ jsxs(
           "li",
           {
@@ -79,13 +93,13 @@ const Attach = ({
                 }
               ),
               onRemove && /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
+                  mode: "toolbar",
                   className: "attach__remove",
-                  type: "button",
+                  icon: "close",
                   "aria-label": `${removeLabel}: ${item.name}`,
-                  onClick: () => onRemove(item.id),
-                  children: removeLabel
+                  onClick: () => onRemove(item.id)
                 }
               )
             ]

package/components/attach/attach.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":[],"mappings":"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","file":"attach.js","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink = isLinkAttach(item);\n          const isImage = !isLink && isImageAttach(item);\n\n          const itemClasses = classnames('attach__item', {\n            'attach__item--link': isLink,\n            'attach__item--image': isImage,\n            'attach__item--file': !isLink && !isImage,\n          });\n\n          const meta = isLink\n            ? getLinkHostname(item.url)\n            : formatFileSize(item.sizeBytes);\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}
+{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":[],"mappings":"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","file":"attach.js","sourcesContent":["import React from 'react';\n\nimport './attach.css';\nimport Button from '../button';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} Б`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} КБ`;\n  }\n\n  const megabytes = (\n    sizeBytes /\n    1024 /\n    1024\n  )\n    .toFixed(1)\n    .replace('.', ',');\n\n  return `${megabytes} МБ`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'attach',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink =\n            isLinkAttach(item);\n\n          const isImage =\n            !isLink &&\n            isImageAttach(item);\n\n          const itemClasses =\n            classnames(\n              'attach__item',\n              '',\n              {\n                'attach__item--link':\n                  isLink,\n                'attach__item--image':\n                  isImage,\n                'attach__item--file':\n                  !isLink &&\n                  !isImage,\n              },\n            );\n\n          const meta = isLink\n            ? getLinkHostname(\n                item.url,\n              )\n            : formatFileSize(\n                item.sizeBytes,\n              );\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <Button\n                  mode=\"toolbar\"\n                  className=\"attach__remove\"\n                  icon=\"close\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() =>\n                    onRemove(item.id)\n                  }\n                />\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;\n"]}

package/components/attach/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './attach';
-export type { AttachItem, AttachProps, } from './attach';
+export type { AttachItem, AttachItemKind, AttachProps, } from './attach';

package/components/embed-viewer/embed-viewer.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./embed-viewer.css');
+var classnames = require('../helpers/classnames');
+
+const EmbedViewer = ({
+  src,
+  iframeTitle,
+  description,
+  actions,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "embed-viewer",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "embed-viewer__description", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            className: "embed-viewer__frame",
+            src,
+            title: iframeTitle
+          }
+        ),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "embed-viewer__actions", children: actions })
+      ]
+    }
+  );
+};
+var embed_viewer_default = EmbedViewer;
+
+module.exports = embed_viewer_default;
+//# sourceMappingURL=embed-viewer.cjs.map
+//# sourceMappingURL=embed-viewer.cjs.map

package/components/embed-viewer/embed-viewer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAgBA,MAAM,cAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGFA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,GAAA;AAAA,YACA,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEC,OAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"embed-viewer.cjs","sourcesContent":["import React from 'react';\n\nimport './embed-viewer.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  iframeTitle,\n  description,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      <iframe\n        className=\"embed-viewer__frame\"\n        src={src}\n        title={iframeTitle}\n      />\n\n      {actions && (\n        <div className=\"embed-viewer__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}

package/components/embed-viewer/embed-viewer.css

@@ -0,0 +1,115 @@
+.embed-viewer {
+  /* color */
+  --embed-viewer-color:
+    var(--color-text);
+  --embed-viewer-frame-bg:
+    var(--color-bg-media);
+
+  color: var(--embed-viewer-color);
+
+  /* typography */
+  --embed-viewer-description-font-family:
+    var(--font-body-family);
+  --embed-viewer-description-font-size:
+    var(--font-body);
+  --embed-viewer-description-font-weight:
+    var(--font-body-weight);
+  --embed-viewer-description-line-height:
+    var(--font-body-line);
+  --embed-viewer-description-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+  --embed-viewer-gap:
+    var(--margin-item);
+  --embed-viewer-frame-aspect-ratio:
+    16 / 9;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--embed-viewer-gap);
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+  --embed-viewer-frame-radius:
+    var(--radius-container);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--embed-viewer-description-font-family);
+  font-size:
+    var(--embed-viewer-description-font-size);
+  font-weight:
+    var(--embed-viewer-description-font-weight);
+  line-height:
+    var(--embed-viewer-description-line-height);
+  letter-spacing:
+    var(--embed-viewer-description-letter-spacing);
+
+  /* size */
+  min-width: 0;
+  max-width: 100%;
+
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__frame {
+  /* color */
+  background:
+    var(--embed-viewer-frame-bg);
+
+  /* typography */
+
+  /* size */
+  display: block;
+
+  width: 100%;
+  min-width: 0;
+  aspect-ratio:
+    var(--embed-viewer-frame-aspect-ratio);
+
+  /* border */
+  border: 0;
+  border-radius:
+    var(--embed-viewer-frame-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/embed-viewer/embed-viewer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './embed-viewer.css';
+export interface EmbedViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    src: string;
+    iframeTitle: string;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare const EmbedViewer: React.FC<EmbedViewerProps>;
+export default EmbedViewer;

package/components/embed-viewer/embed-viewer.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import './embed-viewer.css';
+import { classnames } from '../helpers/classnames';
+
+const EmbedViewer = ({
+  src,
+  iframeTitle,
+  description,
+  actions,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "embed-viewer",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        description && /* @__PURE__ */ jsx("div", { className: "embed-viewer__description", children: description }),
+        /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            className: "embed-viewer__frame",
+            src,
+            title: iframeTitle
+          }
+        ),
+        actions && /* @__PURE__ */ jsx("div", { className: "embed-viewer__actions", children: actions })
+      ]
+    }
+  );
+};
+var embed_viewer_default = EmbedViewer;
+
+export { embed_viewer_default as default };
+//# sourceMappingURL=embed-viewer.js.map
+//# sourceMappingURL=embed-viewer.js.map

package/components/embed-viewer/embed-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":[],"mappings":";;;;AAgBA,MAAM,cAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGF,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,GAAA;AAAA,YACA,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEC,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"embed-viewer.js","sourcesContent":["import React from 'react';\n\nimport './embed-viewer.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  iframeTitle,\n  description,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      <iframe\n        className=\"embed-viewer__frame\"\n        src={src}\n        title={iframeTitle}\n      />\n\n      {actions && (\n        <div className=\"embed-viewer__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}