@chayns-components/core 5.0.0-beta.4 → 5.0.0-beta.400

package/lib/components/button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledButton","exports","styled","button","_ref","isSecondary","theme","_ref2","text","_ref3","disabled","_ref4","hasIcon","hasChildren","css","StyledIconWrapper","span","StyledMotionChildrenWrapper","motion","div","StyledMotionWaitCursorWrapper"],"sources":["../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ButtonProps } from './Button';\n\ntype StyledButtonProps = ButtonProps &\n    WithTheme<{\n        hasIcon: boolean;\n        hasChildren: boolean;\n    }>;\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n    align-items: center;\n    background-color: ${({ isSecondary, theme }: StyledButtonProps) =>\n        isSecondary ? theme['202'] : theme['408']};\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    border: none;\n    color: ${({ isSecondary, theme }: StyledButtonProps) => (isSecondary ? theme.text : 'white')};\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    min-height: 32px;\n    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    ${({ hasIcon, hasChildren }) => {\n        if (hasIcon) {\n            if (hasChildren) {\n                return css`\n                    padding: 7px 12px 7px 42px;\n                `;\n            }\n            return css`\n                padding: 7px 12px 7px 18px;\n            `;\n        }\n        return css`\n            padding: 7px 12px 7px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)<FramerMotionBugFix>``;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"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"}

package/lib/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,33 @@
+import { ChangeEventHandler, FC, ReactElement } from 'react';
+export type CheckboxProps = {
+    /**
+     * Text for checkbox or switch
+     */
+    children?: ReactElement;
+    /**
+     * Indicates whether the checkbox or switch is selected
+     */
+    isChecked?: boolean;
+    /**
+     * Disables the checkbox or switch so it cannot be toggled
+     */
+    isDisabled?: boolean;
+    /**
+     * Classname for the label
+     */
+    labelClassName?: string;
+    /**
+     * Function to be executed if the checked value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Changes the design to use switch instead of checkbox
+     */
+    shouldShowAsSwitch?: boolean;
+    /**
+     * Whether the Checkbox should be displayed centered to the label or at the top
+     */
+    shouldShowCentered?: boolean;
+};
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;

package/lib/components/checkbox/Checkbox.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("../../hooks/uuid");
+var _calculate = require("../../utils/calculate");
+var _Checkbox = require("./Checkbox.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Checkbox = _ref => {
+  let {
+    children,
+    isChecked,
+    isDisabled,
+    labelClassName,
+    onChange,
+    shouldShowAsSwitch,
+    shouldShowCentered = false
+  } = _ref;
+  const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
+  const handleChange = (0, _react.useCallback)(event => {
+    setIsActive(event.target.checked);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  const uuid = (0, _uuid.useUuid)();
+  const lineHeight = (0, _react.useMemo)(() => shouldShowCentered ? undefined : (0, _calculate.getHeightOfSingleTextLine)(), [shouldShowCentered]);
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
+    checked: isChecked,
+    disabled: isDisabled,
+    id: uuid,
+    onChange: handleChange,
+    type: "checkbox"
+  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    className: labelClassName,
+    htmlFor: uuid,
+    isChecked: isChecked ?? isActive,
+    isDisabled: isDisabled,
+    shouldShowAsSwitch: shouldShowAsSwitch,
+    lineHeight: lineHeight
+  }, children));
+};
+Checkbox.displayName = 'Checkbox';
+var _default = exports.default = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n                lineHeight={lineHeight}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

package/lib/components/checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { CheckboxProps } from './Checkbox';
+export declare const StyledCheckbox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledCheckboxInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
+type StyledCheckboxLabelProps = WithTheme<{
+    shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
+    isDisabled?: CheckboxProps['isDisabled'];
+    isChecked?: CheckboxProps['isChecked'];
+    lineHeight?: number;
+}>;
+export declare const StyledCheckboxLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>>;
+export {};

package/lib/components/checkbox/Checkbox.styles.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    position: relative;
+`;
+const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
+    display: none;
+`;
+const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    cursor: ${_ref2 => {
+  let {
+    isDisabled
+  } = _ref2;
+  return isDisabled ? 'default' : 'pointer';
+}};
+    opacity: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled ? 0.5 : 1;
+}};
+    padding-left: ${_ref4 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref4;
+  return shouldShowAsSwitch ? '48px' : '20px';
+}};
+    transition: opacity 0.2s ease;
+    user-select: none;
+
+    &:after {
+        ${_ref5 => {
+  let {
+    isChecked,
+    shouldShowAsSwitch,
+    lineHeight
+  } = _ref5;
+  return shouldShowAsSwitch ? (0, _styledComponents.css)`
+                      background-color: white;
+                      border-radius: 50%;
+                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+                      height: 16px;
+                      left: 7px;
+                      top: ${lineHeight ? `${lineHeight / 1.5}px` : '50%'};
+                      transform: translateX(${isChecked ? '18px' : 0}) translateY(-50%);
+                      transition: transform 0.2s ease;
+                      width: 16px;
+                  ` : (0, _styledComponents.css)`
+                      border-right: 2px solid #fff;
+                      border-bottom: 2px solid #fff;
+                      height: 10px;
+                      left: 2px;
+                      opacity: ${isChecked ? 1 : 0};
+                      top: ${lineHeight ? `calc(${lineHeight / 1.5}px - 2px)` : 'calc(50% - 2px)'};
+                      transform: rotateZ(37deg) translateY(-50%);
+                      transition: opacity 0.2s ease;
+                      width: 5.5px;
+                  `;
+}}
+
+        content: ' ';
+        position: absolute;
+    }
+
+    &:before {
+        background-color: ${_ref6 => {
+  let {
+    isChecked,
+    shouldShowAsSwitch,
+    theme
+  } = _ref6;
+  if (shouldShowAsSwitch) {
+    return isChecked ? theme.green : theme.red;
+  }
+  return isChecked ? theme['408'] : theme['403'];
+}};
+        border: 1px solid rgba(${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['409-rgb'];
+}}, 0.5);
+        border-radius: ${_ref8 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref8;
+  return shouldShowAsSwitch ? '100px' : 0;
+}};
+        content: ' ';
+        height: ${_ref9 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref9;
+  return shouldShowAsSwitch ? '13px' : '15px';
+}};
+        left: ${_ref10 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref10;
+  return shouldShowAsSwitch ? '10px' : 0;
+}};
+        position: absolute;
+        transition: background-color 0.2s ease;
+        width: ${_ref11 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref11;
+  return shouldShowAsSwitch ? '28px' : '15px';
+}};
+        ${_ref12 => {
+  let {
+    lineHeight
+  } = _ref12;
+  return lineHeight ? (0, _styledComponents.css)`
+                      top: ${lineHeight / 1.5}px;
+                      transform: translateY(-50%);
+                  ` : (0, _styledComponents.css)`
+                      top: 50%;
+                      transform: translateY(-50%);
+                  `;
+}}
+        }
+    }
+`;
+//# sourceMappingURL=Checkbox.styles.js.map

package/lib/components/checkbox/Checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","isDisabled","_ref3","_ref4","shouldShowAsSwitch","_ref5","isChecked","lineHeight","css","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    isDisabled?: CheckboxProps['isDisabled'];\n    isChecked?: CheckboxProps['isChecked'];\n    lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding-left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ isChecked, shouldShowAsSwitch, lineHeight }) =>\n            shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${lineHeight ? `${lineHeight / 1.5}px` : '50%'};\n                      transform: translateX(${isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${isChecked ? 1 : 0};\n                      top: ${lineHeight ? `calc(${lineHeight / 1.5}px - 2px)` : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            isChecked,\n            shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if (shouldShowAsSwitch) {\n                return isChecked ? theme.green : theme.red;\n            }\n\n            return isChecked ? theme['408'] : theme['403'];\n        }};\n        border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\n        border-radius: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ lineHeight }) =>\n            lineHeight\n                ? css`\n                      top: ${lineHeight / 1.5}px;\n                      transform: translateY(-50%);\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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"}

package/lib/components/code-highlighter/CodeHighlighter.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { CodeHighlighterLanguage, CodeHighlighterTheme, HighlightedLines } from '../../types/codeHighlighter';
+export type CodeHighlighterProps = {
+    /**
+     * The code that should be displayed.
+     */
+    code: string;
+    /**
+     * The text that should be displayed after the copy button.
+     * If not set, just the button is displayed without text.
+     */
+    copyButtonText?: string;
+    /**
+     * The lines of code that should be highlighted.
+     * Following lines can be highlighted: added, removed and just marked.
+     */
+    highlightedLines?: HighlightedLines;
+    /**
+     * The language of the displayed code.
+     */
+    language: CodeHighlighterLanguage;
+    /**
+     * Whether the code should be formatted with prettier.
+     */
+    shouldFormatCode?: boolean;
+    /**
+     * Whether the line numbers should be displayed.
+     */
+    shouldShowLineNumbers?: boolean;
+    /**
+     * The theme of the code block. Decide between dark and light.
+     */
+    theme?: CodeHighlighterTheme;
+};
+declare const CodeHighlighter: FC<CodeHighlighterProps>;
+export default CodeHighlighter;

package/lib/components/code-highlighter/CodeHighlighter.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _standalone = require("prettier/standalone");
+var _react = _interopRequireWildcard(require("react"));
+var _reactSyntaxHighlighter = require("react-syntax-highlighter");
+var _prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+var _codeHighlighter = require("../../types/codeHighlighter");
+var _codeHighlighter2 = require("../../utils/codeHighlighter");
+var _CodeHighlighter = require("./CodeHighlighter.styles");
+var _CopyToClipboard = _interopRequireDefault(require("./copy-to-clipboard/CopyToClipboard"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CodeHighlighter = _ref => {
+  let {
+    theme = _codeHighlighter.CodeHighlighterTheme.Dark,
+    code,
+    copyButtonText,
+    language,
+    highlightedLines,
+    shouldFormatCode = false,
+    shouldShowLineNumbers = false
+  } = _ref;
+  // function to style highlighted code
+  const lineWrapper = (0, _react.useCallback)(lineNumber => {
+    let style = {
+      backgroundColor: 'none',
+      display: 'block',
+      borderRadius: '2px'
+    };
+    if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {
+      style = {
+        ...style,
+        backgroundColor: '#2EF29930'
+      };
+    } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {
+      style = {
+        ...style,
+        backgroundColor: '#F22E5B30'
+      };
+    } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {
+      style = {
+        ...style,
+        backgroundColor: '#cccccc40'
+      };
+    }
+    return {
+      style
+    };
+  }, [highlightedLines]);
+  const formattedCode = (0, _react.useMemo)(() => {
+    if (language) {
+      const config = (0, _codeHighlighter2.getParserForLanguage)(language);
+      if (shouldFormatCode && config) {
+        return (0, _standalone.format)(code, config);
+      }
+      return code;
+    }
+    return code;
+  }, [code, language, shouldFormatCode]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighter, {
+    codeTheme: theme
+  }, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterHeader, {
+    codeTheme: theme
+  }, /*#__PURE__*/_react.default.createElement(_CodeHighlighter.StyledCodeHighlighterFileName, {
+    codeTheme: theme
+  }, (0, _codeHighlighter2.formatLanguage)(language)), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
+    text: code,
+    theme: theme,
+    copyButtonText: copyButtonText
+  })), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.PrismAsyncLight, {
+    language: language ?? '',
+    showLineNumbers: shouldShowLineNumbers,
+    style: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? _prism.oneDark : _prism.oneLight,
+    wrapLines: true,
+    lineProps: lineWrapper
+  }, formattedCode)), [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formattedCode]);
+};
+CodeHighlighter.displayName = 'CodeHighlighter';
+var _default = exports.default = CodeHighlighter;
+//# sourceMappingURL=CodeHighlighter.js.map

package/lib/components/code-highlighter/CodeHighlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CodeHighlighter","_ref","theme","CodeHighlighterTheme","Dark","code","copyButtonText","language","highlightedLines","shouldFormatCode","shouldShowLineNumbers","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","formattedCode","useMemo","config","getParserForLanguage","format","createElement","StyledCodeHighlighter","codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","lineProps","displayName","_default","exports"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme = CodeHighlighterTheme.Dark,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    shouldShowLineNumbers = false,\n}) => {\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines],\n    );\n\n    const formattedCode = useMemo(() => {\n        if (language) {\n            const config = getParserForLanguage(language);\n\n            if (shouldFormatCode && config) {\n                return format(code, config) as unknown as string;\n            }\n\n            return code;\n        }\n\n        return code;\n    }, [code, language, shouldFormatCode]);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter codeTheme={theme}>\n                <StyledCodeHighlighterHeader codeTheme={theme}>\n                    <StyledCodeHighlighterFileName codeTheme={theme}>\n                        {formatLanguage(language)}\n                    </StyledCodeHighlighterFileName>\n                    <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n                </StyledCodeHighlighterHeader>\n                <SyntaxHighlighter\n                    language={language ?? ''}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formattedCode],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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"}

package/lib/components/code-highlighter/CodeHighlighter.styles.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CodeHighlighterTheme } from '../../types/codeHighlighter';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledCodeHighlighterProps = WithTheme<{
+    codeTheme: CodeHighlighterTheme;
+}>;
+export declare const StyledCodeHighlighter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCodeHighlighterProps>>;
+type StyledCodeHighlighterHeaderProps = WithTheme<{
+    codeTheme: CodeHighlighterTheme;
+}>;
+export declare const StyledCodeHighlighterHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCodeHighlighterHeaderProps>>;
+type StyledCodeHighlighterFileNameProps = WithTheme<{
+    codeTheme: CodeHighlighterTheme;
+}>;
+export declare const StyledCodeHighlighterFileName: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCodeHighlighterFileNameProps>>;
+export {};

package/lib/components/code-highlighter/CodeHighlighter.styles.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCodeHighlighterHeader = exports.StyledCodeHighlighterFileName = exports.StyledCodeHighlighter = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _codeHighlighter = require("../../types/codeHighlighter");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledCodeHighlighter = exports.StyledCodeHighlighter = _styledComponents.default.div`
+  margin: 4px 0;
+  background-color: ${_ref => {
+  let {
+    codeTheme
+  } = _ref;
+  return codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa';
+}};
+  border-radius: 8px;
+  padding-bottom: 6px;
+
+  pre {
+    margin: 0 !important;
+    overflow: auto;
+    padding: 1em;
+    line-height: 1.5;
+
+    // Styles for custom scrollbar
+    &::-webkit-scrollbar {
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-button {
+      background-color: transparent;
+      height: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+
+      background-color: rgba(${_ref2 => {
+  let {
+    codeTheme
+  } = _ref2;
+  return codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '229, 229, 229' : '153, 153, 153';
+}},
+      1);
+      border-radius: 20px;
+    }
+
+    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
+    // only supported in Firefox:
+    * {
+      scrollbar-color: rgba(${_ref3 => {
+  let {
+    codeTheme
+  } = _ref3;
+  return codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '229, 229, 229' : '153, 153, 153';
+}},
+      1);)transparent;
+      scrollbar-width: thin;
+    }
+  }
+`;
+const StyledCodeHighlighterHeader = exports.StyledCodeHighlighterHeader = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid
+        ${_ref4 => {
+  let {
+    codeTheme
+  } = _ref4;
+  return codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
+}};
+    padding: 4px 12px;
+`;
+const StyledCodeHighlighterFileName = exports.StyledCodeHighlighterFileName = _styledComponents.default.span`
+    color: ${_ref5 => {
+  let {
+    codeTheme
+  } = _ref5;
+  return codeTheme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999';
+}};
+`;
+//# sourceMappingURL=CodeHighlighter.styles.js.map

