@flodesk/grain 10.17.4 → 10.19.0

package/es/icons/index.js

@@ -22,7 +22,9 @@ export { default as IconDuplicate } from './icon-duplicate';
 export { default as IconEllipsis } from './icon-ellipsis';
 export { default as IconFile } from './icon-file';
 export { default as IconFolder } from './icon-folder';
+export { default as IconFolderRemove } from './icon-folder-remove';
 export { default as IconFolderAdd } from './icon-folder-add';
+export { default as IconFolderMove } from './icon-folder-move';
 export { default as IconGear } from './icon-gear';
 export { default as IconGlobe } from './icon-globe';
 export { default as IconHeart } from './icon-heart';
@@ -44,6 +46,7 @@ export { default as IconTablet } from './icon-tablet';
 export { default as IconTextAlignCenter } from './icon-text-align-center';
 export { default as IconTextAlignLeft } from './icon-text-align-left';
 export { default as IconTextAlignRight } from './icon-text-align-right';
+export { default as IconTextJustify } from './icon-text-justify';
 export { default as IconTrash } from './icon-trash';
 export { default as IconType } from './icon-type';
 export { default as IconUndo } from './icon-undo';
@@ -56,4 +59,18 @@ export { default as IconQuestion } from './icon-question';
 export { default as IconReset } from './icon-reset';
 export { default as IconDrag } from './icon-drag';
 export { default as IconLocation } from './icon-location';
-export { default as IconPlay } from './icon-play';
+export { default as IconPlay } from './icon-play';
+export { default as IconArchive } from './icon-archive';
+export { default as ColumnsAndRow } from './icon-columns-and-row';
+export { default as ColumnAndRows } from './icon-column-and-rows';
+export { default as Columns } from './icon-columns';
+export { default as Rows } from './icon-rows';
+export { default as RowAndColumns } from './icon-row-and-columns';
+export { default as RowsAndColumn } from './icon-rows-and-column';
+export { default as IconItalic } from './icon-italic';
+export { default as IconStrike } from './icon-strike';
+export { default as IconBold } from './icon-bold';
+export { default as IconUnderline } from './icon-underline';
+export { default as IconBulletList } from './icon-bullet-list';
+export { default as IconNumberList } from './icon-number-list';
+export { default as IconAt } from './icon-at';

package/es/index.js

@@ -2,4 +2,5 @@ export * from './components';
 export * from './icons';
 export * from './variables';
 export * from './utilities';
-export * from './hooks';
+export * from './hooks';
+export * from './foundational';

package/es/styles/base.js

@@ -0,0 +1,2 @@
+var base = "\n  :root {\n    --grn-lineHeight-fixed: 7px;\n    --grn-lineHeight-relative: 0.9em;\n    --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));\n\n    --grn-font-global: 'Flodesk Sans', sans-serif;\n    --grn-radius-button: var(--grn-radius-s);\n  }\n\n  .grn-context,\n  .grn-context * {\n    line-height: var(--grn-lineHeight-global);\n    outline-color: var(--grn-color-selection);\n  }\n\n  .grn-context {\n    font-family: var(--grn-font-global);\n    font-size: var(--grn-text-m);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  [data-theme],\n  .grn-context {\n    color: var(--grn-color-content);\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: border-box;\n  }\n\n  .grn-link-context a {\n    transition: var(--grn-transition-slow);\n    text-underline-position: under;\n    text-underline-offset: calc(2px - 0.1em);\n    color: inherit;\n    cursor: pointer;\n    text-decoration-color: var(--grn-color-fade3);\n  }\n\n  .grn-link-context a:hover {\n    transition: var(--grn-transition-fast);\n    text-decoration-color: currentColor;\n  }\n\n  .grn-link-context a:active {\n    transition: var(--grn-transition-xxFast);\n  }\n";
+export default base;

package/es/styles/colors/core.js

