@flodesk/grain 11.35.3 → 11.36.1

package/es/icons/icon-apple.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconExit = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 28 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M15.5 7.5v1.51c.644-.102 1.239-.26 1.869-.429.41-.11.837-.223 1.302-.328 1.691-.381 3.503-.482 5.705.797 2.252 1.31 3.159 3.628 3.472 5.84.313 2.218.076 4.607-.21 6.5-.522 3.454-1.452 6.5-2.794 8.728-1.335 2.214-3.258 3.88-5.78 3.88-1.343 0-2.17-.502-2.739-.847l-.175-.106c-.457-.27-.956-.538-2.15-.538s-1.694.269-2.153.539l-.175.105c-.57.345-1.397.848-2.74.848-2.522 0-4.445-1.667-5.78-3.881C1.81 27.89.881 24.844.358 21.39c-.286-1.893-.523-4.282-.21-6.5.313-2.212 1.22-4.53 3.472-5.84a8 8 0 0 1 1.726-.762A7.47 7.47 0 0 1 4 4V1.5A1.5 1.5 0 0 1 5.5 0H8a7.49 7.49 0 0 1 6 3 7.49 7.49 0 0 1 6-3h1.5a1.5 1.5 0 0 1 0 3H20a4.5 4.5 0 0 0-4.5 4.5m-3 1v-1A4.5 4.5 0 0 0 8 3H7v1a4.5 4.5 0 0 0 4.5 4.5zm1.5 3.63c1.739 0 3.246-.403 4.404-.714.34-.09.65-.174.927-.236 1.22-.276 2.194-.317 3.538.464 1.116.65 1.756 1.886 2.008 3.666.251 1.776.07 3.817-.205 5.631-.49 3.242-1.334 5.863-2.398 7.628-1.071 1.778-2.187 2.43-3.21 2.43-.486 0-.662-.105-1.2-.425l-.19-.114c-.809-.476-1.829-.953-3.674-.953s-2.866.477-3.674.953l-.191.113c-.54.32-.717.426-1.202.426-1.023 0-2.14-.652-3.211-2.43-1.064-1.765-1.907-4.385-2.398-7.628-.274-1.814-.456-3.855-.205-5.63.252-1.781.892-3.018 2.009-3.667 1.343-.78 2.317-.74 3.54-.464.276.062.587.145.927.236 1.16.311 2.667.715 4.405.715",
+  clipRule: "evenodd"
+}));
+
+export default IconExit;

package/es/icons/icon-ball.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconBall = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 34 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M15.5 4.08a13.9 13.9 0 0 0-6.845 2.678c.853.74 1.548 1.736 2.076 2.793.944 1.887 1.553 4.307 1.722 6.949H15.5zm3 0V16.5h3.047c.169-2.642.779-5.062 1.722-6.95.529-1.056 1.223-2.052 2.076-2.792A13.9 13.9 0 0 0 18.5 4.079m-3 15.42h-3.047c-.169 2.642-.778 5.061-1.722 6.949-.528 1.056-1.223 2.053-2.076 2.793A13.9 13.9 0 0 0 15.5 31.92zm3 12.42V19.5h3.047c.169 2.642.779 5.061 1.722 6.949.529 1.056 1.223 2.053 2.076 2.793A13.9 13.9 0 0 1 18.5 31.92M3.08 16.5a13.94 13.94 0 0 1 3.346-7.676c.508.34 1.077.98 1.621 2.069.715 1.429 1.235 3.376 1.399 5.607zm3.346 10.676A13.94 13.94 0 0 1 3.079 19.5h6.367c-.164 2.23-.684 4.178-1.399 5.607-.544 1.089-1.113 1.729-1.621 2.069M30.92 19.5a13.94 13.94 0 0 1-3.347 7.676c-.508-.34-1.077-.98-1.621-2.069-.715-1.429-1.235-3.376-1.399-5.607zM27.574 8.824a13.94 13.94 0 0 1 3.347 7.676h-6.367c.164-2.23.684-4.178 1.399-5.607.544-1.089 1.113-1.729 1.621-2.069M0 18C0 8.611 7.611 1 17 1s17 7.611 17 17-7.611 17-17 17S0 27.389 0 18",
+  clipRule: "evenodd"
+}));
+
+export default IconBall;

