@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/Image/Image.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.story.js","names":["React","Image","styled","Box","STORYBOOK_PROPS_BLOCKLIST","blurhashDataUri","component","title","tags","parameters","docs","description","controls","exclude","Default","args","id","className","width","height","src","fetchPriority","WithSrcSet","srcSet","WithPlaceholder","placeHolderURL","ImageLazyLoad","render","createElement","Fragment","Array","from","map","_","i","key","lazyLoad","concat","ImageLazyLoadSrcSet","ImageLazyLoadSrcSetPlaceHolderURL","StyledImage","withConfig","displayName","componentId","WithStyledImage","bg","WithCustomStyle","style","borderRadius","borderColor","borderWidth","borderStyle","EnsuresImageDoesNotCollapse"],"sources":["../../../../src/elements/Image/Image.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image } from \"../Image\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst blurhashDataUri =\n  \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAQK0lEQVR4AQEgEN/vAP////////////////////////z//vr3//r18f/17ur/7+fi/+ng2v/j2NH/3c/J/9fHwf/SwLn/zbmz/8m0rv/Hsav/xrCr/8eyrf/KtrH/zru3/9PDv//Zy8j/4NTR/+fd2v/u5+P/9O/r//r38////fn////+////////////AP////////////////////////v//vr2//n08P/07un/7+fi/+nf2f/j19H/3c/I/9fHwP/Rv7j/zLmy/8m0rf/Hsar/xrCq/8exrP/JtbD/zbu3/9LCvv/Zysf/39TQ/+bd2v/t5uP/9O/r//r28v///fn////+////////////AP///////////////////////vv//fn2//n08P/07en/7ubh/+je2P/i1s//283H/9XFvv/Qvbb/y7ew/8exq//Frqj/xK2o/8Wvqv/Hsq7/y7i1/9HAvf/XycX/3tLP/+Xc2P/t5eL/8+7q//r28v///fj////+////////////AP///////////////////v///fr//Pn1//jz7v/z7Of/7eXf/+fd1v/g1M3/2cvE/9PDu//NurP/yLOs/8Sup//BqqT/wamj/8Grpv/Er6r/yLWx/869uv/VxsP/3NDN/+Ta1//r5OD/8u3p//n18f/+/Pf////9////////////AP///////////////////v///Pn/+/f0//bx7f/x6uX/6+Pd/+Xa1P/e0cr/18jA/9C/t//Ktq7/xK+n/8Cpof+9pZ7/vKOe/72loP/AqaX/xLCs/8q4tf/Rwr//2c3K/+HX1P/p4d7/8evn//f07//9+/b////8////////////AP///////////////////f/++/j/+vby//Xw6//v6OP/6eDa/+LX0P/bzsb/08S8/8y6sv/Fsaj/v6mg/7uimv+3npf/tpyW/7eemf+6op7/v6qm/8WzsP/Nvbv/1cnG/97U0f/m39v/7unl//by7v/8+vX////7////////////AP/////////////////++//8+fb/+PTw//Pu6f/t5uD/5t3X/9/Uzf/XysL/z7+2/8i1q//Aq6H/uqGY/7Sakf+xlY3/r5ON/7CVkP+0mpb/uaKf/8Csqv/IuLb/0cTB/9rQzf/k3Nj/7Obj//Tw7P/7+PP////6/////v//////AP/////////////+//78+v/6+PX/9vLu//Hr5//q497/49rT/9zQyP/Uxbz/y7qw/8OvpP+6o5n/s5mP/62Rh/+pi4L/qImC/6iLhv+skI3/spmX/7qlo//Dsa//zL+9/9bMyf/g2NX/6uTg//Lu6v/59/L///74/////f//////AP////////////78//z6+f/59vP/9PDs/+7p5P/o4dr/4NfQ/9jMxP/Pwbf/xrSq/72onP+0m4//rJCE/6WGe/+hf3b/n3x1/6B/ef+khYL/qo+N/7Ocm/+9qqn/x7m3/9LHxf/d1dL/5+Hd//Ds5//49fD//vz3/////P//////AP///////v7//fz7//v59//39PH/8u7q/+zm4f/l3tf/3dTM/9XIv//LvLH/wa6i/7ehk/+uk4X/pYV4/516bf+Ycmf/lm5m/5dxa/+beXb/ooWD/6uTkv+2o6L/wrOy/87CwP/Z0c7/5N7a/+7q5f/28+7//Pv1////+v////7/AP7+/v/9/f3//Pv6//n39v/18vD/8Ozo/+rk3//j29T/2tDI/9HEuv/Ht6v/vaib/7KZiv+niXr/nXpq/5VtXf+PYlX/jF5U/41hW/+Sa2j/mnl4/6SJif+wm5v/va2s/8q9vP/Wzcr/4dvY/+zo4//08uz/+/r0////+f////z/APz8/f/8/Pz/+vn5//f29f/z8e7/7urm/+ji3P/g2NH/2M3E/87Atf/DsqX/uKKU/6ySgf+hgG7/lm5b/4xeSv+FUT//gks+/4NPSP+IW1n/kWxs/52AgP+qlJT/uKem/8a5uP/Tysf/39nV/+rm4f/z8Ov/+vny////+P////v/APv7/P/7+/v/+fj4//b08//y7+3/7Ojl/+bg2v/e1s7/1crB/8u8sf/AraD/tJ2N/6eKeP+bd2L/j2JL/4ROM/98PB7/eTQc/3o5MP+ASkj/iWBg/5Z2eP+kjI3/s6Gh/8K1tP/QxsT/3dbT/+jk3//y7+n/+fjx///+9/////v/APr6+//6+vr/+Pf3//Xz8v/w7uz/6+fj/+Te2P/c1Mz/08e+/8i5rf+9qZv/sJiH/6OEcP+Wblb/iVc4/309B/90IQD/cAgA/3EaAP94Nzb/g1NV/5BucP+ghof/r52d/7+xsP/OxMH/29TR/+fi3f/w7uj/+Pfw//7+9v////r/APn6+//5+fr/9/f3//Tz8v/v7ev/6ubi/+Pd1//b0sr/0cW7/8a3qv+7ppf/rpSB/6B/af+SZ0z/hEwj/3cqAP9uAAD/aQAA/2oAAP9xIR//fUhL/4xmaf+cgYP/rZma/72urv/Mwr//2dPP/+Xh3P/w7ef/+Pfw//799v////n/APn5+v/4+Pn/9vb2//Py8f/v7Or/6eXh/+Lc1v/a0cn/0MS6/8W1qP+5pJT/rJF+/557Y/+PYkP/gUMC/3QUAP9qAAD/ZQAA/2YAAP9tAAD/ej9D/4lhZP+afYD/q5aX/7utrP/LwL7/2dLO/+Xg2//v7ef/9/bv//399f////n/APj5+v/4+Pn/9vb2//Py8f/u7Or/6eTh/+Lb1f/Z0Mj/0MO5/8W0p/+4o5P/q497/515YP+OXz7/gD4A/3MAAP9oAAD/YwAA/2QAAP9sAAD/eTo+/4heYv+ZfH7/qpWW/7usq//KwL7/2NHO/+Xg2//v7Ob/9/bv//399f////n/APj5+v/4+Pn/9vb2//Py8f/u7Or/6eXh/+Lb1f/a0Mj/0MO5/8W0p/+5opL/rI97/554YP+PXj3/gT4A/3QAAP9qAAD/ZQAA/2YAAP9tAAD/ejs//4lfYv+afH7/q5aW/7usq//KwL7/2NHO/+Xg2//v7eb/9/bv//399f////n/APn6+//4+fr/9vb3//Py8f/v7Or/6eXh/+Lc1v/a0cn/0cO5/8a0qP+6o5T/rZB9/596Y/+RYUL/hEIA/3cSAP9uAAD/aQAA/2oAAP9yBwP/fUFE/4xjZv+cf4H/rJeY/7ytrf/Mwb//2dLP/+Xh3P/v7ef/+Pfw//399v////n/APn6+//5+vr/9/f3//Tz8v/w7ev/6ubi/+Pd1//b0sr/0sW7/8i2qv+8pZb/sJKA/6N9Z/+VZkr/iEof/30oAP90AAD/cAAA/3EAAP94JiP/g0tN/5Bpa/+gg4T/r5qb/7+wr//Nw8D/29TQ/+bi3f/w7uj/+Pfw//7+9v////r/APr7/P/5+vv/+Pj4//X08//w7uz/6+fj/+Xe2P/d08z/1Me9/8q4rP+/qJr/s5aF/6eCbv+abFT/jlQ1/4Q6AP98HwD/eQsA/3oeBP+AOzj/ilZX/5Zwcv+kiIn/s5+f/8Kzsv/QxcP/3NXS/+jj3v/x7+n/+fjx//7+9/////v/APv8/f/6/Pz/+fn5//b19P/y8O3/7ejl/+bg2v/f1c7/1snA/827sP/Cq57/t5qL/6yIdv+gdF//lV9H/4xLLv+FOhn/gjMa/4M7Mf+ITUr/kWNi/515ev+qj4//uKSj/8W3tf/TyMb/39jU/+nl4P/y8Or/+vny////+P////v/APz+/v/7/f3/+vr6//f39f/z8e//7urm/+jh3P/h19D/2cvD/9C+tP/Gr6P/vJ+R/7GOfv+mfGr/nWtX/5RaRv+PTjv/jEo8/41PSP+SXVr/mm9u/6SCgv+wlpb/vamo/8m7uf/Wy8n/4drW/+vn4v/08ez/+/r0////+f////z/AP3////9/v7/+/z7//j49v/18/D/8Ozo/+rj3v/k2tP/3M7G/9PCuP/KtKj/wKWY/7eVhv+thXX/pHVl/51oWP+YX1D/llxR/5dgWv+ba2j/onp5/6uLi/+2nZz/wq+u/86/vf/Zz8z/5N3Z/+3p5P/18+7//Pv1////+v////3/AP7////+/////P38//r6+P/29PL/8u7q/+zm4f/m3Nb/39HJ/9fFvP/OuK3/xaqe/7ybjv+0jX//rIBy/6V0Z/+hbWH/n2ti/6Bvaf+keHT/qoWD/7OUk/+9pKP/x7Wz/9LEwv/d0tD/5uDc/+/r5v/39e///fz2////+///////AP///////////v/9//v7+f/49vP/9PDs/+7o4//o39n/4tTN/9rJwP/SvLL/yq+k/8Kilv+6lYn/s4l9/61/dP+peW//qHhw/6l8dv+shID/so+M/7qdm//Dq6n/zLq4/9bIxv/g1tP/6eLf//Ht6f/49vH//v34/////f//////AP/////////////+//39+v/5+PX/9fHu//Dq5f/r4dv/5NfQ/93MxP/WwLf/zrSq/8eonf/AnJH/uZGG/7SJf/+xhHv/sIN8/7GGgf+0jon/uZiV/8Ckov/Isq//0b+9/9rNyv/j2db/7OXh//Pv6//6+PP///75/////v//////AP////////////////7++//7+fb/9/Pv//Ls5//t497/59nT/+DPyP/ZxLz/0riv/8uto//Fopj/v5iP/7qRiP+3jYX/toyF/7ePiv+6lpL/v5+c/8WrqP/Nt7T/1cTB/97Qzf/m3Nn/7ufj//Xx7f/7+fT////6////////////AP///////////////////P/8+vf/+PTx//Tt6f/v5eD/6dzW/+PSy//cx7//1by0/8+xqP/Jp57/xJ6W/8CYj/+9lIz/vJSN/72Xkf/AnZj/xKai/8qwrf/RvLn/2cjF/+HU0P/o39v/8Onl//fy7v/8+vb////8////////////AP///////////////////f/9+/j/+vby//Xv6v/w5uH/693Y/+XUzf/eycL/2L+3/9K1rf/Mq6P/yKOb/8Sdlf/BmpL/wZqT/8Kdl//Eop7/yKun/861sf/VwLz/3MvI/+PW0//q4d3/8evn//j08P/9+/f////8////////////AP///////////////////v/+/Pn/+vbz//bv6//x6OP/7N/Z/+bVz//gy8T/2sG6/9S3r//Prqb/yqef/8ehmf/Fnpf/xJ6X/8Whm//HpqL/y66q/9G4tP/Xwr//3s3K/+XY1f/s49//8+zo//n18f/+/Pj////9////////////AP///////////////////v/+/fn/+/fz//fw7P/y6OP/7eDa/+fW0P/hzMb/28K7/9a5sf/RsKj/zKmh/8mjnP/HoJn/xqCa/8ejnv/JqaT/zbCs/9K6tv/YxMD/38/L/+bZ1v/t4+D/8+3p//n18f/+/Pj////+////////////HCU4UCaYN3YAAAAASUVORK5CYII=\"\n\nexport default {\n  component: Image,\n  title: \"Components/Image\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"An optimized image component with support for lazy loading, srcSet, and placeholder images.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    id: \"example\",\n    className: \"example\",\n    width: \"300px\",\n    height: \"200px\",\n    src: \"https://picsum.photos/seed/example/300/200\",\n    fetchPriority: \"high\",\n  },\n}\n\nexport const WithSrcSet = {\n  args: {\n    id: \"example\",\n    className: \"example\",\n    width: \"300px\",\n    height: \"200px\",\n    src: \"https://picsum.photos/seed/example/300/200\",\n    srcSet:\n      \"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\",\n  },\n}\n\nexport const WithPlaceholder = {\n  args: {\n    id: \"example\",\n    className: \"example\",\n    width: \"300px\",\n    height: \"200px\",\n    src: \"https://picsum.photos/seed/example/300/200\",\n    placeHolderURL: blurhashDataUri,\n  },\n}\n\nexport const ImageLazyLoad = {\n  render: () => {\n    return (\n      <>\n        {Array.from(Array(100)).map((_, i) => (\n          <Image\n            key={i}\n            lazyLoad\n            width=\"300px\"\n            height=\"200px\"\n            src={`https://picsum.photos/seed/${i}/300/200`}\n          />\n        ))}\n      </>\n    )\n  },\n}\n\nexport const ImageLazyLoadSrcSet = {\n  render: () => {\n    return (\n      <>\n        {Array.from(Array(100)).map((_, i) => (\n          <Image\n            key={i}\n            lazyLoad\n            width=\"300px\"\n            height=\"200px\"\n            src={`https://picsum.photos/seed/${i}/300/200`}\n            srcSet={`https://picsum.photos/seed/${i}/300/200 1x, https://picsum.photos/seed/${i}/600/400 2x`}\n          />\n        ))}\n      </>\n    )\n  },\n}\n\nexport const ImageLazyLoadSrcSetPlaceHolderURL = {\n  args: {\n    lazyLoad: true,\n    width: \"300px\",\n    height: \"200px\",\n    placeHolderURL: blurhashDataUri,\n    src: \"https://picsum.photos/seed/example/300/200\",\n    srcSet:\n      \"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\",\n  },\n}\n\nconst StyledImage = styled(Image)`\n  width: 100%;\n  height: 100%;\n`\n\nexport const WithStyledImage = {\n  render: () => {\n    return (\n      <Box width={400} height={400} bg=\"red\">\n        <StyledImage\n          placeHolderURL={blurhashDataUri}\n          src=\"https://picsum.photos/seed/example/300/200\"\n          srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n        />\n      </Box>\n    )\n  },\n}\n\nexport const WithCustomStyle = {\n  render: () => {\n    return (\n      <Box width={400} height={400} bg=\"red\">\n        <Image\n          width=\"100%\"\n          height=\"100%\"\n          src=\"https://picsum.photos/seed/example/300/200\"\n          style={{\n            borderRadius: \"10px\",\n            borderColor: \"blue\",\n            borderWidth: \"10px\",\n            borderStyle: \"solid\",\n          }}\n        />\n      </Box>\n    )\n  },\n}\n\nexport const EnsuresImageDoesNotCollapse = {\n  render: () => {\n    return (\n      <Box width={300} height={200} bg=\"red\">\n        <Image src=\"https://picsum.photos/seed/example/300/200\" lazyLoad />\n      </Box>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Image/index.js