@@ -0,0 +1,2 @@
+var core = "\n  :root {\n    --white: hsl(0 0% 100%);\n    --H: 13.85;\n    --S: 7%;\n    --HS: var(--H) var(--S);\n    --bfS: 20%;\n    --wfS: calc(100% - var(--bfS));\n  }\n\n  :root {\n    --redHS: 6 55%;\n    --redL: 52%;\n\n    --grn-color-blue: hsl(218 74% 54%);\n    --grn-color-red: hsl(var(--redHS) var(--redL));\n    --grn-color-yellow: hsl(44 99% 59%);\n    --grn-color-green: hsl(153 22% 57%);\n  }\n\n  :root {\n    --shadeS-13: 20%;\n    --shadeS-12: 22%;\n    --shadeS-11: 15%;\n    --shadeS-10: 12%;\n    --shadeS-9: 9%;\n    --shadeS-8: 7%;\n    --shadeS-7: 5%;\n    --shadeS-6: 6%;\n    --shadeS-5: 7%;\n    --shadeS-4: 7%;\n    --shadeS-3: 7%;\n    --shadeS-2: 6%;\n    --shadeS-1: 6%;\n  }\n\n  :root {\n    --shade13-s: var(--shadeS-13);\n    --shade12-s: var(--shadeS-12);\n    --shade11-s: var(--shadeS-11);\n    --shade10-s: var(--shadeS-10);\n    --shade9-s: var(--shadeS-9);\n    --shade8-s: var(--shadeS-8);\n    --shade7-s: var(--shadeS-7);\n    --shade6-s: var(--shadeS-6);\n    --shade5-s: var(--shadeS-5);\n    --shade4-s: var(--shadeS-4);\n    --shade3-s: var(--shadeS-3);\n    --shade2-s: var(--shadeS-2);\n    --shade1-s: var(--shadeS-1);\n  }\n\n  [data-theme='dark'], [data-theme='invert'] {\n    --shade13-s: var(--shadeS-1);\n    --shade12-s: var(--shadeS-2);\n    --shade11-s: var(--shadeS-3);\n    --shade10-s: var(--shadeS-4);\n    --shade9-s: var(--shadeS-5);\n    --shade8-s: var(--shadeS-6);\n    --shade7-s: var(--shadeS-7);\n    --shade6-s: var(--shadeS-8);\n    --shade5-s: var(--shadeS-9);\n    --shade4-s: var(--shadeS-10);\n    --shade3-s: var(--shadeS-11);\n    --shade2-s: var(--shadeS-12);\n    --shade1-s: var(--shadeS-13);\n  }\n\n  :root,\n  [data-experimental] {\n    --grn-color-shadeTone13: hsl(var(--H) var(--shade13-s) 10%);\n    --grn-color-shadeTone12: hsl(var(--H) var(--shade12-s) 11.5%);\n    --grn-color-shadeTone11: hsl(var(--H) var(--shade11-s) 15%);\n    --grn-color-shadeTone10: hsl(var(--H) var(--shade10-s) 21%);\n    --grn-color-shadeTone9: hsl(var(--H) var(--shade9-s) 28%);\n    --grn-color-shadeTone8: hsl(var(--H) var(--shade8-s) 38%);\n    --grn-color-shadeTone7: hsl(var(--H) var(--shade7-s) 51%);\n    --grn-color-shadeTone6: hsl(var(--H) var(--shade6-s) 70%);\n    --grn-color-shadeTone5: hsl(var(--H) var(--shade5-s) 82%);\n    --grn-color-shadeTone4: hsl(var(--H) var(--shade4-s) 90%);\n    --grn-color-shadeTone3: hsl(var(--H) var(--shade3-s) 95%);\n    --grn-color-shadeTone2: hsl(var(--H) var(--shade2-s) 97.5%);\n    --grn-color-shadeTone1: hsl(var(--H) var(--shade1-s) 100%);\n\n    --fade10-a: 73%;\n    --fade9-a: 66%;\n    --fade8-a: 59%;\n    --fade7-a: 52%;\n    --fade6-a: 45%;\n    --fade5-a: 38%;\n    --fade4-a: 31%;\n    --fade3-a: 24%;\n    --fade2-a: 17%;\n    --fade1-a: 10%;\n\n    --fade-s: 20%;\n\n    --grn-color-lightFade10: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade10-a));\n    --grn-color-lightFade9: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade9-a));\n    --grn-color-lightFade8: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade8-a));\n    --grn-color-lightFade7: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade7-a));\n    --grn-color-lightFade6: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade6-a));\n    --grn-color-lightFade5: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade5-a));\n    --grn-color-lightFade4: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade4-a));\n    --grn-color-lightFade3: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade3-a));\n    --grn-color-lightFade2: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade2-a));\n    --grn-color-lightFade1: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade1-a));\n\n    --grn-color-darkFade10: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade10-a));\n    --grn-color-darkFade9: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade9-a));\n    --grn-color-darkFade8: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade8-a));\n    --grn-color-darkFade7: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade7-a));\n    --grn-color-darkFade6: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade6-a));\n    --grn-color-darkFade5: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade5-a));\n    --grn-color-darkFade4: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade4-a));\n    --grn-color-darkFade3: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade3-a));\n    --grn-color-darkFade2: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade2-a));\n    --grn-color-darkFade1: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade1-a));\n  }\n\n  :root {\n    --grn-color-warning: var(--grn-color-yellow);\n    --grn-color-danger: var(--grn-color-red);\n    --grn-color-success: var(--grn-color-green);\n    --grn-color-selection: var(--grn-color-blue);\n  }\n";
+export default core;

