@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.8

package/Badge/index.js

@@ -4,18 +4,18 @@ const React = require("react");
 const Icon_index = require("../Icon/index.js");
 const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const root = "_root_w4lra_5";
-const primary = "_primary_w4lra_16";
-const secondary = "_secondary_w4lra_17";
-const text = "_text_w4lra_32";
-const variantPrimary = "_variantPrimary_w4lra_37";
-const variantSecondary = "_variantSecondary_w4lra_44";
-const variantBlack = "_variantBlack_w4lra_51";
-const variantInverse = "_variantInverse_w4lra_58";
-const variantGray = "_variantGray_w4lra_65";
-const variantSuccess = "_variantSuccess_w4lra_72";
-const variantWarning = "_variantWarning_w4lra_79";
-const variantDanger = "_variantDanger_w4lra_86";
+const root = "_root_1n0s2_5";
+const primary = "_primary_1n0s2_16";
+const secondary = "_secondary_1n0s2_17";
+const text = "_text_1n0s2_32";
+const variantPrimary = "_variantPrimary_1n0s2_37";
+const variantSecondary = "_variantSecondary_1n0s2_44";
+const variantBlack = "_variantBlack_1n0s2_51";
+const variantInverse = "_variantInverse_1n0s2_58";
+const variantGray = "_variantGray_1n0s2_65";
+const variantSuccess = "_variantSuccess_1n0s2_72";
+const variantWarning = "_variantWarning_1n0s2_79";
+const variantDanger = "_variantDanger_1n0s2_86";
 const styles = {
   root,
   primary,

package/Badge/index.mjs

@@ -2,18 +2,18 @@ import React__default from "react";
 import { Icon } from "../Icon/index.mjs";
 import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const root = "_root_w4lra_5";
-const primary = "_primary_w4lra_16";
-const secondary = "_secondary_w4lra_17";
-const text = "_text_w4lra_32";
-const variantPrimary = "_variantPrimary_w4lra_37";
-const variantSecondary = "_variantSecondary_w4lra_44";
-const variantBlack = "_variantBlack_w4lra_51";
-const variantInverse = "_variantInverse_w4lra_58";
-const variantGray = "_variantGray_w4lra_65";
-const variantSuccess = "_variantSuccess_w4lra_72";
-const variantWarning = "_variantWarning_w4lra_79";
-const variantDanger = "_variantDanger_w4lra_86";
+const root = "_root_1n0s2_5";
+const primary = "_primary_1n0s2_16";
+const secondary = "_secondary_1n0s2_17";
+const text = "_text_1n0s2_32";
+const variantPrimary = "_variantPrimary_1n0s2_37";
+const variantSecondary = "_variantSecondary_1n0s2_44";
+const variantBlack = "_variantBlack_1n0s2_51";
+const variantInverse = "_variantInverse_1n0s2_58";
+const variantGray = "_variantGray_1n0s2_65";
+const variantSuccess = "_variantSuccess_1n0s2_72";
+const variantWarning = "_variantWarning_1n0s2_79";
+const variantDanger = "_variantDanger_1n0s2_86";
 const styles = {
   root,
   primary,

package/Banner/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const colorSuccess = "_colorSuccess_7ilj4_5";
-const colorPrimary = "_colorPrimary_7ilj4_10";
-const colorNeutral = "_colorNeutral_7ilj4_11";
-const Banner$1 = "_Banner_7ilj4_23";
+const colorSuccess = "_colorSuccess_dg1vs_5";
+const colorPrimary = "_colorPrimary_dg1vs_10";
+const colorNeutral = "_colorNeutral_dg1vs_11";
+const Banner$1 = "_Banner_dg1vs_23";
 const styles = {
   colorSuccess,
   colorPrimary,

package/Banner/index.mjs

@@ -1,10 +1,10 @@
 import React__default from "react";
 import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const colorSuccess = "_colorSuccess_7ilj4_5";
-const colorPrimary = "_colorPrimary_7ilj4_10";
-const colorNeutral = "_colorNeutral_7ilj4_11";
-const Banner$1 = "_Banner_7ilj4_23";
+const colorSuccess = "_colorSuccess_dg1vs_5";
+const colorPrimary = "_colorPrimary_dg1vs_10";
+const colorNeutral = "_colorNeutral_dg1vs_11";
+const Banner$1 = "_Banner_dg1vs_23";
 const styles = {
   colorSuccess,
   colorPrimary,

package/Button/index.js

@@ -29,28 +29,28 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const UnstyledButton_index = require("../__chunks__/index-3985350a.js");
+const UnstyledButton_index = require("../__chunks__/index-5f429325.js");
 const Icon_index = require("../Icon/index.js");
 const utilities_css = require("../utilities/css.js");
 require("../__chunks__/import-a1e0f814.js");
 require("../__chunks__/omit-fca26542.js");
-require("../__chunks__/import-2b302763.js");
-const Button$1 = "_Button_l4y1n_5";
-const colorPrimary = "_colorPrimary_l4y1n_20";
-const colorSecondary = "_colorSecondary_l4y1n_28";
-const colorSuccess = "_colorSuccess_l4y1n_36";
-const colorWarning = "_colorWarning_l4y1n_44";
-const colorNeutral = "_colorNeutral_l4y1n_52";
-const colorSupport = "_colorSupport_l4y1n_60";
-const colorInverse = "_colorInverse_l4y1n_66";
-const variantFilled = "_variantFilled_l4y1n_72";
-const variantOutlined = "_variantOutlined_l4y1n_99";
-const variantLink = "_variantLink_l4y1n_127";
-const sizeMd = "_sizeMd_l4y1n_153";
-const sizeSm = "_sizeSm_l4y1n_161";
-const block = "_block_l4y1n_180";
-const iconAtStart = "_iconAtStart_l4y1n_185";
-const iconAtEnd = "_iconAtEnd_l4y1n_189";
+require("../__chunks__/import-26676303.js");
+const Button$1 = "_Button_1uegy_5";
+const colorPrimary = "_colorPrimary_1uegy_20";
+const colorSecondary = "_colorSecondary_1uegy_28";
+const colorSuccess = "_colorSuccess_1uegy_36";
+const colorWarning = "_colorWarning_1uegy_44";
+const colorNeutral = "_colorNeutral_1uegy_52";
+const colorSupport = "_colorSupport_1uegy_60";
+const colorInverse = "_colorInverse_1uegy_66";
+const variantFilled = "_variantFilled_1uegy_72";
+const variantOutlined = "_variantOutlined_1uegy_99";
+const variantLink = "_variantLink_1uegy_127";
+const sizeMd = "_sizeMd_1uegy_153";
+const sizeSm = "_sizeSm_1uegy_161";
+const block = "_block_1uegy_180";
+const iconAtStart = "_iconAtStart_1uegy_185";
+const iconAtEnd = "_iconAtEnd_1uegy_189";
 const styles = {
   Button: Button$1,
   colorPrimary,

package/Button/index.mjs

@@ -27,28 +27,28 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import React__default, { forwardRef } from "react";
-import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/index-29d7bca9.mjs";
+import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/index-45f05366.mjs";
 import { Icon } from "../Icon/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
 import "../__chunks__/import-19bc38ac.mjs";
 import "../__chunks__/omit-f17deb8f.mjs";
-import "../__chunks__/import-3d962a94.mjs";
-const Button$1 = "_Button_l4y1n_5";
-const colorPrimary = "_colorPrimary_l4y1n_20";
-const colorSecondary = "_colorSecondary_l4y1n_28";
-const colorSuccess = "_colorSuccess_l4y1n_36";
-const colorWarning = "_colorWarning_l4y1n_44";
-const colorNeutral = "_colorNeutral_l4y1n_52";
-const colorSupport = "_colorSupport_l4y1n_60";
-const colorInverse = "_colorInverse_l4y1n_66";
-const variantFilled = "_variantFilled_l4y1n_72";
-const variantOutlined = "_variantOutlined_l4y1n_99";
-const variantLink = "_variantLink_l4y1n_127";
-const sizeMd = "_sizeMd_l4y1n_153";
-const sizeSm = "_sizeSm_l4y1n_161";
-const block = "_block_l4y1n_180";
-const iconAtStart = "_iconAtStart_l4y1n_185";
-const iconAtEnd = "_iconAtEnd_l4y1n_189";
+import "../__chunks__/import-3faba3a6.mjs";
+const Button$1 = "_Button_1uegy_5";
+const colorPrimary = "_colorPrimary_1uegy_20";
+const colorSecondary = "_colorSecondary_1uegy_28";
+const colorSuccess = "_colorSuccess_1uegy_36";
+const colorWarning = "_colorWarning_1uegy_44";
+const colorNeutral = "_colorNeutral_1uegy_52";
+const colorSupport = "_colorSupport_1uegy_60";
+const colorInverse = "_colorInverse_1uegy_66";
+const variantFilled = "_variantFilled_1uegy_72";
+const variantOutlined = "_variantOutlined_1uegy_99";
+const variantLink = "_variantLink_1uegy_127";
+const sizeMd = "_sizeMd_1uegy_153";
+const sizeSm = "_sizeSm_1uegy_161";
+const block = "_block_1uegy_180";
+const iconAtStart = "_iconAtStart_1uegy_185";
+const iconAtEnd = "_iconAtEnd_1uegy_189";
 const styles = {
   Button: Button$1,
   colorPrimary,

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.8
+
+### Patch Changes
+
+- Updated dependencies [e64ff79]
+  - @easypost/easy-ui-icons@1.0.0-alpha.8
+
+## 1.0.0-alpha.7
+
+### Minor Changes
+
+- f98ca90: Add max width to `<Tooltip />`
+- 644a07b: Create `<CodeBlock />` component
+
+### Patch Changes
+
+- Updated dependencies [44ceab3]
+- Updated dependencies [644a07b]
+  - @easypost/easy-ui-icons@1.0.0-alpha.7
+  - @easypost/easy-ui-tokens@1.0.0-alpha.4
+
 ## 1.0.0-alpha.6
 
 ### Patch Changes

package/Card/index.js

@@ -31,15 +31,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const omit = require("../__chunks__/omit-fca26542.js");
 const React = require("react");
 const utilities_css = require("../utilities/css.js");
-const container = "_container_p14mb_5";
-const area = "_area_p14mb_22";
-const variantOutlined = "_variantOutlined_p14mb_58";
-const variantFlagged = "_variantFlagged_p14mb_59";
-const selected = "_selected_p14mb_71";
-const disabled = "_disabled_p14mb_75";
-const statusDanger = "_statusDanger_p14mb_79";
-const statusWarning = "_statusWarning_p14mb_83";
-const statusSuccess = "_statusSuccess_p14mb_87";
+const container = "_container_1yrys_5";
+const area = "_area_1yrys_23";
+const variantOutlined = "_variantOutlined_1yrys_59";
+const variantFlagged = "_variantFlagged_1yrys_60";
+const selected = "_selected_1yrys_72";
+const disabled = "_disabled_1yrys_76";
+const statusDanger = "_statusDanger_1yrys_80";
+const statusWarning = "_statusWarning_1yrys_84";
+const statusSuccess = "_statusSuccess_1yrys_88";
 const styles = {
   container,
   area,

package/Card/index.mjs

@@ -29,15 +29,15 @@ var __objRest = (source, exclude) => {
 import { o as omit } from "../__chunks__/omit-f17deb8f.mjs";
 import React__default from "react";
 import { classNames, variationName, getComponentThemeToken, getResponsiveDesignToken } from "../utilities/css.mjs";
-const container = "_container_p14mb_5";
-const area = "_area_p14mb_22";
-const variantOutlined = "_variantOutlined_p14mb_58";
-const variantFlagged = "_variantFlagged_p14mb_59";
-const selected = "_selected_p14mb_71";
-const disabled = "_disabled_p14mb_75";
-const statusDanger = "_statusDanger_p14mb_79";
-const statusWarning = "_statusWarning_p14mb_83";
-const statusSuccess = "_statusSuccess_p14mb_87";
+const container = "_container_1yrys_5";
+const area = "_area_1yrys_23";
+const variantOutlined = "_variantOutlined_1yrys_59";
+const variantFlagged = "_variantFlagged_1yrys_60";
+const selected = "_selected_1yrys_72";
+const disabled = "_disabled_1yrys_76";
+const statusDanger = "_statusDanger_1yrys_80";
+const statusWarning = "_statusWarning_1yrys_84";
+const statusSuccess = "_statusSuccess_1yrys_88";
 const styles = {
   container,
   area,

package/Checkbox/index.js

@@ -24,10 +24,10 @@ const Icon_index = require("../Icon/index.js");
 const SelectorErrorTooltip_index = require("../SelectorErrorTooltip/index.js");
 const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const _import = require("../__chunks__/import-8b6c0bc7.js");
-const _import$1 = require("../__chunks__/import-2b302763.js");
-require("../Tooltip/index.js");
-require("../__chunks__/import-a2023d8f.js");
+const _import = require("../__chunks__/import-890ae60e.js");
+const _import$1 = require("../__chunks__/import-26676303.js");
+require("../__chunks__/index-12ba1ea7.js");
+require("../__chunks__/import-0f8555a4.js");
 require("../__chunks__/import-a1e0f814.js");
 require("react-dom");
 require("../__chunks__/import-dea5a24d.js");
@@ -108,7 +108,7 @@ const Check600 = (_a) => {
   }, props), title ? React__namespace.createElement("title", {
     id: titleId
   }, title) : null, React__namespace.createElement("path", {
-    d: "M378-248.391q-7.696 0-14.674-2.848t-13.109-8.978l-181-181Q157.391-453.043 157.391-470t11.826-28.783q11.826-11.826 28.066-11.826 16.239 0 28.63 11.826L378-346.696l355.652-355.087q11.826-11.826 28.283-12.109 16.456-.282 28.283 12.109 11.826 11.826 11.826 28.566 0 16.739-11.826 28.565L405.783-260.217q-6.131 6.13-13.109 8.978T378-248.391Z"
+    d: "m378-346.696 355.652-355.087q11.968-11.826 28.354-11.826 16.385 0 28.212 11.879 11.826 11.879 11.826 28.452 0 16.574-11.826 28.626l-383.87 383.87q-12.032 11.826-28.451 11.826t-28.245-11.826l-180.87-180.87q-11.826-12.119-11.609-28.712.218-16.593 12.097-28.419t28.452-11.826q16.574 0 28.626 11.826L378-346.696Z"
   }));
 };
 var __defProp2 = Object.defineProperty;
@@ -153,24 +153,24 @@ const Remove600 = (_a) => {
   }, props), title ? React__namespace.createElement("title", {
     id: titleId
   }, title) : null, React__namespace.createElement("path", {
-    d: "M190.391-440.391v-79.218h579.218v79.218H190.391Z"
+    d: "M185.869-440.391v-79.218h588.827v79.218H185.869Z"
   }));
 };
-const Checkbox$1 = "_Checkbox_1r930_5";
-const label = "_label_1r930_17";
-const box = "_box_1r930_40";
-const check = "_check_1r930_41";
-const focusVisible = "_focusVisible_1r930_56";
-const text = "_text_1r930_72";
-const indeterminateSvg = "_indeterminateSvg_1r930_77";
-const nested = "_nested_1r930_81";
-const sizeLg = "_sizeLg_1r930_85";
-const invalid = "_invalid_1r930_91";
-const disabled = "_disabled_1r930_95";
-const indeterminate = "_indeterminate_1r930_77";
-const selected = "_selected_1r930_100";
-const hovered = "_hovered_1r930_116";
-const readOnly = "_readOnly_1r930_116";
+const Checkbox$1 = "_Checkbox_ff1e1_5";
+const label = "_label_ff1e1_17";
+const box = "_box_ff1e1_41";
+const check = "_check_ff1e1_42";
+const focusVisible = "_focusVisible_ff1e1_57";
+const text = "_text_ff1e1_73";
+const indeterminateSvg = "_indeterminateSvg_ff1e1_78";
+const nested = "_nested_ff1e1_82";
+const sizeLg = "_sizeLg_ff1e1_86";
+const invalid = "_invalid_ff1e1_92";
+const disabled = "_disabled_ff1e1_96";
+const indeterminate = "_indeterminate_ff1e1_78";
+const selected = "_selected_ff1e1_101";
+const hovered = "_hovered_ff1e1_117";
+const readOnly = "_readOnly_ff1e1_117";
 const styles = {
   Checkbox: Checkbox$1,
   label,

package/Checkbox/index.mjs

@@ -23,10 +23,10 @@ import { Icon } from "../Icon/index.mjs";
 import { SelectorErrorTooltip } from "../SelectorErrorTooltip/index.mjs";
 import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-0561e1ba.mjs";
-import { e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3d962a94.mjs";
-import "../Tooltip/index.mjs";
-import "../__chunks__/import-f1f4792a.mjs";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-eb35a9b9.mjs";
+import { e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3faba3a6.mjs";
+import "../__chunks__/index-766f8373.mjs";
+import "../__chunks__/import-c4caaddf.mjs";
 import "../__chunks__/import-19bc38ac.mjs";
 import "react-dom";
 import "../__chunks__/import-6a831ca1.mjs";
@@ -90,7 +90,7 @@ const Check600 = (_a) => {
   }, props), title ? React.createElement("title", {
     id: titleId
   }, title) : null, React.createElement("path", {
-    d: "M378-248.391q-7.696 0-14.674-2.848t-13.109-8.978l-181-181Q157.391-453.043 157.391-470t11.826-28.783q11.826-11.826 28.066-11.826 16.239 0 28.63 11.826L378-346.696l355.652-355.087q11.826-11.826 28.283-12.109 16.456-.282 28.283 12.109 11.826 11.826 11.826 28.566 0 16.739-11.826 28.565L405.783-260.217q-6.131 6.13-13.109 8.978T378-248.391Z"
+    d: "m378-346.696 355.652-355.087q11.968-11.826 28.354-11.826 16.385 0 28.212 11.879 11.826 11.879 11.826 28.452 0 16.574-11.826 28.626l-383.87 383.87q-12.032 11.826-28.451 11.826t-28.245-11.826l-180.87-180.87q-11.826-12.119-11.609-28.712.218-16.593 12.097-28.419t28.452-11.826q16.574 0 28.626 11.826L378-346.696Z"
   }));
 };
 var __defProp2 = Object.defineProperty;
@@ -135,24 +135,24 @@ const Remove600 = (_a) => {
   }, props), title ? React.createElement("title", {
     id: titleId
   }, title) : null, React.createElement("path", {
-    d: "M190.391-440.391v-79.218h579.218v79.218H190.391Z"
+    d: "M185.869-440.391v-79.218h588.827v79.218H185.869Z"
   }));
 };
