@flodesk/grain 11.62.0 → 11.63.1

package/es/components/ghost-input.js

@@ -0,0 +1,124 @@
+import _styled from "@emotion/styled/base";
+const _excluded = ["value", "placeholder", "id", "type", "prefix", "isTabular", "hasEllipsis"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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)."; }
+
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { Box } from '.';
+import { useWidth } from '../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const InputField = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "production" ? {
+  target: "e1sllfu02"
+} : {
+  target: "e1sllfu02",
+  label: "InputField"
+})("--pad:var(--grn-space-s);--padLeft:", _ref => {
+  let {
+    prefixWidth
+  } = _ref;
+  return Boolean(prefixWidth) ? "calc(".concat(prefixWidth, "px + var(--pad))") : 'var(--pad)';
+}, ";appearance:none;background:transparent;display:block;font:inherit;color:inherit;border:none;position:absolute;width:calc(100% + var(--pad) * 2);left:calc(-1 * var(--pad));border:none;margin:auto;top:0;bottom:0;box-shadow:inset 0 0 0 1px transparent;border-radius:var(--grn-radius-s);transition:box-shadow var(--grn-transition-leave);padding-block:0;padding-left:var(--padLeft);padding-right:var(--pad);height:calc(var(--pad) * 2 + var(--grn-cap));", _ref2 => {
+  let {
+    hasEllipsis
+  } = _ref2;
+  return hasEllipsis && "text-overflow: ellipsis";
+}, ";", _ref3 => {
+  let {
+    isTabular
+  } = _ref3;
+  return isTabular && "font-feature-settings: 'tnum'";
+}, ";&:hover{box-shadow:inset 0 0 0 1px var(--grn-field-border-color-hover);transition:var(--grn-transition-hover);}&:focus{outline:none;box-shadow:inset 0 0 0 1px var(--grn-field-border-color-focus);transition:var(--grn-transition-active);}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2dob3N0LWlucHV0LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNK0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvZ2hvc3QtaW5wdXQuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVdpZHRoIH0gZnJvbSAnLi4vaG9va3MnO1xuXG5jb25zdCBJbnB1dEZpZWxkID0gc3R5bGVkLmlucHV0YFxuICAtLXBhZDogdmFyKC0tZ3JuLXNwYWNlLXMpO1xuICAtLXBhZExlZnQ6ICR7KHsgcHJlZml4V2lkdGggfSkgPT5cbiAgICBCb29sZWFuKHByZWZpeFdpZHRoKSA/IGBjYWxjKCR7cHJlZml4V2lkdGh9cHggKyB2YXIoLS1wYWQpKWAgOiAndmFyKC0tcGFkKSd9O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBibG9jaztcbiAgZm9udDogaW5oZXJpdDtcbiAgY29sb3I6IGluaGVyaXQ7XG4gIGJvcmRlcjogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogY2FsYygxMDAlICsgdmFyKC0tcGFkKSAqIDIpO1xuICBsZWZ0OiBjYWxjKC0xICogdmFyKC0tcGFkKSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgbWFyZ2luOiBhdXRvO1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHRyYW5zcGFyZW50O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ncm4tcmFkaXVzLXMpO1xuICB0cmFuc2l0aW9uOiBib3gtc2hhZG93IHZhcigtLWdybi10cmFuc2l0aW9uLWxlYXZlKTtcbiAgcGFkZGluZy1ibG9jazogMDtcbiAgcGFkZGluZy1sZWZ0OiB2YXIoLS1wYWRMZWZ0KTtcbiAgcGFkZGluZy1yaWdodDogdmFyKC0tcGFkKTtcbiAgaGVpZ2h0OiBjYWxjKHZhcigtLXBhZCkgKiAyICsgdmFyKC0tZ3JuLWNhcCkpO1xuXG4gICR7KHsgaGFzRWxsaXBzaXMgfSkgPT4gaGFzRWxsaXBzaXMgJiYgYHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzYH07XG4gICR7KHsgaXNUYWJ1bGFyIH0pID0+IGlzVGFidWxhciAmJiBgZm9udC1mZWF0dXJlLXNldHRpbmdzOiAndG51bSdgfTtcblxuICAmOmhvdmVyIHtcbiAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAxcHggdmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvci1ob3Zlcik7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JuLXRyYW5zaXRpb24taG92ZXIpO1xuICB9XG4gICY6Zm9jdXMge1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItZm9jdXMpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG4gIH1cblxuICAmW3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuICAmW3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcbiAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgbWFyZ2luOiAwO1xuICB9XG4gICZbdHlwZT0nbnVtYmVyJ10ge1xuICAgIC1tb3otYXBwZWFyYW5jZTogdGV4dGZpZWxkO1xuICB9XG5gO1xuXG5jb25zdCBWYWx1ZVBsYWNlID0gc3R5bGVkLmRpdmBcbiAgLS1wYWQ6IHZhcigtLWdybi1zcGFjZS1zKTtcblxuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIGhlaWdodDogMXB4OyAvLyBwcmV2ZW50IHNpemUgY29sbGFwc2Ugd2hlbiBubyB2YWx1ZVxuICBtaW4td2lkdGg6ICR7KHsgcHJlZml4V2lkdGggfSkgPT5cbiAgICBCb29sZWFuKHByZWZpeFdpZHRoKVxuICAgICAgPyBgJHtwcmVmaXhXaWR0aCArIDF9cHhgIC8vIGVub3VnaCB3aWR0aCBzbyB0aGUgdGV4dCBjdXJzb3IgaXMgdmlzaWJsZVxuICAgICAgOiBgMXB4YH07XG4gICR7KHsgaXNUYWJ1bGFyIH0pID0+IGlzVGFidWxhciAmJiBgZm9udC1mZWF0dXJlLXNldHRpbmdzOiAndG51bSdgfTtcbmA7XG5cbmNvbnN0IFByZWZpeCA9IHN0eWxlZC5zcGFuYFxuICBsaW5lLWhlaWdodDogMS4zO1xuICBkaXNwbGF5OiBibG9jaztcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50Mik7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBib3R0b206IDA7XG4gIG1hcmdpbjogYXV0bztcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbmA7XG5cbmV4cG9ydCBjb25zdCBHaG9zdElucHV0ID0gUmVhY3QuZm9yd2FyZFJlZihmdW5jdGlvbiBUZXh0SW5wdXQoXG4gIHsgdmFsdWUsIHBsYWNlaG9sZGVyLCBpZCwgdHlwZSA9ICd0ZXh0JywgcHJlZml4LCBpc1RhYnVsYXIgPSB0cnVlLCBoYXNFbGxpcHNpcywgLi4ucHJvcHMgfSxcbiAgcmVmLFxuKSB7XG4gIGNvbnN0IHByZWZpeFJlZiA9IHVzZVJlZihudWxsKTtcbiAgY29uc3QgW3ByZWZpeFdpZHRoLCBzZXRQcmVmaXhXaWR0aF0gPSB1c2VTdGF0ZSgwKTtcblxuICBjb25zdCBwcmVmaXhSZWZXaWR0aCA9IHVzZVdpZHRoKHByZWZpeFJlZik7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoQm9vbGVhbihwcmVmaXgpKSB7XG4gICAgICBzZXRQcmVmaXhXaWR0aChwcmVmaXhSZWZXaWR0aCk7XG4gICAgfVxuICB9LCBbcHJlZml4V2lkdGhdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiIHdpZHRoPVwiZml0LWNvbnRlbnRcIiBtYXhXaWR0aD1cIjEwMCVcIj5cbiAgICAgIHtwcmVmaXggJiYgPFByZWZpeCByZWY9e3ByZWZpeFJlZn0+e3ByZWZpeH08L1ByZWZpeD59XG4gICAgICA8SW5wdXRGaWVsZFxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgaWQ9e2lkfVxuICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgcHJlZml4V2lkdGg9e3ByZWZpeFdpZHRofVxuICAgICAgICBpc1RhYnVsYXI9e2lzVGFidWxhcn1cbiAgICAgICAgaGFzRWxsaXBzaXM9e2hhc0VsbGlwc2lzfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAvPlxuICAgICAgPFZhbHVlUGxhY2VcbiAgICAgICAgaGFzQ29udGVudD17Qm9vbGVhbih2YWx1ZSkgfHwgQm9vbGVhbihwbGFjZWhvbGRlcil9XG4gICAgICAgIHByZWZpeFdpZHRoPXtwcmVmaXhXaWR0aH1cbiAgICAgICAgaXNUYWJ1bGFyPXtpc1RhYnVsYXJ9XG4gICAgICA+XG4gICAgICAgIHtwcmVmaXggPyBwcmVmaXggOiBudWxsfVxuICAgICAgICB7dmFsdWUgfHwgcGxhY2Vob2xkZXJ9XG4gICAgICA8L1ZhbHVlUGxhY2U+XG4gICAgPC9Cb3g+XG4gICk7XG59KTtcblxuR2hvc3RJbnB1dC5wcm9wVHlwZXMgPSB7XG4gIHZhbHVlOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubnVtYmVyXSksXG4gIHBsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBpZDogUHJvcFR5cGVzLnN0cmluZyxcbiAgdHlwZTogUHJvcFR5cGVzLm9uZU9mKFsndGV4dCcsICdudW1iZXInXSksXG4gIHByZWZpeDogUHJvcFR5cGVzLnN0cmluZyxcbiAgaXNUYWJ1bGFyOiBQcm9wVHlwZXMuYm9vbCxcbiAgaGFzRWxsaXBzaXM6IFByb3BUeXBlcy5ib29sLFxufTtcbiJdfQ== */"));
+
+const ValuePlace = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1sllfu01"
+} : {
+  target: "e1sllfu01",
+  label: "ValuePlace"
+})("--pad:var(--grn-space-s);display:block;opacity:0;pointer-events:none;height:1px;min-width:", _ref4 => {
+  let {
+    prefixWidth
+  } = _ref4;
+  return Boolean(prefixWidth) ? "".concat(prefixWidth + 1, "px") // enough width so the text cursor is visible
+  : "1px";
+}, ";", _ref5 => {
+  let {
+    isTabular
+  } = _ref5;
+  return isTabular && "font-feature-settings: 'tnum'";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2dob3N0LWlucHV0LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RDZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2dob3N0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VXaWR0aCB9IGZyb20gJy4uL2hvb2tzJztcblxuY29uc3QgSW5wdXRGaWVsZCA9IHN0eWxlZC5pbnB1dGBcbiAgLS1wYWQ6IHZhcigtLWdybi1zcGFjZS1zKTtcbiAgLS1wYWRMZWZ0OiAkeyh7IHByZWZpeFdpZHRoIH0pID0+XG4gICAgQm9vbGVhbihwcmVmaXhXaWR0aCkgPyBgY2FsYygke3ByZWZpeFdpZHRofXB4ICsgdmFyKC0tcGFkKSlgIDogJ3ZhcigtLXBhZCknfTtcblxuICBhcHBlYXJhbmNlOiBub25lO1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBib3JkZXI6IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IGNhbGMoMTAwJSArIHZhcigtLXBhZCkgKiAyKTtcbiAgbGVmdDogY2FsYygtMSAqIHZhcigtLXBhZCkpO1xuICBib3JkZXI6IG5vbmU7XG4gIG1hcmdpbjogYXV0bztcbiAgdG9wOiAwO1xuICBib3R0b206IDA7XG4gIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCB0cmFuc3BhcmVudDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyB2YXIoLS1ncm4tdHJhbnNpdGlvbi1sZWF2ZSk7XG4gIHBhZGRpbmctYmxvY2s6IDA7XG4gIHBhZGRpbmctbGVmdDogdmFyKC0tcGFkTGVmdCk7XG4gIHBhZGRpbmctcmlnaHQ6IHZhcigtLXBhZCk7XG4gIGhlaWdodDogY2FsYyh2YXIoLS1wYWQpICogMiArIHZhcigtLWdybi1jYXApKTtcblxuICAkeyh7IGhhc0VsbGlwc2lzIH0pID0+IGhhc0VsbGlwc2lzICYmIGB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpc2B9O1xuICAkeyh7IGlzVGFidWxhciB9KSA9PiBpc1RhYnVsYXIgJiYgYGZvbnQtZmVhdHVyZS1zZXR0aW5nczogJ3RudW0nYH07XG5cbiAgJjpob3ZlciB7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItaG92ZXIpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWhvdmVyKTtcbiAgfVxuICAmOmZvY3VzIHtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWZvY3VzKTtcbiAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1hY3RpdmUpO1xuICB9XG5cbiAgJlt0eXBlPSdudW1iZXInXTo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvbixcbiAgJlt0eXBlPSdudW1iZXInXTo6LXdlYmtpdC1pbm5lci1zcGluLWJ1dHRvbiB7XG4gICAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xuICAgIG1hcmdpbjogMDtcbiAgfVxuICAmW3R5cGU9J251bWJlciddIHtcbiAgICAtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcbiAgfVxuYDtcblxuY29uc3QgVmFsdWVQbGFjZSA9IHN0eWxlZC5kaXZgXG4gIC0tcGFkOiB2YXIoLS1ncm4tc3BhY2Utcyk7XG5cbiAgZGlzcGxheTogYmxvY2s7XG4gIG9wYWNpdHk6IDA7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBoZWlnaHQ6IDFweDsgLy8gcHJldmVudCBzaXplIGNvbGxhcHNlIHdoZW4gbm8gdmFsdWVcbiAgbWluLXdpZHRoOiAkeyh7IHByZWZpeFdpZHRoIH0pID0+XG4gICAgQm9vbGVhbihwcmVmaXhXaWR0aClcbiAgICAgID8gYCR7cHJlZml4V2lkdGggKyAxfXB4YCAvLyBlbm91Z2ggd2lkdGggc28gdGhlIHRleHQgY3Vyc29yIGlzIHZpc2libGVcbiAgICAgIDogYDFweGB9O1xuICAkeyh7IGlzVGFidWxhciB9KSA9PiBpc1RhYnVsYXIgJiYgYGZvbnQtZmVhdHVyZS1zZXR0aW5nczogJ3RudW0nYH07XG5gO1xuXG5jb25zdCBQcmVmaXggPSBzdHlsZWQuc3BhbmBcbiAgbGluZS1oZWlnaHQ6IDEuMztcbiAgZGlzcGxheTogYmxvY2s7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgYm90dG9tOiAwO1xuICBtYXJnaW46IGF1dG87XG4gIGhlaWdodDogZml0LWNvbnRlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgR2hvc3RJbnB1dCA9IFJlYWN0LmZvcndhcmRSZWYoZnVuY3Rpb24gVGV4dElucHV0KFxuICB7IHZhbHVlLCBwbGFjZWhvbGRlciwgaWQsIHR5cGUgPSAndGV4dCcsIHByZWZpeCwgaXNUYWJ1bGFyID0gdHJ1ZSwgaGFzRWxsaXBzaXMsIC4uLnByb3BzIH0sXG4gIHJlZixcbikge1xuICBjb25zdCBwcmVmaXhSZWYgPSB1c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtwcmVmaXhXaWR0aCwgc2V0UHJlZml4V2lkdGhdID0gdXNlU3RhdGUoMCk7XG5cbiAgY29uc3QgcHJlZml4UmVmV2lkdGggPSB1c2VXaWR0aChwcmVmaXhSZWYpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKEJvb2xlYW4ocHJlZml4KSkge1xuICAgICAgc2V0UHJlZml4V2lkdGgocHJlZml4UmVmV2lkdGgpO1xuICAgIH1cbiAgfSwgW3ByZWZpeFdpZHRoXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIiB3aWR0aD1cImZpdC1jb250ZW50XCIgbWF4V2lkdGg9XCIxMDAlXCI+XG4gICAgICB7cHJlZml4ICYmIDxQcmVmaXggcmVmPXtwcmVmaXhSZWZ9PntwcmVmaXh9PC9QcmVmaXg+fVxuICAgICAgPElucHV0RmllbGRcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgIHByZWZpeFdpZHRoPXtwcmVmaXhXaWR0aH1cbiAgICAgICAgaXNUYWJ1bGFyPXtpc1RhYnVsYXJ9XG4gICAgICAgIGhhc0VsbGlwc2lzPXtoYXNFbGxpcHNpc31cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgLz5cbiAgICAgIDxWYWx1ZVBsYWNlXG4gICAgICAgIGhhc0NvbnRlbnQ9e0Jvb2xlYW4odmFsdWUpIHx8IEJvb2xlYW4ocGxhY2Vob2xkZXIpfVxuICAgICAgICBwcmVmaXhXaWR0aD17cHJlZml4V2lkdGh9XG4gICAgICAgIGlzVGFidWxhcj17aXNUYWJ1bGFyfVxuICAgICAgPlxuICAgICAgICB7cHJlZml4ID8gcHJlZml4IDogbnVsbH1cbiAgICAgICAge3ZhbHVlIHx8IHBsYWNlaG9sZGVyfVxuICAgICAgPC9WYWx1ZVBsYWNlPlxuICAgIDwvQm94PlxuICApO1xufSk7XG5cbkdob3N0SW5wdXQucHJvcFR5cGVzID0ge1xuICB2YWx1ZTogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm51bWJlcl0pLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHR5cGU6IFByb3BUeXBlcy5vbmVPZihbJ3RleHQnLCAnbnVtYmVyJ10pLFxuICBwcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzVGFidWxhcjogUHJvcFR5cGVzLmJvb2wsXG4gIGhhc0VsbGlwc2lzOiBQcm9wVHlwZXMuYm9vbCxcbn07XG4iXX0= */"));
+
+const Prefix = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
+  target: "e1sllfu00"
+} : {
+  target: "e1sllfu00",
+  label: "Prefix"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ancm86",
+  styles: "line-height:1.3;display:block;color:var(--grn-color-content2);position:absolute;top:0;bottom:0;margin:auto;height:fit-content"
+} : {
+  name: "1ancm86",
+  styles: "line-height:1.3;display:block;color:var(--grn-color-content2);position:absolute;top:0;bottom:0;margin:auto;height:fit-content",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2dob3N0LWlucHV0LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRTBCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2dob3N0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VXaWR0aCB9IGZyb20gJy4uL2hvb2tzJztcblxuY29uc3QgSW5wdXRGaWVsZCA9IHN0eWxlZC5pbnB1dGBcbiAgLS1wYWQ6IHZhcigtLWdybi1zcGFjZS1zKTtcbiAgLS1wYWRMZWZ0OiAkeyh7IHByZWZpeFdpZHRoIH0pID0+XG4gICAgQm9vbGVhbihwcmVmaXhXaWR0aCkgPyBgY2FsYygke3ByZWZpeFdpZHRofXB4ICsgdmFyKC0tcGFkKSlgIDogJ3ZhcigtLXBhZCknfTtcblxuICBhcHBlYXJhbmNlOiBub25lO1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBib3JkZXI6IG5vbmU7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IGNhbGMoMTAwJSArIHZhcigtLXBhZCkgKiAyKTtcbiAgbGVmdDogY2FsYygtMSAqIHZhcigtLXBhZCkpO1xuICBib3JkZXI6IG5vbmU7XG4gIG1hcmdpbjogYXV0bztcbiAgdG9wOiAwO1xuICBib3R0b206IDA7XG4gIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCB0cmFuc3BhcmVudDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyB2YXIoLS1ncm4tdHJhbnNpdGlvbi1sZWF2ZSk7XG4gIHBhZGRpbmctYmxvY2s6IDA7XG4gIHBhZGRpbmctbGVmdDogdmFyKC0tcGFkTGVmdCk7XG4gIHBhZGRpbmctcmlnaHQ6IHZhcigtLXBhZCk7XG4gIGhlaWdodDogY2FsYyh2YXIoLS1wYWQpICogMiArIHZhcigtLWdybi1jYXApKTtcblxuICAkeyh7IGhhc0VsbGlwc2lzIH0pID0+IGhhc0VsbGlwc2lzICYmIGB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpc2B9O1xuICAkeyh7IGlzVGFidWxhciB9KSA9PiBpc1RhYnVsYXIgJiYgYGZvbnQtZmVhdHVyZS1zZXR0aW5nczogJ3RudW0nYH07XG5cbiAgJjpob3ZlciB7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItaG92ZXIpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWhvdmVyKTtcbiAgfVxuICAmOmZvY3VzIHtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWZvY3VzKTtcbiAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1hY3RpdmUpO1xuICB9XG5cbiAgJlt0eXBlPSdudW1iZXInXTo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvbixcbiAgJlt0eXBlPSdudW1iZXInXTo6LXdlYmtpdC1pbm5lci1zcGluLWJ1dHRvbiB7XG4gICAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xuICAgIG1hcmdpbjogMDtcbiAgfVxuICAmW3R5cGU9J251bWJlciddIHtcbiAgICAtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcbiAgfVxuYDtcblxuY29uc3QgVmFsdWVQbGFjZSA9IHN0eWxlZC5kaXZgXG4gIC0tcGFkOiB2YXIoLS1ncm4tc3BhY2Utcyk7XG5cbiAgZGlzcGxheTogYmxvY2s7XG4gIG9wYWNpdHk6IDA7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBoZWlnaHQ6IDFweDsgLy8gcHJldmVudCBzaXplIGNvbGxhcHNlIHdoZW4gbm8gdmFsdWVcbiAgbWluLXdpZHRoOiAkeyh7IHByZWZpeFdpZHRoIH0pID0+XG4gICAgQm9vbGVhbihwcmVmaXhXaWR0aClcbiAgICAgID8gYCR7cHJlZml4V2lkdGggKyAxfXB4YCAvLyBlbm91Z2ggd2lkdGggc28gdGhlIHRleHQgY3Vyc29yIGlzIHZpc2libGVcbiAgICAgIDogYDFweGB9O1xuICAkeyh7IGlzVGFidWxhciB9KSA9PiBpc1RhYnVsYXIgJiYgYGZvbnQtZmVhdHVyZS1zZXR0aW5nczogJ3RudW0nYH07XG5gO1xuXG5jb25zdCBQcmVmaXggPSBzdHlsZWQuc3BhbmBcbiAgbGluZS1oZWlnaHQ6IDEuMztcbiAgZGlzcGxheTogYmxvY2s7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgYm90dG9tOiAwO1xuICBtYXJnaW46IGF1dG87XG4gIGhlaWdodDogZml0LWNvbnRlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgR2hvc3RJbnB1dCA9IFJlYWN0LmZvcndhcmRSZWYoZnVuY3Rpb24gVGV4dElucHV0KFxuICB7IHZhbHVlLCBwbGFjZWhvbGRlciwgaWQsIHR5cGUgPSAndGV4dCcsIHByZWZpeCwgaXNUYWJ1bGFyID0gdHJ1ZSwgaGFzRWxsaXBzaXMsIC4uLnByb3BzIH0sXG4gIHJlZixcbikge1xuICBjb25zdCBwcmVmaXhSZWYgPSB1c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtwcmVmaXhXaWR0aCwgc2V0UHJlZml4V2lkdGhdID0gdXNlU3RhdGUoMCk7XG5cbiAgY29uc3QgcHJlZml4UmVmV2lkdGggPSB1c2VXaWR0aChwcmVmaXhSZWYpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKEJvb2xlYW4ocHJlZml4KSkge1xuICAgICAgc2V0UHJlZml4V2lkdGgocHJlZml4UmVmV2lkdGgpO1xuICAgIH1cbiAgfSwgW3ByZWZpeFdpZHRoXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIiB3aWR0aD1cImZpdC1jb250ZW50XCIgbWF4V2lkdGg9XCIxMDAlXCI+XG4gICAgICB7cHJlZml4ICYmIDxQcmVmaXggcmVmPXtwcmVmaXhSZWZ9PntwcmVmaXh9PC9QcmVmaXg+fVxuICAgICAgPElucHV0RmllbGRcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgIHByZWZpeFdpZHRoPXtwcmVmaXhXaWR0aH1cbiAgICAgICAgaXNUYWJ1bGFyPXtpc1RhYnVsYXJ9XG4gICAgICAgIGhhc0VsbGlwc2lzPXtoYXNFbGxpcHNpc31cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgLz5cbiAgICAgIDxWYWx1ZVBsYWNlXG4gICAgICAgIGhhc0NvbnRlbnQ9e0Jvb2xlYW4odmFsdWUpIHx8IEJvb2xlYW4ocGxhY2Vob2xkZXIpfVxuICAgICAgICBwcmVmaXhXaWR0aD17cHJlZml4V2lkdGh9XG4gICAgICAgIGlzVGFidWxhcj17aXNUYWJ1bGFyfVxuICAgICAgPlxuICAgICAgICB7cHJlZml4ID8gcHJlZml4IDogbnVsbH1cbiAgICAgICAge3ZhbHVlIHx8IHBsYWNlaG9sZGVyfVxuICAgICAgPC9WYWx1ZVBsYWNlPlxuICAgIDwvQm94PlxuICApO1xufSk7XG5cbkdob3N0SW5wdXQucHJvcFR5cGVzID0ge1xuICB2YWx1ZTogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLnN0cmluZywgUHJvcFR5cGVzLm51bWJlcl0pLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHR5cGU6IFByb3BUeXBlcy5vbmVPZihbJ3RleHQnLCAnbnVtYmVyJ10pLFxuICBwcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzVGFidWxhcjogUHJvcFR5cGVzLmJvb2wsXG4gIGhhc0VsbGlwc2lzOiBQcm9wVHlwZXMuYm9vbCxcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+export const GhostInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref6, ref) {
+  let {
+    value,
+    placeholder,
+    id,
+    type = 'text',
+    prefix,
+    isTabular = true,
+    hasEllipsis
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded);
+
+  const prefixRef = useRef(null);
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const prefixRefWidth = useWidth(prefixRef);
+  useEffect(() => {
+    if (Boolean(prefix)) {
+      setPrefixWidth(prefixRefWidth);
+    }
+  }, [prefixWidth]);
+  return ___EmotionJSX(Box, {
+    position: "relative",
+    width: "fit-content",
+    maxWidth: "100%"
+  }, prefix && ___EmotionJSX(Prefix, {
+    ref: prefixRef
+  }, prefix), ___EmotionJSX(InputField, _extends({
+    ref: ref,
+    type: type,
+    id: id,
+    value: value,
+    placeholder: placeholder,
+    prefixWidth: prefixWidth,
+    isTabular: isTabular,
+    hasEllipsis: hasEllipsis
+  }, props)), ___EmotionJSX(ValuePlace, {
+    hasContent: Boolean(value) || Boolean(placeholder),
+    prefixWidth: prefixWidth,
+    isTabular: isTabular
+  }, prefix ? prefix : null, value || placeholder));
+});
+GhostInput.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  placeholder: PropTypes.string,
+  id: PropTypes.string,
+  type: PropTypes.oneOf(['text', 'number']),
+  prefix: PropTypes.string,
+  isTabular: PropTypes.bool,
+  hasEllipsis: PropTypes.bool
+};

package/es/components/index.js

@@ -31,4 +31,5 @@ export { Flex } from './flex';
 export { Badge } from './badge';
 export { Toast } from './toast';
 export { Radio } from './radio';
-export { Card } from './card';
+export { Card } from './card';
+export { GhostInput } from './ghost-input';

package/es/types/components/text.d.ts

@@ -6,6 +6,7 @@ import {
   TextDisplayType,
   TextAlignType,
   TextWeightPropType,
+  TextWrapType,
 } from '../shared';
 import { textTag } from '../../types';
 
@@ -21,8 +22,10 @@ export interface TextProps extends HTMLAttributes<HTMLDivElement> {
   align?: TextAlignType;
   letterSpacing?: string;
   textTransform?: TextTransformType;
+  textWrap?: TextWrapType;
   variant?: 'caps';
   trimTop?: boolean;
+  trimBottom?: boolean;
   className?: string;
   style?: React.CSSProperties;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.62.0",
+  "version": "11.63.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",