package/es/icons/icon-branching.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconBranching = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 32 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M10.5 7.5a5.5 5.5 0 1 1 7 5.293V16.5h6A4.5 4.5 0 0 1 28 21v2.207a5.5 5.5 0 1 1-3 0V21a1.5 1.5 0 0 0-1.5-1.5h-15A1.5 1.5 0 0 0 7 21v2.207a5.5 5.5 0 1 1-3 0V21a4.5 4.5 0 0 1 4.5-4.5h6v-3.707a5.5 5.5 0 0 1-4-5.293M16 5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M5.5 26a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m21 0a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5",
+  clipRule: "evenodd"
+}));
+
+export default IconBranching;

package/es/icons/icon-car.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconCar = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 34 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M13 4a4.5 4.5 0 0 0-3.6 1.8l-4.69 6.253-.26-.214a1.5 1.5 0 0 0-.95-.339h-2a1.5 1.5 0 0 0 0 3h1.375L1.9 15.8a4.5 4.5 0 0 0-.9 2.7v12A1.5 1.5 0 0 0 2.5 32h4a1.5 1.5 0 0 0 1.307-.765L9.065 29h15.87l1.258 2.235A1.5 1.5 0 0 0 27.5 32h4a1.5 1.5 0 0 0 1.5-1.5v-12a4.5 4.5 0 0 0-.9-2.7l-.975-1.3H32.5a1.5 1.5 0 0 0 0-3h-2a1.5 1.5 0 0 0-.95.34l-.26.213L24.6 5.8A4.5 4.5 0 0 0 21 4zm13.965 9.954L22.2 7.6A1.5 1.5 0 0 0 21 7h-8a1.5 1.5 0 0 0-1.2.6l-4.765 6.354L9.12 15.66c.268.22.604.339.95.339h13.858a1.5 1.5 0 0 0 .95-.34zM5.233 16.356 4.3 17.6a1.5 1.5 0 0 0-.3.9V29h1.623l1.257-2.235 1.952-3.471A4.5 4.5 0 0 1 12.754 21h8.492a4.5 4.5 0 0 1 3.922 2.294l1.952 3.47L28.377 29H30V18.5a1.5 1.5 0 0 0-.3-.9l-.933-1.244-1.988 1.627A4.5 4.5 0 0 1 23.929 19H10.071a4.5 4.5 0 0 1-2.85-1.017zM23.248 26H10.752l.695-1.235A1.5 1.5 0 0 1 12.755 24h8.49a1.5 1.5 0 0 1 1.308.765z",
+  clipRule: "evenodd"
+}));
+
+export default IconCar;

