@atlaskit/page-layout 1.0.7 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/page-layout
 
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.0
+
+### Minor Changes
+
+- [`21534d3647e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21534d3647e) - [ux] Update theme colours and remove shadow from resize bar
+
+### Patch Changes
+
+- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [`ad0e912661a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad0e912661a) - Styles have been rewritten to be static, in preparation for compiled adoption.
+- [`8940901481d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8940901481d) - [ux] The width of right sidebars with fixed positioning (`<RightSidebar isFixed />`) has been fixed. Previously they had automatic sizing, which led to inconsistencies in appearance between static and fixed positioning.
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+- [`567a96da90e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/567a96da90e) - [ux] Instrumented page-layout with the new theming package, `@atlaskit/tokens`. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.0.7
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,7 @@ yarn add @atlaskit/page-layout
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/page-layout).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/page-layout/).
 
-To add side navigation, use [@atlaskit/side-navigation](https://atlaskit.atlassian.com/packages/navigation/side-navigation)
-To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlaskit.atlassian.com/packages/navigation/atlassian-navigation)
+To add side navigation, use [@atlaskit/side-navigation](https://atlassian.design/components/side-navigation/)
+To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation/)

package/__perf__/utils/perf-example.tsx

@@ -2,6 +2,8 @@
 
 import { css, jsx } from '@emotion/core';
 
