datocms-react-ui 0.3.9 → 0.3.13

package/dist/cjs/Button/index.js

@@ -7,6 +7,67 @@ exports.ButtonLink = exports.Button = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+/**
+ * @example Button types
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button buttonType="muted">Submit</Button>{' '}
+ *     <Button buttonType="primary">Submit</Button>{' '}
+ *     <Button buttonType="negative">Submit</Button>
+ *   </div>
+ *   <div>
+ *     <Button buttonType="muted" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="primary" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="negative" disabled>
+ *       Submit
+ *     </Button>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Full-width
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button fullWidth>Submit</Button>
+ * </Canvas>;
+ * ```
+ *
+ * @example Sizing
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button buttonSize="xxs">Submit</Button>{' '}
+ *   <Button buttonSize="xs">Submit</Button>{' '}
+ *   <Button buttonSize="s">Submit</Button>{' '}
+ *   <Button buttonSize="m">Submit</Button>{' '}
+ *   <Button buttonSize="l">Submit</Button>{' '}
+ *   <Button buttonSize="xl">Submit</Button>{' '}
+ * </Canvas>;
+ * ```
+ *
+ * @example Icons
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button leftIcon={<PlusIcon />}>Submit</Button>
+ *   </div>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button rightIcon={<ChevronDownIcon />}>Options</Button>
+ *   </div>
+ *   <div>
+ *     <Button leftIcon={<PlusIcon />} />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
 function Button(_a) {
     var _b;
     var children = _a.children, className = _a.className, disabled = _a.disabled, _c = _a.buttonType, buttonType = _c === void 0 ? 'muted' : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _d, fullWidth = _a.fullWidth, onClick = _a.onClick, style = _a.style, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.type, type = _e === void 0 ? 'button' : _e;
@@ -14,9 +75,9 @@ function Button(_a) {
             _b[styles_module_css_json_1.default.disabled] = disabled,
             _b[styles_module_css_json_1.default.fullWidth] = fullWidth,
             _b), className), disabled: disabled, onClick: onClick, style: style },
-        leftIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__leftIcon'] }, leftIcon),
+        leftIcon && (react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__leftIcon'] }, leftIcon)),
         children && react_1.default.createElement("span", null, children),
-        rightIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__rightIcon'] }, rightIcon)));
+        rightIcon && (react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__rightIcon'] }, rightIcon))));
 }
 exports.Button = Button;
 function ButtonLink(_a) {
@@ -25,9 +86,9 @@ function ButtonLink(_a) {
     return (react_1.default.createElement("a", { href: href, target: target, className: (0, classnames_1.default)(styles_module_css_json_1.default.button, styles_module_css_json_1.default["buttonType-" + buttonType], styles_module_css_json_1.default["buttonSize-" + buttonSize], (_b = {},
             _b[styles_module_css_json_1.default.fullWidth] = fullWidth,
             _b), className), style: style, onClick: onClick },
-        leftIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__leftIcon'] }, leftIcon),
+        leftIcon && (react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__leftIcon'] }, leftIcon)),
         children && react_1.default.createElement("span", null, children),
-        rightIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__rightIcon'] }, rightIcon)));
+        rightIcon && (react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__rightIcon'] }, rightIcon))));
 }
 exports.ButtonLink = ButtonLink;
 //# sourceMappingURL=index.js.map

package/dist/cjs/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA2E;AAC3E,0DAA4B;AAC5B,oFAA8C;AAgB9C,SAAgB,MAAM,CAAC,EAYT;;QAXZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA;IAEf,OAAO,CACL,0CACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAM,CAAC,MAAM,EACb,gCAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,gCAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,gCAAM,CAAC,QAAQ,IAAG,QAAQ;YAC3B,GAAC,gCAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEX,QAAQ,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,4CAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACvE,CACV,CAAC;AACJ,CAAC;AAnCD,wBAmCC;AAgBD,SAAgB,UAAU,CAAC,EAYT;;QAXhB,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,SAAS,eAAA,EACT,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,qCACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAM,CAAC,MAAM,EACb,gCAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,gCAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,gCAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;QAEf,QAAQ,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,4CAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CAC5E,CACL,CAAC;AACJ,CAAC;AAlCD,gCAkCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA2E;AAC3E,0DAA4B;AAC5B,oFAA8C;AAgB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,SAAgB,MAAM,CAAC,EAYT;;QAXZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA;IAEf,OAAO,CACL,0CACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAM,CAAC,MAAM,EACb,gCAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,gCAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,gCAAM,CAAC,QAAQ,IAAG,QAAQ;YAC3B,GAAC,gCAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEX,QAAQ,IAAI,CACX,wCAAM,SAAS,EAAE,gCAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CAC/D;QACA,QAAQ,IAAI,4CAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,CACZ,wCAAM,SAAS,EAAE,gCAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACjE,CACM,CACV,CAAC;AACJ,CAAC;AAvCD,wBAuCC;AAgBD,SAAgB,UAAU,CAAC,EAYT;;QAXhB,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,SAAS,eAAA,EACT,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,qCACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAM,CAAC,MAAM,EACb,gCAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,gCAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,gCAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;QAEf,QAAQ,IAAI,CACX,wCAAM,SAAS,EAAE,gCAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CAC/D;QACA,QAAQ,IAAI,4CAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,CACZ,wCAAM,SAAS,EAAE,gCAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACjE,CACC,CACL,CAAC;AACJ,CAAC;AAtCD,gCAsCC"}

package/dist/cjs/Button/styles.module.css.json

@@ -1 +1 @@
-{ "button": "_button_a3m33_1", "disabled": "_disabled_a3m33_30", "buttonType-muted": "_buttonType-muted_a3m33_37", "buttonType-primary": "_buttonType-primary_a3m33_42", "buttonType-negative": "_buttonType-negative_a3m33_64", "buttonSize-xxs": "_buttonSize-xxs_a3m33_82", "buttonSize-xs": "_buttonSize-xs_a3m33_87", "buttonSize-s": "_buttonSize-s_a3m33_92", "buttonSize-m": "_buttonSize-m_a3m33_97", "buttonSize-l": "_buttonSize-l_a3m33_102", "buttonSize-xl": "_buttonSize-xl_a3m33_107", "fullWidth": "_fullWidth_a3m33_112", "button__leftIcon": "_button__leftIcon_a3m33_118", "button__rightIcon": "_button__rightIcon_a3m33_119" }
+{ "button": "_button_ya5s7_1", "disabled": "_disabled_ya5s7_30", "buttonType-muted": "_buttonType-muted_ya5s7_36", "buttonType-primary": "_buttonType-primary_ya5s7_41", "buttonType-negative": "_buttonType-negative_ya5s7_62", "buttonSize-xxs": "_buttonSize-xxs_ya5s7_79", "buttonSize-xs": "_buttonSize-xs_ya5s7_84", "buttonSize-s": "_buttonSize-s_ya5s7_89", "buttonSize-m": "_buttonSize-m_ya5s7_94", "buttonSize-l": "_buttonSize-l_ya5s7_99", "buttonSize-xl": "_buttonSize-xl_ya5s7_104", "fullWidth": "_fullWidth_ya5s7_109", "button__leftIcon": "_button__leftIcon_ya5s7_115", "button__rightIcon": "_button__rightIcon_ya5s7_116" }

package/dist/cjs/Canvas/index.js

@@ -42,6 +42,484 @@ function camelToDash(str) {
     }
     return str;
 }
+/**
+ * @example Color variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Section title="Text colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--base-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--base-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--placeholder-body-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--placeholder-body-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="UI colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--light-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--lighter-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--lighter-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--disabled-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--disabled-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--darker-border-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--darker-border-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--alert-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--alert-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--notice-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--notice-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--warning-bg-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--warning-bg-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--add-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--add-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--remove-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--remove-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ *   <Section title="Project-specific colors">
+ *     <table>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <code>--accent-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--accent-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--primary-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--primary-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--light-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--light-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *         <tr>
+ *           <td>
+ *             <code>--dark-color</code>
+ *           </td>
+ *           <td width="30%">
+ *             <div
+ *               style={{
+ *                 width: '30px',
+ *                 height: '30px',
+ *                 background: 'var(--dark-color)',
+ *               }}
+ *             />
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Typography variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xxs)' }}>
+ *             Size XXS
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xs</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-s</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-m</code>
+ *         </td>
+ *         <td>
+ *           <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-l)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size L
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--font-size-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               fontSize: 'var(--font-size-xxxl)',
+ *               fontWeight: 'var(--font-weight-bold)',
+ *             }}
+ *           >
+ *             Size XXXL
+ *           </div>
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ *
+ * @example Spacing variables
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <table>
+ *     <tbody>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-s</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-s)',
+ *               height: 'var(--spacing-s)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-m</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-m)',
+ *               height: 'var(--spacing-m)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-l</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-l)',
+ *               height: 'var(--spacing-l)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xl)',
+ *               height: 'var(--spacing-xl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxl)',
+ *               height: 'var(--spacing-xxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *       <tr>
+ *         <td>
+ *           <code>--spacing-xxxl</code>
+ *         </td>
+ *         <td>
+ *           <div
+ *             style={{
+ *               background: 'var(--accent-color)',
+ *               width: 'var(--spacing-xxxl)',
+ *               height: 'var(--spacing-xxxl)',
+ *             }}
+ *           />
+ *         </td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </Canvas>;
+ * ```
+ */
 function Canvas(_a) {
     var ctx = _a.ctx, children = _a.children, noAutoResizer = _a.noAutoResizer;
     var mode = ctx.mode;
@@ -54,13 +532,15 @@ function Canvas(_a) {
             });
         }
     }, [mode, noAutoResizer]);