package/es/icons/icon-dog.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconDog = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 32 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M16 2c-3.329 0-5.137.569-6.43 1.226l-.015.008-.774-.516c-1.29-.86-3.265-1.13-4.702.235-1.347 1.28-2.866 3.34-3.521 5.635-.56 1.957-.698 4.297-.417 6.194.14.941.399 1.892.852 2.651.243.406.586.823 1.04 1.124.073 1.005.22 2.348.514 3.71.323 1.497.857 3.182 1.793 4.45 1.289 1.745 2.76 2.6 4.118 2.985 1.098.31 2.105.297 2.64.285a5.002 5.002 0 0 0 9.805 0c.534.012 1.54.025 2.637-.285 1.36-.386 2.83-1.24 4.119-2.986.936-1.267 1.47-2.952 1.793-4.449.294-1.361.44-2.704.514-3.71a3.5 3.5 0 0 0 1.04-1.124c.454-.76.713-1.71.853-2.65.28-1.898.142-4.238-.417-6.195-.655-2.295-2.174-4.355-3.521-5.635-1.437-1.365-3.412-1.095-4.702-.235l-.775.516-.016-.008C21.136 2.57 19.328 2 16 2m8.614 3.393c.3.4.6.838.889 1.298a16 16 0 0 1 1.314 2.55c.345.868.613 1.832.613 2.764 0 .166.111.61.436 1.267.282.569.64 1.13.944 1.527q.045-.21.081-.456c.22-1.478.108-3.387-.333-4.93-.471-1.65-1.632-3.268-2.703-4.285a.47.47 0 0 0-.344-.127c-.17 0-.398.06-.627.213zm-17.497-.18.268.18c-.3.4-.601.838-.889 1.298a16 16 0 0 0-1.314 2.55c-.345.868-.613 1.832-.613 2.764 0 .166-.112.61-.437 1.267a10 10 0 0 1-.942 1.526 8 8 0 0 1-.081-.455c-.22-1.478-.108-3.387.333-4.93.471-1.65 1.633-3.268 2.704-4.285a.47.47 0 0 1 .343-.127c.17 0 .398.06.628.213M16 31a2 2 0 0 1-1.982-1.732 8.6 8.6 0 0 0 1.63-1.156q.185-.165.352-.328.165.162.352.328c.428.381.979.807 1.63 1.156A2 2 0 0 1 16 31m-2.754-4.794c-1.272-.594-2.375-1.625-3.062-3.092a3.2 3.2 0 0 1-.296-.98c-.05-.44.004-1.056.45-1.602.502-.615 1.269-.972 2.12-1.188.88-.223 2.037-.344 3.544-.344s2.664.12 3.543.344c.851.216 1.618.573 2.12 1.189.444.546.498 1.162.447 1.601a3.2 3.2 0 0 1-.296.98c-.687 1.467-1.79 2.498-3.062 3.093.627.474 1.286.776 1.904.776l.317.003c.534.008 1.086.016 1.748-.17.733-.209 1.637-.683 2.523-1.882.554-.75.979-1.936 1.273-3.3.287-1.33.418-2.673.477-3.621.023-.375-.125-.826-.488-1.286a12.7 12.7 0 0 1-1.33-2.124c-.363-.732-.748-1.701-.748-2.598 0-.398-.125-.961-.4-1.655a13 13 0 0 0-1.07-2.068 15 15 0 0 0-1.257-1.73 7 7 0 0 0-.495-.526c-.089-.082-.14-.12-.157-.133l-.005-.004C20.246 5.485 18.916 5 16 5s-4.246.485-5.047.889l-.005.004a2 2 0 0 0-.156.133 7 7 0 0 0-.496.526 15 15 0 0 0-1.256 1.73c-.422.675-.8 1.39-1.07 2.068-.276.694-.4 1.258-.4 1.655 0 .897-.386 1.866-.748 2.598a12.7 12.7 0 0 1-1.33 2.124c-.363.46-.512.91-.488 1.286.058.948.19 2.292.476 3.621.295 1.364.72 2.55 1.274 3.3.886 1.2 1.79 1.673 2.523 1.881.661.187 1.214.18 1.747.171l.318-.003c.618 0 1.277-.303 1.905-.777m5.619-3.939c-1.33 2.061-4.4 2.062-5.73 0l.062-.015c.547-.14 1.433-.252 2.805-.252s2.257.113 2.804.252zM11 13a2.001 2.001 0 1 0 .001 4.002A2.001 2.001 0 0 0 11 13m10 0a2.001 2.001 0 1 0 .001 4.002A2.001 2.001 0 0 0 21 13",
+  clipRule: "evenodd"
+}));
+
+export default IconDog;

package/es/icons/icon-exit.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconExit = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 34 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M24.94 25.56a1.5 1.5 0 0 0 2.12 0l6.5-6.5a1.5 1.5 0 0 0 0-2.121l-6.499-6.5a1.5 1.5 0 0 0-2.121 2.122l3.939 3.939h-16.38a1.5 1.5 0 1 0 0 3h16.379l-3.939 3.939a1.5 1.5 0 0 0 0 2.121M3 8.5A1.5 1.5 0 0 1 4.5 7h12a1.5 1.5 0 0 0 0-3h-12A4.5 4.5 0 0 0 0 8.5v19A4.5 4.5 0 0 0 4.5 32h12a1.5 1.5 0 0 0 0-3h-12A1.5 1.5 0 0 1 3 27.5z",
+  clipRule: "evenodd"
+}));
+
+export default IconExit;