@@ -0,0 +1,2 @@
+export * from "./Image";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Image/index.tsx"],"sourcesContent":["export * from \"./Image\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Input/Input.js

@@ -0,0 +1,116 @@
+var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height", "labelOffset", "showCounter", "defaultValue", "onChange"];
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import { themeGet } from "@styled-system/theme-get";
+import React, { useCallback } from "react";
+import styled, { css } from "styled-components";
+import { height as systemHeight } from "styled-system";
+import { RequiredField } from "../../shared/RequiredField";
+import { Box, BoxProps, splitBoxProps } from "../Box";
+import { Text } from "../Text";
+import { Tooltip } from "../Tooltip";
+import { INPUT_STATES } from "./tokens";
+import { FORM_ELEMENT_TRANSITION } from "../../helpers";
+/** Input component */
+export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    description = _ref.description,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    required = _ref.required,
+    focus = _ref.focus,
+    hover = _ref.hover,
+    title = _ref.title,
+    height = _ref.height,
+    labelOffset = _ref.labelOffset,
+    showCounter = _ref.showCounter,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    inputProps = _splitBoxProps2[1];
+  var _React$useState = React.useState(inputProps.value || defaultValue),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var handleChange = useCallback(function (event) {
+    var nextValue = event.currentTarget.value;
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    width: "100%",
+    className: className
+  }, boxProps), !!description && /*#__PURE__*/React.createElement(Tooltip, {
+    pointer: true,
+    content: description,
+    placement: "top-end"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    color: "mono60",
+    textAlign: "right"
+  }, /*#__PURE__*/React.createElement("u", null, "What is this?"))), /*#__PURE__*/React.createElement(Box, {
+    position: "relative",
+    mt: !!title && !description ? 1 : 0
+  }, /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: ref,
+    disabled: disabled,
+    focus: focus,
+    hover: hover,
+    error: !!error,
+    required: required,
+    height: height !== null && height !== void 0 ? height : 50,
+    name: inputProps.name,
+    title: title,
+    labelOffset: labelOffset,
+    defaultValue: defaultValue || undefined,
+    onChange: handleChange,
+    placeholder: inputProps.placeholder || " "
+  }, inputProps)), !!title && /*#__PURE__*/React.createElement(StyledLabel, {
+    labelOffset: labelOffset,
+    htmlFor: inputProps.name
+  }, title, /*#__PURE__*/React.createElement("span", null)), children), (required || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength) && showCounter) && !(error && typeof error === "string") && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    mt: 0.5,
+    mx: 1
+  }, required && /*#__PURE__*/React.createElement(RequiredField, {
+    disabled: disabled,
+    flex: 1
+  }), !!(inputProps !== null && inputProps !== void 0 && inputProps.maxLength) && showCounter && /*#__PURE__*/React.createElement(Text, {
+    flex: 1,
+    variant: "xs",
+    color: "mono60",
+    textAlign: "right"
+  }, String(value).length, "/", inputProps.maxLength)), error && typeof error === "string" && /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    mt: 0.5,
+    ml: 1,
+    color: "red100"
+  }, error));
+});
+Input.displayName = "Input";
+var StyledInput = styled.input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-bysdh7-0"
+})(["width:100%;padding:0 ", ";appearance:none;line-height:1;border:1px solid;border-radius:3px;transition:border-color 0.25s,color 0.25s;font-family:", ";", ";::placeholder{transition:color 0.25s,opacity 0.25s;}", ";"], themeGet("space.1"), themeGet("fonts.sans"), systemHeight, function (props) {
+  return css(["", " ", " ", " ", " ", " ", " &:hover{", "}&:not(:placeholder-shown){", " ", "}&:focus{outline:none;", " &::placeholder{transition:", ";opacity:1;}:not(:placeholder-shown){", " ", "}}&:disabled{cursor:default;", "}", ""], INPUT_STATES.default, props.hover && INPUT_STATES.hover, props.focus && INPUT_STATES.focus, props.active && INPUT_STATES.active, props.disabled && INPUT_STATES.disabled, props.error && INPUT_STATES.error, INPUT_STATES.hover, INPUT_STATES.completed, props.error && INPUT_STATES.error, INPUT_STATES.focus, FORM_ELEMENT_TRANSITION, INPUT_STATES.active, props.error && INPUT_STATES.error, INPUT_STATES.disabled, props.title && css(["&::placeholder{transition:", ";opacity:0;}"], FORM_ELEMENT_TRANSITION));
+});
+var StyledLabel = styled.label.withConfig({
+  displayName: "Input__StyledLabel",
+  componentId: "sc-bysdh7-1"
+})(["position:absolute;top:50%;left:5px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;font-family:", ";pointer-events:none;& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:", ";transition-property:height,top;transition-delay:0.1s;}", ""], FORM_ELEMENT_TRANSITION, themeGet("fonts.sans"), themeGet("colors.mono0"), FORM_ELEMENT_TRANSITION, function (_ref2) {
+  var labelOffset = _ref2.labelOffset;
+  return !!labelOffset && css(["padding-left:", "px;"], labelOffset - 5);
+});
+//# sourceMappingURL=Input.js.map