-    return (react_1.default.createElement("div", { className: styles_module_css_json_1.default.canvas, style: Object.entries(ctx.theme).reduce(function (acc, _a) {
-            var _b;
-            var k = _a[0], v = _a[1];
-            return (__assign(__assign({}, acc), (_b = {}, _b["--" + camelToDash(k)] = v, _b)));
-        }, {
-            padding: ctx.bodyPadding.map(function (p) { return p + "px"; }).join(' '),
-        }) }, children));
+    var style = Object.entries(ctx.theme).reduce(function (acc, _a) {
+        var _b;
+        var _c;
+        var k = _a[0], v = _a[1];
+        return __assign(__assign({}, acc), (_b = {}, _b["--" + camelToDash(k)] = v, _b["--" + camelToDash(k + "RgbComponents")] = ((_c = v.match(/rgb\((\d+, \d+, \d+)\)/)) === null || _c === void 0 ? void 0 : _c[1]) || undefined, _b));
+    }, {
+        padding: ctx.bodyPadding.map(function (p) { return p + "px"; }).join(' '),
+    });
+    return (react_1.default.createElement("div", { className: styles_module_css_json_1.default.canvas, style: style }, children));
 }
 exports.Canvas = Canvas;
 //# sourceMappingURL=index.js.map

package/dist/cjs/Canvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAEpD,oFAA8C;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,SAAgB,MAAM,CAAC,EAA6C;QAA3C,GAAG,SAAA,EAAE,QAAQ,cAAA,EAAE,aAAa,mBAAA;IAC3C,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,IAAA,iBAAS,EAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,CAAA;gBACE,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAA,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,uCACE,SAAS,EAAE,gCAAM,CAAC,MAAM,EACxB,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CACrC,UAAC,GAAG,EAAE,EAAM;;gBAAL,CAAC,QAAA,EAAE,CAAC,QAAA;YAAM,OAAA,uBAAM,GAAG,gBAAG,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,OAAG;QAAxC,CAAwC,EACzD;YACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;SACxD,CACF,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AA3BD,wBA2BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAEpD,oFAA8C;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6dG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,IAAA,iBAAS,EAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,CAAA;gBACE,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAA,CAAC;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAC5C,UAAC,GAAG,EAAE,EAAM;;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QACT,6BACK,GAAG,gBACL,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,KACzB,OAAK,WAAW,CAAI,CAAC,kBAAe,CAAG,IACtC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS,OACrD;IACJ,CAAC,EACD;QACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;KACxD,CACF,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,gCAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IACxC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AArCD,wBAqCC"}

