@pingux/astro 2.84.0-alpha.0 → 2.84.0-alpha.10

package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.js

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithSeparator = exports.WithSections = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _DotsVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsVerticalIcon"));
@@ -103,12 +103,12 @@ var DefaultOpen = function DefaultOpen() {
       }
     })), (0, _react2.jsx)(_index.Menu, {
       onAction: (0, _addonActions.action)('onAction'),
-      disabledKeys: ['duplicate']
+      disabledKeys: ['disabledItem']
     }, (0, _react2.jsx)(_index.Item, {
       key: "edit"
     }, "Edit"), (0, _react2.jsx)(_index.Item, {
-      key: "duplicate"
-    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "disabledItem"
+    }, "Disabled Item"), (0, _react2.jsx)(_index.Item, {
       key: "delete",
       textValue: "delete"
     }, (0, _react2.jsx)(_index.Text, {
@@ -242,4 +242,72 @@ var NotClosedOnSelect = function NotClosedOnSelect() {
     }, "Delete")))))
   );
 };
-exports.NotClosedOnSelect = NotClosedOnSelect;
+exports.NotClosedOnSelect = NotClosedOnSelect;
+var WithSeparator = function WithSeparator(args) {
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['disabledItem']
+    }, (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit")), (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
+      key: "disabledItem"
+    }, "Disabled Item"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete"))))))
+  );
+};
+exports.WithSeparator = WithSeparator;
+var WithSections = function WithSections(args) {
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md",
+      title: {
+        name: 'Dots Vertical Icon'
+      }
+    })), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['disabledItem']
+    }, (0, _react2.jsx)(_index.Section, {
+      key: "section 1",
+      title: "Section 1"
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "disabledItem"
+    }, "Disabled Item"), (0, _react2.jsx)(_index.Item, {
+      key: "copy"
+    }, "Copy")), (0, _react2.jsx)(_index.Section, {
+      key: "section 2",
+      title: "Section 2"
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete"))))))
+  );
+};
+exports.WithSections = WithSections;

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -264,18 +264,15 @@ exports.Controlled = Controlled;
 var WithNoneOption = function WithNoneOption() {
   return (0, _react2.jsx)(_index.SelectField, {
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
     key: "none"
-  }, "None"), (0, _react2.jsx)(_index.Item, {
-    isSeparator: true,
-    textValue: "-"
-  }, (0, _react2.jsx)(_index.Separator, null)), (0, _react2.jsx)(_index.Item, {
+  }, "None")), (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
   }, "Blue"), (0, _react2.jsx)(_index.Item, {
     key: "yellow"
-  }, "Yellow"));
+  }, "Yellow")));
 };
 exports.WithNoneOption = WithNoneOption;
 var WithSlots = function WithSlots() {

package/lib/cjs/components/SwitchField/SwitchField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwitchFieldProps } from '../../types';
+declare const SwitchField: React.ForwardRefExoticComponent<SwitchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default SwitchField;

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -27,47 +27,25 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _statusProp = require("../../utils/docUtils/statusProp");
-var _switchFieldAttributes = require("./switchFieldAttributes");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
-/* eslint-disable no-unused-vars */
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _inputProps$checked;
   var label = props.label,
     helperText = props.helperText,
     isDefaultSelected = props.isDefaultSelected,