package/es/styles/colors/experimental.js

@@ -0,0 +1,2 @@
+var experimental = "\n  [data-experimental='true'] {\n    --grn-radius-button: 1000px;\n  }\n";
+export default experimental;

package/es/styles/colors/index.js

@@ -0,0 +1,4 @@
+import core from './core';
+import theme from './theme';
+import experimental from './experimental';
+export default [core, theme, experimental].join('\n');

package/es/styles/colors/theme.js

@@ -0,0 +1,2 @@
+var theme = "\n  /* light */\n\n  :root,\n  [data-theme='light'],\n  [data-theme='dark'] [data-theme='invert'] {\n    --grn-color-fade10: var(--grn-color-darkFade10);\n    --grn-color-fade9: var(--grn-color-darkFade9);\n    --grn-color-fade8: var(--grn-color-darkFade8);\n    --grn-color-fade7: var(--grn-color-darkFade7);\n    --grn-color-fade6: var(--grn-color-darkFade6);\n    --grn-color-fade5: var(--grn-color-darkFade5);\n    --grn-color-fade4: var(--grn-color-darkFade4);\n    --grn-color-fade3: var(--grn-color-darkFade3);\n    --grn-color-fade2: var(--grn-color-darkFade2);\n    --grn-color-fade1: var(--grn-color-darkFade1);\n\n    --grn-color-shade1: var(--grn-color-shadeTone1);\n    --grn-color-shade2: var(--grn-color-shadeTone2);\n    --grn-color-shade3: var(--grn-color-shadeTone3);\n    --grn-color-shade4: var(--grn-color-shadeTone4);\n    --grn-color-shade5: var(--grn-color-shadeTone5);\n    --grn-color-shade6: var(--grn-color-shadeTone6);\n    --grn-color-shade7: var(--grn-color-shadeTone7);\n    --grn-color-shade8: var(--grn-color-shadeTone8);\n    --grn-color-shade9: var(--grn-color-shadeTone9);\n    --grn-color-shade10: var(--grn-color-shadeTone10);\n    --grn-color-shade11: var(--grn-color-shadeTone11);\n    --grn-color-shade12: var(--grn-color-shadeTone12);\n    --grn-color-shade13: var(--grn-color-shadeTone13);\n  }\n\n  /* dark */\n\n  [data-theme='dark'],\n  [data-theme='light'] [data-theme='invert'] {\n    --grn-color-fade10: var(--grn-color-lightFade10);\n    --grn-color-fade9: var(--grn-color-lightFade9);\n    --grn-color-fade8: var(--grn-color-lightFade8);\n    --grn-color-fade7: var(--grn-color-lightFade7);\n    --grn-color-fade6: var(--grn-color-lightFade6);\n    --grn-color-fade5: var(--grn-color-lightFade5);\n    --grn-color-fade4: var(--grn-color-lightFade4);\n    --grn-color-fade3: var(--grn-color-lightFade3);\n    --grn-color-fade2: var(--grn-color-lightFade2);\n    --grn-color-fade1: var(--grn-color-lightFade1);\n\n    --grn-color-shade1: var(--grn-color-shadeTone13);\n    --grn-color-shade2: var(--grn-color-shadeTone12);\n    --grn-color-shade3: var(--grn-color-shadeTone11);\n    --grn-color-shade4: var(--grn-color-shadeTone10);\n    --grn-color-shade5: var(--grn-color-shadeTone9);\n    --grn-color-shade6: var(--grn-color-shadeTone8);\n    --grn-color-shade7: var(--grn-color-shadeTone7);\n    --grn-color-shade8: var(--grn-color-shadeTone6);\n    --grn-color-shade9: var(--grn-color-shadeTone5);\n    --grn-color-shade10: var(--grn-color-shadeTone4);\n    --grn-color-shade11: var(--grn-color-shadeTone3);\n    --grn-color-shade12: var(--grn-color-shadeTone2);\n    --grn-color-shade13: var(--grn-color-shadeTone1);\n  }\n\n  /* light */\n\n  :root,\n  [data-theme='light'],\n  [data-theme='dark'] [data-theme='invert'] {\n    --contentL: 20%;\n    --backgroundL: 80%;\n    --grn-color-floatingBackground: var(--grn-color-shade1);\n    --grn-color-floatingBackground: var(--grn-color-shade1);\n  }\n\n  /* dark */\n\n  [data-theme='dark'],\n  [data-theme='light'] [data-theme='invert'] {\n    --contentL: 80%;\n    --backgroundL: 20%;\n    --grn-color-floatingBackground: var(--grn-color-shade2);\n    --grn-color-floatingBackground: var(--grn-color-shade2);\n  }\n\n  /* light + dark */\n\n  :root,\n  [data-theme] {\n    --grn-color-content: var(--grn-color-shade12);\n    --grn-color-content2: var(--grn-color-fade7);\n    --grn-color-content3: var(--grn-color-fade5);\n    --grn-color-disabledContent: var(--grn-color-shade7);\n    --grn-color-icon: var(--grn-color-fade7);\n    --grn-color-disabledIcon: var(--grn-color-fade4);\n\n    --grn-color-background: var(--grn-color-shade1);\n    --grn-color-background2: var(--grn-color-shade2);\n    --grn-color-background3: var(--grn-color-shade3);\n    --grn-color-disabledBackground: var(--grn-color-shade4);\n\n    --grn-color-border: hsl(var(--HS) var(--contentL) / 12%);\n    --grn-color-border2: hsl(var(--HS) var(--contentL) / 20%);\n  }\n";
+export default theme;

