@flodesk/grain 11.35.1 → 11.35.2

package/README.md

@@ -24,7 +24,7 @@ function Demo() {
 
 ### Add text styles context
 
-Add `grn-context` class to a parent wrapper, this class sets dynamically the `line-height` and the `letter-spacing`. It can be added to a smaller UI section or to the page wrapper. Set it on as many wrappers as needed.
+Apply the `grn-context` class to any wrapper. It sets the `line-height` dynamically. Use it on as many wrappers as needed.
 
 In the future, once Grain is widely adopted, we will remove these classes and apply the text styles globally.
 

package/es/foundational/field.js

@@ -16,17 +16,9 @@ import { IconCross } from '../icons';
 import { getColor, getRadius, getSpace, getTransition, getWeight } from '../utilities';
 import { styles } from './styles';
 import { types } from '../types';
-import PropTypes from 'prop-types';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export const fieldVars = {
-  xPadding: '12px',
-  borderColor: getColor('fade3'),
-  borderColorHover: getColor('fade6'),
-  borderColorFocus: getColor('shade9'),
-  borderColorDisabled: getColor('shade5'),
-  backgroundColorDisabled: getColor('shade2')
-}; // fix for safari v16, incorrect color when disabled
+import PropTypes from 'prop-types'; // fix for safari v16, incorrect color when disabled
 
+import { jsx as ___EmotionJSX } from "@emotion/react";
 const safari16Fix = "\n  &:not(:placeholder-shown) {\n    -webkit-text-fill-color: ".concat(getColor('content'), ";\n  }\n  &:placeholder-shown {\n    -webkit-text-fill-color: var(--grn-field-placeholder-color);\n  }\n  opacity: 1;\n");
 export const fieldDisabledStyles = "\n  background-color: var(--grn-field-background-disabled);\n  border-color: var(--grn-field-border-color-disabled);\n  ".concat(safari16Fix, ";\n");
 export const fieldPlaceholderStyles = "\n  /* these selectors are needed to force the color */\n  &:not(:disabled, :read-only)::placeholder,\n  &:disabled::placeholder,\n  &:read-only::placeholder {\n    color: var(--grn-field-placeholder-color);\n  }\n";
@@ -58,7 +50,7 @@ const InputFieldRoot = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "p
     paddingRight
   } = _ref3;
   return "0 ".concat(getSpace(paddingRight), " 0 ").concat(getSpace(paddingLeft));