package/es/icons/icon-flag.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconFlag = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 28 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M1.5 1A1.5 1.5 0 0 1 3 2.5v1.705c1.138-.36 2.69-.642 4.75-.642 2.634 0 4.818.873 6.724 1.636l.084.033c1.98.793 3.678 1.456 5.693 1.456 2.175 0 3.546-.362 4.326-.674.392-.157.641-.304.775-.393q.1-.067.12-.087h.001a1.5 1.5 0 0 1 2.529 1.091v17.189a1.5 1.5 0 0 1-.44 1.06l-1.06-1.06c1.06 1.06 1.06 1.061 1.059 1.062l-.002.002-.003.003-.008.007-.016.016a3 3 0 0 1-.153.135q-.134.113-.363.267c-.306.204-.74.448-1.325.682-1.173.469-2.927.888-5.44.888-2.634 0-4.817-.873-6.723-1.636l-.084-.034c-1.98-.792-3.679-1.455-5.694-1.455-2.174 0-3.545.362-4.326.674a5 5 0 0 0-.424.19V33.5a1.5 1.5 0 0 1-3 0v-31A1.5 1.5 0 0 1 1.5 1M3 7.427v13.967c1.138-.36 2.69-.643 4.75-.643 2.634 0 4.818.874 6.724 1.636l.084.034c1.98.792 3.678 1.455 5.693 1.455 2.175 0 3.546-.361 4.326-.674q.25-.1.424-.19V9.045c-1.138.36-2.689.643-4.75.643-2.634 0-4.817-.874-6.723-1.636l-.084-.034c-1.98-.792-3.679-1.455-5.694-1.455-2.174 0-3.545.361-4.326.674a5 5 0 0 0-.424.19m22.442-1.864.005-.004-.003.002",
+  clipRule: "evenodd"
+}));
+
+export default IconFlag;

package/es/icons/icon-symbols.js

@@ -0,0 +1,17 @@
+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 * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+const IconSymbols = props => ___EmotionJSX("svg", _extends({
+  viewBox: "0 0 32 36",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), ___EmotionJSX("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M0 3.5A1.5 1.5 0 0 1 1.5 2h12a1.5 1.5 0 0 1 0 3h-12A1.5 1.5 0 0 1 0 3.5m0 4A1.5 1.5 0 0 1 1.5 6h12a1.5 1.5 0 0 1 0 3H9v6.5a1.5 1.5 0 0 1-3 0V9H1.5A1.5 1.5 0 0 1 0 7.5m25.646-5.233a1.5 1.5 0 0 1 1.38-.171l2.596.973A3.66 3.66 0 0 1 32 6.5a1.5 1.5 0 0 1-3 0 .66.66 0 0 0-.431-.622L28 5.665V13c0 1.394-.9 2.43-1.877 3.04-.997.623-2.282.96-3.623.96-1.34 0-2.626-.337-3.623-.96C17.9 15.43 17 14.394 17 13s.9-2.43 1.877-3.04C19.874 9.337 21.159 9 22.5 9a7.4 7.4 0 0 1 2.5.42V3.5a1.5 1.5 0 0 1 .646-1.233m-.703 10.6C25 12.95 25 12.99 25 13V13c0 .008 0 .049-.057.132a1.4 1.4 0 0 1-.41.364c-.45.281-1.165.504-2.033.504s-1.583-.223-2.033-.504a1.4 1.4 0 0 1-.41-.364C20 13.05 20 13.008 20 13s0-.049.057-.132c.062-.093.188-.225.41-.364.45-.281 1.165-.504 2.033-.504s1.583.223 2.033.504c.222.139.348.271.41.364M23 22a3 3 0 1 1-6 0 3 3 0 0 1 6 0m9 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-.44-9.44a1.5 1.5 0 0 0-2.12-2.12l-12 12a1.5 1.5 0 0 0 2.12 2.12zM4 22.536c0-.295.24-.535.535-.535h1.91a.555.555 0 0 1 .361.976l-1.259 1.08-1.35-1.106A.54.54 0 0 1 4 22.535m4.759 2.719-.853.73 2.193 1.795 1.34-1.34a1.5 1.5 0 0 1 2.122 2.122l-1.128 1.128 2.017 1.65a1.5 1.5 0 0 1-1.9 2.322l-2.25-1.84-.86.861A4.5 4.5 0 0 1 6.256 34H3.555a3.555 3.555 0 0 1-2.314-6.254l1.993-1.708-.937-.766A3.535 3.535 0 0 1 4.535 19h1.91a3.555 3.555 0 0 1 2.314 6.254m-5.565 4.77 2.398-2.056 2.375 1.943-.649.65a1.5 1.5 0 0 1-1.06.439H3.554a.555.555 0 0 1-.361-.976",
+  clipRule: "evenodd"
+}));
+
+export default IconSymbols;

package/es/icons/index.js

@@ -84,7 +84,14 @@ export { default as IconContentAlignCenter } from './icon-content-align-center';
 export { default as IconContentAlignBottom } from './icon-content-align-bottom';
 export { default as IconColumnOne } from './icon-column-one';
 export { default as IconColumnTwo } from './icon-column-two';