package/es/styles/index.js

@@ -0,0 +1,6 @@
+import variables from './variables';
+import colors from './colors';
+import shadows from './shadows';
+import base from './base';
+import utilities from './utilities';
+export default [variables, colors, shadows, base, utilities].join('\n');

package/es/styles/shadows.js

@@ -0,0 +1,2 @@
+var shadows = "\n  :root,\n  [data-theme='light'],\n  [data-theme='dark'] [data-theme='invert'] {\n    --alphaRatio: 0.6;\n  }\n\n  [data-theme='dark'],\n  [data-theme='light'] [data-theme='invert'] {\n    --alphaRatio: 0.8;\n  }\n\n  :root,\n  [data-theme] {\n    --c: 0 0% 0%;\n    --blurRatio: 1.7;\n    --yRatio: 1.1;\n    --spreadRatio: 2;\n    --ratioCurve: 0.9;\n\n    --rc1: var(--ratioCurve) * 1;\n    --rc2: var(--ratioCurve) * 2;\n    --rc3: var(--ratioCurve) * 3;\n    --rc4: var(--ratioCurve) * 4;\n\n    --b1: 1px;\n    --b2: calc(var(--b1) * var(--rc2) * var(--blurRatio));\n    --b3: calc(var(--b2) * var(--rc3) * var(--blurRatio));\n    --b4: calc(var(--b3) * var(--rc4) * var(--blurRatio));\n\n    --y1: 1px;\n    --y2: calc(var(--y1) * var(--rc2) * var(--yRatio));\n    --y3: calc(var(--y2) * var(--rc3) * var(--yRatio));\n    --y4: calc(var(--y3) * var(--rc4) * var(--yRatio));\n\n    --a1: 5%;\n    --a2: calc(var(--a1) * var(--rc2) * var(--alphaRatio));\n    --a3: calc(var(--a2) * var(--rc3) * var(--alphaRatio));\n    --a4: calc(var(--a3) * var(--rc4) * var(--alphaRatio));\n\n    --s1: -0.1px;\n    --s2: calc(var(--s1) * var(--rc2) * var(--spreadRatio));\n    --s3: calc(var(--s2) * var(--rc3) * var(--spreadRatio));\n    --s4: calc(var(--s3) * var(--rc4) * var(--spreadRatio));\n\n    --shadow1: 0 var(--y1) var(--b1) var(--s1) hsl(var(--c) / var(--a1));\n    --shadow2: 0 var(--y2) var(--b2) var(--s2) hsl(var(--c) / var(--a2));\n    --shadow3: 0 var(--y3) var(--b3) var(--s3) hsl(var(--c) / var(--a3));\n    --shadow4: 0 var(--y4) var(--b4) var(--s4) hsl(var(--c) / var(--a4));\n\n    --grn-shadow-s: var(--shadow1), var(--shadow2);\n\n    --grn-shadow-m: var(--grn-shadow-s), var(--shadow3);\n\n    --grn-shadow-l: var(--grn-shadow-m), var(--shadow4);\n  }\n";
+export default shadows;

