@codecademy/gamut 67.6.4-alpha.773a9b.0 → 67.6.4-alpha.abebfb.0

package/dist/Anchor/index.d.ts

@@ -148,20 +148,12 @@ declare const anchorProps: import("@codecademy/variance/dist/types/config").Pars
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly fontFamily: {

package/dist/Badge/index.d.ts

@@ -62,20 +62,12 @@ declare const badgeProps: import("@codecademy/variance/dist/types/config").Parse
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly flexBasis: {

package/dist/Box/props.d.ts

@@ -54,20 +54,12 @@ export declare const boxProps: import("@codecademy/variance/dist/types/config").
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly border: {

package/dist/Button/shared/styles.d.ts

@@ -176,20 +176,12 @@ export declare const buttonProps: import("@codecademy/variance/dist/types/config
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly border: {

package/dist/Card/elements.d.ts

@@ -547,20 +547,12 @@ export declare const MotionBox: import("react").ComponentType<{
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";
@@ -1240,20 +1232,12 @@ export declare const DynamicCardWrapper: import("@emotion/styled").StyledCompone
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";
@@ -1917,20 +1901,12 @@ export declare const StaticCardWrapper: import("@emotion/styled").StyledComponen
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";

package/dist/DetailedCode/DetailedCodeBody/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DetailedCodeBodyProps } from '../types';
+export declare const DetailedCodeBody: React.FC<DetailedCodeBodyProps>;

package/dist/DetailedCode/DetailedCodeBody/index.js

@@ -0,0 +1,17 @@
+import { Source } from '@storybook/blocks';
+import * as React from 'react';
+import { DetailedCodeBodyWrapper } from '../elements';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DetailedCodeBody = ({
+  code,
+  language
+}) => {
+  return /*#__PURE__*/_jsx(DetailedCodeBodyWrapper, {
+    column: true,
+    children: /*#__PURE__*/_jsx(Source, {
+      code: code,
+      dark: true,
+      language: language
+    })
+  });
+};

package/dist/DetailedCode/DetailedCodeButton/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DetailedCodeButtonProps } from '../types';
+export declare const DetailedCodeButton: React.FC<DetailedCodeButtonProps>;

package/dist/DetailedCode/DetailedCodeButton/index.js

@@ -0,0 +1,65 @@
+import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
+import * as React from 'react';
+import { Rotation } from '../../Animation';
+import { Box, FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { DetailedCodeButtonWrapper } from '../elements';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DetailedCodeButton = ({
+  heading,
+  isExpanded,
+  language,
+  setIsExpanded
+}) => {
+  const handleClick = () => {
+    if (setIsExpanded) {
+      setIsExpanded(prev => !prev);
+    }
+  };
+  return /*#__PURE__*/_jsx(FlexBox, {
+    children: /*#__PURE__*/_jsx(DetailedCodeButtonWrapper, {
+      "aria-expanded": isExpanded,
+      height: "100%",
+      px: 16,
+      py: 12,
+      variant: "interface",
+      width: "100%",
+      onClick: handleClick,
+      children: /*#__PURE__*/_jsxs(FlexBox, {
+        alignItems: "center",
+        columnGap: 16,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        children: [/*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          columnGap: 12,
+          children: [heading && /*#__PURE__*/_jsx(Text, {
+            as: "h3",
+            fontWeight: "title",
+            p: 0,
+            textAlign: "start",
+            variant: "title-xs",
+            children: heading
+          }), /*#__PURE__*/_jsx(Text, {
+            color: "text-secondary",
+            fontFamily: "monospace",
+            variant: "p-small",
+            children: language
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          p: 8,
+          children: /*#__PURE__*/_jsx(Rotation, {
+            height: 16,
+            rotated: isExpanded,
+            width: 16,
+            children: /*#__PURE__*/_jsx(MiniChevronDownIcon, {
+              "aria-hidden": true,
+              size: 16
+            })
+          })
+        })]
+      })
+    })
+  });
+};

package/dist/DetailedCode/elements.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare const DetailedCodeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("../Box").FlexBoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | keyof import("react").ClassAttributes<HTMLDivElement> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DetailedCodeButtonWrapper: import("@emotion/styled").StyledComponent<(((Omit<Partial<import("../helpers").AppendedIconProps> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("../Anchor").AnchorProps & Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "media" | "target" | "type" | "href" | keyof import("react").ClassAttributes<HTMLAnchorElement> | "download" | "hrefLang" | "ping" | "referrerPolicy">, "ref"> | Omit<Partial<import("../helpers").AppendedIconProps> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("../Anchor").AnchorProps & Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "media" | "target" | "type" | "href" | keyof import("react").ClassAttributes<HTMLAnchorElement> | "download" | "hrefLang" | "ping" | "referrerPolicy"> & Omit<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "name" | "form" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | keyof import("react").ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> | Omit<Partial<import("../helpers").AppendedIconProps> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("../Anchor").AnchorProps & Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "media" | "target" | "type" | "href" | keyof import("react").ClassAttributes<HTMLAnchorElement> | "download" | "hrefLang" | "ping" | "referrerPolicy"> & Omit<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "name" | "form" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | keyof import("react").ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value"> & Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "media" | "target" | "type" | "href" | keyof import("react").ClassAttributes<HTMLAnchorElement> | "download" | "hrefLang" | "ping" | "referrerPolicy">, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref">) & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>) & {
+    theme?: import("@emotion/react").Theme | undefined;
+}) & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DetailedCodeBodyWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("../Box").FlexBoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | keyof import("react").ClassAttributes<HTMLDivElement> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/DetailedCode/elements.js

@@ -0,0 +1,34 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { css } from '@codecademy/gamut-styles';
+import { Anchor } from '../Anchor';
+import { FlexBox } from '../Box';
+export const DetailedCodeWrapper = /*#__PURE__*/_styled(FlexBox, {
+  target: "ewqc84l2",
+  label: "DetailedCodeWrapper"
+})(css({
+  width: '100%',
+  maxHeight: 'fit-content',
+  borderRadius: 'md',
+  border: 1,
+  bg: 'background'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9EZXRhaWxlZENvZGUvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiIuLi8uLi9zcmMvRGV0YWlsZWRDb2RlL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IEFuY2hvciB9IGZyb20gJy4uL0FuY2hvcic7XG5pbXBvcnQgeyBGbGV4Qm94IH0gZnJvbSAnLi4vQm94JztcblxuZXhwb3J0IGNvbnN0IERldGFpbGVkQ29kZVdyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoXG4gIGNzcyh7XG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBtYXhIZWlnaHQ6ICdmaXQtY29udGVudCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbWQnLFxuICAgIGJvcmRlcjogMSxcbiAgICBiZzogJ2JhY2tncm91bmQnLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IERldGFpbGVkQ29kZUJ1dHRvbldyYXBwZXIgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBib3JkZXJSYWRpdXM6ICdtZCcsXG4gICAgYmc6ICdpbmhlcml0JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBEZXRhaWxlZENvZGVCb2R5V3JhcHBlciA9IHN0eWxlZChGbGV4Qm94KSh7XG4gIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgJyYgcHJlJzoge1xuICAgIG1hcmdpbjogMCxcbiAgfSxcbiAgJyYgPiBkaXYnOiB7XG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgIHBhZGRpbmc6IDAsXG4gIH0sXG4gIC8vIFJlbW92ZSBtYXJnaW4gZnJvbSBzdG9yeWJvb2sgc291cmNlIGJsb2NrLCBvdmVycmlkZSBkZWZhdWx0IG1hcmdpbiAoMjUgdG9wLCA0MCBib3R0b20pXG4gICcmIC5kb2NibG9jay1zb3VyY2UnOiB7XG4gICAgbWFyZ2luOiAwLFxuICB9LFxufSk7XG4iXX0= */");
+export const DetailedCodeButtonWrapper = /*#__PURE__*/_styled(Anchor, {
+  target: "ewqc84l1",
+  label: "DetailedCodeButtonWrapper"
+})(css({
+  borderRadius: 'md',
+  bg: 'inherit'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9EZXRhaWxlZENvZGUvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCeUMiLCJmaWxlIjoiLi4vLi4vc3JjL0RldGFpbGVkQ29kZS9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBBbmNob3IgfSBmcm9tICcuLi9BbmNob3InO1xuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJy4uL0JveCc7XG5cbmV4cG9ydCBjb25zdCBEZXRhaWxlZENvZGVXcmFwcGVyID0gc3R5bGVkKEZsZXhCb3gpKFxuICBjc3Moe1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgbWF4SGVpZ2h0OiAnZml0LWNvbnRlbnQnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICBib3JkZXI6IDEsXG4gICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBEZXRhaWxlZENvZGVCdXR0b25XcmFwcGVyID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYm9yZGVyUmFkaXVzOiAnbWQnLFxuICAgIGJnOiAnaW5oZXJpdCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgRGV0YWlsZWRDb2RlQm9keVdyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoe1xuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICcmIHByZSc6IHtcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gICcmID4gZGl2Jzoge1xuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBwYWRkaW5nOiAwLFxuICB9LFxuICAvLyBSZW1vdmUgbWFyZ2luIGZyb20gc3Rvcnlib29rIHNvdXJjZSBibG9jaywgb3ZlcnJpZGUgZGVmYXVsdCBtYXJnaW4gKDI1IHRvcCwgNDAgYm90dG9tKVxuICAnJiAuZG9jYmxvY2stc291cmNlJzoge1xuICAgIG1hcmdpbjogMCxcbiAgfSxcbn0pO1xuIl19 */");
+export const DetailedCodeBodyWrapper = /*#__PURE__*/_styled(FlexBox, {
+  target: "ewqc84l0",
+  label: "DetailedCodeBodyWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "pwbapd",
+  styles: "overflow:hidden;& pre{margin:0;}& > div{border-radius:0;padding:0;}& .docblock-source{margin:0;}"
+} : {
+  name: "pwbapd",
+  styles: "overflow:hidden;& pre{margin:0;}& > div{border-radius:0;padding:0;}& .docblock-source{margin:0;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9EZXRhaWxlZENvZGUvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCdUMiLCJmaWxlIjoiLi4vLi4vc3JjL0RldGFpbGVkQ29kZS9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBBbmNob3IgfSBmcm9tICcuLi9BbmNob3InO1xuaW1wb3J0IHsgRmxleEJveCB9IGZyb20gJy4uL0JveCc7XG5cbmV4cG9ydCBjb25zdCBEZXRhaWxlZENvZGVXcmFwcGVyID0gc3R5bGVkKEZsZXhCb3gpKFxuICBjc3Moe1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgbWF4SGVpZ2h0OiAnZml0LWNvbnRlbnQnLFxuICAgIGJvcmRlclJhZGl1czogJ21kJyxcbiAgICBib3JkZXI6IDEsXG4gICAgYmc6ICdiYWNrZ3JvdW5kJyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBEZXRhaWxlZENvZGVCdXR0b25XcmFwcGVyID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYm9yZGVyUmFkaXVzOiAnbWQnLFxuICAgIGJnOiAnaW5oZXJpdCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgRGV0YWlsZWRDb2RlQm9keVdyYXBwZXIgPSBzdHlsZWQoRmxleEJveCkoe1xuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICcmIHByZSc6IHtcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gICcmID4gZGl2Jzoge1xuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBwYWRkaW5nOiAwLFxuICB9LFxuICAvLyBSZW1vdmUgbWFyZ2luIGZyb20gc3Rvcnlib29rIHNvdXJjZSBibG9jaywgb3ZlcnJpZGUgZGVmYXVsdCBtYXJnaW4gKDI1IHRvcCwgNDAgYm90dG9tKVxuICAnJiAuZG9jYmxvY2stc291cmNlJzoge1xuICAgIG1hcmdpbjogMCxcbiAgfSxcbn0pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/dist/DetailedCode/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DetailedCodeProps } from './types';
+export declare const DetailedCode: React.FC<DetailedCodeProps>;

package/dist/DetailedCode/index.js

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import * as React from 'react';
+import { DetailedCodeBody } from './DetailedCodeBody';
+import { DetailedCodeButton } from './DetailedCodeButton';
+import { DetailedCodeWrapper } from './elements';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_PREVIEW_LINES = 10;
+const getPreviewCode = (code, previewLines) => {
+  const lines = code.split('\n');
+  if (lines.length <= previewLines) {
+    return code;
+  }
+  return lines.slice(0, previewLines).join('\n');
+};
+export const DetailedCode = ({
+  code,
+  heading,
+  initiallyExpanded = false,
+  language,
+  preview = false,
+  previewLines = DEFAULT_PREVIEW_LINES
+}) => {
+  const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+  const normalizedPreviewLines = Math.max(0, previewLines);
+  const previewEnabled = preview && normalizedPreviewLines > 0;
+  const previewCode = previewEnabled ? getPreviewCode(code, normalizedPreviewLines) : code;
+
+  // Show the button to expand the code if there is more code than the preview lines, and hide the button if there is no more code
+  const hasMoreCode = previewEnabled && code.split('\n').length > normalizedPreviewLines;
+  const displayedCode = isExpanded ? code : previewCode;
+  return /*#__PURE__*/_jsxs(DetailedCodeWrapper, {
+    column: true,
+    children: [/*#__PURE__*/_jsx(DetailedCodeBody, {
+      code: displayedCode,
+      language: language
+    }), hasMoreCode && /*#__PURE__*/_jsx(DetailedCodeButton, {
+      heading: heading,
+      isExpanded: isExpanded,
+      language: language,
+      setIsExpanded: setIsExpanded
+    })]
+  });
+};

package/dist/DetailedCode/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export interface DetailedCodeProps {
+    code: string;
+    heading?: string;
+    language: string;
+    initiallyExpanded?: boolean;
+    preview?: boolean;
+    previewLines?: number;
+}
+export interface DetailedCodeButtonProps {
+    heading?: string;
+    isExpanded?: boolean;
+    language: string;
+    setIsExpanded?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export interface DetailedCodeBodyProps {
+    code: string;
+    language: string;
+}

package/dist/DetailedCode/types.js

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

package/dist/Form/elements/Form.d.ts

@@ -215,20 +215,12 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";

package/dist/Layout/Column.d.ts

@@ -144,20 +144,12 @@ declare const columnProps: import("@codecademy/variance/dist/types/config").Pars
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly gridColumn: {

package/dist/Layout/LayoutGrid.d.ts

@@ -54,20 +54,12 @@ declare const gridProps: import("@codecademy/variance/dist/types/config").Parser
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     gap: {

package/dist/List/elements.d.ts

@@ -54,20 +54,12 @@ declare const space: import("@codecademy/variance/dist/types/config").Parser<imp
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, grid: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly gridColumn: {
@@ -888,20 +880,12 @@ export declare const AnimatedListWrapper: import("@emotion/styled").StyledCompon
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";

package/dist/Menu/elements.d.ts

@@ -180,20 +180,12 @@ declare const listProps: import("@codecademy/variance/dist/types/config").Parser
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly position: {

package/dist/Pagination/AnimatedPaginationButtons.d.ts

@@ -464,20 +464,12 @@ export declare const AnimatedFadeButton: (props: {
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";

package/dist/Pagination/utils.d.ts

@@ -477,20 +477,12 @@ export declare const createAnimatedFadeButton: (WrappedComponent: typeof Paginat
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";

package/dist/Tabs/props.d.ts

@@ -182,19 +182,11 @@ export declare const tabElementBaseProps: import("@codecademy/variance/dist/type
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>]>>;

package/dist/Tag/types.d.ts

@@ -57,20 +57,12 @@ export declare const tagProps: import("@codecademy/variance/dist/types/config").
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly flexBasis: {

package/dist/Toggle/elements.d.ts

@@ -78,20 +78,12 @@ export declare const ToggleTrack: import("@emotion/styled").StyledComponent<{
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     textColor?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "color";
@@ -198,19 +190,11 @@ export declare const ToggleLabel: import("@emotion/styled").StyledComponent<{
         readonly scale: "spacing";
     }>;
     mr?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
     ml?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     }>;
 }, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/dist/Typography/Text.d.ts

@@ -231,20 +231,12 @@ declare const textProps: import("@codecademy/variance/dist/types/config").Parser
         readonly scale: "spacing";
     };
     readonly mr: {
-        readonly property: {
-            readonly physical: "marginRight";
-            readonly logical: "marginInlineEnd";
-        };
+        readonly property: "marginRight";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
     readonly ml: {
-        readonly property: {
-            readonly physical: "marginLeft";
-            readonly logical: "marginInlineStart";
-        };
+        readonly property: "marginLeft";
         readonly scale: "spacing";
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance").PropertyMode;
     };
 }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     truncateLines: {

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './Coachmark';
 export * from './ConnectedForm';
 export * from './ContentContainer';
 export * from './DelayedRenderWrapper';
+export * from './DetailedCode';
 export * from './Disclosure';
 export * from './DataList';
 export * from './Drawer';

package/dist/index.js

@@ -15,6 +15,7 @@ export * from './Coachmark';
 export * from './ConnectedForm';
 export * from './ContentContainer';
 export * from './DelayedRenderWrapper';
+export * from './DetailedCode';
 export * from './Disclosure';
 export * from './DataList';
 export * from './Drawer';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.6.4-alpha.773a9b.0",
+  "version": "67.6.4-alpha.abebfb.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.54.1-alpha.773a9b.0",
-    "@codecademy/gamut-illustrations": "0.58.1-alpha.773a9b.0",
-    "@codecademy/gamut-patterns": "0.10.20-alpha.773a9b.0",
-    "@codecademy/gamut-styles": "17.11.1-alpha.773a9b.0",
-    "@codecademy/variance": "0.25.1-alpha.773a9b.0",
+    "@codecademy/gamut-icons": "9.54.0",
+    "@codecademy/gamut-illustrations": "0.58.0",
+    "@codecademy/gamut-patterns": "0.10.19",
+    "@codecademy/gamut-styles": "17.11.0",
+    "@codecademy/variance": "0.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",
     "classnames": "^2.2.5",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "0a98755d341287af382245ccb3086c381f334793"
+  "gitHead": "bb48e953c9bd7f75ef8f34e6f61d19b40db48901"
 }