-}, ";height:var(--grn-textbox-height-m);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvZmllbGQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtGbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9maWVsZC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGV4dCwgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNyb3NzIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBmaWVsZFZhcnMgPSB7XG4gIHhQYWRkaW5nOiAnMTJweCcsXG4gIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTMnKSxcbiAgYm9yZGVyQ29sb3JIb3ZlcjogZ2V0Q29sb3IoJ2ZhZGU2JyksXG4gIGJvcmRlckNvbG9yRm9jdXM6IGdldENvbG9yKCdzaGFkZTknKSxcbiAgYm9yZGVyQ29sb3JEaXNhYmxlZDogZ2V0Q29sb3IoJ3NoYWRlNScpLFxuICBiYWNrZ3JvdW5kQ29sb3JEaXNhYmxlZDogZ2V0Q29sb3IoJ3NoYWRlMicpLFxufTtcblxuLy8gZml4IGZvciBzYWZhcmkgdjE2LCBpbmNvcnJlY3QgY29sb3Igd2hlbiBkaXNhYmxlZFxuY29uc3Qgc2FmYXJpMTZGaXggPSBgXG4gICY6bm90KDpwbGFjZWhvbGRlci1zaG93bikge1xuICAgIC13ZWJraXQtdGV4dC1maWxsLWNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICB9XG4gICY6cGxhY2Vob2xkZXItc2hvd24ge1xuICAgIC13ZWJraXQtdGV4dC1maWxsLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtcGxhY2Vob2xkZXItY29sb3IpO1xuICB9XG4gIG9wYWNpdHk6IDE7XG5gO1xuXG5leHBvcnQgY29uc3QgZmllbGREaXNhYmxlZFN0eWxlcyA9IGBcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLWJhY2tncm91bmQtZGlzYWJsZWQpO1xuICBib3JkZXItY29sb3I6IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItZGlzYWJsZWQpO1xuICAke3NhZmFyaTE2Rml4fTtcbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZFBsYWNlaG9sZGVyU3R5bGVzID0gYFxuICAvKiB0aGVzZSBzZWxlY3RvcnMgYXJlIG5lZWRlZCB0byBmb3JjZSB0aGUgY29sb3IgKi9cbiAgJjpub3QoOmRpc2FibGVkLCA6cmVhZC1vbmx5KTo6cGxhY2Vob2xkZXIsXG4gICY6ZGlzYWJsZWQ6OnBsYWNlaG9sZGVyLFxuICAmOnJlYWQtb25seTo6cGxhY2Vob2xkZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tZmllbGQtcGxhY2Vob2xkZXItY29sb3IpO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0RmllbGRTdHlsZXMgPSAoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pID0+IGBcbiAgJHtzdHlsZXMudHJhbnNpdGlvbnN9O1xuICBhcHBlYXJhbmNlOiBub25lO1xuICBkaXNwbGF5OiBibG9jaztcbiAgZm9udDogaW5oZXJpdDtcbiAgY29sb3I6IGluaGVyaXQ7XG4gIHRyYW5zaXRpb24tcHJvcGVydHk6IGJvcmRlci1jb2xvcjtcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuXG4gIG91dGxpbmU6IG5vbmU7XG4gIGJvcmRlcjogdmFyKC0tZ3JuLWJvcmRlci1zaXplKSBzb2xpZDtcbiAgYm9yZGVyLWNvbG9yOiAke2dldENvbG9yKGhhc0Vycm9yID8gJ2RhbmdlcicgOiAndmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvciknKX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoYmFja2dyb3VuZENvbG9yID8gYmFja2dyb3VuZENvbG9yIDogJ3RyYW5zcGFyZW50Jyl9O1xuICAke2ZpZWxkUGxhY2Vob2xkZXJTdHlsZXN9O1xuXG4gICY6ZGlzYWJsZWQsXG4gICY6cmVhZC1vbmx5IHtcbiAgICAke2ZpZWxkRGlzYWJsZWRTdHlsZXN9XG4gIH1cblxuICAke1xuICAgICFoYXNFcnJvciAmJlxuICAgIGBcbiAgICAmOm5vdCg6ZGlzYWJsZWQsIDpyZWFkLW9ubHkpIHtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItaG92ZXIpO1xuICAgICAgfVxuXG4gICAgICAmOmZvY3VzIHtcbiAgICAgICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdhY3RpdmUnKX07XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvci1mb2N1cyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gIH1cbmA7XG5cbmNvbnN0IElucHV0RmllbGRSb290ID0gc3R5bGVkLmlucHV0YFxuICAkeyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSkgPT4gZ2V0RmllbGRTdHlsZXMoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pfTtcbiAgcGFkZGluZzogJHsoeyBwYWRkaW5nTGVmdCwgcGFkZGluZ1JpZ2h0IH0pID0+XG4gICAgYDAgJHtnZXRTcGFjZShwYWRkaW5nUmlnaHQpfSAwICR7Z2V0U3BhY2UocGFkZGluZ0xlZnQpfWB9O1xuICBoZWlnaHQ6IHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEZpZWxkID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHBhZGRpbmdMZWZ0ID0gJ3ZhcigtLWdybi1maWVsZC1wYWRkaW5nWCknLFxuICAgICAgcGFkZGluZ1JpZ2h0ID0gJ3ZhcigtLWdybi1maWVsZC1wYWRkaW5nWCknLFxuICAgICAgaGFzRXJyb3IsXG4gICAgICBpc1JlYWRPbmx5LFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGJhY2tncm91bmRDb2xvcixcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4gKFxuICAgIDxJbnB1dEZpZWxkUm9vdFxuICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgcGFkZGluZ1JpZ2h0PXtwYWRkaW5nUmlnaHR9XG4gICAgICByZWFkT25seT17aXNSZWFkT25seX1cbiAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I9e2JhY2tncm91bmRDb2xvcn1cbiAgICAgIHsuLi5wcm9wc31cbiAgICAvPlxuICApLFxuKTtcblxuSW5wdXRGaWVsZC5wcm9wVHlwZXMgPSB7XG4gIHBhZGRpbmdMZWZ0OiB0eXBlcy5zcGFjZSxcbiAgcGFkZGluZ1JpZ2h0OiB0eXBlcy5zcGFjZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBpc1JlYWRPbmx5OiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGJhY2tncm91bmRDb2xvcjogdHlwZXMuY29sb3IsXG59O1xuXG5jb25zdCBGaWVsZExhYmVsUm9vdCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG5cbiAgLyogVE9ETzogcmVtb3ZlIGFmdGVyIGRlbGV0aW5nIEJvb3RzdHJhcCAqL1xuICBtYXJnaW46IHVuc2V0O1xuYDtcblxuZXhwb3J0IGNvbnN0IEZpZWxkTGFiZWwgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPEZpZWxkTGFiZWxSb290IHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9GaWVsZExhYmVsUm9vdD5cbikpO1xuXG5GaWVsZExhYmVsLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkSGludCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8VGV4dCBjb2xvcj1cImNvbnRlbnQyXCIgcmVmPXtyZWZ9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1RleHQ+XG4pKTtcblxuRmllbGRIaW50LnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkQ2xlYXJCdXR0b24gPSAoeyBvbkNsaWNrLCB0YWcgPSAnYnV0dG9uJywgLi4ucHJvcHMgfSkgPT4gKFxuICA8SWNvbkJ1dHRvbiBpY29uPXs8SWNvbkNyb3NzIC8+fSBvbkNsaWNrPXtvbkNsaWNrfSB0YWc9e3RhZ30gey4uLnByb3BzfSAvPlxuKTtcblxuRmllbGRDbGVhckJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbn07XG4iXX0= */"));
+}, ";height:var(--grn-textbox-height-m);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvZmllbGQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlFbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9maWVsZC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGV4dCwgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNyb3NzIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbi8vIGZpeCBmb3Igc2FmYXJpIHYxNiwgaW5jb3JyZWN0IGNvbG9yIHdoZW4gZGlzYWJsZWRcbmNvbnN0IHNhZmFyaTE2Rml4ID0gYFxuICAmOm5vdCg6cGxhY2Vob2xkZXItc2hvd24pIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuICAmOnBsYWNlaG9sZGVyLXNob3duIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuICBvcGFjaXR5OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkRGlzYWJsZWRTdHlsZXMgPSBgXG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWdybi1maWVsZC1iYWNrZ3JvdW5kLWRpc2FibGVkKTtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWRpc2FibGVkKTtcbiAgJHtzYWZhcmkxNkZpeH07XG5gO1xuXG5leHBvcnQgY29uc3QgZmllbGRQbGFjZWhvbGRlclN0eWxlcyA9IGBcbiAgLyogdGhlc2Ugc2VsZWN0b3JzIGFyZSBuZWVkZWQgdG8gZm9yY2UgdGhlIGNvbG9yICovXG4gICY6bm90KDpkaXNhYmxlZCwgOnJlYWQtb25seSk6OnBsYWNlaG9sZGVyLFxuICAmOmRpc2FibGVkOjpwbGFjZWhvbGRlcixcbiAgJjpyZWFkLW9ubHk6OnBsYWNlaG9sZGVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZpZWxkU3R5bGVzID0gKHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KSA9PiBgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiBib3JkZXItY29sb3I7XG4gIHdpZHRoOiAxMDAlO1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcblxuICBvdXRsaW5lOiBub25lO1xuICBib3JkZXI6IHZhcigtLWdybi1ib3JkZXItc2l6ZSkgc29saWQ7XG4gIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcihoYXNFcnJvciA/ICdkYW5nZXInIDogJ3ZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3IpJyl9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvciA/IGJhY2tncm91bmRDb2xvciA6ICd0cmFuc3BhcmVudCcpfTtcbiAgJHtmaWVsZFBsYWNlaG9sZGVyU3R5bGVzfTtcblxuICAmOmRpc2FibGVkLFxuICAmOnJlYWQtb25seSB7XG4gICAgJHtmaWVsZERpc2FibGVkU3R5bGVzfVxuICB9XG5cbiAgJHtcbiAgICAhaGFzRXJyb3IgJiZcbiAgICBgXG4gICAgJjpub3QoOmRpc2FibGVkLCA6cmVhZC1vbmx5KSB7XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWhvdmVyKTtcbiAgICAgIH1cblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItZm9jdXMpO1xuICAgICAgfVxuICAgIH1cbiAgYFxuICB9XG5gO1xuXG5jb25zdCBJbnB1dEZpZWxkUm9vdCA9IHN0eWxlZC5pbnB1dGBcbiAgJHsoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pID0+IGdldEZpZWxkU3R5bGVzKHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KX07XG4gIHBhZGRpbmc6ICR7KHsgcGFkZGluZ0xlZnQsIHBhZGRpbmdSaWdodCB9KSA9PlxuICAgIGAwICR7Z2V0U3BhY2UocGFkZGluZ1JpZ2h0KX0gMCAke2dldFNwYWNlKHBhZGRpbmdMZWZ0KX1gfTtcbiAgaGVpZ2h0OiB2YXIoLS1ncm4tdGV4dGJveC1oZWlnaHQtbSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSW5wdXRGaWVsZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBwYWRkaW5nTGVmdCA9ICd2YXIoLS1ncm4tZmllbGQtcGFkZGluZ1gpJyxcbiAgICAgIHBhZGRpbmdSaWdodCA9ICd2YXIoLS1ncm4tZmllbGQtcGFkZGluZ1gpJyxcbiAgICAgIGhhc0Vycm9yLFxuICAgICAgaXNSZWFkT25seSxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8SW5wdXRGaWVsZFJvb3RcbiAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgIHBhZGRpbmdSaWdodD17cGFkZGluZ1JpZ2h0fVxuICAgICAgcmVhZE9ubHk9e2lzUmVhZE9ubHl9XG4gICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgIHJlZj17cmVmfVxuICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgYmFja2dyb3VuZENvbG9yPXtiYWNrZ3JvdW5kQ29sb3J9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKSxcbik7XG5cbklucHV0RmllbGQucHJvcFR5cGVzID0ge1xuICBwYWRkaW5nTGVmdDogdHlwZXMuc3BhY2UsXG4gIHBhZGRpbmdSaWdodDogdHlwZXMuc3BhY2UsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNSZWFkT25seTogUHJvcFR5cGVzLmJvb2wsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHR5cGVzLmNvbG9yLFxufTtcblxuY29uc3QgRmllbGRMYWJlbFJvb3QgPSBzdHlsZWQubGFiZWxgXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuXG4gIC8qIFRPRE86IHJlbW92ZSBhZnRlciBkZWxldGluZyBCb290c3RyYXAgKi9cbiAgbWFyZ2luOiB1bnNldDtcbmA7XG5cbmV4cG9ydCBjb25zdCBGaWVsZExhYmVsID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxGaWVsZExhYmVsUm9vdCByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvRmllbGRMYWJlbFJvb3Q+XG4pKTtcblxuRmllbGRMYWJlbC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbmV4cG9ydCBjb25zdCBGaWVsZEhpbnQgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFRleHQgY29sb3I9XCJjb250ZW50MlwiIHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9UZXh0PlxuKSk7XG5cbkZpZWxkSGludC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbmV4cG9ydCBjb25zdCBGaWVsZENsZWFyQnV0dG9uID0gKHsgb25DbGljaywgdGFnID0gJ2J1dHRvbicsIC4uLnByb3BzIH0pID0+IChcbiAgPEljb25CdXR0b24gaWNvbj17PEljb25Dcm9zcyAvPn0gb25DbGljaz17b25DbGlja30gdGFnPXt0YWd9IHsuLi5wcm9wc30gLz5cbik7XG5cbkZpZWxkQ2xlYXJCdXR0b24ucHJvcFR5cGVzID0ge1xuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG59O1xuIl19 */"));
 
 export const InputField = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