package/lib/components/code-highlighter/CodeHighlighter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlighter.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","obj","__esModule","default","StyledCodeHighlighter","exports","styled","div","_ref","codeTheme","CodeHighlighterTheme","Dark","_ref2","_ref3","StyledCodeHighlighterHeader","_ref4","StyledCodeHighlighterFileName","span","_ref5"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../types/codeHighlighter';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledCodeHighlighterProps = WithTheme<{\n    codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighter = styled.div<StyledCodeHighlighterProps>`\n  margin: 4px 0;\n  background-color: ${({ codeTheme }) =>\n      codeTheme === CodeHighlighterTheme.Dark ? '#282c34' : '#fafafa'};\n  border-radius: 8px;\n  padding-bottom: 6px;\n\n  pre {\n    margin: 0 !important;\n    overflow: auto;\n    padding: 1em;\n    line-height: 1.5;\n\n    // Styles for custom scrollbar\n    &::-webkit-scrollbar {\n      height: 5px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-scrollbar-button {\n      background-color: transparent;\n      height: 2px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n\n      background-color: rgba(${({ codeTheme }) =>\n          codeTheme === CodeHighlighterTheme.Dark ? '229, 229, 229' : '153, 153, 153'},\n      1);\n      border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n      scrollbar-color: rgba(${({ codeTheme }) =>\n          codeTheme === CodeHighlighterTheme.Dark ? '229, 229, 229' : '153, 153, 153'},\n      1);)transparent;\n      scrollbar-width: thin;\n    }\n  }\n`;\n\ntype StyledCodeHighlighterHeaderProps = WithTheme<{\n    codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterHeader = styled.div<StyledCodeHighlighterHeaderProps>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid\n        ${({ codeTheme }) => (codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n    padding: 4px 12px;\n`;\n\ntype StyledCodeHighlighterFileNameProps = WithTheme<{\n    codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCodeHighlighterFileName = styled.span<StyledCodeHighlighterFileNameProps>`\n    color: ${({ codeTheme }) => (codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999')};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAmE,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAO5D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAAgC;AAC5E;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OAC9BC,SAAS,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+BC,KAAA;EAAA,IAAC;IAAEH;EAAU,CAAC,GAAAG,KAAA;EAAA,OACnCH,SAAS,KAAKC,qCAAoB,CAACC,IAAI,GAAG,eAAe,GAAG,eAAe;AAAA,CAAC;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8BE,KAAA;EAAA,IAAC;IAAEJ;EAAU,CAAC,GAAAI,KAAA;EAAA,OAClCJ,SAAS,KAAKC,qCAAoB,CAACC,IAAI,GAAG,eAAe,GAAG,eAAe;AAAA,CAAC;AACtF;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMG,2BAA2B,GAAAT,OAAA,CAAAS,2BAAA,GAAGR,yBAAM,CAACC,GAAsC;AACxF;AACA;AACA;AACA;AACA,UAAUQ,KAAA;EAAA,IAAC;IAAEN;EAAU,CAAC,GAAAM,KAAA;EAAA,OAAMN,SAAS,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AAC/F;AACA,CAAC;AAMM,MAAMK,6BAA6B,GAAAX,OAAA,CAAAW,6BAAA,GAAGV,yBAAM,CAACW,IAAyC;AAC7F,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAU,CAAC,GAAAS,KAAA;EAAA,OAAMT,SAAS,KAAKC,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AAClG,CAAC"}