package/dist/esm/elements/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["themeGet","React","useCallback","styled","css","height","systemHeight","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","INPUT_STATES","FORM_ELEMENT_TRANSITION","Input","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_React$useState","useState","value","_React$useState2","setValue","handleChange","event","nextValue","currentTarget","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledInput","name","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","flex","String","length","ml","displayName","input","withConfig","componentId","props","default","active","completed","label","_ref2"],"sources":["../../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}

package/dist/esm/elements/Input/Input.story.js

@@ -0,0 +1,117 @@
+import { Input } from "./Input";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Input component provides a text input field with built-in validation, error states, and accessibility features. Supports titles, placeholders, required fields, and character limits."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Basic = {
+  args: {
+    placeholder: "Enter text here"
+  }
+};
+export var WithTitle = {
+  args: {
+    title: "Your Name",
+    placeholder: "Enter your name"
+  }
+};
+export var RequiredField = {
+  args: {
+    title: "Email Address",
+    required: true,
+    placeholder: "Enter your email"
+  }
+};
+export var WithError = {
+  args: {
+    title: "Your Offer",
+    error: "This field is required",
+    value: "Invalid input"
+  }
+};
+export var Disabled = {
+  args: {
+    title: "Disabled Input",
+    disabled: true,
+    value: "Cannot edit this"
+  }
+};
+export var WithMaxLength = {
+  args: {
+    title: "Short Message",
+    maxLength: 50,
+    placeholder: "Maximum 50 characters"
+  }
+};
+export var WithDescription = {
+  args: {
+    title: "Your Offer",
+    description: "This is my description",
+    placeholder: "Start typing..."
+  }
+};
+export var WithCounter = {
+  args: {
+    title: "Your Offer",
+    required: true,
+    maxLength: 50,
+    showCounter: true,
+    placeholder: "Start typing..."
+  }
+};
+export var LongTitle = {
+  args: {
+    title: "Your offer with a really really long title",
+    placeholder: "Start typing..."
+  }
+};
+export var CustomWidth = {
+  args: {
+    width: "50%",
+    placeholder: "Start typing..."
+  }
+};
+export var EmailInput = {
+  args: {
+    title: "Email",
+    type: "email",
+    required: true,
+    placeholder: "Enter your email address"
+  }
+};
+export var CustomHeight = {
+  args: {
+    height: 40,
+    placeholder: "Input is 40px in height"
+  }
+};
+export var FocusState = {
+  args: {
+    focus: true,
+    placeholder: "This input is focused"
+  }
+};
+export var HoverState = {
+  args: {
+    hover: true,
+    placeholder: "This input is hovered"
+  }
+};
+export var ActiveState = {
+  args: {
+    active: true,
+    placeholder: "This input is active"
+  }
+};
+//# sourceMappingURL=Input.story.js.map