@@ -95,7 +87,7 @@ const FieldLabelRoot = /*#__PURE__*/_styled("label", process.env.NODE_ENV === "p
 } : {
   target: "e1swxi6p0",
   label: "FieldLabelRoot"
-})("display:block;font-weight:", getWeight('medium'), ";transition:", getTransition('fast'), ";margin:unset;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvZmllbGQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRIbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9maWVsZC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGV4dCwgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNyb3NzIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBmaWVsZFZhcnMgPSB7XG4gIHhQYWRkaW5nOiAnMTJweCcsXG4gIGJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTMnKSxcbiAgYm9yZGVyQ29sb3JIb3ZlcjogZ2V0Q29sb3IoJ2ZhZGU2JyksXG4gIGJvcmRlckNvbG9yRm9jdXM6IGdldENvbG9yKCdzaGFkZTknKSxcbiAgYm9yZGVyQ29sb3JEaXNhYmxlZDogZ2V0Q29sb3IoJ3NoYWRlNScpLFxuICBiYWNrZ3JvdW5kQ29sb3JEaXNhYmxlZDogZ2V0Q29sb3IoJ3NoYWRlMicpLFxufTtcblxuLy8gZml4IGZvciBzYWZhcmkgdjE2LCBpbmNvcnJlY3QgY29sb3Igd2hlbiBkaXNhYmxlZFxuY29uc3Qgc2FmYXJpMTZGaXggPSBgXG4gICY6bm90KDpwbGFjZWhvbGRlci1zaG93bikge1xuICAgIC13ZWJraXQtdGV4dC1maWxsLWNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICB9XG4gICY6cGxhY2Vob2xkZXItc2hvd24ge1xuICAgIC13ZWJraXQtdGV4dC1maWxsLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtcGxhY2Vob2xkZXItY29sb3IpO1xuICB9XG4gIG9wYWNpdHk6IDE7XG5gO1xuXG5leHBvcnQgY29uc3QgZmllbGREaXNhYmxlZFN0eWxlcyA9IGBcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLWJhY2tncm91bmQtZGlzYWJsZWQpO1xuICBib3JkZXItY29sb3I6IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItZGlzYWJsZWQpO1xuICAke3NhZmFyaTE2Rml4fTtcbmA7XG5cbmV4cG9ydCBjb25zdCBmaWVsZFBsYWNlaG9sZGVyU3R5bGVzID0gYFxuICAvKiB0aGVzZSBzZWxlY3RvcnMgYXJlIG5lZWRlZCB0byBmb3JjZSB0aGUgY29sb3IgKi9cbiAgJjpub3QoOmRpc2FibGVkLCA6cmVhZC1vbmx5KTo6cGxhY2Vob2xkZXIsXG4gICY6ZGlzYWJsZWQ6OnBsYWNlaG9sZGVyLFxuICAmOnJlYWQtb25seTo6cGxhY2Vob2xkZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tZmllbGQtcGxhY2Vob2xkZXItY29sb3IpO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0RmllbGRTdHlsZXMgPSAoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pID0+IGBcbiAgJHtzdHlsZXMudHJhbnNpdGlvbnN9O1xuICBhcHBlYXJhbmNlOiBub25lO1xuICBkaXNwbGF5OiBibG9jaztcbiAgZm9udDogaW5oZXJpdDtcbiAgY29sb3I6IGluaGVyaXQ7XG4gIHRyYW5zaXRpb24tcHJvcGVydHk6IGJvcmRlci1jb2xvcjtcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuXG4gIG91dGxpbmU6IG5vbmU7XG4gIGJvcmRlcjogdmFyKC0tZ3JuLWJvcmRlci1zaXplKSBzb2xpZDtcbiAgYm9yZGVyLWNvbG9yOiAke2dldENvbG9yKGhhc0Vycm9yID8gJ2RhbmdlcicgOiAndmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvciknKX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoYmFja2dyb3VuZENvbG9yID8gYmFja2dyb3VuZENvbG9yIDogJ3RyYW5zcGFyZW50Jyl9O1xuICAke2ZpZWxkUGxhY2Vob2xkZXJTdHlsZXN9O1xuXG4gICY6ZGlzYWJsZWQsXG4gICY6cmVhZC1vbmx5IHtcbiAgICAke2ZpZWxkRGlzYWJsZWRTdHlsZXN9XG4gIH1cblxuICAke1xuICAgICFoYXNFcnJvciAmJlxuICAgIGBcbiAgICAmOm5vdCg6ZGlzYWJsZWQsIDpyZWFkLW9ubHkpIHtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItaG92ZXIpO1xuICAgICAgfVxuXG4gICAgICAmOmZvY3VzIHtcbiAgICAgICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdhY3RpdmUnKX07XG4gICAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLWJvcmRlci1jb2xvci1mb2N1cyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gIH1cbmA7XG5cbmNvbnN0IElucHV0RmllbGRSb290ID0gc3R5bGVkLmlucHV0YFxuICAkeyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSkgPT4gZ2V0RmllbGRTdHlsZXMoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pfTtcbiAgcGFkZGluZzogJHsoeyBwYWRkaW5nTGVmdCwgcGFkZGluZ1JpZ2h0IH0pID0+XG4gICAgYDAgJHtnZXRTcGFjZShwYWRkaW5nUmlnaHQpfSAwICR7Z2V0U3BhY2UocGFkZGluZ0xlZnQpfWB9O1xuICBoZWlnaHQ6IHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEZpZWxkID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHBhZGRpbmdMZWZ0ID0gJ3ZhcigtLWdybi1maWVsZC1wYWRkaW5nWCknLFxuICAgICAgcGFkZGluZ1JpZ2h0ID0gJ3ZhcigtLWdybi1maWVsZC1wYWRkaW5nWCknLFxuICAgICAgaGFzRXJyb3IsXG4gICAgICBpc1JlYWRPbmx5LFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGJhY2tncm91bmRDb2xvcixcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4gKFxuICAgIDxJbnB1dEZpZWxkUm9vdFxuICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgcGFkZGluZ1JpZ2h0PXtwYWRkaW5nUmlnaHR9XG4gICAgICByZWFkT25seT17aXNSZWFkT25seX1cbiAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I9e2JhY2tncm91bmRDb2xvcn1cbiAgICAgIHsuLi5wcm9wc31cbiAgICAvPlxuICApLFxuKTtcblxuSW5wdXRGaWVsZC5wcm9wVHlwZXMgPSB7XG4gIHBhZGRpbmdMZWZ0OiB0eXBlcy5zcGFjZSxcbiAgcGFkZGluZ1JpZ2h0OiB0eXBlcy5zcGFjZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBpc1JlYWRPbmx5OiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGJhY2tncm91bmRDb2xvcjogdHlwZXMuY29sb3IsXG59O1xuXG5jb25zdCBGaWVsZExhYmVsUm9vdCA9IHN0eWxlZC5sYWJlbGBcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG5cbiAgLyogVE9ETzogcmVtb3ZlIGFmdGVyIGRlbGV0aW5nIEJvb3RzdHJhcCAqL1xuICBtYXJnaW46IHVuc2V0O1xuYDtcblxuZXhwb3J0IGNvbnN0IEZpZWxkTGFiZWwgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPEZpZWxkTGFiZWxSb290IHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9GaWVsZExhYmVsUm9vdD5cbikpO1xuXG5GaWVsZExhYmVsLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkSGludCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8VGV4dCBjb2xvcj1cImNvbnRlbnQyXCIgcmVmPXtyZWZ9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1RleHQ+XG4pKTtcblxuRmllbGRIaW50LnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuZXhwb3J0IGNvbnN0IEZpZWxkQ2xlYXJCdXR0b24gPSAoeyBvbkNsaWNrLCB0YWcgPSAnYnV0dG9uJywgLi4ucHJvcHMgfSkgPT4gKFxuICA8SWNvbkJ1dHRvbiBpY29uPXs8SWNvbkNyb3NzIC8+fSBvbkNsaWNrPXtvbkNsaWNrfSB0YWc9e3RhZ30gey4uLnByb3BzfSAvPlxuKTtcblxuRmllbGRDbGVhckJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbn07XG4iXX0= */"));
+})("display:block;font-weight:", getWeight('medium'), ";transition:", getTransition('fast'), ";margin:unset;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvZmllbGQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1IbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9maWVsZC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVGV4dCwgSWNvbkJ1dHRvbiB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgSWNvbkNyb3NzIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbi8vIGZpeCBmb3Igc2FmYXJpIHYxNiwgaW5jb3JyZWN0IGNvbG9yIHdoZW4gZGlzYWJsZWRcbmNvbnN0IHNhZmFyaTE2Rml4ID0gYFxuICAmOm5vdCg6cGxhY2Vob2xkZXItc2hvd24pIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuICAmOnBsYWNlaG9sZGVyLXNob3duIHtcbiAgICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuICBvcGFjaXR5OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGZpZWxkRGlzYWJsZWRTdHlsZXMgPSBgXG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWdybi1maWVsZC1iYWNrZ3JvdW5kLWRpc2FibGVkKTtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWRpc2FibGVkKTtcbiAgJHtzYWZhcmkxNkZpeH07XG5gO1xuXG5leHBvcnQgY29uc3QgZmllbGRQbGFjZWhvbGRlclN0eWxlcyA9IGBcbiAgLyogdGhlc2Ugc2VsZWN0b3JzIGFyZSBuZWVkZWQgdG8gZm9yY2UgdGhlIGNvbG9yICovXG4gICY6bm90KDpkaXNhYmxlZCwgOnJlYWQtb25seSk6OnBsYWNlaG9sZGVyLFxuICAmOmRpc2FibGVkOjpwbGFjZWhvbGRlcixcbiAgJjpyZWFkLW9ubHk6OnBsYWNlaG9sZGVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWZpZWxkLXBsYWNlaG9sZGVyLWNvbG9yKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldEZpZWxkU3R5bGVzID0gKHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KSA9PiBgXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiBib3JkZXItY29sb3I7XG4gIHdpZHRoOiAxMDAlO1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcblxuICBvdXRsaW5lOiBub25lO1xuICBib3JkZXI6IHZhcigtLWdybi1ib3JkZXItc2l6ZSkgc29saWQ7XG4gIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcihoYXNFcnJvciA/ICdkYW5nZXInIDogJ3ZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3IpJyl9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKGJhY2tncm91bmRDb2xvciA/IGJhY2tncm91bmRDb2xvciA6ICd0cmFuc3BhcmVudCcpfTtcbiAgJHtmaWVsZFBsYWNlaG9sZGVyU3R5bGVzfTtcblxuICAmOmRpc2FibGVkLFxuICAmOnJlYWQtb25seSB7XG4gICAgJHtmaWVsZERpc2FibGVkU3R5bGVzfVxuICB9XG5cbiAgJHtcbiAgICAhaGFzRXJyb3IgJiZcbiAgICBgXG4gICAgJjpub3QoOmRpc2FibGVkLCA6cmVhZC1vbmx5KSB7XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tZmllbGQtYm9yZGVyLWNvbG9yLWhvdmVyKTtcbiAgICAgIH1cblxuICAgICAgJjpmb2N1cyB7XG4gICAgICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICAgICAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1maWVsZC1ib3JkZXItY29sb3ItZm9jdXMpO1xuICAgICAgfVxuICAgIH1cbiAgYFxuICB9XG5gO1xuXG5jb25zdCBJbnB1dEZpZWxkUm9vdCA9IHN0eWxlZC5pbnB1dGBcbiAgJHsoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pID0+IGdldEZpZWxkU3R5bGVzKHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KX07XG4gIHBhZGRpbmc6ICR7KHsgcGFkZGluZ0xlZnQsIHBhZGRpbmdSaWdodCB9KSA9PlxuICAgIGAwICR7Z2V0U3BhY2UocGFkZGluZ1JpZ2h0KX0gMCAke2dldFNwYWNlKHBhZGRpbmdMZWZ0KX1gfTtcbiAgaGVpZ2h0OiB2YXIoLS1ncm4tdGV4dGJveC1oZWlnaHQtbSk7XG5gO1xuXG5leHBvcnQgY29uc3QgSW5wdXRGaWVsZCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBwYWRkaW5nTGVmdCA9ICd2YXIoLS1ncm4tZmllbGQtcGFkZGluZ1gpJyxcbiAgICAgIHBhZGRpbmdSaWdodCA9ICd2YXIoLS1ncm4tZmllbGQtcGFkZGluZ1gpJyxcbiAgICAgIGhhc0Vycm9yLFxuICAgICAgaXNSZWFkT25seSxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IChcbiAgICA8SW5wdXRGaWVsZFJvb3RcbiAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgIHBhZGRpbmdSaWdodD17cGFkZGluZ1JpZ2h0fVxuICAgICAgcmVhZE9ubHk9e2lzUmVhZE9ubHl9XG4gICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgIHJlZj17cmVmfVxuICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgYmFja2dyb3VuZENvbG9yPXtiYWNrZ3JvdW5kQ29sb3J9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKSxcbik7XG5cbklucHV0RmllbGQucHJvcFR5cGVzID0ge1xuICBwYWRkaW5nTGVmdDogdHlwZXMuc3BhY2UsXG4gIHBhZGRpbmdSaWdodDogdHlwZXMuc3BhY2UsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNSZWFkT25seTogUHJvcFR5cGVzLmJvb2wsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHR5cGVzLmNvbG9yLFxufTtcblxuY29uc3QgRmllbGRMYWJlbFJvb3QgPSBzdHlsZWQubGFiZWxgXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuXG4gIC8qIFRPRE86IHJlbW92ZSBhZnRlciBkZWxldGluZyBCb290c3RyYXAgKi9cbiAgbWFyZ2luOiB1bnNldDtcbmA7XG5cbmV4cG9ydCBjb25zdCBGaWVsZExhYmVsID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxGaWVsZExhYmVsUm9vdCByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvRmllbGRMYWJlbFJvb3Q+XG4pKTtcblxuRmllbGRMYWJlbC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbmV4cG9ydCBjb25zdCBGaWVsZEhpbnQgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFRleHQgY29sb3I9XCJjb250ZW50MlwiIHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9UZXh0PlxuKSk7XG5cbkZpZWxkSGludC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbmV4cG9ydCBjb25zdCBGaWVsZENsZWFyQnV0dG9uID0gKHsgb25DbGljaywgdGFnID0gJ2J1dHRvbicsIC4uLnByb3BzIH0pID0+IChcbiAgPEljb25CdXR0b24gaWNvbj17PEljb25Dcm9zcyAvPn0gb25DbGljaz17b25DbGlja30gdGFnPXt0YWd9IHsuLi5wcm9wc30gLz5cbik7XG5cbkZpZWxkQ2xlYXJCdXR0b24ucHJvcFR5cGVzID0ge1xuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG59O1xuIl19 */"));
 
 export const FieldLabel = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {

package/es/foundational/styles.js

@@ -1,9 +1,6 @@
 import { getColor, getRadius, getTextSize, getTransition, getWeight } from '../utilities';
 export const capHeight = "0.74em";
 export const lineHeightAndCapHeightOffset = "calc((var(--grn-lineHeight-global) - ".concat(capHeight, ") / 2)");
-export const componentVars = {
-  strokeSize: '1px'
-};
 const buttonResetStyles = "\n  appearance: none;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ".concat(getWeight('medium'), ";\n  cursor: pointer;\n");
 export const transitionStyles = "\n  transition: ".concat(getTransition('leave'), ";\n\n  &:hover {\n    transition: ").concat(getTransition('hover'), ";\n  }\n\n  &:active {\n    transition: ").concat(getTransition('active'), ";\n  }\n");
 export const styles = {

package/es/styles/foundational.js

@@ -1,4 +1,4 @@
-const legacyVariables = "\n  :root {\n    --grn-textBoxHeight: 40px;\n    --grn-space-fieldPaddingX: 12px;\n    --grn-color-fieldBorder: var(--grn-color-fade3);\n    --grn-color-fieldBorderHover: var(--grn-color-fade6);\n    --grn-color-fieldBorderFocus: var(--grn-color-shade9);\n    --grn-color-fieldBorderDisabled: var(--grn-color-shade5);\n    --grn-color-fieldBackgroundDisabled: var(--grn-color-shade2);\n\n    --grn-space-betweenFormTitleAndContent: var(--grn-space-l);\n    --grn-space-betweenFormContents: var(--grn-space-m);\n    --grn-space-betweenFormContentAndActions: var(--grn-space-xl);\n    --grn-space-betweenFormControlAndLabel: var(--grn-space-s);\n\n    --grn-textbox-textSize-s: var(--grn-text-s);\n  }\n";
+const legacyVariables = "\n  :root {\n    --grn-textbox-textSize-s: var(--grn-text-s);\n  }\n";
 export const borderVariables = "\n  :root {\n    --grn-border-size: 1px;\n  }\n";
 const capValue = "\n  :root {\n    @supports not (font-size: 1cap) { --grn-cap-value: 0.74em }\n    @supports (font-size: 1cap) { --grn-cap-value: 1cap }\n  }\n";
 export const capVariables = "\n  :root {\n    --grn-cap: var(--grn-cap-value);\n  }\n";
@@ -8,5 +8,6 @@ const experiments = "\n  [data-experiment-compact-textbox=\"true\"] {\n    --grn
 export const textboxVariables = "\n  :root {\n    --grn-textbox-height-s: 28px;\n    --grn-textbox-paddingX-s: var(--grn-space-s);\n    --grn-textbox-radius-s: var(--grn-radius-xs);\n    --grn-textbox-text-s: var(--grn-text-s);\n\n    --grn-textbox-height-m: 40px;\n    --grn-textbox-paddingX-m: var(--grn-space-m);\n    --grn-textbox-radius-m: var(--grn-radius-s);\n    --grn-textbox-text-m: var(--grn-text-m);\n  }\n";
 export const clearbuttonVariables = "\n  :root {\n    --grn-clearbutton-height: 36px;\n  }\n";
 export const formVariables = "\n  :root {\n    --grn-form-title-content-gap: var(--grn-space-l);\n    --grn-form-contents-gap: var(--grn-space-m);\n    --grn-form-content-actions-gap: var(--grn-space-xl);\n    --grn-form-control-label-gap: var(--grn-space-s);\n  }\n";
-const foundationalVariables = "\n  ".concat(legacyVariables, "\n  ").concat(fieldVariables, "\n  ").concat(componentVariables, "\n  ").concat(textboxVariables, "\n  ").concat(clearbuttonVariables, "\n  ").concat(experiments, "\n  ").concat(capValue, "\n  ").concat(capVariables, "\n  ").concat(borderVariables, "\n  ").concat(formVariables, "\n");
+export const transitionVariables = "\n  :root {\n    --grn-transition-leave: var(--grn-transition-slow);\n    --grn-transition-hover: var(--grn-transition-fast);\n    --grn-transition-active: var(--grn-transition-xxFast);\n  }\n";
+const foundationalVariables = "\n  ".concat(legacyVariables, "\n  ").concat(fieldVariables, "\n  ").concat(componentVariables, "\n  ").concat(textboxVariables, "\n  ").concat(clearbuttonVariables, "\n  ").concat(experiments, "\n  ").concat(capValue, "\n  ").concat(capVariables, "\n  ").concat(borderVariables, "\n  ").concat(formVariables, "\n  ").concat(transitionVariables, "\n");
 export default foundationalVariables;

package/es/styles/variables.js

@@ -1,2 +1,2 @@
-const variables = "\n  :root {\n    --grn-unit: 8px;\n  }\n\n  :root {\n    --grn-text-s: 12px;\n    --grn-text-m: 14px;\n    --grn-text-l: 18px;\n    --grn-text-xl: 24px;\n    --grn-text-xxl: 30px;\n  }\n\n  /* text size \u2715 ~1.2 */\n  :root {\n    --grn-icon-s: 14px;\n    --grn-icon-m: 18px;\n    --grn-icon-l: 22px;\n    --grn-icon-xl: 28px;\n    --grn-icon-xxl: 36px;\n  }\n\n  :root {\n    --grn-weight-normal: 400;\n    --grn-weight-medium: 500;\n  }\n\n  :root {\n    --grn-space-xs: calc(var(--grn-unit) / 2);\n    --grn-space-s: calc(var(--grn-unit) * 1);\n    --grn-space-s2: calc(var(--grn-unit) * 1.5);\n    --grn-space-m: calc(var(--grn-unit) * 2);\n    --grn-space-l: calc(var(--grn-unit) * 3);\n    --grn-space-l2: calc(var(--grn-unit) * 4);\n    --grn-space-xl: calc(var(--grn-unit) * 5);\n    --grn-space-xl2: calc(var(--grn-unit) * 6);\n    --grn-space-xxl: calc(var(--grn-unit) * 7);\n  }\n\n  :root {\n    --grn-radius-xs: 3px;\n    --grn-radius-s: 6px;\n    --grn-radius-m: 8px;\n    --grn-radius-l: 10px;\n  }\n\n  :root {\n    --grn-transition-slow: 400ms;\n    --grn-transition-fast: 200ms;\n    --grn-transition-xFast: 160ms;\n    --grn-transition-xxFast: 80ms;\n  }\n\n  :root,\n  [data-theme] {\n    --grn-color-backdrop: hsl(var(--H) 15% 10% / 0.6);\n\n    --grn-transition-leave: var(--grn-transition-slow);\n    --grn-transition-hover: var(--grn-transition-fast);\n    --grn-transition-active: var(--grn-transition-xxFast);\n  }\n";
+const variables = "\n  :root {\n    --grn-unit: 8px;\n  }\n\n  :root {\n    --grn-text-s: 12px;\n    --grn-text-m: 14px;\n    --grn-text-l: 18px;\n    --grn-text-xl: 24px;\n    --grn-text-xxl: 30px;\n  }\n\n  /* text size \u2715 ~1.2 */\n  :root {\n    --grn-icon-s: 14px;\n    --grn-icon-m: 18px;\n    --grn-icon-l: 22px;\n    --grn-icon-xl: 28px;\n    --grn-icon-xxl: 36px;\n  }\n\n  :root {\n    --grn-weight-normal: 400;\n    --grn-weight-medium: 500;\n  }\n\n  :root {\n    --grn-space-xs: calc(var(--grn-unit) / 2);\n    --grn-space-s: calc(var(--grn-unit) * 1);\n    --grn-space-s2: calc(var(--grn-unit) * 1.5);\n    --grn-space-m: calc(var(--grn-unit) * 2);\n    --grn-space-l: calc(var(--grn-unit) * 3);\n    --grn-space-l2: calc(var(--grn-unit) * 4);\n    --grn-space-xl: calc(var(--grn-unit) * 5);\n    --grn-space-xl2: calc(var(--grn-unit) * 6);\n    --grn-space-xxl: calc(var(--grn-unit) * 7);\n  }\n\n  :root {\n    --grn-radius-xs: 3px;\n    --grn-radius-s: 6px;\n    --grn-radius-m: 8px;\n    --grn-radius-l: 10px;\n  }\n\n  :root {\n    --grn-transition-slow: 400ms;\n    --grn-transition-fast: 200ms;\n    --grn-transition-xFast: 160ms;\n    --grn-transition-xxFast: 80ms;\n  }\n\n  :root,\n  [data-theme] {\n    --grn-color-backdrop: hsl(var(--H) 15% 10% / 0.6);\n  }\n";
 export default variables;

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

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

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

@@ -0,0 +1,39 @@
+import type { FC, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ColorPropType } from '../shared';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface AutocompleteOption {
+  value: string;
+  content: string;
+  groupTitle?: string;
+  preContent?: React.ReactNode;
+  isDisabled?: boolean;
+}
+
+export interface AutocompleteProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  options: AutocompleteOption[];
+  value?: string;
+  onChange: (_selectedOption: AutocompleteOption) => void;
+  isCreatable?: boolean;
+  onCreate?: (_newOption: AutocompleteOption) => void;
+  menuPlacement?: MenuPlacement;
+  menuWidth?: string | number;
+  menuMaxHeight?: string;
+  menuZIndex?: number;
+  placeholder?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  menuItemsHaveEllipsis?: boolean;
+  hasPortal?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+  searchField?: string;
+  backgroundColor?: ColorPropType;
+  onClear?: () => void;
+}
+
+export const Autocomplete: FC<AutocompleteProps> & {
+  Label: FC<HTMLAttributes<HTMLLabelElement> & { children: React.ReactNode }>;
+  Hint: FC<HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }>;
+};

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