+import { token } from '@atlaskit/tokens';
+
 import {
   Content,
   LeftSidebar,
@@ -13,6 +15,15 @@ import {
 import JiraIntegrationExample from './product-integration/AtlassianNavigation';
 import Sidebar from './product-integration/SideNavigation';
 
+const wrapperStyles = css({
+  boxSizing: 'border-box',
+  height: '100%',
+  padding: 8,
+  backgroundColor: token('color.background.neutral.subtle', 'white'),
+  outlineOffset: -4,
+  overflowY: 'auto',
+});
+
 const Wrapper = ({
   borderColor,
   children,
@@ -25,21 +36,27 @@ const Wrapper = ({
   noHorizontalScrollbar?: boolean;
 }) => (
   <div
-    css={{
+    css={wrapperStyles}
+    style={{
       outline: noOutline ? 'none' : `2px dashed ${borderColor}`,
-      outlineOffset: -4,
-      padding: 8,
-      height: '100%',
-      boxSizing: 'border-box',
-      overflowY: 'auto',
       overflowX: noHorizontalScrollbar ? 'hidden' : 'auto',
-      backgroundColor: 'white',
     }}
   >
     {children}
   </div>
 );
 
+const sidebarWrapperStyles = css({
+  height: '100%',
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  nav: {
+    minWidth: 20,
+    overflowX: 'hidden',
+  },
+});
+
+const slotLabelStyles = css({ textAlign: 'center' });
+
 const BasicGrid = () => {
   return (
     <PageLayout>
@@ -48,21 +65,13 @@ const BasicGrid = () => {
       </TopNavigation>
       <Content testId="content">
         <LeftSidebar testId="left-sidebar" isFixed={false} width={450}>
-          <div
-            css={css`
-              height: 100%;
-              & nav {
-                min-width: 20px;
-                overflow-x: hidden;
-              }
-            `}
-          >
+          <div css={sidebarWrapperStyles}>
             <Sidebar />
           </div>
         </LeftSidebar>
         <Main>
-          <Wrapper noOutline borderColor="black">
-            <h3 css={{ textAlign: 'center' }}>Main</h3>
+          <Wrapper noOutline borderColor={token('color.border', 'black')}>
+            <h3 css={slotLabelStyles}>Main</h3>
           </Wrapper>
         </Main>
       </Content>

package/__perf__/utils/product-integration/Create.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
 import { Create } from '@atlaskit/atlassian-navigation';
+import { token } from '@atlaskit/tokens';
 
 const StyledTooltip = () => (
   <span>
     Create
-    <span style={{ color: 'orange' }}> [c]</span>
+    <span style={{ color: token('color.text.accent.orange', 'orange') }}>
+      {' '}
+      [c]
+    </span>
   </span>
 );
 

package/__perf__/utils/product-integration/NotificationsPopup.tsx

@@ -1,23 +1,24 @@
 /** @jsx jsx */
 import { useState } from 'react';
 
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 
 import { Notifications } from '@atlaskit/atlassian-navigation';
 import { Notifications as NotificationsIframe } from '@atlaskit/atlassian-notifications';
 import { NotificationIndicator } from '@atlaskit/notification-indicator';
 import { NotificationLogClient } from '@atlaskit/notification-log-client';
 import Popup from '@atlaskit/popup';
-const wrapperCSS = {
+
+const wrapperStyles = css({
+  display: 'flex',
   width: 540,
   height: 'calc(100vh - 200px)',
   paddingTop: 18,
   paddingLeft: 18,
-  display: 'flex',
-};
+});
 
 const NotificationsContent = () => (
-  <div css={wrapperCSS}>
+  <div css={wrapperStyles}>
     <NotificationsIframe
       // _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html?scope=user&product=uchi&locale=en"
       _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html"

package/__perf__/utils/product-integration/SampleFooter.tsx

@@ -1,38 +1,39 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';
 import { B400, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 
 const Container: React.FC<CustomItemComponentProps> = (props) => {
   return <div {...props} />;
 };
 
+const linkStyles = css({
+  color: token('color.text.subtle', N200),
+  fontSize: 12,
+  ':hover': {
+    color: token('color.link', B400),
+    cursor: 'pointer',
+    textDecoration: 'none',
+  },
+});
+
 // This example footer conforms to a design taken from Jira designs found at
 // https://www.figma.com/file/GA22za6unqO2WsBWM0Ddxk/Jira-navigation-3?node-id=124%3A7194
 const ExampleFooter = () => {
-  const linkCSS = {
-    fontSize: 12,
-    color: N200,
-    '&:hover': {
-      color: B400,
-      textDecoration: 'none',
-      cursor: 'pointer',
-    },
-  };
-
   return (
     <Footer
       component={Container}
       description={
         <Fragment>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkCSS}>Give feedback</a> {' ∙ '}
+          <a css={linkStyles}>Give feedback</a> {' ∙ '}
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkCSS}>Learn more</a>
+          <a css={linkStyles}>Learn more</a>
         </Fragment>
       }
     >

package/dist/cjs/common/hooks/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useIsSidebarCollapsing", {
+  enumerable: true,
+  get: function get() {
+    return _useIsSidebarCollapsing.default;
+  }
+});
+Object.defineProperty(exports, "useIsSidebarDragging", {
+  enumerable: true,
+  get: function get() {
+    return _useIsSidebarDragging.default;
+  }
+});
+
+var _useIsSidebarCollapsing = _interopRequireDefault(require("./use-is-sidebar-collapsing"));
+
+var _useIsSidebarDragging = _interopRequireDefault(require("./use-is-sidebar-dragging"));

package/dist/cjs/common/hooks/use-is-sidebar-collapsing.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var getIsCollapsing = function getIsCollapsing() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(_constants.IS_SIDEBAR_COLLAPSING) === 'true';
+};
+
+var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
+  var _useState = (0, _react.useState)(getIsCollapsing),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isCollapsing = _useState2[0],
+      setIsCollapsing = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function () {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [_constants.IS_SIDEBAR_COLLAPSING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+var _default = useIsSidebarCollapsing;
+exports.default = _default;

package/dist/cjs/common/hooks/use-is-sidebar-dragging.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var getIsDragging = function getIsDragging() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(_constants.IS_SIDEBAR_DRAGGING) === 'true';
+};
+
+var useIsSidebarDragging = function useIsSidebarDragging() {
+  var _useState = (0, _react.useState)(getIsDragging),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function () {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [_constants.IS_SIDEBAR_DRAGGING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+var _default = useIsSidebarDragging;
+exports.default = _default;

package/dist/cjs/components/resize-control/grab-area.js

@@ -15,11 +15,49 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
-var _constants = require("../../common/constants");
+var _colors = require("@atlaskit/theme/colors");
 
-var _styles = require("./styles");
+var _constants = require("../../common/constants");
 
 var _excluded = ["testId", "isLeftSidebarCollapsed"];
+
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+var varLineColor = '--ds-line';
+var grabAreaStyles = (0, _core.css)({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B100, ")")),
+    ':active, :focus': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
+  }
+});
+var grabAreaCollapsedStyles = (0, _core.css)({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+var lineStyles = (0, _core.css)({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: "var(".concat(varLineColor, ")"),
+  transition: 'background-color 200ms'
+});
 var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true); // TODO: Consider allowing this to be controlled using arrow keys
 
@@ -30,9 +68,9 @@ var GrabArea = function GrabArea(_ref) {
   return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: (0, _styles.grabAreaCSS)(isLeftSidebarCollapsed)
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
   }, rest), (0, _core.jsx)("span", (0, _extends2.default)({
-    css: (0, _styles.lineCSS)(isLeftSidebarCollapsed)
+    css: lineStyles
   }, grabAreaLineSelector)));
 };
 

package/dist/cjs/components/resize-control/index.js

@@ -29,31 +29,33 @@ var _grabArea = _interopRequireDefault(require("./grab-area"));
 
 var _resizeButton2 = _interopRequireDefault(require("./resize-button"));
 
-var _styles = require("./styles");
+var _shadow = _interopRequireDefault(require("./shadow"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
+var resizeControlStyles = (0, _core.css)({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+var showResizeButtonStyles = (0, _core.css)({
+  '--ds--resize-button--opacity': 1
+});
 
-var Shadow = function Shadow(_ref) {
-  var testId = _ref.testId;
-  return (0, _core.jsx)("div", {
-    "data-testid": testId,
-    css: _styles.shadowCSS
-  });
-};
-
-var ResizeControl = function ResizeControl(_ref2) {
-  var testId = _ref2.testId,
-      overrides = _ref2.overrides,
-      _ref2$resizeButtonLab = _ref2.resizeButtonLabel,
-      resizeButtonLabel = _ref2$resizeButtonLab === void 0 ? '' : _ref2$resizeButtonLab,
-      _ref2$resizeGrabAreaL = _ref2.resizeGrabAreaLabel,
-      resizeGrabAreaLabel = _ref2$resizeGrabAreaL === void 0 ? 'Resize' : _ref2$resizeGrabAreaL,
-      onResizeStart = _ref2.onResizeStart,
-      onResizeEnd = _ref2.onResizeEnd;
+var ResizeControl = function ResizeControl(_ref) {
+  var testId = _ref.testId,
+      overrides = _ref.overrides,
+      _ref$resizeButtonLabe = _ref.resizeButtonLabel,
+      resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+      _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
+      resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd;
 
   var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
       expandLeftSidebar = _useContext.expandLeftSidebar,
@@ -263,8 +265,8 @@ var ResizeControl = function ResizeControl(_ref2) {
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return (0, _core.jsx)("div", (0, _extends2.default)({}, cssSelector, {
-    css: (0, _styles.resizeControlCSS)(isGrabAreaFocused, isLeftSidebarCollapsed)
-  }), (0, _core.jsx)(Shadow, {
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
+  }), (0, _core.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
   }), (0, _core.jsx)(_grabArea.default, {
     role: "separator",

package/dist/cjs/components/resize-control/resize-button.js

@@ -17,11 +17,66 @@ var _core = require("@emotion/core");
 
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 
-var _constants = require("../../common/constants");
+var _curves = require("@atlaskit/motion/curves");
+
+var _durations = require("@atlaskit/motion/durations");
 
-var _styles = require("./styles");
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("../../common/constants");
 
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+var increaseHitAreaStyles = (0, _core.css)({
+  position: 'absolute',
+  top: -8,
+  right: -12,
+  bottom: -8,
+  left: -8
+});
+var resizeIconButtonStyles = (0, _core.css)({
+  width: 24,
+  height: 24,
+  padding: 0,
+  position: 'absolute',
+  top: 32,
+  left: 0,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  border: 0,
+  borderRadius: '50%',
+
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
+   * This shadow needs further investigation,
+   * along with the hover and active background colors.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 4px 1px ").concat(_colors.N30A),
+  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
+  cursor: 'pointer',
+
+  /**
+   * The fallback value of 0 ensures that the button is hidden by default,
+   * unless some parent (or the button itself) overrides it.
+   */
+  opacity: "var(--ds--resize-button--opacity,0)",
+  outline: 0,
+  transform: 'translateX(-50%)',
+  transition: "\n    background-color ".concat(_durations.smallDurationMs, "ms linear,\n    color ").concat(_durations.smallDurationMs, "ms linear,\n    opacity ").concat(_durations.mediumDurationMs, "ms ").concat(_curves.easeOut, "\n  "),
+  ':hover': {
+    backgroundColor: "var(--ds-background-selected-bold, ".concat(_colors.B100, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+    opacity: 1
+  },
+  ':active, :focus': {
+    backgroundColor: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B200, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
+    opacity: 1
+  }
+});
+var resizeIconButtonExpandedStyles = (0, _core.css)({
+  transform: 'rotate(180deg)',
+  transformOrigin: 7
+});
 
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -39,7 +94,7 @@ var ResizeButton = function ResizeButton(_ref) {
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
-    css: (0, _styles.resizeIconButtonCSS)(isLeftSidebarCollapsed),
+    css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId // Prevents focus staying attached to the button
     // when pressed
     ,
@@ -47,7 +102,7 @@ var ResizeButton = function ResizeButton(_ref) {
   }, props), (0, _core.jsx)(_chevronRight.default, {
     label: ""
   }), (0, _core.jsx)("div", {
-    css: _styles.increaseHitArea
+    css: increaseHitAreaStyles
   }));
 };
 

package/dist/cjs/components/resize-control/shadow.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+var _hooks = require("../../common/hooks");
+
+/** @jsx jsx */
+var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
+var direction = 'to left';
+var transitionDuration = '0.22s';
+var shadowStyles = (0, _core.css)({
+  width: 3,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: -1,
+  background: "var(--ds-border, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  opacity: 0.5,
+  pointerEvents: 'none',
+  transitionDuration: transitionDuration,
+  transitionProperty: 'left, opacity, width',
+  transitionTimingFunction: _motion.easeOut
+});
+var draggingStyles = (0, _core.css)({
+  width: 6,
+  left: -6,
+  background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
+  opacity: 0.8
+});
+
+var Shadow = function Shadow(_ref) {
+  var testId = _ref.testId;
+  var isDragging = (0, _hooks.useIsSidebarDragging)();
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    css: [shadowStyles, isDragging && draggingStyles]
+  });
+};
+
+var _default = Shadow;
+exports.default = _default;