package/dist/cjs/Canvas/styles.module.css.json

@@ -1 +1 @@
-{ "canvas": "_canvas_jzho9_1" }
+{ "canvas": "_canvas_1es76_1" }

package/dist/cjs/ContextInspector/index.js

@@ -107,7 +107,7 @@ function findChildrenById(manifest, id) {
     return manifest.children.find(function (child) { return child.id === id; });
 }
 function findShortText(signature) {
-    return (signature.comment && addFinalPeriod(signature.comment.shortText)) || null;
+    return ((signature.comment && addFinalPeriod(signature.comment.shortText)) || null);
 }
 function findFirstTag(signature, tagName) {
     if (!signature.comment || !signature.comment.tags) {
@@ -120,6 +120,7 @@ function findFirstTag(signature, tagName) {
     return tagNode.text;
 }
 function findExample(signature) {
+    var _a;
     var example = findFirstTag(signature, 'example');
     if (!example) {
         return null;
@@ -132,8 +133,10 @@ function findExample(signature) {
         return spaces ? spaces[0].length : 0;
     });
     var commonIndentation = Math.min.apply(Math, spacesPerLine);
-    var result = lines.map(function (line) { return line.substring(commonIndentation); }).join('\n');
-    return result;
+    var result = lines
+        .map(function (line) { return line.substring(commonIndentation); })
+        .join('\n');
+    return (_a = result.match(/```[a-z]*\n([\s\S]*?)\n```/)) === null || _a === void 0 ? void 0 : _a[1].trim();
 }
 function buildCtx(manifest, definition) {
     if (definition.type.type === 'intersection') {
@@ -157,7 +160,9 @@ function buildCtx(manifest, definition) {
             name: definition.name,
             description: findShortText(definition),
             properties: properties.map(function (child) {
-                if (child.type && child.type.declaration && child.type.declaration.signatures) {
+                if (child.type &&
+                    child.type.declaration &&
+                    child.type.declaration.signatures) {
                     child.signatures = child.type.declaration.signatures;
                 }
                 if (child.signatures) {