package/dist/esm/elements/Input/Input.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.story.js","names":["Input","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Basic","args","placeholder","WithTitle","RequiredField","required","WithError","error","value","Disabled","disabled","WithMaxLength","maxLength","WithDescription","WithCounter","showCounter","LongTitle","CustomWidth","width","EmailInput","type","CustomHeight","height","FocusState","focus","HoverState","hover","ActiveState","active"],"sources":["../../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import { Input } from \"./Input\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Input component provides a text input field with built-in validation, error states, and accessibility features. Supports titles, placeholders, required fields, and character limits.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  args: {\n    placeholder: \"Enter text here\",\n  },\n}\n\nexport const WithTitle = {\n  args: {\n    title: \"Your Name\",\n    placeholder: \"Enter your name\",\n  },\n}\n\nexport const RequiredField = {\n  args: {\n    title: \"Email Address\",\n    required: true,\n    placeholder: \"Enter your email\",\n  },\n}\n\nexport const WithError = {\n  args: {\n    title: \"Your Offer\",\n    error: \"This field is required\",\n    value: \"Invalid input\",\n  },\n}\n\nexport const Disabled = {\n  args: {\n    title: \"Disabled Input\",\n    disabled: true,\n    value: \"Cannot edit this\",\n  },\n}\n\nexport const WithMaxLength = {\n  args: {\n    title: \"Short Message\",\n    maxLength: 50,\n    placeholder: \"Maximum 50 characters\",\n  },\n}\n\nexport const WithDescription = {\n  args: {\n    title: \"Your Offer\",\n    description: \"This is my description\",\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const WithCounter = {\n  args: {\n    title: \"Your Offer\",\n    required: true,\n    maxLength: 50,\n    showCounter: true,\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const LongTitle = {\n  args: {\n    title: \"Your offer with a really really long title\",\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const CustomWidth = {\n  args: {\n    width: \"50%\",\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const EmailInput = {\n  args: {\n    title: \"Email\",\n    type: \"email\",\n    required: true,\n    placeholder: \"Enter your email address\",\n  },\n}\n\nexport const CustomHeight = {\n  args: {\n    height: 40,\n    placeholder: \"Input is 40px in height\",\n  },\n}\n\nexport const FocusState = {\n  args: {\n    focus: true,\n    placeholder: \"This input is focused\",\n  },\n}\n\nexport const HoverState = {\n  args: {\n    hover: true,\n    placeholder: \"This input is hovered\",\n  },\n}\n\nexport const ActiveState = {\n  args: {\n    active: true,\n    placeholder: \"This input is active\",\n  },\n}\n"],"mappings":"AAAA,SAASA,KAAK;AACd,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,kBAAkB;EACzBC,SAAS,EAAEH,KAAK;EAChBI,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXJ,SAAS,EACP;MACJ,CAAC;MACDK,QAAQ,EAAE;QACRC,OAAO,EAAER;MACX;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMS,KAAK,GAAG;EACnBC,IAAI,EAAE;IACJC,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMC,SAAS,GAAG;EACvBF,IAAI,EAAE;IACJT,KAAK,EAAE,WAAW;IAClBU,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAME,aAAa,GAAG;EAC3BH,IAAI,EAAE;IACJT,KAAK,EAAE,eAAe;IACtBa,QAAQ,EAAE,IAAI;IACdH,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMI,SAAS,GAAG;EACvBL,IAAI,EAAE;IACJT,KAAK,EAAE,YAAY;IACnBe,KAAK,EAAE,wBAAwB;IAC/BC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAMC,QAAQ,GAAG;EACtBR,IAAI,EAAE;IACJT,KAAK,EAAE,gBAAgB;IACvBkB,QAAQ,EAAE,IAAI;IACdF,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAMG,aAAa,GAAG;EAC3BV,IAAI,EAAE;IACJT,KAAK,EAAE,eAAe;IACtBoB,SAAS,EAAE,EAAE;IACbV,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMW,eAAe,GAAG;EAC7BZ,IAAI,EAAE;IACJT,KAAK,EAAE,YAAY;IACnBK,WAAW,EAAE,wBAAwB;IACrCK,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMY,WAAW,GAAG;EACzBb,IAAI,EAAE;IACJT,KAAK,EAAE,YAAY;IACnBa,QAAQ,EAAE,IAAI;IACdO,SAAS,EAAE,EAAE;IACbG,WAAW,EAAE,IAAI;IACjBb,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMc,SAAS,GAAG;EACvBf,IAAI,EAAE;IACJT,KAAK,EAAE,4CAA4C;IACnDU,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMe,WAAW,GAAG;EACzBhB,IAAI,EAAE;IACJiB,KAAK,EAAE,KAAK;IACZhB,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMiB,UAAU,GAAG;EACxBlB,IAAI,EAAE;IACJT,KAAK,EAAE,OAAO;IACd4B,IAAI,EAAE,OAAO;IACbf,QAAQ,EAAE,IAAI;IACdH,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMmB,YAAY,GAAG;EAC1BpB,IAAI,EAAE;IACJqB,MAAM,EAAE,EAAE;IACVpB,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMqB,UAAU,GAAG;EACxBtB,IAAI,EAAE;IACJuB,KAAK,EAAE,IAAI;IACXtB,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMuB,UAAU,GAAG;EACxBxB,IAAI,EAAE;IACJyB,KAAK,EAAE,IAAI;IACXxB,WAAW,EAAE;EACf;AACF,CAAC;AAED,OAAO,IAAMyB,WAAW,GAAG;EACzB1B,IAAI,EAAE;IACJ2B,MAAM,EAAE,IAAI;IACZ1B,WAAW,EAAE;EACf;AACF,CAAC"}