package/es/styles/utilities.js

@@ -0,0 +1,108 @@
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.regexp.exec.js";
+import { styleConfig } from '../utilities';
+import { propNameToShort } from '../utilities/style-config';
+import { breakpoints, deviceShort } from '../variables';
+
+var generateUtilityClassDeclarations = function generateUtilityClassDeclarations(propertySets) {
+  var css = '';
+  propertySets.forEach(function (set) {
+    set.variables.forEach(function (variable) {
+      set.props.forEach(function (prop) {
+        var property = prop.property;
+        var cssValue = set.valueTransformer ? set.valueTransformer(variable) : variable;
+        var hasHover = prop.propName.includes('Hover');
+        var selector = ".".concat(propNameToShort(prop.propName), "-").concat(variable);
+        var declaration = "{".concat(property, ": ").concat(cssValue, "}");
+        if (!hasHover) css += "".concat(selector, " ").concat(declaration);
+        if (hasHover) css += "".concat(selector, ":hover ").concat(declaration);
+      });
+    });
+  });
+  return css;
+};
+
+var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
+  var css = '';
+  propertySets.forEach(function (set) {
+    set.props.forEach(function (prop) {
+      var property = prop.property;
+      var propName = prop.propName;
+      var cssVar = "--".concat(propNameToShort(propName));
+      var hasHover = prop.propName.includes('Hover');
+      var declaration = "{".concat(property, ": var(").concat(cssVar, ")}");
+      if (!hasHover) css += "[style*=\"".concat(cssVar, ":\"] ").concat(declaration);
+      if (hasHover) css += "[style*=\"".concat(cssVar, ":\"]:hover ").concat(declaration);
+
+      if (set.isResponsive) {
+        var device = deviceShort.default;
+        css += "\n          [style*=\"".concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n        ");
+        Object.entries(breakpoints).forEach(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              deviceName = _ref2[0],
+              screenSize = _ref2[1];
+
+          var device = deviceShort[deviceName];
+          css += "\n            @media (max-width: ".concat(screenSize, "px) {\n              [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n            }\n          ");
+        });
+      }
+    });
+  });
+  return css;
+};
+
+var spaceProps = styleConfig.spaceProps,
+    colorProps = styleConfig.colorProps,
+    shadowProps = styleConfig.shadowProps,
+    radiusProps = styleConfig.radiusProps,
+    positionProps = styleConfig.positionProps,
+    overflowProps = styleConfig.overflowProps,
+    transitionProps = styleConfig.transitionProps,
+    cursorProps = styleConfig.cursorProps,
+    dimensionProps = styleConfig.dimensionProps,
+    aspectRatioProps = styleConfig.aspectRatioProps,
+    orderProps = styleConfig.orderProps,
+    flexProps = styleConfig.flexProps,
+    sizeProps = styleConfig.sizeProps,
+    opacityProps = styleConfig.opacityProps,
+    alignSelfProps = styleConfig.alignSelfProps,
+    borderColorProps = styleConfig.borderColorProps,
+    borderWidthProps = styleConfig.borderWidthProps,
+    borderSideProps = styleConfig.borderSideProps,
+    alignProps = styleConfig.alignProps,
+    weightProps = styleConfig.weightProps,
+    textDisplayProps = styleConfig.textDisplayProps,
+    zIndexProps = styleConfig.zIndexProps,
+    letterSpacingProps = styleConfig.letterSpacingProps,
+    textTransformProps = styleConfig.textTransformProps;
+var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps, alignProps];
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps]);
+var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps, letterSpacingProps]);
+var defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
+var utilities = "\n  ".concat(defaultBorder, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
+export default utilities;

package/es/styles/variables.js

@@ -0,0 +1,2 @@
+var 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-s: 3px;\n    --grn-radius-m: 6px;\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-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    --grn-space-fieldPaddingX: 12px;\n\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    --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";
+export default variables;

package/es/types.js

@@ -17,22 +17,32 @@ export var autoFlows = directions;
 export var flexDirections = directions;
 export var alignSelfs = [].concat(axisAlignments, ['baseline']);
 export var flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+export var overflows = ['visible', 'hidden', 'scroll', 'auto'];
+export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
+export var cursors = ['default', 'pointer'];
+export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
+export var borderWidths = ['1px', '2px', '3px', '4px'];
+export var textTransforms = ['capitalize', 'uppercase', 'lowercase'];
+export var textDisplays = ['block', 'inline-block', 'inline'];
+export var textAlignments = ['left', 'center', 'right'];
+export var spaces = Object.keys(vars.spaces);
 export var types = {
+  spaces: PropTypes.oneOf(spaces),
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
-  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
+  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(spaces), PropTypes.number, PropTypes.string, PropTypes.object]),
   dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   responsiveDimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