-export { default as IconBrush } from './icon-brush';
 export { default as IconBolt } from './icon-bolt';
 export { default as IconBoltFilled } from './icon-bolt-filled';
-export { default as IconSquare } from './icon-square';
+export { default as IconSquare } from './icon-square';
+export { default as IconBranching } from './icon-branching';
+export { default as IconExit } from './icon-exit';
+export { default as IconDog } from './icon-dog';
+export { default as IconApple } from './icon-apple';
+export { default as IconBall } from './icon-ball';
+export { default as IconCar } from './icon-car';
+export { default as IconSymbols } from './icon-symbols';
+export { default as IconFlag } from './icon-flag';

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

@@ -1,17 +1,17 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC } from 'react';
 import { BoxProps } from './box';
-import { DimensionPropType, AlignmentType, ContentPositionType, DirectionType } from '../shared';
+import { DimensionPropType, AlignmentType, DirectionType } from '../shared';
 
-export interface ArrangeProps extends BoxProps, HTMLAttributes<HTMLDivElement> {
+export interface ArrangeProps extends BoxProps {
   gap?: DimensionPropType;
   columnGap?: DimensionPropType;
   rowGap?: DimensionPropType;
   alignItems?: AlignmentType;
   justifyItems?: AlignmentType;
-  justifyContent?: ContentPositionType;
-  alignContent?: ContentPositionType;
-  columns?: string | number;
-  rows?: string | number;
+  justifyContent?: AlignmentType;
+  alignContent?: AlignmentType;
+  columns?: number | string | object;
+  rows?: number | string | object;
   autoFlow?: DirectionType;
 }
 

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

@@ -12,6 +12,7 @@ export interface AutocompleteOption {
 
 export interface AutocompleteProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  children?: React.ReactNode;
   options: AutocompleteOption[];
   value?: string;
   onChange: (_selectedOption: AutocompleteOption) => void;

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

@@ -16,6 +16,7 @@ export interface Autocomplete2Option {
 }
 
 export interface Autocomplete2Props {
+  children?: React.ReactNode;
   options: Autocomplete2Option[];
   value?: string;
   onChange: (option: Autocomplete2Option) => void;

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

@@ -1,12 +1,12 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC } from 'react';
 import { ColorPropType } from '../shared';
 
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+export interface BadgeProps {
   children?: React.ReactNode;
+  variant?: 'neutral' | 'danger' | 'warning' | 'success';
   color?: ColorPropType;
   backgroundColor?: ColorPropType;
   borderColor?: ColorPropType;
-  variant?: 'neutral' | 'danger' | 'warning' | 'success';
 }
 
 export const Badge: FC<BadgeProps>;

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

@@ -7,6 +7,9 @@ import {
   OverflowPropType,
   BorderWidthType,
   SideType,
+  TransitionPropType,
+  CursorPropType,
+  AlignSelfPropType,
 } from '../shared';
 import { ShadowTokens } from '../tokens';
 
@@ -15,6 +18,7 @@ export interface BoxProps
     RefAttributes<HTMLDivElement>,
     Partial<HTMLDivElement>,
     DOMAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   color?: ColorPropType;
   colorHover?: ColorPropType;
   backgroundColor?: ColorPropType;
@@ -30,8 +34,8 @@ export interface BoxProps
   minHeight?: DimensionPropType;
   maxHeight?: DimensionPropType;
   radius?: RadiusPropType;
-  shadow?: keyof ShadowTokens;
-  shadowHover?: keyof ShadowTokens;
+  shadow?: keyof ShadowTokens | string;
+  shadowHover?: keyof ShadowTokens | string;
   padding?: DimensionPropType;
   paddingTop?: DimensionPropType;
   paddingBottom?: DimensionPropType;
@@ -54,6 +58,17 @@ export interface BoxProps
   overflow?: OverflowPropType;
   overflowX?: OverflowPropType;
   overflowY?: OverflowPropType;
+  transition?: TransitionPropType;
+  transitionHover?: TransitionPropType;
+  cursor?: CursorPropType;
+  opacity?: string;
+  opacityHover?: string;
+  order?: string | number | object;
+  alignSelf?: AlignSelfPropType;
+  flex?: string | object;
+  aspectRatio?: string;
+  zIndex?: number | string;
+  tag?: string;
 }
 
 export const Box: FC<BoxProps>;

package/es/types/components/breakpoints-provider.d.ts

@@ -1,7 +1,7 @@
 import type { FC, HTMLAttributes } from 'react';
 
 export interface BreakpointsProviderProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   breakpoints?: {
     tablet?: number;
     mobile?: number;

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

@@ -1,19 +1,13 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { BoxProps } from './box';
-import {
-  DirectionType,
-  FlexWrapType,
-  ContentPositionType,
-  AlignmentType,
-  DimensionPropType,
-} from '../shared';
+import { DimensionPropType, DirectionType, FlexWrapType, AlignmentType } from '../shared';
 
 export interface FlexProps extends BoxProps {
   direction?: DirectionType;
   wrap?: FlexWrapType;
-  justifyContent?: ContentPositionType;
+  justifyContent?: AlignmentType;
   alignItems?: AlignmentType;
-  alignContent?: ContentPositionType;
+  alignContent?: AlignmentType;
   gap?: DimensionPropType;
   columnGap?: DimensionPropType;
   rowGap?: DimensionPropType;

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

@@ -1,10 +1,10 @@
 import type { FC, HTMLAttributes } from 'react';
-import { ColorPropType } from '../shared';
+import { ColorPropType, IconSizePropType } from '../shared';
 
 export interface IconProps extends HTMLAttributes<HTMLDivElement> {
   icon?: React.ReactNode;
   hasEvenBoundary?: boolean;
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl' | number | string;
+  size?: IconSizePropType;
   color?: ColorPropType;
 }
 

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

@@ -3,6 +3,7 @@ export * from './autocomplete';
 export * from './autocomplete2';
 export * from './badge';
 export * from './box';
+export * from './text';
 export * from './button';
 export * from './checkbox';
 export * from './dropdown';

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

@@ -2,8 +2,8 @@ import type { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } fro
 import { DimensionPropType, RadiusPropType } from '../shared';
 
 export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean;
   children?: React.ReactNode;
+  isOpen: boolean;
   onClose?: () => void;
   hasCloseButton?: boolean;
   title?: React.ReactNode;

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

@@ -1,16 +1,23 @@
-import type { FC, HTMLAttributes, AnchorHTMLAttributes } from 'react';
-import { DirectionType } from '../shared';
-import { BoxProps } from './box';
+import type { FC } from 'react';
+import { TextSizePropType, DirectionType } from '../shared';
 
-export interface NavProps extends BoxProps, HTMLAttributes<HTMLElement> {
-  direction?: DirectionType;
+export interface NavItemProps {
+  children?: React.ReactNode;
+  isActive?: boolean;
 }
 
-export interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  isActive?: boolean;
-  href?: string;
-  icon?: React.ReactNode;
+export interface NavProps {
   children?: React.ReactNode;
+  direction?: DirectionType;
+  size?: TextSizePropType;
+  justifyContent?:
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'stretch'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly';
 }
 
 export const Nav: FC<NavProps>;

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

@@ -1,9 +1,9 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC } from 'react';
 
-export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
+export interface PaginationProps {
   amount: number;
   selected: number;
-  onChange: (_page: number) => void;
+  onChange: (page: number) => void;
 }
 
 export const Pagination: FC<PaginationProps>;

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

@@ -3,6 +3,7 @@ import { DimensionPropType } from '../shared';
 import { MenuPlacement } from '../foundational/menu';
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   padding?: DimensionPropType;
   width?: DimensionPropType;
   placement?: MenuPlacement;

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

@@ -1,6 +1,7 @@
 import type { FC, HTMLAttributes } from 'react';
 
 export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   max?: number;
   value: number;
 }

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

@@ -1,6 +1,7 @@
 import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  children?: React.ReactNode;
   id: string;
   isDisabled?: boolean;
   isChecked?: boolean;
@@ -10,14 +11,4 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export interface RadioBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
-  isDisabled?: boolean;
-  isChecked?: boolean;
-  name?: string;
-}
-
-export const Radio: FC<RadioProps> & {
-  Label: FC<LabelHTMLAttributes<HTMLLabelElement> & { children: React.ReactNode }>;
-  Box: FC<RadioBoxProps>;
-};
+export const Radio: FC<RadioProps>;

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

@@ -3,15 +3,16 @@ import { ColorPropType } from '../shared';
 
 export interface SelectOption {
   value: string;
-  label: string;
+  content?: React.ReactNode | string;
   isDisabled?: boolean;
 }
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  children?: React.ReactNode;
   id?: string;
   value?: string;
   defaultValue?: string;
-  onChange?: (_value: string) => void;
+  onChange?: (option: SelectOption) => void;
   options: SelectOption[];
   placeholder?: string;
   label?: React.ReactNode;

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

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { ColorPropType } from '../shared';
 
 export interface SliderProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   value?: number;
   defaultValue?: number;
   min?: number;

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

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { ColorPropType } from '../shared';
 
 export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   color?: ColorPropType;
   size?: number;
 }

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