package/dist/esm/elements/Input/index.js

@@ -0,0 +1,2 @@
+export * from "./Input";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Input/index.tsx"],"sourcesContent":["export * from \"./Input\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Input/tokens.js

@@ -0,0 +1,13 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+import { State } from "./types";
+export var INPUT_STATES = {
+  default: css(["background-color:", ";font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], themeGet("colors.mono0"), themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
+  focus: css(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),
+  hover: css(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], themeGet("colors.mono100"), themeGet("colors.mono60"), themeGet("colors.mono100"), themeGet("colors.mono100")),
+  active: css(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),
+  completed: css(["color:", ";border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.mono60"), themeGet("colors.blue60"), themeGet("textVariants.xs.fontSize")),
+  disabled: css(["color:", ";border-color:", ";background-color:transparent;-webkit-text-fill-color:", ";opacity:1;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:placeholder-shown + label{color:", ";}"], themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("textVariants.xs.fontSize"), themeGet("colors.mono30")),
+  error: css(["border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], themeGet("colors.red100"), themeGet("colors.red100"), themeGet("textVariants.xs.fontSize"))
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/Input/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","State","INPUT_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    background-color: ${themeGet(\"colors.mono0\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.mono30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK;AAEd,OAAO,IAAMC,YAAgC,GAAG;EAC9CC,OAAO,EAAEH,GAAG,wIACUD,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDK,KAAK,EAAEJ,GAAG,oLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDM,KAAK,EAAEL,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDO,MAAM,EAAEN,GAAG,0KACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDQ,SAAS,EAAEP,GAAG,gJACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDS,QAAQ,EAAER,GAAG,gSACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAGdA,QAAQ,CAAC,eAAe,CAAC,EAKzCA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDU,KAAK,EAAET,GAAG,qIACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AASvD,CAAC"}

package/dist/esm/elements/Input/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/elements/Input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Input/types.ts"],"sourcesContent":["export type State =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"error\"\n  | \"focus\"\n  | \"hover\"\n  | \"completed\"\n"],"mappings":""}

package/dist/esm/elements/Join/Join.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { flattenChildren } from "../../helpers/flattenChildren";
+/**
+ * `Join` is a higher order component that renders a separator component
+ * between each of `Join`'s direct children.
+ *
+ * @example
+ *
+ *  <Join separator={<SomeComponent/>}>
+ *    <child1/>
+ *    <child2/>
+ *    <child3/>
+ *  </Join>
+ *
+ * which renders
+ *
+ * <child1/>
+ * <SomeComponent/>
+ * <child2/>
+ * <SomeComponent/>
+ * <child3/>
+ */
+export var Join = function Join(_ref) {
+  var separator = _ref.separator,
+    children = _ref.children;
+  var elements = flattenChildren(children);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, elements.reduce(function (acc, element, currentIndex) {
+    acc.push(
+    /*#__PURE__*/
+    // @ts-expect-error  MIGRATE_STRICT_MODE
+    React.cloneElement(element, {
+      key: "join-".concat(currentIndex)
+    }));
+    if (currentIndex !== elements.length - 1) {
+      acc.push(
+      // @ts-expect-error  MIGRATE_STRICT_MODE
+      separator && /*#__PURE__*/React.cloneElement(separator, {
+        key: "join-sep-".concat(currentIndex)
+      }));
+    }
+    return acc;
+  }, []));
+};
+//# sourceMappingURL=Join.js.map

package/dist/esm/elements/Join/Join.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Join.js","names":["React","flattenChildren","Join","_ref","separator","children","elements","createElement","Fragment","reduce","acc","element","currentIndex","push","cloneElement","key","concat","length"],"sources":["../../../../src/elements/Join/Join.tsx"],"sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\nexport interface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<React.PropsWithChildren<JoinProps>> = ({\n  separator,\n  children,\n}) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, currentIndex) => {\n        acc.push(\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          React.cloneElement(element, {\n            key: `join-${currentIndex}`,\n          })\n        )\n\n        if (currentIndex !== elements.length - 1) {\n          acc.push(\n            // @ts-expect-error  MIGRATE_STRICT_MODE\n            separator &&\n              React.cloneElement(separator, {\n                key: `join-sep-${currentIndex}`,\n              })\n          )\n        }\n\n        return acc\n      }, [])}\n    </>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAMxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,IAAkD,GAAG,SAArDA,IAAkDA,CAAAC,IAAA,EAGzD;EAAA,IAFJC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAER,IAAMC,QAAQ,GAAGL,eAAe,CAACI,QAAQ,CAAC;EAE1C,oBACEL,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,QACGF,QAAQ,CAACG,MAAM,CAAC,UAACC,GAAG,EAAEC,OAAO,EAAEC,YAAY,EAAK;IAC/CF,GAAG,CAACG,IAAI;IAAA;IACN;IACAb,KAAK,CAACc,YAAY,CAACH,OAAO,EAAE;MAC1BI,GAAG,UAAAC,MAAA,CAAUJ,YAAY;IAC3B,CAAC,CAAC,CACH;IAED,IAAIA,YAAY,KAAKN,QAAQ,CAACW,MAAM,GAAG,CAAC,EAAE;MACxCP,GAAG,CAACG,IAAI;MACN;MACAT,SAAS,iBACPJ,KAAK,CAACc,YAAY,CAACV,SAAS,EAAE;QAC5BW,GAAG,cAAAC,MAAA,CAAcJ,YAAY;MAC/B,CAAC,CAAC,CACL;IACH;IAEA,OAAOF,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC,CACL;AAEP,CAAC"}