@@ -0,0 +1,45 @@
+import type { FC } from 'react';
+import { ColorPropType } from '../shared';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface Autocomplete2Option {
+  value: string;
+  content: string;
+  groupTitle?: string;
+  item?: (props: {
+    isActive: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    hasEllipsis?: boolean;
+  }) => React.ReactNode;
+  isDisabled?: boolean;
+}
+
+export interface Autocomplete2Props {
+  options: Autocomplete2Option[];
+  value?: string;
+  onChange: (option: Autocomplete2Option) => void;
+  isCreatable?: boolean;
+  onCreate?: (option: Autocomplete2Option) => void;
+  menuPlacement?: MenuPlacement;
+  menuWidth?: string | number;
+  menuMaxHeight?: string;
+  menuZIndex?: number;
+  placeholder?: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  menuItemsHaveEllipsis?: boolean;
+  hasPortal?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+  isDisabled?: boolean;
+  searchField?: string;
+  backgroundColor?: ColorPropType;
+  onClear?: () => void;
+}
+
+export const Autocomplete2: FC<Autocomplete2Props> & {
+  Label: FC<{ children: React.ReactNode }>;
+  Hint: FC<{ children: React.ReactNode }>;
+  Item: FC<{ children: React.ReactNode; hasEllipsis?: boolean; paddingLeft?: string }>;
+};

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

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

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