package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
+export type CopyToClipboardProps = {
+    copyButtonText?: string;
+    text: string;
+    theme: CodeHighlighterTheme;
+};
+declare const CopyToClipboard: FC<CopyToClipboardProps>;
+export default CopyToClipboard;

package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _codeHighlighter = require("../../../types/codeHighlighter");
+var _Icon = _interopRequireDefault(require("../../icon/Icon"));
+var _Popup = _interopRequireDefault(require("../../popup/Popup"));
+var _CopyToClipboard = require("./CopyToClipboard.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CopyToClipboard = _ref => {
+  let {
+    copyButtonText,
+    text,
+    theme
+  } = _ref;
+  const handleClick = () => {
+    void navigator.clipboard.writeText(text);
+  };
+  const popupContent = /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      display: 'block',
+      padding: '5px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Kopiert!"));
+  return /*#__PURE__*/_react.default.createElement(_Popup.default, {
+    content: popupContent
+  }, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboard, {
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa-light fa-clipboard'],
+    color: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'
+  }), copyButtonText && /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardText, {
+    codeTheme: theme
+  }, copyButtonText)));
+};
+CopyToClipboard.displayName = 'CopyToClipboard';
+var _default = exports.default = CopyToClipboard;
+//# sourceMappingURL=CopyToClipboard.js.map

