@dnanpm/ui-components 0.6.0 → 0.7.0

package/dist/components/Pictograph/Pictograph.css

@@ -13,14 +13,16 @@
  *   944px  — desktop
  */
 
-._pictograph_11vg9_16 {
-    --pictograph-icon-size: 40px;
-    --pictograph-direction: row;
-    --pictograph-align: flex-start;
-    --pictograph-text-align: left;
-    --pictograph-item-gap: 20px;
-    --pictograph-text-color: inherit;
-    --pictograph-icon-color: var(--color-semantic-foreground-primary-strong);
+._pictograph_1qho1_16 {
+    --_pictograph-icon-size: 40px;
+    --_pictograph-direction: row;
+    --_pictograph-align: flex-start;
+    --_pictograph-text-align: left;
+    --_pictograph-item-gap: var(--spacing-space-20);
+    --_pictograph-text-color: var(--color-semantic-foreground-default);
+    --_pictograph-icon-color: var(--color-semantic-foreground-primary-strong);
+    --_pictograph-heading-font: var(--typography-heading-xs);
+    --_pictograph-long-body-font: var(--typography-body-md);
 
     margin: 0;
     container-name: pictograph;
@@ -29,16 +31,16 @@
 
 /* ─── Mode: vertical (icon above text) ─── */
 
-._pictograph--vertical_11vg9_32 {
-    --pictograph-direction: column;
-    --pictograph-item-gap: 10px;
+._pictograph--vertical_1qho1_34 {
+    --_pictograph-direction: column;
+    --_pictograph-item-gap: var(--spacing-space-12);
 }
 
 /* ─── List layout ─── */
 
-._pictograph__list_11vg9_39 {
+._pictograph__list_1qho1_41 {
     display: grid;
-    gap: 30px;
+    gap: var(--spacing-space-32);
     list-style: none;
     margin: 0;
     padding: 0;
@@ -47,117 +49,127 @@
 /* ─── Column variants (container queries) ─── */
 
 @container pictograph (min-width: 440px) {
-    ._pictograph__list--5_11vg9_50 {
+    ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph__list--2_11vg9_56,
-    ._pictograph__list--3_11vg9_57,
-    ._pictograph__list--4_11vg9_58 {
+    ._pictograph__list--2_1qho1_58,
+    ._pictograph__list--3_1qho1_59,
+    ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(2, 1fr);
     }
 
-    ._pictograph__list--5_11vg9_50 {
+    ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
 @container pictograph (min-width: 944px) {
-    ._pictograph__list--3_11vg9_57 {
+    ._pictograph__list--3_1qho1_59 {
         grid-template-columns: repeat(3, 1fr);
     }
 
-    ._pictograph__list--4_11vg9_58 {
+    ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(4, 1fr);
     }
 
-    ._pictograph__list--5_11vg9_50 {
+    ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(5, 1fr);
     }
 }
 
 /* ─── Mode: horizontal (icon beside text) ─── */
 
-._pictograph--horizontal_11vg9_83 {
-    --pictograph-direction: row;
-    --pictograph-item-gap: 20px;
+._pictograph--horizontal_1qho1_85 {
+    --_pictograph-direction: row;
+    --_pictograph-item-gap: var(--spacing-space-20);
 }
 
-._pictograph--horizontal_11vg9_83 ._pictograph__list_11vg9_39 {
-    gap: 20px 30px;
+._pictograph--horizontal_1qho1_85 ._pictograph__list_1qho1_41 {
+    gap: var(--spacing-space-32);
+}
+
+._pictograph--horizontal_1qho1_85:has(li[data-pictograph-content='short']):not(
+        :has(li[data-pictograph-content='long'])
+    )
+    ._pictograph__list_1qho1_41 {
+    gap: var(--spacing-space-20) var(--spacing-space-32);
 }
 
 /* Horizontal mode: column overrides */
-._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
-._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+._pictograph--horizontal_1qho1_85 ._pictograph__list--4_1qho1_60,
+._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
     grid-template-columns: 1fr;
 }
 
 @container pictograph (min-width: 440px) {
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--4_1qho1_60,
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
 @container pictograph (min-width: 944px) {
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(4, 1fr);
     }
 
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(5, 1fr);
     }
 }
 
 /* ─── Alignment: centered ─── */
 
-._pictograph--centered_11vg9_123 {
-    --pictograph-align: center;
+._pictograph--centered_1qho1_132 {
+    --_pictograph-align: center;
 }
 
-._pictograph--vertical_11vg9_32._pictograph--centered_11vg9_123 {
-    --pictograph-text-align: center;
+._pictograph--vertical_1qho1_34._pictograph--centered_1qho1_132 {
+    --_pictograph-text-align: center;
 }
 
 /* ─── Icon size: small ─── */
 
-._pictograph--icon-small_11vg9_133 {
-    --pictograph-icon-size: 40px;
+._pictograph--icon-small_1qho1_142 {
+    --_pictograph-icon-size: 40px;
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--icon-small_11vg9_133 {
-        --pictograph-icon-size: 52px;
+    ._pictograph--icon-small_1qho1_142 {
+        --_pictograph-icon-size: 56px;
     }
 }
 
 /* ─── Icon size: large ─── */
 
-._pictograph--icon-large_11vg9_145 {
-    --pictograph-icon-size: 52px;
+._pictograph--icon-large_1qho1_154 {
+    --_pictograph-icon-size: 56px;
+    --_pictograph-heading-font: var(--typography-heading-sm);
+    --_pictograph-long-body-font: var(--typography-body-lg);
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--icon-large_11vg9_145 {
-        --pictograph-icon-size: 72px;
+    ._pictograph--icon-large_1qho1_154 {
+        --_pictograph-icon-size: 72px;
     }
 }
 
 /* ─── Vertical + short text: items are compact, allow more columns earlier ─── */
-/* Note: :has(li > div:last-child > p:only-child) depends on PictographItem DOM structure:
-   <li> → <span>(icon) + <div>(text). If PictographItem markup changes, update these selectors. */
 
 @container pictograph (min-width: 440px) {
-    ._pictograph--vertical_11vg9_32:has(li > div:last-child > p:only-child) ._pictograph__list--4_11vg9_58 {
+    ._pictograph--vertical_1qho1_34:has(li[data-pictograph-content='short']):not(
+            :has(li[data-pictograph-content='long'])
+        )
+        ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
@@ -165,16 +177,16 @@
 /* ─── Horizontal + long text: stack items vertically at small sizes ─── */
 
 @container pictograph (max-width: 439px) {
-    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
-        --pictograph-direction: column;
-        --pictograph-align: flex-start;
-        --pictograph-item-gap: 10px;
+    ._pictograph--horizontal_1qho1_85:has(li[data-pictograph-content='long']) ._pictograph__list_1qho1_41 {
+        --_pictograph-direction: column;
+        --_pictograph-align: flex-start;
+        --_pictograph-item-gap: var(--spacing-space-12);
     }
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
-        gap: 30px;
+    ._pictograph--horizontal_1qho1_85:has(li[data-pictograph-content='long']) ._pictograph__list_1qho1_41 {
+        gap: var(--spacing-space-32);
     }
 }
 
@@ -182,9 +194,9 @@
 /* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._pictograph_11vg9_16 {
-        --pictograph-text-color: var(--color-semantic-foreground-inverse);
-        --pictograph-icon-color: var(--color-semantic-foreground-inverse);
+    ._pictograph_1qho1_16 {
+        --_pictograph-text-color: var(--color-semantic-foreground-inverse);
+        --_pictograph-icon-color: var(--color-semantic-foreground-inverse);
     }
 }
 }

package/dist/components/Pictograph/Pictograph.module.css.cjs

@@ -1,20 +1,20 @@
 require('./Pictograph.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const pictograph = "_pictograph_11vg9_16";
-const pictograph__list = "_pictograph__list_11vg9_39";
+const pictograph = "_pictograph_1qho1_16";
+const pictograph__list = "_pictograph__list_1qho1_41";
 const styles = {
   pictograph,
-  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  "pictograph--vertical": "_pictograph--vertical_1qho1_34",
   pictograph__list,
-  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
-  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
-  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
-  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
-  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
-  "pictograph--centered": "_pictograph--centered_11vg9_123",
-  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
-  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+  "pictograph__list--5": "_pictograph__list--5_1qho1_52",
+  "pictograph__list--2": "_pictograph__list--2_1qho1_58",
+  "pictograph__list--3": "_pictograph__list--3_1qho1_59",
+  "pictograph__list--4": "_pictograph__list--4_1qho1_60",
+  "pictograph--horizontal": "_pictograph--horizontal_1qho1_85",
+  "pictograph--centered": "_pictograph--centered_1qho1_132",
+  "pictograph--icon-small": "_pictograph--icon-small_1qho1_142",
+  "pictograph--icon-large": "_pictograph--icon-large_1qho1_154"
 };
 exports.default = styles;
 exports.pictograph = pictograph;

package/dist/components/Pictograph/Pictograph.module.css.js

@@ -1,18 +1,18 @@
 import './Pictograph.css';
-const pictograph = "_pictograph_11vg9_16";
-const pictograph__list = "_pictograph__list_11vg9_39";
+const pictograph = "_pictograph_1qho1_16";
+const pictograph__list = "_pictograph__list_1qho1_41";
 const styles = {
   pictograph,
-  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  "pictograph--vertical": "_pictograph--vertical_1qho1_34",
   pictograph__list,
-  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
-  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
-  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
-  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
-  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
-  "pictograph--centered": "_pictograph--centered_11vg9_123",
-  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
-  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+  "pictograph__list--5": "_pictograph__list--5_1qho1_52",
+  "pictograph__list--2": "_pictograph__list--2_1qho1_58",
+  "pictograph__list--3": "_pictograph__list--3_1qho1_59",
+  "pictograph__list--4": "_pictograph__list--4_1qho1_60",
+  "pictograph--horizontal": "_pictograph--horizontal_1qho1_85",
+  "pictograph--centered": "_pictograph--centered_1qho1_132",
+  "pictograph--icon-small": "_pictograph--icon-small_1qho1_142",
+  "pictograph--icon-large": "_pictograph--icon-large_1qho1_154"
 };
 export {
   styles as default,

package/dist/components/Pictograph/Pictograph.types.d.ts

@@ -2,8 +2,8 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 export interface PictographProps extends ComponentPropsWithRef<'div'> {
     /**
      * Size of the icon area in each item.
-     * - `small`: 40px (52px on tablet and above)
-     * - `large`: 52px (72px on tablet and above)
+     * - `small`: 40px (56px on tablet and above)
+     * - `large`: 56px (72px on tablet and above)
      * @default 'small'
      */
     readonly iconSize?: 'small' | 'large';

package/dist/components/Pictograph/PictographItem.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const PictographItem_module = require("./PictographItem.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const PictographItem = ({
@@ -10,10 +11,20 @@ const PictographItem = ({
   ref,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, className: cn.cn(PictographItem_module["pictograph-item"], className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: PictographItem_module["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: PictographItem_module["pictograph-item__text"], children })
-  ] });
+  const isShortText = react.Children.count(children) === 1 && (typeof children === "string" || react.isValidElement(children) && children.type === "p");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      ref,
+      className: cn.cn(PictographItem_module["pictograph-item"], className),
+      ...props,
+      "data-pictograph-content": isShortText ? "short" : "long",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: PictographItem_module["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: PictographItem_module["pictograph-item__text"], children })
+      ]
+    }
+  );
 };
 exports.PictographItem = PictographItem;
 //# sourceMappingURL=PictographItem.cjs.map

package/dist/components/Pictograph/PictographItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PictographItem.cjs","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    return (\n        <li ref={ref} className={cn(styles['pictograph-item'], className)} {...props}>\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":["jsxs","cn","styles","jsx"],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACIA,2BAAAA,KAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAGC,sBAAO,iBAAiB,GAAG,SAAS,GAAI,GAAG,OACnE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,UAAK,WAAWD,sBAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,mCACC,OAAA,EAAI,WAAWA,sBAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,EAAA,GAC/D;AAER;;"}
+{"version":3,"file":"PictographItem.cjs","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\nimport { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    const isShortText =\n        Children.count(children) === 1 &&\n        (typeof children === 'string' || (isValidElement(children) && children.type === 'p'));\n\n    return (\n        <li\n            ref={ref}\n            className={cn(styles['pictograph-item'], className)}\n            {...props}\n            data-pictograph-content={isShortText ? 'short' : 'long'}\n        >\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":["Children","isValidElement","jsxs","cn","styles","jsx"],"mappings":";;;;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,QAAM,cACFA,MAAAA,SAAS,MAAM,QAAQ,MAAM,MAC5B,OAAO,aAAa,YAAaC,MAAAA,eAAe,QAAQ,KAAK,SAAS,SAAS;AAEpF,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA,GAAGC,sBAAO,iBAAiB,GAAG,SAAS;AAAA,MACjD,GAAG;AAAA,MACJ,2BAAyB,cAAc,UAAU;AAAA,MAEjD,UAAA;AAAA,QAAAC,2BAAAA,IAAC,UAAK,WAAWD,sBAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,uCACC,OAAA,EAAI,WAAWA,sBAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE;;"}

package/dist/components/Pictograph/PictographItem.css

@@ -6,25 +6,25 @@
  * for direction, alignment, icon sizing, and gap.
  */
 
-._pictograph-item_1udd7_9 {
+._pictograph-item_1jsnm_9 {
     display: flex;
-    flex-direction: var(--pictograph-direction);
-    align-items: var(--pictograph-align);
-    gap: var(--pictograph-item-gap);
+    flex-direction: var(--_pictograph-direction);
+    align-items: var(--_pictograph-align);
+    gap: var(--_pictograph-item-gap);
     margin: 0;
 }
 
-._pictograph-item__icon_1udd7_17 {
+._pictograph-item__icon_1jsnm_17 {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--pictograph-icon-color);
-    width: var(--pictograph-icon-size);
-    height: var(--pictograph-icon-size);
+    color: var(--_pictograph-icon-color);
+    width: var(--_pictograph-icon-size);
+    height: var(--_pictograph-icon-size);
 }
 
-._pictograph-item__icon_1udd7_17 svg {
+._pictograph-item__icon_1jsnm_17 svg {
     fill: currentColor;
     width: 100%;
     height: 100%;
@@ -32,32 +32,35 @@
     max-height: none;
 }
 
-._pictograph-item__text_1udd7_35 {
+._pictograph-item__text_1jsnm_35 {
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    text-align: var(--pictograph-text-align);
+    gap: var(--spacing-space-12);
+    text-align: var(--_pictograph-text-align);
     text-wrap: balance;
-    color: var(--pictograph-text-color);
+    color: var(--_pictograph-text-color);
 }
 
-._pictograph-item__text_1udd7_35 > *:not(dialog) {
+._pictograph-item__text_1jsnm_35 > *:not(dialog) {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-/* Single paragraph gets larger font */
-._pictograph-item__text_1udd7_35 > p:only-child {
+/* Short content uses the larger body style */
+._pictograph-item_1jsnm_9[data-pictograph-content='short'] ._pictograph-item__text_1jsnm_35 {
     font: var(--typography-body-lg);
-    margin-bottom: 0;
 }
 
 /* Headings inside text area */
-._pictograph-item__text_1udd7_35 h1,
-._pictograph-item__text_1udd7_35 h2,
-._pictograph-item__text_1udd7_35 h3,
-._pictograph-item__text_1udd7_35 h4,
-._pictograph-item__text_1udd7_35 h5 {
-    font: var(--typography-heading-xs);
+._pictograph-item__text_1jsnm_35 h1,
+._pictograph-item__text_1jsnm_35 h2,
+._pictograph-item__text_1jsnm_35 h3,
+._pictograph-item__text_1jsnm_35 h4,
+._pictograph-item__text_1jsnm_35 h5 {
+    font: var(--_pictograph-heading-font);
+}
+
+._pictograph-item_1jsnm_9[data-pictograph-content='long'] ._pictograph-item__text_1jsnm_35 > p {
+    font: var(--_pictograph-long-body-font);
 }
 }

package/dist/components/Pictograph/PictographItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PictographItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,8CAM5B,mBAAmB,4CASrB,CAAC"}
+{"version":3,"file":"PictographItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,8CAM5B,mBAAmB,4CAkBrB,CAAC"}

package/dist/components/Pictograph/PictographItem.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
 import styles from "./PictographItem.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const PictographItem = ({
@@ -8,10 +9,20 @@ const PictographItem = ({
   ref,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs("li", { ref, className: cn(styles["pictograph-item"], className), ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: styles["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsx("div", { className: styles["pictograph-item__text"], children })
-  ] });
+  const isShortText = Children.count(children) === 1 && (typeof children === "string" || isValidElement(children) && children.type === "p");
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn(styles["pictograph-item"], className),
+      ...props,
+      "data-pictograph-content": isShortText ? "short" : "long",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("div", { className: styles["pictograph-item__text"], children })
+      ]
+    }
+  );
 };
 export {
   PictographItem

package/dist/components/Pictograph/PictographItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PictographItem.js","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    return (\n        <li ref={ref} className={cn(styles['pictograph-item'], className)} {...props}>\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACI,qBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,OAAO,iBAAiB,GAAG,SAAS,GAAI,GAAG,OACnE,UAAA;AAAA,IAAA,oBAAC,UAAK,WAAW,OAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,wBACC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,EAAA,GAC/D;AAER;"}
+{"version":3,"file":"PictographItem.js","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\nimport { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    const isShortText =\n        Children.count(children) === 1 &&\n        (typeof children === 'string' || (isValidElement(children) && children.type === 'p'));\n\n    return (\n        <li\n            ref={ref}\n            className={cn(styles['pictograph-item'], className)}\n            {...props}\n            data-pictograph-content={isShortText ? 'short' : 'long'}\n        >\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,QAAM,cACF,SAAS,MAAM,QAAQ,MAAM,MAC5B,OAAO,aAAa,YAAa,eAAe,QAAQ,KAAK,SAAS,SAAS;AAEpF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW,GAAG,OAAO,iBAAiB,GAAG,SAAS;AAAA,MACjD,GAAG;AAAA,MACJ,2BAAyB,cAAc,UAAU;AAAA,MAEjD,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAW,OAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,4BACC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE;"}

package/dist/components/Pictograph/PictographItem.module.css.cjs

@@ -1,9 +1,9 @@
 require('./PictographItem.css');
 "use strict";
 const styles = {
-  "pictograph-item": "_pictograph-item_1udd7_9",
-  "pictograph-item__icon": "_pictograph-item__icon_1udd7_17",
-  "pictograph-item__text": "_pictograph-item__text_1udd7_35"
+  "pictograph-item": "_pictograph-item_1jsnm_9",
+  "pictograph-item__icon": "_pictograph-item__icon_1jsnm_17",
+  "pictograph-item__text": "_pictograph-item__text_1jsnm_35"
 };
 module.exports = styles;
 //# sourceMappingURL=PictographItem.module.css.cjs.map

package/dist/components/Pictograph/PictographItem.module.css.js

@@ -1,8 +1,8 @@
 import './PictographItem.css';
 const styles = {
-  "pictograph-item": "_pictograph-item_1udd7_9",
-  "pictograph-item__icon": "_pictograph-item__icon_1udd7_17",
-  "pictograph-item__text": "_pictograph-item__text_1udd7_35"
+  "pictograph-item": "_pictograph-item_1jsnm_9",
+  "pictograph-item__icon": "_pictograph-item__icon_1jsnm_17",
+  "pictograph-item__text": "_pictograph-item__text_1jsnm_35"
 };
 export {
   styles as default

package/dist/components/Quote/Quote.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Quote_module = require("./Quote.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Quote = ({ children, author, className, ref, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { ref, className: cn.cn(Quote_module.default.quote, className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: Quote_module.default.quote__mark,
+        viewBox: "0 0 54 42",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10.4516 20.134C11.9032 15.2105 14.9516 11.011 20.1774 7.53563C21.4839 6.52197 21.9194 5.50832 21.1936 4.34985L18.7258 1.01926C18 0.00560203 17.129 -0.284017 15.9677 0.295217C3.91935 6.81159 0 19.2651 0 25.7815C0 37.2213 6.09678 42 12.4839 42C18.871 42 23.6613 37.0765 23.6613 30.8498C23.6613 24.623 18.2903 18.9755 10.4516 20.134ZM40.7903 20.134C42.2419 15.2105 45.2903 11.011 50.5161 7.53563C51.8226 6.52197 52.2581 5.50832 51.5323 4.34985L49.0645 1.01926C48.3387 0.00560203 47.4678 -0.284017 46.3065 0.295217C34.2581 6.81159 30.3387 19.2651 30.3387 25.7815C30.3387 37.2213 36.4355 42 42.8226 42C49.2097 42 54 37.0765 54 30.8498C54 24.623 48.629 18.9755 40.7903 20.134Z",
+            fill: "currentColor"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Quote_module.default.quote__content, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: Quote_module.default.quote__text, children }),
+      author != null && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: Quote_module.default.quote__author, children: author })
+    ] })
+  ] });
+};
+exports.Quote = Quote;
+//# sourceMappingURL=Quote.cjs.map

package/dist/components/Quote/Quote.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.cjs","sources":["../../../src/components/Quote/Quote.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Quote.module.css';\nimport type { QuoteProps } from './Quote.types';\n\nexport const Quote = ({ children, author, className, ref, ...props }: QuoteProps) => {\n    return (\n        <blockquote ref={ref} className={cn(styles.quote, className)} {...props}>\n            <svg\n                className={styles.quote__mark}\n                viewBox=\"0 0 54 42\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n            >\n                <path\n                    d=\"M10.4516 20.134C11.9032 15.2105 14.9516 11.011 20.1774 7.53563C21.4839 6.52197 21.9194 5.50832 21.1936 4.34985L18.7258 1.01926C18 0.00560203 17.129 -0.284017 15.9677 0.295217C3.91935 6.81159 0 19.2651 0 25.7815C0 37.2213 6.09678 42 12.4839 42C18.871 42 23.6613 37.0765 23.6613 30.8498C23.6613 24.623 18.2903 18.9755 10.4516 20.134ZM40.7903 20.134C42.2419 15.2105 45.2903 11.011 50.5161 7.53563C51.8226 6.52197 52.2581 5.50832 51.5323 4.34985L49.0645 1.01926C48.3387 0.00560203 47.4678 -0.284017 46.3065 0.295217C34.2581 6.81159 30.3387 19.2651 30.3387 25.7815C30.3387 37.2213 36.4355 42 42.8226 42C49.2097 42 54 37.0765 54 30.8498C54 24.623 48.629 18.9755 40.7903 20.134Z\"\n                    fill=\"currentColor\"\n                />\n            </svg>\n            <div className={styles.quote__content}>\n                <div className={styles.quote__text}>{children}</div>\n                {author != null && <footer className={styles.quote__author}>{author}</footer>}\n            </div>\n        </blockquote>\n    );\n};\n"],"names":["jsxs","cn","styles","jsx"],"mappings":";;;;;AAIO,MAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,KAAK,GAAG,YAAwB;AACjF,SACIA,gCAAC,cAAA,EAAW,KAAU,WAAWC,GAAAA,GAAGC,aAAAA,QAAO,OAAO,SAAS,GAAI,GAAG,OAC9D,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWD,aAAAA,QAAO;AAAA,QAClB,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,eAAY;AAAA,QAEZ,UAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,GAAE;AAAA,YACF,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,IAEJH,2BAAAA,KAAC,OAAA,EAAI,WAAWE,aAAAA,QAAO,gBACnB,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,aAAAA,QAAO,aAAc,UAAS;AAAA,MAC7C,UAAU,QAAQC,2BAAAA,IAAC,YAAO,WAAWD,qBAAO,eAAgB,UAAA,OAAA,CAAO;AAAA,IAAA,EAAA,CACxE;AAAA,EAAA,GACJ;AAER;;"}