UNPKG

@dekk-ui/input-field

Version:
86 lines (74 loc) 9.95 kB
/*! * Copyright (c) Dekk * @author Gregor Adams * @license MIT * @name @dekk-ui/input-field * @version 0.8.0 * @see git+https://github.com/dekk-app/design-system.git */ import React, { forwardRef } from 'react'; import _styled from '@emotion/styled/base'; import { focus } from '@dekk-ui/focus-ring'; import { pxToRem } from '@dekk-ui/utils/px-to-rem'; import { css } from '@emotion/react'; function getDefaultExportFromCjs (x) { return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; } var _extends$1 = {exports: {}}; (function (module) { function _extends() { module.exports = _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; module.exports["default"] = module.exports, module.exports.__esModule = true; return _extends.apply(this, arguments); } module.exports = _extends; module.exports["default"] = module.exports, module.exports.__esModule = true; }(_extends$1)); var _extends = /*@__PURE__*/getDefaultExportFromCjs(_extends$1.exports); 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)."; } const StyledInput = _styled("input", process.env.NODE_ENV === "production" ? { target: "eeflk211" } : { target: "eeflk211", label: "StyledInput" })("display:flex;align-content:center;align-items:center;overflow:hidden;position:relative;border:0;appearance:none;font-size:", pxToRem(16), ";font-family:inherit;&:focus{outline:0;}&[disabled]{opacity:0.5;pointer-events:none;}", ({ theme, fullWidth, width, textAlign }) => /*#__PURE__*/css("width:", fullWidth ? "100%" : width || "auto", ";min-width:", pxToRem(theme.space.l), ";height:", pxToRem(theme.space.l), ";padding:", pxToRem(theme.space.xxs), " ", pxToRem(theme.space.xs), ";border-radius:", pxToRem(theme.radius.s), ";background:", theme.ui.fill["2"], ";color:", theme.ui.text["1"], ";box-shadow:inset 0 0 0 1px ", theme.ui.outline["1"], ";text-align:", textAlign, ";&:focus{", focus, ";}&:invalid{box-shadow:inset 0 0 0 1px red;}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyledInput;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Qm1EIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvY3VzIH0gZnJvbSBcIkBkZWtrLXVpL2ZvY3VzLXJpbmdcIjtcbmltcG9ydCB7IHB4VG9SZW0gfSBmcm9tIFwiQGRla2stdWkvdXRpbHMvcHgtdG8tcmVtXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0IGBcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24tY29udGVudDogY2VudGVyO1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGJvcmRlcjogMDtcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Zm9udC1zaXplOiAke3B4VG9SZW0oMTYpfTtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0Jjpmb2N1cyB7XG5cdFx0b3V0bGluZTogMDtcblx0fVxuXG5cdCZbZGlzYWJsZWRdIHtcblx0XHRvcGFjaXR5OiAwLjU7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cblxuXHQkeyh7IHRoZW1lLCBmdWxsV2lkdGgsIHdpZHRoLCB0ZXh0QWxpZ24gfSkgPT4gY3NzIGBcblx0XHR3aWR0aDogJHtmdWxsV2lkdGggPyBcIjEwMCVcIiA6IHdpZHRoIHx8IFwiYXV0b1wifTtcblx0XHRtaW4td2lkdGg6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS5sKX07XG5cdFx0aGVpZ2h0OiAke3B4VG9SZW0odGhlbWUuc3BhY2UubCl9O1xuXHRcdHBhZGRpbmc6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS54eHMpfSAke3B4VG9SZW0odGhlbWUuc3BhY2UueHMpfTtcblx0XHRib3JkZXItcmFkaXVzOiAke3B4VG9SZW0odGhlbWUucmFkaXVzLnMpfTtcblx0XHRiYWNrZ3JvdW5kOiAke3RoZW1lLnVpLmZpbGxbXCIyXCJdfTtcblx0XHRjb2xvcjogJHt0aGVtZS51aS50ZXh0W1wiMVwiXX07XG5cdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4ICR7dGhlbWUudWkub3V0bGluZVtcIjFcIl19O1xuXHRcdHRleHQtYWxpZ246ICR7dGV4dEFsaWdufTtcblxuXHRcdCY6Zm9jdXMge1xuXHRcdFx0JHtmb2N1c307XG5cdFx0fVxuXG5cdFx0JjppbnZhbGlkIHtcblx0XHRcdGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCByZWQ7IC8vIEB0b2RvIGFkZCBicmFuZCBjb2xvclxuXHRcdH1cblx0YH07XG5gO1xuZXhwb3J0IGNvbnN0IFN0eWxlZE51bWJlcklucHV0ID0gc3R5bGVkKFN0eWxlZElucHV0KSBgXG5cdCZbdHlwZT1cIm51bWJlclwiXSB7XG5cdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cblx0XHQmOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLFxuXHRcdCY6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0bWFyZ2luOiAwO1xuXHRcdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHR9XG5cdH1cbmA7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZWQuanMubWFwIl19 */"), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJd0MiLCJmaWxlIjoic3R5bGVkLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZm9jdXMgfSBmcm9tIFwiQGRla2stdWkvZm9jdXMtcmluZ1wiO1xuaW1wb3J0IHsgcHhUb1JlbSB9IGZyb20gXCJAZGVray11aS91dGlscy9weC10by1yZW1cIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQuaW5wdXQgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1jb250ZW50OiBjZW50ZXI7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Ym9yZGVyOiAwO1xuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRmb250LXNpemU6ICR7cHhUb1JlbSgxNil9O1xuXHRmb250LWZhbWlseTogaW5oZXJpdDtcblxuXHQmOmZvY3VzIHtcblx0XHRvdXRsaW5lOiAwO1xuXHR9XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNTtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0fVxuXG5cdCR7KHsgdGhlbWUsIGZ1bGxXaWR0aCwgd2lkdGgsIHRleHRBbGlnbiB9KSA9PiBjc3MgYFxuXHRcdHdpZHRoOiAke2Z1bGxXaWR0aCA/IFwiMTAwJVwiIDogd2lkdGggfHwgXCJhdXRvXCJ9O1xuXHRcdG1pbi13aWR0aDogJHtweFRvUmVtKHRoZW1lLnNwYWNlLmwpfTtcblx0XHRoZWlnaHQ6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS5sKX07XG5cdFx0cGFkZGluZzogJHtweFRvUmVtKHRoZW1lLnNwYWNlLnh4cyl9ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS54cyl9O1xuXHRcdGJvcmRlci1yYWRpdXM6ICR7cHhUb1JlbSh0aGVtZS5yYWRpdXMucyl9O1xuXHRcdGJhY2tncm91bmQ6ICR7dGhlbWUudWkuZmlsbFtcIjJcIl19O1xuXHRcdGNvbG9yOiAke3RoZW1lLnVpLnRleHRbXCIxXCJdfTtcblx0XHRib3gtc2hhZG93OiBpbnNldCAwIDAgMCAxcHggJHt0aGVtZS51aS5vdXRsaW5lW1wiMVwiXX07XG5cdFx0dGV4dC1hbGlnbjogJHt0ZXh0QWxpZ259O1xuXG5cdFx0Jjpmb2N1cyB7XG5cdFx0XHQke2ZvY3VzfTtcblx0XHR9XG5cblx0XHQmOmludmFsaWQge1xuXHRcdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHJlZDsgLy8gQHRvZG8gYWRkIGJyYW5kIGNvbG9yXG5cdFx0fVxuXHRgfTtcbmA7XG5leHBvcnQgY29uc3QgU3R5bGVkTnVtYmVySW5wdXQgPSBzdHlsZWQoU3R5bGVkSW5wdXQpIGBcblx0Jlt0eXBlPVwibnVtYmVyXCJdIHtcblx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblxuXHRcdCY6Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24sXG5cdFx0Jjo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvbiB7XG5cdFx0XHRtYXJnaW46IDA7XG5cdFx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdH1cblx0fVxuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlZC5qcy5tYXAiXX0= */")); /*#__PURE__*/_styled(StyledInput, process.env.NODE_ENV === "production" ? { target: "eeflk210" } : { target: "eeflk210", label: "StyledNumberInput" })(process.env.NODE_ENV === "production" ? { name: "12sv7th", styles: "&[type=\"number\"]{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{margin:0;appearance:none;}}" } : { name: "12sv7th", styles: "&[type=\"number\"]{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{margin:0;appearance:none;}}", map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q3FEIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvY3VzIH0gZnJvbSBcIkBkZWtrLXVpL2ZvY3VzLXJpbmdcIjtcbmltcG9ydCB7IHB4VG9SZW0gfSBmcm9tIFwiQGRla2stdWkvdXRpbHMvcHgtdG8tcmVtXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0IGBcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24tY29udGVudDogY2VudGVyO1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGJvcmRlcjogMDtcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Zm9udC1zaXplOiAke3B4VG9SZW0oMTYpfTtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0Jjpmb2N1cyB7XG5cdFx0b3V0bGluZTogMDtcblx0fVxuXG5cdCZbZGlzYWJsZWRdIHtcblx0XHRvcGFjaXR5OiAwLjU7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cblxuXHQkeyh7IHRoZW1lLCBmdWxsV2lkdGgsIHdpZHRoLCB0ZXh0QWxpZ24gfSkgPT4gY3NzIGBcblx0XHR3aWR0aDogJHtmdWxsV2lkdGggPyBcIjEwMCVcIiA6IHdpZHRoIHx8IFwiYXV0b1wifTtcblx0XHRtaW4td2lkdGg6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS5sKX07XG5cdFx0aGVpZ2h0OiAke3B4VG9SZW0odGhlbWUuc3BhY2UubCl9O1xuXHRcdHBhZGRpbmc6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS54eHMpfSAke3B4VG9SZW0odGhlbWUuc3BhY2UueHMpfTtcblx0XHRib3JkZXItcmFkaXVzOiAke3B4VG9SZW0odGhlbWUucmFkaXVzLnMpfTtcblx0XHRiYWNrZ3JvdW5kOiAke3RoZW1lLnVpLmZpbGxbXCIyXCJdfTtcblx0XHRjb2xvcjogJHt0aGVtZS51aS50ZXh0W1wiMVwiXX07XG5cdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4ICR7dGhlbWUudWkub3V0bGluZVtcIjFcIl19O1xuXHRcdHRleHQtYWxpZ246ICR7dGV4dEFsaWdufTtcblxuXHRcdCY6Zm9jdXMge1xuXHRcdFx0JHtmb2N1c307XG5cdFx0fVxuXG5cdFx0JjppbnZhbGlkIHtcblx0XHRcdGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCByZWQ7IC8vIEB0b2RvIGFkZCBicmFuZCBjb2xvclxuXHRcdH1cblx0YH07XG5gO1xuZXhwb3J0IGNvbnN0IFN0eWxlZE51bWJlcklucHV0ID0gc3R5bGVkKFN0eWxlZElucHV0KSBgXG5cdCZbdHlwZT1cIm51bWJlclwiXSB7XG5cdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cblx0XHQmOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLFxuXHRcdCY6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0bWFyZ2luOiAwO1xuXHRcdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHR9XG5cdH1cbmA7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZWQuanMubWFwIl19 */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); const TextInput = /*#__PURE__*/forwardRef((props, ref) => { return /*#__PURE__*/React.createElement(StyledInput, _extends({}, props, { ref: ref, type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false" })); }); export { TextInput };