@atlaskit/page-layout/dist/cjs/components/resize-control/shadow.js

A collection of components which let you compose an application's page layout.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _motion = require("@atlaskit/motion");
var _hooks = require("../../common/hooks");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var transitionDuration = '0.22s';
var shadowStyles = (0, _react.css)({
  width: 3,
  position: 'absolute',
  background: "var(--ds-border, #0B120E24)",
  insetBlockEnd: 0,
  insetBlockStart: 0,
  insetInlineStart: -1,
  opacity: 0.5,
  pointerEvents: 'none',
  transitionDuration: transitionDuration,
  transitionProperty: 'left, opacity, width',
  transitionTimingFunction: _motion.easeOut
});
var draggingStyles = (0, _react.css)({
  width: 6,
  background: "var(--ds-background-neutral-subtle, #00000000)",
  insetInlineStart: "var(--ds-space-negative-075, -6px)",
  opacity: 0.8
});
var Shadow = function Shadow(_ref) {
  var testId = _ref.testId;
  var isDragging = (0, _hooks.useIsSidebarDragging)();
  return (0, _react.jsx)("div", {
    "data-testid": testId,
    css: [shadowStyles, isDragging && draggingStyles]
  });
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = Shadow;