@@ -0,0 +1,59 @@
+import type { FC, DOMAttributes, PropsWithChildren, RefAttributes } from 'react';
+import {
+  ColorPropType,
+  DimensionPropType,
+  RadiusPropType,
+  PositionType,
+  OverflowPropType,
+  BorderWidthType,
+  SideType,
+} from '../shared';
+import { ShadowTokens } from '../tokens';
+
+export interface BoxProps
+  extends PropsWithChildren,
+    RefAttributes<HTMLDivElement>,
+    Partial<HTMLDivElement>,
+    DOMAttributes<HTMLDivElement> {
+  color?: ColorPropType;
+  colorHover?: ColorPropType;
+  backgroundColor?: ColorPropType;
+  backgroundColorHover?: ColorPropType;
+  borderColor?: ColorPropType;
+  borderColorHover?: ColorPropType;
+  borderWidth?: BorderWidthType;
+  borderSide?: SideType;
+  width?: DimensionPropType;
+  minWidth?: DimensionPropType;
+  maxWidth?: DimensionPropType;
+  height?: DimensionPropType;
+  minHeight?: DimensionPropType;
+  maxHeight?: DimensionPropType;
+  radius?: RadiusPropType;
+  shadow?: keyof ShadowTokens;
+  shadowHover?: keyof ShadowTokens;
+  padding?: DimensionPropType;
+  paddingTop?: DimensionPropType;
+  paddingBottom?: DimensionPropType;
+  paddingLeft?: DimensionPropType;
+  paddingRight?: DimensionPropType;
+  paddingX?: DimensionPropType;
+  paddingY?: DimensionPropType;
+  margin?: DimensionPropType;
+  marginTop?: DimensionPropType;
+  marginBottom?: DimensionPropType;
+  marginLeft?: DimensionPropType;
+  marginRight?: DimensionPropType;
+  marginX?: DimensionPropType;
+  marginY?: DimensionPropType;
+  position?: PositionType;
+  top?: DimensionPropType;
+  bottom?: DimensionPropType;
+  left?: DimensionPropType;
+  right?: DimensionPropType;
+  overflow?: OverflowPropType;
+  overflowX?: OverflowPropType;
+  overflowY?: OverflowPropType;
+}
+
+export const Box: FC<BoxProps>;

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

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

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

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+
+export type ButtonVariant = 'neutral' | 'accent' | 'danger';
+export type ButtonTag = 'button' | 'a' | 'span';
+
+export interface ButtonProps {
+  children?: React.ReactNode;
+  variant?: ButtonVariant;
+  isDisabled?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  hasFullWidth?: boolean;
+  hasSpinner?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  tag?: ButtonTag;
+  onClick?: (_event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+
+export const Button: FC<ButtonProps>;

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

@@ -0,0 +1,23 @@
+import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  id: string;
+  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  isIndeterminate?: boolean;
+  label?: string;
+  hint?: React.ReactNode;
+}
+
+export interface CheckboxBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  isIndeterminate?: boolean;
+}
+
+export const Checkbox: FC<CheckboxProps> & {
+  Label: FC<LabelHTMLAttributes<HTMLLabelElement> & { children: React.ReactNode }>;
+  Box: FC<CheckboxBoxProps>;
+};

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