package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboard.js","names":["_react","_interopRequireDefault","require","_codeHighlighter","_Icon","_Popup","_CopyToClipboard","obj","__esModule","default","CopyToClipboard","_ref","copyButtonText","text","theme","handleClick","navigator","clipboard","writeText","popupContent","createElement","style","display","padding","content","StyledCopyToClipboard","onClick","icons","color","CodeHighlighterTheme","Dark","StyledCopyToClipboardText","codeTheme","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport Icon from '../../icon/Icon';\nimport Popup from '../../popup/Popup';\nimport { StyledCopyToClipboard, StyledCopyToClipboardText } from './CopyToClipboard.styles';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const handleClick = () => {\n        void navigator.clipboard.writeText(text);\n    };\n\n    const popupContent = (\n        <span style={{ display: 'block', padding: '5px' }}>\n            <p>Kopiert!</p>\n        </span>\n    );\n\n    return (\n        <Popup content={popupContent}>\n            <StyledCopyToClipboard onClick={handleClick}>\n                <Icon\n                    icons={['fa-light fa-clipboard']}\n                    color={theme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'}\n                />\n                {copyButtonText && (\n                    <StyledCopyToClipboardText codeTheme={theme}>\n                        {copyButtonText}\n                    </StyledCopyToClipboardText>\n                )}\n            </StyledCopyToClipboard>\n        </Popup>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAA4F,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQ5F,MAAMG,eAAyC,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,cAAc;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAH,IAAA;EAC9E,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACL,IAAI,CAAC;EAC5C,CAAC;EAED,MAAMM,YAAY,gBACdnB,MAAA,CAAAS,OAAA,CAAAW,aAAA;IAAMC,KAAK,EAAE;MAAEC,OAAO,EAAE,OAAO;MAAEC,OAAO,EAAE;IAAM;EAAE,gBAC9CvB,MAAA,CAAAS,OAAA,CAAAW,aAAA,YAAG,UAAW,CACZ,CACT;EAED,oBACIpB,MAAA,CAAAS,OAAA,CAAAW,aAAA,CAACf,MAAA,CAAAI,OAAK;IAACe,OAAO,EAAEL;EAAa,gBACzBnB,MAAA,CAAAS,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAmB,qBAAqB;IAACC,OAAO,EAAEX;EAAY,gBACxCf,MAAA,CAAAS,OAAA,CAAAW,aAAA,CAAChB,KAAA,CAAAK,OAAI;IACDkB,KAAK,EAAE,CAAC,uBAAuB,CAAE;IACjCC,KAAK,EAAEd,KAAK,KAAKe,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG;EAAU,CACtE,CAAC,EACDlB,cAAc,iBACXZ,MAAA,CAAAS,OAAA,CAAAW,aAAA,CAACd,gBAAA,CAAAyB,yBAAyB;IAACC,SAAS,EAAElB;EAAM,GACvCF,cACsB,CAEZ,CACpB,CAAC;AAEhB,CAAC;AAEDF,eAAe,CAACuB,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1B,OAAA,GAEjCC,eAAe"}

package/lib/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledCopyToClipboard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledCopyToClipboardTextProps = WithTheme<{
+    codeTheme: CodeHighlighterTheme;
+}>;
+export declare const StyledCopyToClipboardText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCopyToClipboardTextProps>>;
+export {};