-    isSelected = props.isSelected,
-    onChange = props.onChange,
-    value = props.value,
-    name = props.name,
-    id = props.id,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$hasAutoFocus = props.hasAutoFocus,
-    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onFocusChange = props.onFocusChange,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
+    isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var switchRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return switchRef.current;
-  });
+  var switchRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var state = (0, _reactStately.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
@@ -79,11 +57,11 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useSwitch = (0, _reactAria.useSwitch)(_objectSpread(_objectSpread({
       children: label
     }, whitelistedProps), {}, {
-      'aria-label': 'switch-field'
+      'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
-    isSelected: inputProps.checked
+    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
   };
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -103,12 +81,14 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id', 'aria-label')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _switchFieldAttributes.switchFieldPropTypes;
-SwitchField.defaultProps = _objectSpread({}, _statusProp.statusDefaultProp);
+SwitchField.defaultProps = {
+  status: _statuses["default"].DEFAULT,
+  isDisabled: false
+};
 SwitchField.displayName = displayName;
 var _default = SwitchField;
 exports["default"] = _default;

package/lib/cjs/components/SwitchField/SwitchField.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryFn } from '@storybook/react';
+import { SwitchFieldProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<SwitchFieldProps>;
+export declare const Controlled: StoryFn<SwitchFieldProps>;
+export declare const DefaultSelected: StoryFn<SwitchFieldProps>;
+export declare const Disabled: StoryFn<SwitchFieldProps>;
+export declare const NoVisibleLabel: StoryFn<SwitchFieldProps>;
+export declare const Required: StoryFn<SwitchFieldProps>;
+export declare const WithTooltip: StoryFn<SwitchFieldProps>;

package/lib/cjs/components/SwitchField/SwitchField.stories.js

@@ -60,7 +60,9 @@ var Controlled = function Controlled() {
   return (0, _react2.jsx)(_index.SwitchField, {
     isSelected: isSelected,
     label: "Controlled",
-    onChange: setIsSelected,
+    onChange: function onChange() {
+      return setIsSelected(!isSelected);
+    },
     value: "my-switch"
   });
 };
@@ -97,7 +99,7 @@ var Required = function Required() {
 };
 exports.Required = Required;
 var WithTooltip = function WithTooltip() {
-  var tooltipTrigger = (0, _react.useRef)();
+  var tooltipTrigger = (0, _react.useRef)(null);
   return (0, _react2.jsx)(_index.TooltipTrigger, {
     crossOffset: 15,
     offset: 20,

package/lib/cjs/components/SwitchField/SwitchField.test.d.ts

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

package/lib/cjs/components/SwitchField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SwitchField';

package/lib/cjs/components/SwitchField/switchFieldAttributes.d.ts

@@ -0,0 +1,94 @@
+export declare const switchFieldArgTypes: {
+    className: {
+        type: {
+            summary: string;
+        };
+        description: string;
+    };
+    hasAutoFocus: any;
+    helperText: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    hintText: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    id: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    isDefaultSelected: any;
+    isDisabled: any;
+    isReadOnly: any;
+    isRequired: any;
+    isSelected: {
+        control: {
+            type: string;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    label: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    name: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    onBlur: any;
+    onChange: any;
+    onFocus: any;
+    onFocusChange: any;
+    onKeyDown: any;
+    onKeyUp: any;
+    value: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    status: {
+        control: {
+            type: string;
+            options: any;
+        };
+        description: string;
+    };
+};
+export declare const switchFieldArgs: {
+    label: string;
+    value: string;
+    status: any;
+};

package/lib/cjs/components/SwitchField/switchFieldAttributes.js

@@ -12,16 +12,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.switchFieldPropTypes = exports.switchFieldArgs = exports.switchFieldArgTypes = void 0;
+exports.switchFieldArgs = exports.switchFieldArgTypes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _docArgTypes = require("../../utils/docUtils/docArgTypes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _context;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -168,27 +163,4 @@ var switchFieldArgs = {
   value: 'my-switch',
   status: _statuses["default"].DEFAULT
 };
-exports.switchFieldArgs = switchFieldArgs;
-var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
-  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
-  hasAutoFocus: _propTypes["default"].bool,
-  helperText: _propTypes["default"].node,
-  hintText: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  isDefaultSelected: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  isRequired: _propTypes["default"].bool,
-  isSelected: _propTypes["default"].bool,
-  label: _propTypes["default"].node,
-  name: _propTypes["default"].string,
-  onBlur: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onFocusChange: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onKeyUp: _propTypes["default"].func,
-  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-  value: _propTypes["default"].string
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _statusProp.statusPropTypes);
-exports.switchFieldPropTypes = switchFieldPropTypes;
+exports.switchFieldArgs = switchFieldArgs;

package/lib/cjs/components/Tabs/Tabs.js

@@ -96,7 +96,6 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value: state
   }, (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "tabs",
-    gap: "25px",
     isRow: orientation === _orientation["default"].HORIZONTAL
   }, tabListProps, raTabListProps, {
     ref: tabListRef,

package/lib/cjs/components/Tabs/Tabs.style.d.ts

@@ -37,6 +37,7 @@ export declare const tabs: {
     borderBottomStyle: string;
     borderBottomColor: string;
     mb: string;
+    gap: string;
 };
 export declare const menuTab: {
     color: string;

package/lib/cjs/components/Tabs/Tabs.style.js

@@ -53,7 +53,8 @@ var tabs = {
   borderBottomWidth: 1,
   borderBottomStyle: 'solid',
   borderBottomColor: 'neutral.90',
-  mb: 'lg'
+  mb: 'lg',
+  gap: '25px'
 };
 exports.tabs = tabs;
 var menuTab = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {

package/lib/cjs/components/TimeField/TimeField.stories.js

@@ -91,13 +91,13 @@ var Required = function Required(args) {
   return (0, _react2.jsx)(_index.TimeField, (0, _extends2["default"])({}, args, {
     "aria-label": "timefield-default",
     isRequired: true,
-    label: "Example label"
+    label: "Lorem Ipsum"
   }));
 };
 exports.Required = Required;
 var WithLabel = function WithLabel(args) {
   return (0, _react2.jsx)(_index.TimeField, (0, _extends2["default"])({}, args, {
-    label: "Loren Ipsum",
+    label: "Lorem Ipsum",
     "aria-label": "timefield-default"
   }));
 };

package/lib/cjs/styles/theme.js

@@ -37,10 +37,14 @@ var _default = {
   },
   breakpoints: _breakpoints["default"],
   fonts: {
-    standard: '"Helvetica Neue", Helvetica, sans-serif'
+    standard: '"Helvetica Neue", Helvetica, sans-serif',
+    codeView: '"Roboto Mono", "Lucida Console", Courier, monospace'
   },
   fontSizes: _text.fontSizes,
   fontWeights: _text.fontWeights,
+  lineHeights: {
+    md: '1.5'
+  },
   sizes: {
     buttonHeight: 36,
     column: 400,

package/lib/cjs/styles/themes/next-gen/codeView/codeView.d.ts

@@ -0,0 +1,105 @@
+declare const _default: {
+    theme: {
+        plain: {
+            color: string;
+            backgroundColor: string;
+        };
+        styles: ({
+            types: string[];
+            style: {
+                color: string;
+                background?: undefined;
+                fontWeight?: undefined;
+                cursor?: undefined;
+            };
+        } | {
+            types: string[];
+            style: {
+                color: string;
+                background: string;
+                fontWeight?: undefined;
+                cursor?: undefined;
+            };
+        } | {
+            types: string[];
+            style: {
+                fontWeight: string;
+                color?: undefined;
+                background?: undefined;
+                cursor?: undefined;
+            };
+        } | {
+            types: string[];
+            style: {
+                cursor: string;
+                color?: undefined;
+                background?: undefined;
+                fontWeight?: undefined;
+            };
+        })[];
+    };
+    wrapper: {
+        bg: string;
+        border: string;
+        borderColor: string;
+        width: number;
+        height: number;
+        my: string;
+        overflow: string;
+        alignItems: string;
+        '&.is-focused, &:focus': {
+            boxShadow: string;
+            outline: string;
+        };
+        pre: {
+            backgroundColor: string;
+            padding: string;
+            height: string;
+            width: string;
+            overflowX: string;
+            overflowY: string;
+            fontSize: string;
+            '& .token-line': {
+                display: string;
+                alignItems: string;
+                '& .token': {
+                    whiteSpace: string;
+                    wordBreak: string;
+                };
+            };
+            fontFamily: string;
+            lineHeight: string;
+        };
+        '&.has-no-copy-button': {
+            pre: {
+                p: string;
+            };
+        };
+        '&.has-line-numbers': {
+            pre: {
+                p: string;
+                overflow: string;
+                '& .token-line:first-of-type *': {
+                    pt: string;
+                };
+                '& .token-line': {
+                    display: string;
+                    '& .token': {
+                        whiteSpace: string;
+                    };
+                };
+            };
+        };
+    };
+    lineNo: {
+        display: string;
+        userSelect: string;
+        px: string;
+        m: string;
+        bg: string;
+        minWidth: number;
+        color: string;
+        lineHeight: string;
+    };
+};
+export default _default;