-const Checkbox$1 = "_Checkbox_1r930_5";
-const label = "_label_1r930_17";
-const box = "_box_1r930_40";
-const check = "_check_1r930_41";
-const focusVisible = "_focusVisible_1r930_56";
-const text = "_text_1r930_72";
-const indeterminateSvg = "_indeterminateSvg_1r930_77";
-const nested = "_nested_1r930_81";
-const sizeLg = "_sizeLg_1r930_85";
-const invalid = "_invalid_1r930_91";
-const disabled = "_disabled_1r930_95";
-const indeterminate = "_indeterminate_1r930_77";
-const selected = "_selected_1r930_100";
-const hovered = "_hovered_1r930_116";
-const readOnly = "_readOnly_1r930_116";
+const Checkbox$1 = "_Checkbox_ff1e1_5";
+const label = "_label_ff1e1_17";
+const box = "_box_ff1e1_41";
+const check = "_check_ff1e1_42";
+const focusVisible = "_focusVisible_ff1e1_57";
+const text = "_text_ff1e1_73";
+const indeterminateSvg = "_indeterminateSvg_ff1e1_78";
+const nested = "_nested_ff1e1_82";
+const sizeLg = "_sizeLg_ff1e1_86";
+const invalid = "_invalid_ff1e1_92";
+const disabled = "_disabled_ff1e1_96";
+const indeterminate = "_indeterminate_ff1e1_78";
+const selected = "_selected_ff1e1_101";
+const hovered = "_hovered_ff1e1_117";
+const readOnly = "_readOnly_ff1e1_117";
 const styles = {
   Checkbox: Checkbox$1,
   label,

package/CodeBlock/CodeBlock.d.ts

@@ -1,82 +1,70 @@
-import React from "react";
-import { SnippetLanguages } from "./SyntaxHighlighter";
-export type CodeBlockProps = Partial<Omit<HTMLDivElement, "children">> & {
+import React, { ReactNode } from "react";
+import { CodeSnippetProps } from "../CodeSnippet";
+import { SnippetLanguage } from "../CodeSnippet/SyntaxHighlighter";
+export type CodeBlockProps = {
     /**
-     * `children` is not supported. Use `code` instead.
+     * CodeBlock content. This should be a header and collection of snippets.
      */
-    children?: never;
+    children: ReactNode;
     /**
-     * The code snippet to be rendered.
+     * Selected language.
      */
-    code: string;
+    language: SnippetLanguage;
     /**
-     * The language of the code snippet.
+     * Callback for when the selected language changes.
      */
-    language: SnippetLanguages;
+    onLanguageChange: (language: SnippetLanguage) => void;
+};
+export type CodeBlockHeaderProps = {
     /**
-     * Constrains the height of code block to a set number of lines.
+     * Header title.
      */
-    maxLines?: number;
+    children: ReactNode;
     /**
-     * Include line numbers in code block.
+     * Header color.
+     *
+     * @default neutral
      */
-    showLineNumbers?: boolean;
+    color?: "neutral" | "primary" | "secondary";
 };
+export type CodeBlockSnippetProps = CodeSnippetProps;
+declare function CodeBlockHeader(props: CodeBlockHeaderProps): React.JSX.Element;
+declare namespace CodeBlockHeader {
+    var displayName: string;
+}
+declare function CodeBlockSnippet(props: CodeBlockSnippetProps): React.JSX.Element;
+declare namespace CodeBlockSnippet {
+    var displayName: string;
+}
 /**
- * A display element for readable blocks of code.
+ * A component to display and switch between readable blocks of code.
  *
  * @remarks
- * Use a Code Block to improve readability of embedded code samples with
- * syntax highlighting and automatic line numbering.
+ * Use a `CodeBlock` to improve readability of embedded code samples, to allow
+ * the user to select between multiple `CodeSnippet`s, and to allow copying
+ * code to the user's clipboard.
  *
  * @example
  * ```tsx
- * <CodeBlock
- *   code={`console.log("Hello world");`}
- *   language="javascript"
- * />
- * ```
+ * import { CodeBlock } from "@easypost/easy-ui/CodeBlock";
  *
- * @example
- * _Line numbers:_
- * ```tsx
- * <CodeBlock
- *   code={`console.log("Hello world");`}
- *   language="javascript"
- *   showLineNumbers
- * />
- * ```
- *
- * @example
- * _Max lines:_
- * ```tsx
- * <CodeBlock
- *   code={`console.log("Hello world");`}
- *   language="javascript"
- *   maxLines={8}
- * />
+ * function Component() {
+ *   const [language, setLanguage] = useState("javascript");
+ *   return (
+ *     <CodeBlock language={language} onLanguageChange={setLanguage}>
+ *       <CodeBlock.Header>Header</CodeVisualizer.Header>
+ *       <CodeBlock.Snippet language="javascript" code={``} />
+ *       <CodeBlock.Snippet language="csharp" code={``} />
+ *     </CodeBlock>
+ *   );
+ * }
  * ```
  */
-export declare const CodeBlock: React.ForwardRefExoticComponent<Partial<Omit<HTMLDivElement, "children">> & {
-    /**
-     * `children` is not supported. Use `code` instead.
-     */
-    children?: undefined;
-    /**
-     * The code snippet to be rendered.
-     */
-    code: string;
-    /**
-     * The language of the code snippet.
-     */
-    language: SnippetLanguages;
-    /**
-     * Constrains the height of code block to a set number of lines.
-     */
-    maxLines?: number | undefined;
-    /**
-     * Include line numbers in code block.
-     */
-    showLineNumbers?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare function CodeBlock(props: CodeBlockProps): React.JSX.Element;
+export declare namespace CodeBlock {
+    var displayName: string;
+    var Header: typeof CodeBlockHeader;
+    var Snippet: typeof CodeBlockSnippet;
+}
+export {};
 //# sourceMappingURL=CodeBlock.d.ts.map

package/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,qBAAqB,CAAC;AAM1E,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,GAAG;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,SAAS;IA7DpB;;OAEG;;IAGH;;OAEG;UACG,MAAM;IAEZ;;OAEG;cACO,gBAAgB;IAE1B;;OAEG;;IAGH;;OAEG;;wCA+DJ,CAAC"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAClD,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAWnE,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,eAAe,CAAC;IAE1B;;OAEG;IACH,gBAAgB,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AAErD,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAgCnD;kBAhCQ,eAAe;;;AAoCxB,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAErD;kBAFQ,gBAAgB;;;AAMzB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA8C9C;yBA9Ce,SAAS"}

package/CodeBlock/CodeBlock.stories.d.ts

@@ -4,6 +4,7 @@ type Story = StoryObj<typeof CodeBlock>;
 declare const meta: Meta<typeof CodeBlock>;
 export default meta;
 export declare const Default: Story;
-export declare const LineNumbers: Story;
-export declare const MaxLines: Story;
+export declare const SingleLanguageMode: Story;
+export declare const CustomHeader: StoryObj<typeof CodeBlock.Header>;
+export declare const SideBySide: Story;
 //# sourceMappingURL=CodeBlock.stories.d.ts.map

package/CodeBlock/CodeBlock.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.stories.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAC;AAGxD,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAMxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAQhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}
+{"version":3,"file":"CodeBlock.stories.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAC;AAGxD,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AA2BxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAgBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAehC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAC,MAAM,CAuB1D,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAC"}

package/CodeBlock/CopyButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type CopyButtonProps = {
+    text: string;
+};
+export declare function CopyButton({ text }: CopyButtonProps): React.JSX.Element;
+export declare namespace CopyButton {
+    var displayName: string;
+}
+//# sourceMappingURL=CopyButton.d.ts.map

package/CodeBlock/CopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CopyButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,qBAwBnD;yBAxBe,UAAU"}

package/CodeBlock/LanguageMenu.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { SnippetLanguage } from "../CodeSnippet/SyntaxHighlighter";
+export type LanguageMenuProps = {
+    /**
+     * List of languages.
+     */
+    languages: SnippetLanguage[];
+    /**
+     * Selected language.
+     */
+    language: SnippetLanguage;
+    /**
+     * Callback for when the selected language changes.
+     */
+    onChange: (language: SnippetLanguage) => void;
+};
+export declare function LanguageMenu(props: LanguageMenuProps): React.JSX.Element;
+//# sourceMappingURL=LanguageMenu.d.ts.map

package/CodeBlock/LanguageMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageMenu.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/LanguageMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,eAAe,EAEhB,MAAM,kCAAkC,CAAC;AAS1C,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,EAAE,eAAe,EAAE,CAAC;IAE7B;;OAEG;IACH,QAAQ,EAAE,eAAe,CAAC;IAE1B;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA8BpD"}

package/CodeBlock/context.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+import { SnippetLanguage } from "../CodeSnippet/SyntaxHighlighter";
+export type CodeBlockContextType = {
+    languages: SnippetLanguage[];
+    snippet: ReactElement;
+    language: SnippetLanguage;
+    onLanguageChange: (language: SnippetLanguage) => void;
+};
+export declare const CodeBlockContext: import("react").Context<CodeBlockContextType | null>;
+export declare const useCodeBlock: () => CodeBlockContextType;
+//# sourceMappingURL=context.d.ts.map

package/CodeBlock/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAEnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,eAAe,CAAC;IAC1B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,gBAAgB,sDAE5B,CAAC;AAEF,eAAO,MAAM,YAAY,4BAMxB,CAAC"}