@@ -0,0 +1,26 @@
+import type { FC, HTMLAttributes } from 'react';
+import { DimensionPropType } from '../shared';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface DropdownOption {
+  type?: 'divider' | 'node';
+  icon?: React.ReactNode;
+  content?: React.ReactNode;
+  variant?: 'neutral' | 'danger';
+  onClick?: () => void;
+  node?: (_props: { requestClose: () => void }) => React.ReactNode;
+}
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  options: DropdownOption[];
+  menuPlacement?: MenuPlacement;
+  menuWidth?: DimensionPropType;
+  menuZIndex?: number;
+  trigger?: React.ReactNode;
+  hasPortal?: boolean;
+  onOpenChange?: (_isOpen: boolean) => void;
+}
+
+export const Dropdown: FC<DropdownProps> & {
+  Trigger: FC<HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }>;
+};

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

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

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

@@ -0,0 +1,16 @@
+import type { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
+    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  icon?: React.ReactNode;
+  color?: string;
+  variant?: 'neutral' | 'danger';
+  type?: 'button' | 'submit' | 'reset';
+  isActive?: boolean;
+  tag?: 'button' | 'a' | 'span';
+}
+
+export const IconButton: FC<IconButtonProps>;

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

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface IconToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface IconToggleProps extends HTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+}
+
+export const IconToggleGroup: FC<IconToggleGroupProps>;
+export const IconToggle: FC<IconToggleProps>;

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

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

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

