@digigov/ui 2.0.0-d57821ba → 2.0.0-daaf7bdf

package/src/typography/CodeBlock/__stories__/WithPhaseBanner.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import CodeBlock from '@digigov/ui/typography/CodeBlock';
+
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+
+export const WithPhaseBanner = () => {
+  return (
+    <CodeBlock
+      highlighted
+      language="bash"
+      copyToClipboard
+      phaseBannerTagName="json"
+    >
+      {bashExample}
+    </CodeBlock>
+  );
+};
+
+export default WithPhaseBanner;

package/src/typography/CodeBlock/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/typography/CodeBlock/__stories__/Default';
+import { Highlighted } from '@digigov/ui/typography/CodeBlock/__stories__/Highlighted';
+import { WithCopyToClipboard } from '@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard';
+import { WithPhaseBanner } from '@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner';
+
+test('renders the All CodeBlock variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Highlighted">
+      <Highlighted />
+    </TestVariant>
+    <TestVariant title="WithCopyToClipboard">
+      <WithCopyToClipboard />
+    </TestVariant>
+    <TestVariant title="WithPhaseBanner">
+      <WithPhaseBanner />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/CodeBlock/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
-import { default as hljs } from 'highlight.js/lib/core';
-import { default as bash } from 'highlight.js/lib/languages/bash';
-import { default as js } from 'highlight.js/lib/languages/javascript';
-import { default as python } from 'highlight.js/lib/languages/python';
-import { default as xml } from 'highlight.js/lib/languages/xml';
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import js from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import xml from 'highlight.js/lib/languages/xml';
 import { BaseProps } from '@digigov/react-core/Base';
 import CodeBlockContainer from '@digigov/react-core/CodeBlockContainer';
 import CodeBlockContent from '@digigov/react-core/CodeBlockContent';
@@ -14,20 +16,21 @@ import { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 import { Button } from '@digigov/ui/form/Button';
 
 export interface CodeBlockProps extends BaseProps<'div'> {
-  language?: 'js' | 'bash' | 'xml' | 'python';
-  copyToClipboard?: true | false;
-  highlighted?: true | false;
-  showLineNumbers?: true | false;
-  shouldWrapLongLines?: true | false;
+  language?: 'javascript' | 'bash' | 'xml' | 'python' | 'markdown' | 'json';
+  copyToClipboard?: boolean;
+  highlighted?: boolean;
+  showLineNumbers?: boolean;
   phaseBannerTagName?: string;
   highlightLines?: number[];
 }
 
 const languageMap = {
-  js: js,
+  javascript: js,
   python: python,
   bash: bash,
   xml: xml,
+  markdown: markdown,
+  json: json,
 };
 
 const addLineNumbers = (code: string, highlightLines: number[]): string => {
@@ -44,27 +47,29 @@ const addLineNumbers = (code: string, highlightLines: number[]): string => {
 export const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(
   function CodeBlock({
     children,
-    language = 'bash',
+    language,
     copyToClipboard,
     highlighted,
     showLineNumbers,
-    shouldWrapLongLines,
     phaseBannerTagName,
     highlightLines,
     ref,
     ...props
   }) {
     const Tag = 'span';
-    hljs.registerLanguage(language, languageMap[language]);
     const codeString = typeof children === 'string' ? children : '';
     let displayingCode = codeString;
 
     if (highlighted && codeString) {
       try {
         hljs.configure({ classPrefix: 'ds-code--' });
-        const highlightedCode = hljs.highlight(codeString, {
-          language: language,
-        }).value;
+        let highlightedCode = hljs.highlightAuto(codeString).value;
+        if (language) {
+          hljs.registerLanguage(language, languageMap[language]);
+          highlightedCode = hljs.highlight(codeString, {
+            language: language,
+          }).value;
+        }
         displayingCode = showLineNumbers
           ? addLineNumbers(highlightedCode, highlightLines || [])
           : highlightedCode;
@@ -74,10 +79,10 @@ export const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(
     }
 
     return (
-      <CodeBlockContainer ref={ref} wrapLines={shouldWrapLongLines} {...props}>
+      <CodeBlockContainer ref={ref} {...props}>
         <CodeBlockHeader
           justify={
-            phaseBannerTagName && copyToClipboard ? 'spaceBetween' : 'end'
+            phaseBannerTagName && copyToClipboard ? 'space-between' : 'end'
           }
         >
           {phaseBannerTagName && (

package/src/utils/Base/index.tsx

@@ -1,4 +1,5 @@
 export * from '@digigov/react-core/Base';
 import Base from '@digigov/react-core/Base';
+export { basePropGenerator } from '@digigov/react-core/Base/utils';
 
 export default Base;

package/typography/CodeBlock/CodeBlock.stories/index.js

@@ -5,8 +5,14 @@ var CodeBlock_stories_default = {
   displayName: "CodeBlock"
 };
 import { Default } from "@digigov/ui/typography/CodeBlock/__stories__/Default";
+import { Highlighted } from "@digigov/ui/typography/CodeBlock/__stories__/Highlighted";
+import { WithCopyToClipboard } from "@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard";
+import { WithPhaseBanner } from "@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner";
 export {
   Default,
+  Highlighted,
+  WithCopyToClipboard,
+  WithPhaseBanner,
   CodeBlock_stories_default as default
 };
 //# sourceMappingURL=CodeBlock.stories.js.map

package/typography/CodeBlock/CodeBlock.stories.d.ts

@@ -5,4 +5,7 @@ declare namespace _default {
 }
 export default _default;
 export { Default } from "@digigov/ui/typography/CodeBlock/__stories__/Default";
+export { Highlighted } from "@digigov/ui/typography/CodeBlock/__stories__/Highlighted";
+export { WithCopyToClipboard } from "@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard";
+export { WithPhaseBanner } from "@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner";
 import CodeBlock from '@digigov/ui/typography/CodeBlock';

package/typography/CodeBlock/CodeBlock.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/typography/CodeBlock/CodeBlock.stories.js"],
-  "sourcesContent": ["import CodeBlock from '@digigov/ui/typography/CodeBlock';\nexport default {\n  title: 'Digigov UI/typography/CodeBlock',\n  component: CodeBlock,\n  displayName: 'CodeBlock',\n};\nexport { Default } from '@digigov/ui/typography/CodeBlock/__stories__/Default';\n"],
-  "mappings": "AAAA,OAAO,eAAe;AACtB,IAAO,4BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;",
+  "sourcesContent": ["import CodeBlock from '@digigov/ui/typography/CodeBlock';\nexport default {\n  title: 'Digigov UI/typography/CodeBlock',\n  component: CodeBlock,\n  displayName: 'CodeBlock',\n};\nexport { Default } from '@digigov/ui/typography/CodeBlock/__stories__/Default';\nexport { Highlighted } from '@digigov/ui/typography/CodeBlock/__stories__/Highlighted';\nexport { WithCopyToClipboard } from '@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard';\nexport { WithPhaseBanner } from '@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner';\n"],
+  "mappings": "AAAA,OAAO,eAAe;AACtB,IAAO,4BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;",
   "names": []
 }

package/typography/CodeBlock/__stories__/Default/index.js

@@ -1,99 +1,20 @@
 import React from "react";
 import CodeBlock from "@digigov/ui/typography/CodeBlock";
-import Base from "@digigov/ui/utils/Base";
-const bashExample = `POST https://ked.gsis.gr
-  {
-    "gateCreatePostDocumentInputRecord": {
-      "gate": "USER",
-      "source": {
-        # \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1
-          "gateCreatePostDocumentInputRecord": {
-          "gate": "USER",
-          "source": {
-            # \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1
-          }
-        }
-        "auditRecord": "..."
-      }
-    }
-    "auditRecord": "..."
-  }`;
-const htmlExample = `<details>
-  <summary>Epcot Center</summary>
-  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
-</details>`;
-const jsExample = `
-export const DashboardRegistry = registry;
-function TextNode(props) {
-  return <>{props.text}</>;
-}
-
-TextNode.propTypes = {
-  text: PropTypes.any,
-};
-
-registry.register({ TextNode });`;
-const pythonExample = `# Program to check if a number is prime or not
-
-num = 29
-
-# To take input from the user
-#num = int(input("Enter a number: "))
-
-# define a flag variable
-flag = False
-
-if num == 1:
-    print(num, "is not a prime number")
-elif num > 1:
-    # check for factors
-    for i in range(2, num):
-        if (num % i) == 0:
-            # if factor is found, set flag to True
-            flag = True
-            # break out of loop
-            break
-
-    # check if flag is True
-    if flag:
-        print(num, "is not a prime number")
-    else:
-        print(num, "is a prime number")`;
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
 const Default = () => {
-  return /* @__PURE__ */ React.createElement(Base, null, /* @__PURE__ */ React.createElement(CodeBlock, { highlighted: true, copyToClipboard: true }, bashExample), /* @__PURE__ */ React.createElement(
-    CodeBlock,
-    {
-      mt: 10,
-      highlighted: true,
-      copyToClipboard: true,
-      showLineNumbers: true,
-      language: "python",
-      phaseBannerTagName: "python",
-      highlightLines: [11, 12]
-    },
-    pythonExample
-  ), /* @__PURE__ */ React.createElement(
-    CodeBlock,
-    {
-      mt: 10,
-      highlighted: true,
-      copyToClipboard: true,
-      language: "js",
-      phaseBannerTagName: "JS"
-    },
-    jsExample
-  ), /* @__PURE__ */ React.createElement(
-    CodeBlock,
-    {
-      mt: 10,
-      highlighted: true,
-      copyToClipboard: true,
-      showLineNumbers: true,
-      language: "xml",
-      phaseBannerTagName: "html"
-    },
-    htmlExample
-  ));
+  return /* @__PURE__ */ React.createElement(CodeBlock, null, bashExample);
 };
 var Default_default = Default;
 export {

package/typography/CodeBlock/__stories__/Default.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/CodeBlock/__stories__/Default.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport CodeBlock from '@digigov/ui/typography/CodeBlock';\nimport Base from '@digigov/ui/utils/Base';\n\nconst bashExample = `POST https://ked.gsis.gr\n  {\n    \"gateCreatePostDocumentInputRecord\": {\n      \"gate\": \"USER\",\n      \"source\": {\n        # \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1\n          \"gateCreatePostDocumentInputRecord\": {\n          \"gate\": \"USER\",\n          \"source\": {\n            # \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1\n          }\n        }\n        \"auditRecord\": \"...\"\n      }\n    }\n    \"auditRecord\": \"...\"\n  }`;\n\nconst htmlExample = `<details>\n  <summary>Epcot Center</summary>\n  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>\n</details>`;\n\nconst jsExample = `\nexport const DashboardRegistry = registry;\nfunction TextNode(props) {\n  return <>{props.text}</>;\n}\n\nTextNode.propTypes = {\n  text: PropTypes.any,\n};\n\nregistry.register({ TextNode });`;\n\nconst pythonExample = `# Program to check if a number is prime or not\n\nnum = 29\n\n# To take input from the user\n#num = int(input(\"Enter a number: \"))\n\n# define a flag variable\nflag = False\n\nif num == 1:\n    print(num, \"is not a prime number\")\nelif num > 1:\n    # check for factors\n    for i in range(2, num):\n        if (num % i) == 0:\n            # if factor is found, set flag to True\n            flag = True\n            # break out of loop\n            break\n\n    # check if flag is True\n    if flag:\n        print(num, \"is not a prime number\")\n    else:\n        print(num, \"is a prime number\")`;\n\nexport const Default = () => {\n  return (\n    <Base>\n      <CodeBlock highlighted copyToClipboard>\n        {bashExample}\n      </CodeBlock>\n      <CodeBlock\n        mt={10}\n        highlighted\n        copyToClipboard\n        showLineNumbers\n        language=\"python\"\n        phaseBannerTagName=\"python\"\n        highlightLines={[11, 12]}\n      >\n        {pythonExample}\n      </CodeBlock>\n      <CodeBlock\n        mt={10}\n        highlighted\n        copyToClipboard\n        language=\"js\"\n        phaseBannerTagName=\"JS\"\n      >\n        {jsExample}\n      </CodeBlock>\n      <CodeBlock\n        mt={10}\n        highlighted\n        copyToClipboard\n        showLineNumbers\n        language=\"xml\"\n        phaseBannerTagName=\"html\"\n      >\n        {htmlExample}\n      </CodeBlock>\n    </Base>\n  );\n};\n\nexport default Default;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,eAAe;AACtB,OAAO,UAAU;AAEjB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAKpB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYlB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2Bf,MAAM,UAAU,MAAM;AAC3B,SACE,oCAAC,YACC,oCAAC,aAAU,aAAW,MAAC,iBAAe,QACnC,WACH,GACA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAS;AAAA,MACT,oBAAmB;AAAA,MACnB,gBAAgB,CAAC,IAAI,EAAE;AAAA;AAAA,IAEtB;AAAA,EACH,GACA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,UAAS;AAAA,MACT,oBAAmB;AAAA;AAAA,IAElB;AAAA,EACH,GACA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAS;AAAA,MACT,oBAAmB;AAAA;AAAA,IAElB;AAAA,EACH,CACF;AAEJ;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import React from 'react';\n\nimport CodeBlock from '@digigov/ui/typography/CodeBlock';\n\nconst bashExample = `{\n  \"random\": random(1, 100),\n  \"random float\": randomFloat(1, 100, 3),\n  \"bool\": randomBool(),\n  \"date\": date('Y-m-d', '1980-01-01', '2000-01-15'),\n  \"regEx\": regex(/hello+ (world|to you)/),\n  \"enum\": choice('json', 'generator', 'online'),\n  \"firstname\": firstname(),\n  \"lastname\": lastname(),\n  \"city\": city(),\n  \"country\": country(),\n  \"countryCode\": countryCode()\n}`;\n\nexport const Default = () => {\n  return <CodeBlock>{bashExample}</CodeBlock>;\n};\n\nexport default Default;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,eAAe;AAEtB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcb,MAAM,UAAU,MAAM;AAC3B,SAAO,oCAAC,iBAAW,WAAY;AACjC;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/typography/CodeBlock/__stories__/Highlighted/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import CodeBlock from "@digigov/ui/typography/CodeBlock";
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+const Highlighted = () => {
+  return /* @__PURE__ */ React.createElement(CodeBlock, { language: "bash", highlighted: true }, bashExample);
+};
+var Highlighted_default = Highlighted;
+export {
+  Highlighted,
+  Highlighted_default as default
+};
+//# sourceMappingURL=Highlighted.js.map

package/typography/CodeBlock/__stories__/Highlighted/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/typography/CodeBlock/__stories__/Highlighted/index.js"
+}

package/typography/CodeBlock/__stories__/Highlighted.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Highlighted: () => React.JSX.Element;
+export default Highlighted;

package/typography/CodeBlock/__stories__/Highlighted.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/CodeBlock/__stories__/Highlighted.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport CodeBlock from '@digigov/ui/typography/CodeBlock';\n\nconst bashExample = `{\n  \"random\": random(1, 100),\n  \"random float\": randomFloat(1, 100, 3),\n  \"bool\": randomBool(),\n  \"date\": date('Y-m-d', '1980-01-01', '2000-01-15'),\n  \"regEx\": regex(/hello+ (world|to you)/),\n  \"enum\": choice('json', 'generator', 'online'),\n  \"firstname\": firstname(),\n  \"lastname\": lastname(),\n  \"city\": city(),\n  \"country\": country(),\n  \"countryCode\": countryCode()\n}`;\n\nexport const Highlighted = () => {\n  return (\n    <CodeBlock language=\"bash\" highlighted>\n      {bashExample}\n    </CodeBlock>\n  );\n};\n\nexport default Highlighted;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,eAAe;AAEtB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcb,MAAM,cAAc,MAAM;AAC/B,SACE,oCAAC,aAAU,UAAS,QAAO,aAAW,QACnC,WACH;AAEJ;AAEA,IAAO,sBAAQ;",
+  "names": []
+}

package/typography/CodeBlock/__stories__/WithCopyToClipboard/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import CodeBlock from "@digigov/ui/typography/CodeBlock";
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+const WithCopyToClipboard = () => {
+  return /* @__PURE__ */ React.createElement(CodeBlock, { highlighted: true, language: "bash", copyToClipboard: true }, bashExample);
+};
+var WithCopyToClipboard_default = WithCopyToClipboard;
+export {
+  WithCopyToClipboard,
+  WithCopyToClipboard_default as default
+};
+//# sourceMappingURL=WithCopyToClipboard.js.map

package/typography/CodeBlock/__stories__/WithCopyToClipboard/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/typography/CodeBlock/__stories__/WithCopyToClipboard/index.js"
+}

package/typography/CodeBlock/__stories__/WithCopyToClipboard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithCopyToClipboard: () => React.JSX.Element;
+export default WithCopyToClipboard;

package/typography/CodeBlock/__stories__/WithCopyToClipboard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/CodeBlock/__stories__/WithCopyToClipboard.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport CodeBlock from '@digigov/ui/typography/CodeBlock';\n\nconst bashExample = `{\n  \"random\": random(1, 100),\n  \"random float\": randomFloat(1, 100, 3),\n  \"bool\": randomBool(),\n  \"date\": date('Y-m-d', '1980-01-01', '2000-01-15'),\n  \"regEx\": regex(/hello+ (world|to you)/),\n  \"enum\": choice('json', 'generator', 'online'),\n  \"firstname\": firstname(),\n  \"lastname\": lastname(),\n  \"city\": city(),\n  \"country\": country(),\n  \"countryCode\": countryCode()\n}`;\n\nexport const WithCopyToClipboard = () => {\n  return (\n    <CodeBlock highlighted language=\"bash\" copyToClipboard>\n      {bashExample}\n    </CodeBlock>\n  );\n};\n\nexport default WithCopyToClipboard;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,eAAe;AAEtB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcb,MAAM,sBAAsB,MAAM;AACvC,SACE,oCAAC,aAAU,aAAW,MAAC,UAAS,QAAO,iBAAe,QACnD,WACH;AAEJ;AAEA,IAAO,8BAAQ;",
+  "names": []
+}

package/typography/CodeBlock/__stories__/WithPhaseBanner/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import CodeBlock from "@digigov/ui/typography/CodeBlock";
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+const WithPhaseBanner = () => {
+  return /* @__PURE__ */ React.createElement(
+    CodeBlock,
+    {
+      highlighted: true,
+      language: "bash",
+      copyToClipboard: true,
+      phaseBannerTagName: "json"
+    },
+    bashExample
+  );
+};
+var WithPhaseBanner_default = WithPhaseBanner;
+export {
+  WithPhaseBanner,
+  WithPhaseBanner_default as default
+};
+//# sourceMappingURL=WithPhaseBanner.js.map

package/typography/CodeBlock/__stories__/WithPhaseBanner/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/typography/CodeBlock/__stories__/WithPhaseBanner/index.js"
+}

package/typography/CodeBlock/__stories__/WithPhaseBanner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithPhaseBanner: () => React.JSX.Element;
+export default WithPhaseBanner;

package/typography/CodeBlock/__stories__/WithPhaseBanner.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/typography/CodeBlock/__stories__/WithPhaseBanner.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport CodeBlock from '@digigov/ui/typography/CodeBlock';\n\nconst bashExample = `{\n  \"random\": random(1, 100),\n  \"random float\": randomFloat(1, 100, 3),\n  \"bool\": randomBool(),\n  \"date\": date('Y-m-d', '1980-01-01', '2000-01-15'),\n  \"regEx\": regex(/hello+ (world|to you)/),\n  \"enum\": choice('json', 'generator', 'online'),\n  \"firstname\": firstname(),\n  \"lastname\": lastname(),\n  \"city\": city(),\n  \"country\": country(),\n  \"countryCode\": countryCode()\n}`;\n\nexport const WithPhaseBanner = () => {\n  return (\n    <CodeBlock\n      highlighted\n      language=\"bash\"\n      copyToClipboard\n      phaseBannerTagName=\"json\"\n    >\n      {bashExample}\n    </CodeBlock>\n  );\n};\n\nexport default WithPhaseBanner;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,eAAe;AAEtB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcb,MAAM,kBAAkB,MAAM;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,UAAS;AAAA,MACT,iBAAe;AAAA,MACf,oBAAmB;AAAA;AAAA,IAElB;AAAA,EACH;AAEJ;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

package/typography/CodeBlock/index.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import { BaseProps } from '@digigov/react-core/Base';
 export interface CodeBlockProps extends BaseProps<'div'> {
-    language?: 'js' | 'bash' | 'xml' | 'python';
-    copyToClipboard?: true | false;
-    highlighted?: true | false;
-    showLineNumbers?: true | false;
-    shouldWrapLongLines?: true | false;
+    language?: 'javascript' | 'bash' | 'xml' | 'python' | 'markdown' | 'json';
+    copyToClipboard?: boolean;
+    highlighted?: boolean;
+    showLineNumbers?: boolean;
     phaseBannerTagName?: string;
     highlightLines?: number[];
 }

package/typography/CodeBlock/index.js

@@ -1,9 +1,11 @@
 import React from "react";
-import { default as hljs } from "highlight.js/lib/core";
-import { default as bash } from "highlight.js/lib/languages/bash";
-import { default as js } from "highlight.js/lib/languages/javascript";
-import { default as python } from "highlight.js/lib/languages/python";
-import { default as xml } from "highlight.js/lib/languages/xml";
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import js from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import python from "highlight.js/lib/languages/python";
+import xml from "highlight.js/lib/languages/xml";
 import CodeBlockContainer from "@digigov/react-core/CodeBlockContainer";
 import CodeBlockContent from "@digigov/react-core/CodeBlockContent";
 import CodeBlockHeader from "@digigov/react-core/CodeBlockHeader";
@@ -11,10 +13,12 @@ import { CopyToClipboard } from "@digigov/ui/feedback";
 import { PhaseBannerTag } from "@digigov/ui/feedback/PhaseBanner";
 import { Button } from "@digigov/ui/form/Button";
 const languageMap = {
-  js,
+  javascript: js,
   python,
   bash,
-  xml
+  xml,
+  markdown,
+  json
 };
 const addLineNumbers = (code, highlightLines) => {
   return code.split("\n").map((line, index) => {
@@ -26,35 +30,37 @@ const addLineNumbers = (code, highlightLines) => {
 const CodeBlock = React.forwardRef(
   function CodeBlock2({
     children,
-    language = "bash",
+    language,
     copyToClipboard,
     highlighted,
     showLineNumbers,
-    shouldWrapLongLines,
     phaseBannerTagName,
     highlightLines,
     ref,
     ...props
   }) {
     const Tag = "span";
-    hljs.registerLanguage(language, languageMap[language]);
     const codeString = typeof children === "string" ? children : "";
     let displayingCode = codeString;
     if (highlighted && codeString) {
       try {
         hljs.configure({ classPrefix: "ds-code--" });
-        const highlightedCode = hljs.highlight(codeString, {
-          language
-        }).value;
+        let highlightedCode = hljs.highlightAuto(codeString).value;
+        if (language) {
+          hljs.registerLanguage(language, languageMap[language]);
+          highlightedCode = hljs.highlight(codeString, {
+            language
+          }).value;
+        }
         displayingCode = showLineNumbers ? addLineNumbers(highlightedCode, highlightLines || []) : highlightedCode;
       } catch (error) {
         console.error("Highlighting failed:", error);
       }
     }
-    return /* @__PURE__ */ React.createElement(CodeBlockContainer, { ref, wrapLines: shouldWrapLongLines, ...props }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(CodeBlockContainer, { ref, ...props }, /* @__PURE__ */ React.createElement(
       CodeBlockHeader,
       {
-        justify: phaseBannerTagName && copyToClipboard ? "spaceBetween" : "end"
+        justify: phaseBannerTagName && copyToClipboard ? "space-between" : "end"
       },
       phaseBannerTagName && /* @__PURE__ */ React.createElement(PhaseBannerTag, null, phaseBannerTagName),
       copyToClipboard && /* @__PURE__ */ React.createElement(

package/typography/CodeBlock/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/typography/CodeBlock/index.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport { default as hljs } from 'highlight.js/lib/core';\nimport { default as bash } from 'highlight.js/lib/languages/bash';\nimport { default as js } from 'highlight.js/lib/languages/javascript';\nimport { default as python } from 'highlight.js/lib/languages/python';\nimport { default as xml } from 'highlight.js/lib/languages/xml';\nimport { BaseProps } from '@digigov/react-core/Base';\nimport CodeBlockContainer from '@digigov/react-core/CodeBlockContainer';\nimport CodeBlockContent from '@digigov/react-core/CodeBlockContent';\nimport CodeBlockHeader from '@digigov/react-core/CodeBlockHeader';\nimport { CopyToClipboard } from '@digigov/ui/feedback';\nimport { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport interface CodeBlockProps extends BaseProps<'div'> {\n  language?: 'js' | 'bash' | 'xml' | 'python';\n  copyToClipboard?: true | false;\n  highlighted?: true | false;\n  showLineNumbers?: true | false;\n  shouldWrapLongLines?: true | false;\n  phaseBannerTagName?: string;\n  highlightLines?: number[];\n}\n\nconst languageMap = {\n  js: js,\n  python: python,\n  bash: bash,\n  xml: xml,\n};\n\nconst addLineNumbers = (code: string, highlightLines: number[]): string => {\n  return code\n    .split('\\n')\n    .map((line, index) => {\n      const isHighlighted = highlightLines.includes(index + 1);\n      const lineClass = isHighlighted ? 'ds-code--highlighted-line' : '';\n      return `<span class=\"ds-code--line-number\">${index + 1}</span> <span class=\"${lineClass}\">${line}</span>`;\n    })\n    .join('\\n');\n};\n\nexport const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(\n  function CodeBlock({\n    children,\n    language = 'bash',\n    copyToClipboard,\n    highlighted,\n    showLineNumbers,\n    shouldWrapLongLines,\n    phaseBannerTagName,\n    highlightLines,\n    ref,\n    ...props\n  }) {\n    const Tag = 'span';\n    hljs.registerLanguage(language, languageMap[language]);\n    const codeString = typeof children === 'string' ? children : '';\n    let displayingCode = codeString;\n\n    if (highlighted && codeString) {\n      try {\n        hljs.configure({ classPrefix: 'ds-code--' });\n        const highlightedCode = hljs.highlight(codeString, {\n          language: language,\n        }).value;\n        displayingCode = showLineNumbers\n          ? addLineNumbers(highlightedCode, highlightLines || [])\n          : highlightedCode;\n      } catch (error) {\n        console.error('Highlighting failed:', error);\n      }\n    }\n\n    return (\n      <CodeBlockContainer ref={ref} wrapLines={shouldWrapLongLines} {...props}>\n        <CodeBlockHeader\n          justify={\n            phaseBannerTagName && copyToClipboard ? 'spaceBetween' : 'end'\n          }\n        >\n          {phaseBannerTagName && (\n            <PhaseBannerTag>{phaseBannerTagName}</PhaseBannerTag>\n          )}\n          {copyToClipboard && (\n            <CopyToClipboard\n              dense\n              text={codeString}\n              variant=\"tooltip\"\n              tooltipAlign=\"right\"\n              message=\"Copied!\"\n            >\n              <Button dense color=\"secondary\">\n                Copy\n              </Button>\n            </CopyToClipboard>\n          )}\n        </CodeBlockHeader>\n        <CodeBlockContent className={`language-${language}`}>\n          {highlighted && codeString ? (\n            <Tag\n              dangerouslySetInnerHTML={{\n                __html: displayingCode,\n              }}\n            />\n          ) : (\n            children\n          )}\n        </CodeBlockContent>\n      </CodeBlockContainer>\n    );\n  }\n);\n\nexport * from '@digigov/react-core/CodeBlockContent';\nexport * from '@digigov/react-core/CodeBlockHeader';\nexport * from '@digigov/react-core/CodeBlockContainer';\nexport default CodeBlock;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,WAAW,YAAY;AAChC,SAAS,WAAW,YAAY;AAChC,SAAS,WAAW,UAAU;AAC9B,SAAS,WAAW,cAAc;AAClC,SAAS,WAAW,WAAW;AAE/B,OAAO,wBAAwB;AAC/B,OAAO,sBAAsB;AAC7B,OAAO,qBAAqB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AAYvB,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,CAAC,MAAc,mBAAqC;AACzE,SAAO,KACJ,MAAM,IAAI,EACV,IAAI,CAAC,MAAM,UAAU;AACpB,UAAM,gBAAgB,eAAe,SAAS,QAAQ,CAAC;AACvD,UAAM,YAAY,gBAAgB,8BAA8B;AAChE,WAAO,sCAAsC,QAAQ,CAAC,wBAAwB,SAAS,KAAK,IAAI;AAAA,EAClG,CAAC,EACA,KAAK,IAAI;AACd;AAEO,MAAM,YAAsC,MAAM;AAAA,EACvD,SAASA,WAAU;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG;AACD,UAAM,MAAM;AACZ,SAAK,iBAAiB,UAAU,YAAY,QAAQ,CAAC;AACrD,UAAM,aAAa,OAAO,aAAa,WAAW,WAAW;AAC7D,QAAI,iBAAiB;AAErB,QAAI,eAAe,YAAY;AAC7B,UAAI;AACF,aAAK,UAAU,EAAE,aAAa,YAAY,CAAC;AAC3C,cAAM,kBAAkB,KAAK,UAAU,YAAY;AAAA,UACjD;AAAA,QACF,CAAC,EAAE;AACH,yBAAiB,kBACb,eAAe,iBAAiB,kBAAkB,CAAC,CAAC,IACpD;AAAA,MACN,SAAS,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAAA,MAC7C;AAAA,IACF;AAEA,WACE,oCAAC,sBAAmB,KAAU,WAAW,qBAAsB,GAAG,SAChE;AAAA,MAAC;AAAA;AAAA,QACC,SACE,sBAAsB,kBAAkB,iBAAiB;AAAA;AAAA,MAG1D,sBACC,oCAAC,sBAAgB,kBAAmB;AAAA,MAErC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAK;AAAA,UACL,MAAM;AAAA,UACN,SAAQ;AAAA,UACR,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,QAER,oCAAC,UAAO,OAAK,MAAC,OAAM,eAAY,MAEhC;AAAA,MACF;AAAA,IAEJ,GACA,oCAAC,oBAAiB,WAAW,YAAY,QAAQ,MAC9C,eAAe,aACd;AAAA,MAAC;AAAA;AAAA,QACC,yBAAyB;AAAA,UACvB,QAAQ;AAAA,QACV;AAAA;AAAA,IACF,IAEA,QAEJ,CACF;AAAA,EAEJ;AACF;AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,IAAO,oBAAQ;",
+  "sourcesContent": ["import React from 'react';\n\nimport hljs from 'highlight.js/lib/core';\nimport bash from 'highlight.js/lib/languages/bash';\nimport js from 'highlight.js/lib/languages/javascript';\nimport json from 'highlight.js/lib/languages/json';\nimport markdown from 'highlight.js/lib/languages/markdown';\nimport python from 'highlight.js/lib/languages/python';\nimport xml from 'highlight.js/lib/languages/xml';\nimport { BaseProps } from '@digigov/react-core/Base';\nimport CodeBlockContainer from '@digigov/react-core/CodeBlockContainer';\nimport CodeBlockContent from '@digigov/react-core/CodeBlockContent';\nimport CodeBlockHeader from '@digigov/react-core/CodeBlockHeader';\nimport { CopyToClipboard } from '@digigov/ui/feedback';\nimport { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';\nimport { Button } from '@digigov/ui/form/Button';\n\nexport interface CodeBlockProps extends BaseProps<'div'> {\n  language?: 'javascript' | 'bash' | 'xml' | 'python' | 'markdown' | 'json';\n  copyToClipboard?: boolean;\n  highlighted?: boolean;\n  showLineNumbers?: boolean;\n  phaseBannerTagName?: string;\n  highlightLines?: number[];\n}\n\nconst languageMap = {\n  javascript: js,\n  python: python,\n  bash: bash,\n  xml: xml,\n  markdown: markdown,\n  json: json,\n};\n\nconst addLineNumbers = (code: string, highlightLines: number[]): string => {\n  return code\n    .split('\\n')\n    .map((line, index) => {\n      const isHighlighted = highlightLines.includes(index + 1);\n      const lineClass = isHighlighted ? 'ds-code--highlighted-line' : '';\n      return `<span class=\"ds-code--line-number\">${index + 1}</span> <span class=\"${lineClass}\">${line}</span>`;\n    })\n    .join('\\n');\n};\n\nexport const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(\n  function CodeBlock({\n    children,\n    language,\n    copyToClipboard,\n    highlighted,\n    showLineNumbers,\n    phaseBannerTagName,\n    highlightLines,\n    ref,\n    ...props\n  }) {\n    const Tag = 'span';\n    const codeString = typeof children === 'string' ? children : '';\n    let displayingCode = codeString;\n\n    if (highlighted && codeString) {\n      try {\n        hljs.configure({ classPrefix: 'ds-code--' });\n        let highlightedCode = hljs.highlightAuto(codeString).value;\n        if (language) {\n          hljs.registerLanguage(language, languageMap[language]);\n          highlightedCode = hljs.highlight(codeString, {\n            language: language,\n          }).value;\n        }\n        displayingCode = showLineNumbers\n          ? addLineNumbers(highlightedCode, highlightLines || [])\n          : highlightedCode;\n      } catch (error) {\n        console.error('Highlighting failed:', error);\n      }\n    }\n\n    return (\n      <CodeBlockContainer ref={ref} {...props}>\n        <CodeBlockHeader\n          justify={\n            phaseBannerTagName && copyToClipboard ? 'space-between' : 'end'\n          }\n        >\n          {phaseBannerTagName && (\n            <PhaseBannerTag>{phaseBannerTagName}</PhaseBannerTag>\n          )}\n          {copyToClipboard && (\n            <CopyToClipboard\n              dense\n              text={codeString}\n              variant=\"tooltip\"\n              tooltipAlign=\"right\"\n              message=\"Copied!\"\n            >\n              <Button dense color=\"secondary\">\n                Copy\n              </Button>\n            </CopyToClipboard>\n          )}\n        </CodeBlockHeader>\n        <CodeBlockContent className={`language-${language}`}>\n          {highlighted && codeString ? (\n            <Tag\n              dangerouslySetInnerHTML={{\n                __html: displayingCode,\n              }}\n            />\n          ) : (\n            children\n          )}\n        </CodeBlockContent>\n      </CodeBlockContainer>\n    );\n  }\n);\n\nexport * from '@digigov/react-core/CodeBlockContent';\nexport * from '@digigov/react-core/CodeBlockHeader';\nexport * from '@digigov/react-core/CodeBlockContainer';\nexport default CodeBlock;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,SAAS;AAEhB,OAAO,wBAAwB;AAC/B,OAAO,sBAAsB;AAC7B,OAAO,qBAAqB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AAWvB,MAAM,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,CAAC,MAAc,mBAAqC;AACzE,SAAO,KACJ,MAAM,IAAI,EACV,IAAI,CAAC,MAAM,UAAU;AACpB,UAAM,gBAAgB,eAAe,SAAS,QAAQ,CAAC;AACvD,UAAM,YAAY,gBAAgB,8BAA8B;AAChE,WAAO,sCAAsC,QAAQ,CAAC,wBAAwB,SAAS,KAAK,IAAI;AAAA,EAClG,CAAC,EACA,KAAK,IAAI;AACd;AAEO,MAAM,YAAsC,MAAM;AAAA,EACvD,SAASA,WAAU;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG;AACD,UAAM,MAAM;AACZ,UAAM,aAAa,OAAO,aAAa,WAAW,WAAW;AAC7D,QAAI,iBAAiB;AAErB,QAAI,eAAe,YAAY;AAC7B,UAAI;AACF,aAAK,UAAU,EAAE,aAAa,YAAY,CAAC;AAC3C,YAAI,kBAAkB,KAAK,cAAc,UAAU,EAAE;AACrD,YAAI,UAAU;AACZ,eAAK,iBAAiB,UAAU,YAAY,QAAQ,CAAC;AACrD,4BAAkB,KAAK,UAAU,YAAY;AAAA,YAC3C;AAAA,UACF,CAAC,EAAE;AAAA,QACL;AACA,yBAAiB,kBACb,eAAe,iBAAiB,kBAAkB,CAAC,CAAC,IACpD;AAAA,MACN,SAAS,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAAA,MAC7C;AAAA,IACF;AAEA,WACE,oCAAC,sBAAmB,KAAW,GAAG,SAChC;AAAA,MAAC;AAAA;AAAA,QACC,SACE,sBAAsB,kBAAkB,kBAAkB;AAAA;AAAA,MAG3D,sBACC,oCAAC,sBAAgB,kBAAmB;AAAA,MAErC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAK;AAAA,UACL,MAAM;AAAA,UACN,SAAQ;AAAA,UACR,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,QAER,oCAAC,UAAO,OAAK,MAAC,OAAM,eAAY,MAEhC;AAAA,MACF;AAAA,IAEJ,GACA,oCAAC,oBAAiB,WAAW,YAAY,QAAQ,MAC9C,eAAe,aACd;AAAA,MAAC;AAAA;AAAA,QACC,yBAAyB;AAAA,UACvB,QAAQ;AAAA,QACV;AAAA;AAAA,IACF,IAEA,QAEJ,CACF;AAAA,EAEJ;AACF;AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,IAAO,oBAAQ;",
   "names": ["CodeBlock"]
 }

package/typography/CodeBlock/index.test.d.ts

@@ -0,0 +1 @@
+export {};