@@ -1,10 +1,14 @@
 import type { FC, HTMLAttributes } from 'react';
 import { BoxProps } from './box';
-import { DimensionPropType, AlignmentType } from '../shared';
+import { DimensionPropType, AlignmentType, DirectionType, FlexWrapType } from '../shared';
 
-export interface StackProps extends BoxProps, HTMLAttributes<HTMLDivElement> {
+export interface StackProps extends BoxProps {
+  children?: React.ReactNode;
   gap?: DimensionPropType;
+  direction?: DirectionType;
+  wrap?: FlexWrapType;
   alignItems?: AlignmentType;
+  justifyContent?: AlignmentType;
 }
 
 export const Stack: FC<StackProps>;

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

@@ -1,11 +1,12 @@
 import type { FC, InputHTMLAttributes } from 'react';
 
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  children?: React.ReactNode;
   id: string;
   isChecked?: boolean;
+  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
-  onChange?: (_e: React.ChangeEvent<HTMLInputElement>) => void;
-  label?: React.ReactNode;
+  label?: string;
   hint?: React.ReactNode;
 }
 

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

@@ -7,7 +7,7 @@ export interface TabGroupProps extends HTMLAttributes<HTMLDivElement> {
   hasFullWidth?: boolean;
 }
 
-export interface TabProps extends HTMLAttributes<HTMLButtonElement> {
+export interface TabProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   isActive?: boolean;
   onClick?: () => void;

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

@@ -0,0 +1,21 @@
+import type { FC, TextareaHTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+  children?: React.ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (_event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  placeholder?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  hasError?: boolean;
+  errorMessage?: string;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  backgroundColor?: ColorPropType;
+  rows?: number;
+}
+
+export const Textarea: FC<TextareaProps>;

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

@@ -1,16 +1,12 @@
 import type { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
 
-export interface TextButtonProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
-    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+export interface TextButtonProps extends HTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
-  icon?: React.ReactNode;
-  iconPosition?: 'left' | 'right';
-  variant?: 'neutral' | 'danger';
+  variant?: 'neutral' | 'accent' | 'danger';
   isDisabled?: boolean;
-  trimSide?: 'left' | 'right';
   type?: 'button' | 'submit' | 'reset';
   tag?: 'button' | 'a' | 'span';
+  onClick?: (_event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 }
 
 export const TextButton: FC<TextButtonProps>;

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

@@ -18,6 +18,7 @@ export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputEleme
   isReadOnly?: boolean;
   backgroundColor?: ColorPropType;
   onClear?: () => void;
+  children?: React.ReactNode;
 }
 
 export const TextInput: React.ForwardRefExoticComponent<

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

@@ -7,7 +7,6 @@ export interface TextToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
 export interface TextToggleProps extends HTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   isActive?: boolean;
-  isDisabled?: boolean;
 }
 
 export const TextToggleGroup: FC<TextToggleGroupProps>;

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

@@ -1,17 +1,30 @@
 import type { FC, HTMLAttributes } from 'react';
-import { ColorPropType } from '../shared';
+import {
+  ColorPropType,
+  TextSizePropType,
+  TextTransformType,
+  TextDisplayType,
+  TextAlignType,
+  TextWeightPropType,
+} from '../shared';
+import { textTag } from '../../types';
 
-export interface TextProps extends HTMLAttributes<HTMLElement> {
+export interface TextProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label';
-  size?: string;
-  weight?: string;
+  size?: TextSizePropType;
+  weight?: TextWeightPropType;
   color?: ColorPropType;
-  align?: 'left' | 'center' | 'right';
-  display?: 'block' | 'inline-block' | 'inline';
-  transform?: 'capitalize' | 'uppercase' | 'lowercase';
+  tag?: typeof textTag;
+  display?: TextDisplayType;
+  hasEllipsis?: boolean;
+  ellipsisLines?: number;
+  align?: TextAlignType;
+  letterSpacing?: string;
+  textTransform?: TextTransformType;
+  variant?: 'caps';
   trimTop?: boolean;
-  trimBottom?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export const Text: FC<TextProps>;

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

@@ -17,6 +17,7 @@ export interface TextareaProps
   backgroundColor?: ColorPropType;
   rows?: number;
   maxLength?: number;
+  children?: React.ReactNode;
 }
 
 export const Textarea: FC<TextareaProps>;

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

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { DimensionPropType } from '../shared';
 
 export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
   title?: React.ReactNode;

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

@@ -8,6 +8,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   zIndex?: number;
   placementMethod?: 'static' | 'dynamic';
   offset?: 'xs' | 's';
+  children?: React.ReactNode;
 }
 
 export interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {

package/es/types/foundational/menu.d.ts

@@ -51,7 +51,7 @@ export const MenuGroupTitle: FC<MenuGroupTitleProps>;
 export const MenuItemDivider: FC;
 
 export function useMenuPosition(config: MenuPositionConfig): {
-  refs: any;
+  refs: React.RefObject<HTMLElement>[];
   reference: (node: HTMLElement | null) => void;
   floating: (node: HTMLElement | null) => void;
   floatingStyles: React.CSSProperties;

package/es/types/shared.d.ts

@@ -1,4 +1,12 @@
-import { SpaceTokens, TextTokens, ColorTokens, RadiusTokens } from './tokens';
+import {
+  SpaceTokens,
+  TextTokens,
+  ColorTokens,
+  RadiusTokens,
+  TransitionTokens,
+  IconTokens,
+  WeightTokens,
+} from './tokens';
 import {
   overflows,
   axisAlignments,
@@ -17,8 +25,10 @@ import {
 export type OverflowPropType = (typeof overflows)[number];
 export type DimensionPropType = number | string | object | keyof SpaceTokens;
 export type TextSizePropType = number | string | object | keyof TextTokens;
+export type TextWeightPropType = keyof WeightTokens | string;
 export type ColorPropType = string | keyof ColorTokens;
 export type RadiusPropType = number | string | keyof RadiusTokens;
+export type TransitionPropType = string | keyof TransitionTokens;
 export type AlignmentType = (typeof axisAlignments)[number];
 export type DistributionType = (typeof distributions)[number];
 export type ContentPositionType = AlignmentType | DistributionType;
@@ -31,11 +41,4 @@ export type BorderWidthType = (typeof borderWidths)[number];
 export type TextTransformType = (typeof textTransforms)[number];
 export type TextDisplayType = (typeof textDisplays)[number];
 export type TextAlignType = (typeof textAlignments)[number];
-
-export interface TextTokens {
-  s: string;
-  m: string;
-  l: string;
-  xl: string;
-  xxl: string;
-}
+export type IconSizePropType = number | string | keyof IconTokens;

package/package.json

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

package/es/icons/icon-brush.js

@@ -1,17 +0,0 @@
-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 * as React from 'react';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-
-const IconBrush = props => ___EmotionJSX("svg", _extends({
-  viewBox: "0 0 28 36",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), ___EmotionJSX("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M4.5 3C3.67157 3 3 3.67157 3 4.5V16H25V4.5C25 3.67157 24.3284 3 23.5 3H22V12.5C22 13.3284 21.3284 14 20.5 14C19.6716 14 19 13.3284 19 12.5V3H16V8.5C16 9.32843 15.3284 10 14.5 10C13.6716 10 13 9.32843 13 8.5V3H4.5ZM25 19H3V22H7.5C9.98528 22 12 24.0147 12 26.5V30.5V33H16V30.5V26.5C16 24.0147 18.0147 22 20.5 22H25V19ZM0 4.5C0 2.01472 2.01472 0 4.5 0H14.5H20.5H23.5C25.9853 0 28 2.01472 28 4.5V17.5V23.5C28 24.3284 27.3284 25 26.5 25H20.5C19.6716 25 19 25.6716 19 26.5V30.5V34.5C19 35.3284 18.3284 36 17.5 36H10.5C9.67157 36 9 35.3284 9 34.5V30.5V26.5C9 25.6716 8.32843 25 7.5 25H1.5C0.671573 25 0 24.3284 0 23.5V17.5V4.5Z",
-  fill: "currentColor"
-}));
-
-export default IconBrush;