@storybook/design-system/dist/components/clipboard/ClipboardInput.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ClipboardInput = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _Input = require("../Input");

var _ClipboardIcon = require("./ClipboardIcon");

var _excluded = ["value"];

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Container = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "eh4vpro2"
} : {
  target: "eh4vpro2",
  label: "Container"
})(process.env.NODE_ENV === "production" ? {
  name: "bjn8wh",
  styles: "position:relative"
} : {
  name: "bjn8wh",
  styles: "position:relative",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var StyledInput = ( /*#__PURE__*/0, _theming.styled)(_Input.Input, process.env.NODE_ENV === "production" ? {
  target: "eh4vpro1"
} : {
  target: "eh4vpro1",
  label: "StyledInput"
})(process.env.NODE_ENV === "production" ? {
  name: "1364kfl",
  styles: "width:100%;display:block;&& input{padding-right:32px!important;}"
} : {
  name: "1364kfl",
  styles: "width:100%;display:block;&& input{padding-right:32px!important;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var StyledClipboardIcon = ( /*#__PURE__*/0, _theming.styled)(_ClipboardIcon.ClipboardIcon, process.env.NODE_ENV === "production" ? {
  target: "eh4vpro0"
} : {
  target: "eh4vpro0",
  label: "StyledClipboardIcon"
})(process.env.NODE_ENV === "production" ? {
  name: "syo281",
  styles: "position:absolute;top:0px;right:0px"
} : {
  name: "syo281",
  styles: "position:absolute;top:0px;right:0px",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

var ClipboardInput = function ClipboardInput(_ref) {
  var value = _ref.value,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(StyledInput, (0, _extends2["default"])({
    id: "clipboard-input"
  }, props, {
    icon: undefined,
    hideLabel: true,
    value: value,
    appearance: "code",
    readOnly: true
  })), /*#__PURE__*/_react["default"].createElement(StyledClipboardIcon, {
    toCopy: value
  }));
};

exports.ClipboardInput = ClipboardInput;