@@ -0,0 +1,32 @@
+export * from './arrange';
+export * from './autocomplete';
+export * from './autocomplete2';
+export * from './badge';
+export * from './box';
+export * from './button';
+export * from './checkbox';
+export * from './dropdown';
+export * from './flex';
+export * from './icon';
+export * from './icon-button';
+export * from './icon-toggle';
+export * from './link';
+export * from './modal';
+export * from './nav';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './provider';
+export * from './radio';
+export * from './select';
+export * from './slider';
+export * from './spinner';
+export * from './stack';
+export * from './switch';
+export * from './tab';
+export * from './text-button';
+export * from './text-input';
+export * from './text-toggle';
+export * from './textarea';
+export * from './toast';
+export * from './tooltip';

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

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children?: React.ReactNode;
+  href?: string;
+  target?: string;
+  variant?: 'neutral' | 'subtle';
+  tag?: 'a' | 'button' | 'span';
+  onClick?: () => void;
+}
+
+export const Link: FC<LinkProps>;

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

@@ -0,0 +1,27 @@
+import type { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import { DimensionPropType, RadiusPropType } from '../shared';
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  children?: React.ReactNode;
+  onClose?: () => void;
+  hasCloseButton?: boolean;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  cardPadding?: DimensionPropType;
+  cardMaxWidth?: number | string | 'narrow' | 'medium' | 'wide';
+  cardHeight?: DimensionPropType;
+  cardMaxHeight?: DimensionPropType;
+  cardRadius?: RadiusPropType;
+  cardTop?: DimensionPropType;
+  zIndex?: number;
+  initialFocus?: React.RefObject<HTMLElement>;
+  returnFocus?: React.RefObject<HTMLElement>;
+  closeButtonProps?: Record<string, unknown>;
+  paddingX?: DimensionPropType;
+  disableCloseHandler?: boolean;
+}
+
+export const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>> & {
+  Title: FC<{ children: React.ReactNode } & HTMLAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { DirectionType } from '../shared';
+import { BoxProps } from './box';
+
+export interface NavProps extends BoxProps, HTMLAttributes<HTMLElement> {
+  direction?: DirectionType;
+}
+
+export interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  isActive?: boolean;
+  href?: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const Nav: FC<NavProps>;
+export const NavItem: FC<NavItemProps>;

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

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

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

@@ -0,0 +1,18 @@
+import type { FC, HTMLAttributes } from 'react';
+import { DimensionPropType } from '../shared';
+import { MenuPlacement } from '../foundational/menu';
+
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  padding?: DimensionPropType;
+  width?: DimensionPropType;
+  placement?: MenuPlacement;
+  trigger?: React.ReactNode;
+  zIndex?: number;
+  isOpen?: boolean;
+  onClose: () => void;
+  hasPortal?: boolean;
+  strategy?: 'absolute' | 'fixed';
+  offset?: DimensionPropType;
+}
+
+export const Popover: FC<PopoverProps>;

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

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes } from 'react';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  value: number;
+}
+
+export const Progress: FC<ProgressProps>;

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

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

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

@@ -0,0 +1,23 @@
+import type { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  id: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  name?: string;
+  label?: string;
+  hint?: React.ReactNode;
+  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>;
+};