-  side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
+  side: PropTypes.oneOf(sides),
   radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
-  position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
+  position: PropTypes.oneOf(positions),
   responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
-  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.string, PropTypes.object]),
+  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(textAlignments), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
-  overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
+  overflow: PropTypes.oneOf(overflows),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label']),
-  textDisplay: PropTypes.oneOf(['block', 'inline-block', 'inline']),
+  textDisplay: PropTypes.oneOf(textDisplays),
   responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   responsiveRows: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOfType([PropTypes.oneOf(autoFlows), PropTypes.string, PropTypes.object]),
@@ -57,7 +67,8 @@ export var types = {
   buttonTag: PropTypes.oneOf(['button', 'a', 'span']),
   hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
-  cursor: PropTypes.oneOf(['default', 'pointer'])
+  cursor: PropTypes.oneOf(cursors),
+  borderWidth: PropTypes.oneOf(borderWidths)
 };
 export var defaultProps = {
   menuMaxHeight: '468px',

package/es/utilities/attributes.js

@@ -0,0 +1,66 @@
+import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import { breakpoints, deviceShort } from '../variables';
+import { isObject } from './helpers';
+import { propNameToShort, styleConfig } from './style-config';
+var mediaQueries = {
+  tablet: "@media (max-width: ".concat(breakpoints.tablet, "px)"),
+  mobile: "@media (max-width: ".concat(breakpoints.mobile, "px)")
+};
+export var generateStyleAttributes = function generateStyleAttributes(props) {
+  var styles = {};
+  var styleConfigValues = Object.values(styleConfig);
+  styleConfigValues.forEach(function (propsSet) {
+    propsSet.props.forEach(function (_ref) {
+      var propName = _ref.propName;
+      var value = props[propName];
+      var hasVariable = propsSet.variableChecker ? propsSet.variableChecker(value) : false;
+      var hasTransformer = propsSet.valueTransformer ? true : false;
+      if (hasVariable) return;
+      if (value === null || value === undefined || value === '') return;
+      var cssValue = hasTransformer ? propsSet.valueTransformer(value) : value;
+      var propNameShort = propNameToShort(propName);
+
+      if (!isObject(value)) {
+        styles["--".concat(propNameShort)] = cssValue;
+      } else {
+        var def = value.default,
+            mobile = value.mobile,
+            tablet = value.tablet; // accept fixed string media queries to help migration
+
+        var mobileMediaValue = value[mediaQueries.mobile];
+        var tabletMediaValue = value[mediaQueries.tablet];
+        var mob = mobileMediaValue || mobile;
+        var tab = tabletMediaValue || tablet;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.default)] = hasTransformer ? propsSet.valueTransformer(def) : def;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.mobile)] = hasTransformer ? propsSet.valueTransformer(mob) : mob;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.tablet)] = hasTransformer ? propsSet.valueTransformer(tab) : tab;
+      }
+    });
+  });
+  return styles;
+};
+export var generateClassNameAttributes = function generateClassNameAttributes(props) {
+  var classNames = [];
+  var propKeys = Object.keys(props);
+  var styleConfigValues = Object.values(styleConfig);
+  propKeys.forEach(function (prop) {
+    styleConfigValues.forEach(function (styleConfigItem) {
+      styleConfigItem.props.forEach(function (propItem) {
+        if (propItem.propName === prop) {
+          var propName = propItem.propName;
+          var value = props[propName];
+          var hasVariable = styleConfigItem.variableChecker ? styleConfigItem.variableChecker(value) : false;
+          if (!hasVariable) return;
+          if (value === null || value === undefined || value === '') return;
+          var className = "".concat(propNameToShort(propName), "-").concat(value);
+          classNames.push(className);
+        }
+      });
+    });
+  });
+  return classNames.join(' ');
+};

package/es/utilities/helpers.js

@@ -1,9 +1,10 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.string.iterator.js";
@@ -32,4 +33,15 @@ export var isArray = function isArray(value) {
 };
 export var isObject = function isObject(value) {
   return _typeof(value) === 'object';
+};
+export var mergeRefs = function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
 };

package/es/utilities/index.js

@@ -1,3 +1,5 @@
 export * from './helpers';
 export * from './responsive';
-export * from './styles';
+export * from './styles';
+export * from './style-config';
+export * from './attributes';

package/es/utilities/responsive.js

@@ -61,6 +61,9 @@ export var getDimension = function getDimension(dimension) {
   if (isString(dimension)) return dimension;
   if (isNumber(dimension)) return u(dimension);
 };
+export var isSpaceVar = function isSpaceVar(space) {
+  return space in vars.spaces || space in vars.spaceUtils;
+};
 export var getSpace = function getSpace(space) {
   if (space in vars.spaceUtils) {
     return getCssVar(varInfo.spaceUtils.name, space);