@zonos/amino 5.1.29 → 5.1.31

package/components/connection-map/ConnectionMap.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),r=require("react/jsx-runtime"),n=require("react"),t=require("react-simple-maps"),i=require("d3-geo"),o=require("styled-components"),a=require("topojson-client"),s=require("../skeleton/Skeleton.js"),l=require("../../styles/constants/theme.js"),u=require("../../utils/getCountryCodeByName.js");function d(e){return e&&e.__esModule?e:{default:e}}var c,h,m=d(o),f=m.default.div(c||(c=e.__makeTemplateObject(["\n  background: ",";\n  border-radius: ",";\n  overflow: hidden;\n\n  * {\n    outline: none;\n  }\n"],["\n  background: ",";\n  border-radius: ",";\n  overflow: hidden;\n\n  * {\n    outline: none;\n  }\n"])),l.theme.gray50,l.theme.radius12),g=m.default(s.Skeleton)(h||(h=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: ",";\n  width: 100%;\n  /* 50% padding is 100% of width, ratio is 33%, so half */\n  padding: 16.5%;\n  margin: 0;\n"],["\n  box-sizing: border-box;\n  border-radius: ",";\n  width: 100%;\n  /* 50% padding is 100% of width, ratio is 33%, so half */\n  padding: 16.5%;\n  margin: 0;\n"])),l.theme.radius12);exports.ConnectionMap=function(o){var s=o.countries,d=o.from,c=o.height,h=void 0===c?400:c,m=o.to,b=o.worldData,j=e.__read(n.useState([0,0]),2),p=j[0],x=j[1],_=e.__read(n.useState(1),2),v=_[0],k=_[1],y=e.__read(n.useState([0,0,0]),2),M=y[0],q=y[1],C=n.useMemo((function(){return b?a.feature(b,b.objects.countries).features:null}),[b]),w=n.useCallback((function(e){var r=null==C?void 0:C.find((function(r){var n;return u.getCountryCodeByName(null===(n=r.properties)||void 0===n?void 0:n.name,s)===e}));return r?i.geoCentroid(r):[0,0]}),[s,C]),S=!(C&&s.length&&d&&m);return n.useEffect((function(){if(!S){var r=e.__read(w(d),2),n=r[0],t=r[1],o=e.__read(w(m),2),a=o[0],s=o[1],l=i.geoDistance([n,t],[a,s]),u=i.geoDistance([n,0],[a,0]),c=i.geoDistance([0,t],[0,s]),h=function(e,r){return-19.46498024*e+-92.29376925*r+284.7+(e+r>4?80*(e+r-4):0)}(u,c);k(h);var f=e.__read([(n+a)/2,(t+s)/2],2),g=f[0],b=f[1];x([0,b]);var j=-g;Math.abs(n-a)>180&&(j+=180);var p=Math.abs(b)>55?l*-(Math.abs(b)-50):0,_=c>1&&u>c&&Math.max(t,s)>50?u/c*-5:0;q([j,p+_,0])}}),[w,m,d,S]),S?r.jsx(g,{height:h}):r.jsx(f,{children:r.jsxs(t.ComposableMap,{height:h,projection:"geoEqualEarth",projectionConfig:{center:p,rotate:M,scale:v},children:[r.jsx(t.Geographies,{geography:C,children:function(e){return e.geographies.map((function(e){var n=[m,d].includes(u.getCountryCodeByName(e.properties.name,s));return r.jsx(t.Geography,{fill:n?l.theme.blue100:l.theme.gray400,geography:e,stroke:n?l.theme.blue300:l.theme.gray500,strokeWidth:1},e.rsmKey)}))}}),r.jsxs(t.Marker,{coordinates:w(d),children:[r.jsx("circle",{fill:l.theme.blue300,r:10}),r.jsx("circle",{fill:l.theme.blue400,r:7})]}),r.jsxs(t.Marker,{coordinates:w(m),children:[r.jsx("circle",{fill:l.theme.blue300,r:10}),r.jsx("circle",{fill:l.theme.blue400,r:7})]}),r.jsx(t.Line,{from:w(d),stroke:l.theme.blue600,strokeWidth:4,to:w(m)}),r.jsxs(t.Marker,{coordinates:w(d),children:[r.jsx("circle",{fill:"white",r:4}),r.jsx("circle",{fill:l.theme.blue600,r:2})]}),r.jsxs(t.Marker,{coordinates:w(m),children:[r.jsx("circle",{fill:"white",r:4}),r.jsx("circle",{fill:l.theme.blue600,r:2})]})]})})};
+"use strict";var e=require("../../_tslib-ccfac372.js"),r=require("react/jsx-runtime"),n=require("react"),t=require("react-simple-maps"),i=require("d3-geo"),o=require("styled-components"),a=require("topojson-client"),s=require("../skeleton/Skeleton.js"),l=require("../../styles/constants/theme.js"),u=require("../../utils/getCountryCodeByName.js");function d(e){return e&&e.__esModule?e:{default:e}}var c,h,m=d(o),f=m.default.div(c||(c=e.__makeTemplateObject(["\n  background: ",";\n  border-radius: ",";\n  overflow: hidden;\n\n  * {\n    outline: none;\n  }\n"],["\n  background: ",";\n  border-radius: ",";\n  overflow: hidden;\n\n  * {\n    outline: none;\n  }\n"])),l.theme.gray50,l.theme.radius12),g=m.default(s.Skeleton)(h||(h=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: ",";\n  width: 100%;\n  /* 50% padding is 100% of width, ratio is 33%, so half */\n  padding: 16.5%;\n  margin: 0;\n"],["\n  box-sizing: border-box;\n  border-radius: ",";\n  width: 100%;\n  /* 50% padding is 100% of width, ratio is 33%, so half */\n  padding: 16.5%;\n  margin: 0;\n"])),l.theme.radius12);exports.ConnectionMap=function(o){var s=o.countries,d=o.from,c=o.height,h=void 0===c?400:c,m=o.to,b=o.worldData,j=e.__read(n.useState([0,0]),2),p=j[0],x=j[1],_=e.__read(n.useState(1),2),v=_[0],k=_[1],y=e.__read(n.useState([0,0,0]),2),M=y[0],q=y[1],C=n.useMemo((function(){return b?a.feature(b,b.objects.countries).features:null}),[b]),w=n.useCallback((function(e){var r=null==C?void 0:C.find((function(r){var n;return u.getCountryCodeByName(null===(n=r.properties)||void 0===n?void 0:n.name,s)===e}));return r?i.geoCentroid(r):[0,0]}),[s,C]),S=!(C&&s.length&&d&&m);return n.useEffect((function(){if(!S){var r=e.__read(w(d),2),n=r[0],t=r[1],o=e.__read(w(m),2),a=o[0],s=o[1],l=i.geoDistance([n,t],[a,s]),u=i.geoDistance([n,0],[a,0]),c=i.geoDistance([0,t],[0,s]),h=function(e,r){return-19.46498024*e+-92.29376925*r+284.7+(e+r>4?80*(e+r-4):0)}(u,c);k(h);var f=e.__read([(n+a)/2,(t+s)/2],2),g=f[0],b=f[1];x([0,b]);var j=-g;Math.abs(n-a)>180&&(j+=180);var p=Math.abs(b)>55?l*-(Math.abs(b)-50):0,_=c>1&&u>c&&Math.max(t,s)>50?u/c*-5:0;q([j,p+_,0])}}),[w,m,d,S]),S?r.jsx(g,{height:h}):r.jsx(f,{children:r.jsxs(t.ComposableMap,{height:h,projection:"geoEqualEarth",projectionConfig:{center:p,rotate:M,scale:v},children:[r.jsx(t.Geographies,{geography:C,children:function(e){return e.geographies.map((function(e){var n=[m,d].includes(u.getCountryCodeByName(e.properties.name,s));return r.jsx(t.Geography,{fill:n?l.theme.blue100:l.theme.gray0,geography:e,stroke:n?l.theme.blue400:l.theme.gray200,strokeWidth:2},e.rsmKey)}))}}),r.jsxs(t.Marker,{coordinates:w(d),children:[r.jsx("circle",{fill:l.theme.blue300,r:10}),r.jsx("circle",{fill:l.theme.blue400,r:7})]}),r.jsxs(t.Marker,{coordinates:w(m),children:[r.jsx("circle",{fill:l.theme.blue300,r:10}),r.jsx("circle",{fill:l.theme.blue400,r:7})]}),r.jsx(t.Line,{from:w(d),stroke:l.theme.blue600,strokeWidth:4,to:w(m)}),r.jsxs(t.Marker,{coordinates:w(d),children:[r.jsx("circle",{fill:"white",r:4}),r.jsx("circle",{fill:l.theme.blue600,r:2})]}),r.jsxs(t.Marker,{coordinates:w(m),children:[r.jsx("circle",{fill:"white",r:4}),r.jsx("circle",{fill:l.theme.blue600,r:2})]})]})})};

package/components/simple-table/SimpleTable.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("styled-components"),r=require("../checkbox/Checkbox.js"),o=require("../skeleton/Skeleton.js"),i=require("../text/Text.js"),a=require("../../styles/constants/theme.js");function l(e){return e&&e.__esModule?e:{default:e}}require("react"),require("clsx"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js");var d,c,s,h,u,x,b,m=l(t),g=m.default.table(d||(d=e.__makeTemplateObject(["\n  width: 100%;\n"],["\n  width: 100%;\n"]))),p=m.default.thead(c||(c=e.__makeTemplateObject(["\n  text-transform: uppercase;\n"],["\n  text-transform: uppercase;\n"]))),v=m.default.tr(s||(s=e.__makeTemplateObject(["\n  border-bottom: ",";\n  height: 48px;\n"],["\n  border-bottom: ",";\n  height: 48px;\n"])),a.theme.border),k=m.default.th(h||(h=e.__makeTemplateObject(["\n  padding: ",";\n  white-space: nowrap;\n  text-align: ",";\n"],["\n  padding: ",";\n  white-space: nowrap;\n  text-align: ",";\n"])),a.theme.space16,(function(e){return e.$textAlign})),j=m.default.tr(u||(u=e.__makeTemplateObject(["\n  height: 48px;\n  cursor: ",";\n  & {\n    border-bottom: ",";\n  }\n\n  &.with-hover:hover {\n    background-color: ",";\n  }\n\n  &:not(:hover) {\n    .row-hover-show {\n      visibility: collapse;\n    }\n  }\n"],["\n  height: 48px;\n  cursor: ",";\n  & {\n    border-bottom: ",";\n  }\n\n  &.with-hover:hover {\n    background-color: ",";\n  }\n\n  &:not(:hover) {\n    .row-hover-show {\n      visibility: collapse;\n    }\n  }\n"])),(function(e){return e.clickable?"pointer":"auto"}),a.theme.border,a.theme.gray50),f=m.default.td(x||(x=e.__makeTemplateObject(["\n  padding: ",";\n  text-align: ",";\n\n  &:not(:hover) {\n    .cell-hover-show {\n      visibility: collapse;\n    }\n  }\n"],["\n  padding: ",";\n  text-align: ",";\n\n  &:not(:hover) {\n    .cell-hover-show {\n      visibility: collapse;\n    }\n  }\n"])),(function(e){return e.$noPadding?void 0:a.theme.space16}),(function(e){return e.$textAlign})),w=m.default(r.Checkbox)(b||(b=e.__makeTemplateObject(["\n  padding: ",";\n  display: inline-flex;\n"],["\n  padding: ",";\n  display: inline-flex;\n"])),a.theme.space16);exports.SimpleTable=function(t){var r=t.className,a=t.headers,l=t.items,d=t.keyExtractor,c=t.loading,s=void 0!==c&&c,h=t.loadingItems,u=void 0===h?10:h,x=t.noHoverBackground,b=void 0!==x&&x,m=t.onRowClick,C=t.onRowHover,y=t.renderFooter,_=t.selectable,q=void 0===_?{enabled:!1}:_;return n.jsxs(g,{className:r,children:[n.jsxs("colgroup",{children:[!!q.onHeaderCheckboxChange&&n.jsx("col",{width:0}),a.map((function(e){return n.jsx("col",{width:void 0!==e.width?"".concat(e.width,"%"):void 0},e.key)}))]}),n.jsx(p,{children:n.jsxs(v,{children:[!!q.onHeaderCheckboxChange&&n.jsx("th",{children:q.renderCustomHeaderCheckbox||n.jsx(w,{checked:!s&&q.headerCheckboxValue||!1,disabled:s,onChange:q.onHeaderCheckboxChange})}),a.map((function(e){return n.jsx(k,{$textAlign:e.align||"start",children:n.jsx(i.Text,{color:"gray800",type:"small-header",children:e.name})},e.key)}))]})}),n.jsx("tbody",{children:s?e.__spreadArray([],e.__read(Array(u+1).keys()),!1).map((function(e){return n.jsx(j,{clickable:!1,children:a.map((function(t){return n.jsx(f,{$noPadding:!!t.noPadding,$textAlign:"center",children:n.jsx(o.Skeleton,{height:30},e)},t.key)}))},e)})):l.map((function(e,t){var r,o,i;return n.jsxs(j,{className:b?"":"with-hover",clickable:!!m,onClick:function(){var n,r,o;q.anySelected?(null===(n=q.isRowCheckboxDisabled)||void 0===n?void 0:n.call(q,e,t))||null===(r=q.onRowCheckboxChange)||void 0===r||r.call(q,!(null===(o=q.isRowChecked)||void 0===o?void 0:o.call(q,e,t)),e,t):null==m||m(e)},onMouseEnter:function(){return null==C?void 0:C(e)},children:[q.enabled&&n.jsx("td",{children:(null===(r=q.renderCustomRowCheckbox)||void 0===r?void 0:r.call(q,e,t))||n.jsx(w,{checked:(null===(o=q.isRowChecked)||void 0===o?void 0:o.call(q,e,t))||!1,disabled:(null===(i=q.isRowCheckboxDisabled)||void 0===i?void 0:i.call(q,e,t))||!1,onChange:function(n){var r;return null===(r=q.onRowCheckboxChange)||void 0===r?void 0:r.call(q,n,e,t)}})}),a.map((function(t){return function(e,t){var r=t[e.key];return e.renderCustom?n.jsx(f,{$noPadding:e.noPadding||!1,$textAlign:e.align||"start",children:e.renderCustom(r,t)},e.key):n.jsx(f,{$noPadding:e.noPadding||!1,$textAlign:e.align||"start",children:String(r)},e.key)}(t,e)}))]},d(e))}))}),y]})};
+"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("styled-components"),o=require("../checkbox/Checkbox.js"),r=require("../skeleton/Skeleton.js"),i=require("../text/Text.js"),a=require("../../styles/constants/theme.js");function l(e){return e&&e.__esModule?e:{default:e}}require("react"),require("clsx"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js");var d,c,s,h,u,x,b,g=l(t),m=g.default.table(d||(d=e.__makeTemplateObject(["\n  width: 100%;\n"],["\n  width: 100%;\n"]))),k=g.default.thead(c||(c=e.__makeTemplateObject(["\n  text-transform: uppercase;\n"],["\n  text-transform: uppercase;\n"]))),p=g.default.tr(s||(s=e.__makeTemplateObject(["\n  border-bottom: ",";\n  height: 48px;\n"],["\n  border-bottom: ",";\n  height: 48px;\n"])),a.theme.border),v=g.default.th(h||(h=e.__makeTemplateObject(["\n  padding: ",";\n  white-space: nowrap;\n  text-align: ",";\n"],["\n  padding: ",";\n  white-space: nowrap;\n  text-align: ",";\n"])),a.theme.space16,(function(e){return e.$textAlign})),j=g.default.tr(u||(u=e.__makeTemplateObject(["\n  height: 48px;\n  cursor: ",";\n  & {\n    border-bottom: ",";\n  }\n\n  &.with-hover:hover {\n    background-color: ",";\n  }\n\n  &:not(:hover) {\n    .row-hover-show {\n      visibility: collapse;\n    }\n  }\n"],["\n  height: 48px;\n  cursor: ",";\n  & {\n    border-bottom: ",";\n  }\n\n  &.with-hover:hover {\n    background-color: ",";\n  }\n\n  &:not(:hover) {\n    .row-hover-show {\n      visibility: collapse;\n    }\n  }\n"])),(function(e){return e.clickable?"pointer":"auto"}),a.theme.border,a.theme.gray50),C=g.default.td(x||(x=e.__makeTemplateObject(["\n  padding: ",";\n  text-align: ",";\n\n  &:not(:hover) {\n    .cell-hover-show {\n      visibility: collapse;\n    }\n  }\n"],["\n  padding: ",";\n  text-align: ",";\n\n  &:not(:hover) {\n    .cell-hover-show {\n      visibility: collapse;\n    }\n  }\n"])),(function(e){return e.$noPadding?void 0:a.theme.space16}),(function(e){return e.$textAlign})),f=g.default(o.Checkbox)(b||(b=e.__makeTemplateObject(["\n  padding: ",";\n  display: inline-flex;\n"],["\n  padding: ",";\n  display: inline-flex;\n"])),a.theme.space16);exports.SimpleTable=function(t){var o=t.className,a=t.headers,l=t.items,d=t.keyExtractor,c=t.loading,s=void 0!==c&&c,h=t.loadingItems,u=void 0===h?10:h,x=t.noHoverBackground,b=void 0!==x&&x,g=t.onRowClick,w=t.onRowHover,y=t.renderFooter,_=t.selectable,q=void 0===_?{enabled:!1}:_;return n.jsxs(m,{className:o,children:[n.jsxs("colgroup",{children:[!!q.onHeaderCheckboxChange&&n.jsx("col",{width:0}),a.map((function(e){return n.jsx("col",{width:void 0!==e.width?"".concat(e.width,"%"):void 0},e.key)}))]}),n.jsx(k,{children:n.jsxs(p,{children:[!!q.onHeaderCheckboxChange&&n.jsx("th",{children:q.renderCustomHeaderCheckbox||n.jsx(f,{checked:!s&&q.headerCheckboxValue||!1,disabled:s,onChange:q.onHeaderCheckboxChange})}),a.map((function(e){return n.jsx(v,{$textAlign:e.align||"start",children:n.jsx(i.Text,{color:"gray800",type:"small-header",children:e.name})},e.key)}))]})}),n.jsx("tbody",{children:s?e.__spreadArray([],e.__read(Array(u+1).keys()),!1).map((function(e){return n.jsxs(j,{clickable:!1,children:[q.enabled&&n.jsx("td",{children:n.jsx(r.Skeleton,{height:30},e)}),a.map((function(t){return n.jsx(C,{$noPadding:!!t.noPadding,$textAlign:"center",children:n.jsx(r.Skeleton,{height:30},e)},t.key)}))]},e)})):l.map((function(e,t){var o,r,i;return n.jsxs(j,{className:b?"":"with-hover",clickable:!!g||!!q.anySelected&&!!q.onRowCheckboxChange,onClick:function(){var n,o,r;q.anySelected?(null===(n=q.isRowCheckboxDisabled)||void 0===n?void 0:n.call(q,e,t))||null===(o=q.onRowCheckboxChange)||void 0===o||o.call(q,!(null===(r=q.isRowChecked)||void 0===r?void 0:r.call(q,e,t)),e,t):null==g||g(e)},onMouseEnter:function(){return null==w?void 0:w(e)},children:[q.enabled&&n.jsx("td",{children:(null===(o=q.renderCustomRowCheckbox)||void 0===o?void 0:o.call(q,e,t))||n.jsx(f,{checked:(null===(r=q.isRowChecked)||void 0===r?void 0:r.call(q,e,t))||!1,disabled:(null===(i=q.isRowCheckboxDisabled)||void 0===i?void 0:i.call(q,e,t))||!1,onChange:function(n){var o;return null===(o=q.onRowCheckboxChange)||void 0===o?void 0:o.call(q,n,e,t)}})}),a.map((function(t){return function(e,t){var o=t[e.key];return e.renderCustom?n.jsx(C,{$noPadding:e.noPadding||!1,$textAlign:e.align||"start",children:e.renderCustom(o,t)},e.key):n.jsx(C,{$noPadding:e.noPadding||!1,$textAlign:e.align||"start",children:String(o)},e.key)}(t,e)}))]},d(e))}))}),y]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.1.29",
+  "version": "5.1.31",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/reset.css

@@ -9,8 +9,10 @@
  */
 
 html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+    line-height: 1.15;
+    /* 1 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
 }
 
 /* Sections
@@ -21,7 +23,7 @@ html {
  */
 
 body {
-  margin: 0;
+    margin: 0;
 }
 
 /**
@@ -51,9 +53,12 @@ h1 {
  */
 
 hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
+    box-sizing: content-box;
+    /* 1 */
+    height: 0;
+    /* 1 */
+    overflow: visible;
+    /* 2 */
 }
 
 /**
@@ -62,8 +67,10 @@ hr {
  */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+    font-family: monospace, monospace;
+    /* 1 */
+    font-size: 1em;
+    /* 2 */
 }
 
 /* Text-level semantics
@@ -83,10 +90,13 @@ a {
  */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
+    border-bottom: none;
+    /* 1 */
+    text-decoration: underline;
+    /* 2 */
     -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted; /* 2 */
+    text-decoration: underline dotted;
+    /* 2 */
 }
 
 /**
@@ -106,8 +116,10 @@ strong {
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+    font-family: monospace, monospace;
+    /* 1 */
+    font-size: 1em;
+    /* 2 */
 }
 
 /**
@@ -163,10 +175,14 @@ input,
 optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
+    font-family: inherit;
+    /* 1 */
+    font-size: 100%;
+    /* 1 */
+    line-height: 1.15;
+    /* 1 */
+    margin: 0;
+    /* 2 */
 }
 
 /**
@@ -175,7 +191,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+    /* 1 */
     overflow: visible;
 }
 
@@ -185,7 +202,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+    /* 1 */
     text-transform: none;
 }
 
@@ -239,12 +257,18 @@ fieldset {
  */
 
 legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
+    box-sizing: border-box;
+    /* 1 */
+    color: inherit;
+    /* 2 */
+    display: table;
+    /* 1 */
+    max-width: 100%;
+    /* 1 */
+    padding: 0;
+    /* 3 */
+    white-space: normal;
+    /* 1 */
 }
 
 /**
@@ -270,8 +294,10 @@ textarea {
 
 [type="checkbox"],
 [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+    box-sizing: border-box;
+    /* 1 */
+    padding: 0;
+    /* 2 */
 }
 
 /**
@@ -289,8 +315,10 @@ textarea {
  */
 
 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield;
+    /* 1 */
+    outline-offset: -2px;
+    /* 2 */
 }
 
 /**
@@ -307,8 +335,10 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
+    -webkit-appearance: button;
+    /* 1 */
+    font: inherit;
+    /* 2 */
 }
 
 /* Interactive
@@ -362,8 +392,10 @@ template {
  */
 
 html {
-    box-sizing: border-box; /* 1 */
-    font-family: sans-serif; /* 2 */
+    box-sizing: border-box;
+    /* 1 */
+    font-family: sans-serif;
+    /* 2 */
 }
 
 *,
@@ -430,8 +462,10 @@ ul {
  */
 
 html {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
-    line-height: 1.5; /* 2 */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    /* 1 */
+    line-height: 1.5;
+    /* 2 */
 }
 
 /**
@@ -484,11 +518,13 @@ textarea {
     resize: vertical;
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
     color: #a0aec0;
 }
 
-input::-ms-input-placeholder, textarea::-ms-input-placeholder {
+input::-ms-input-placeholder,
+textarea::-ms-input-placeholder {
     color: #a0aec0;
 }
 
@@ -597,3 +633,96 @@ video {
 }
 
 /*# sourceMappingURL=base.css.map */
+
+
+/* https://andy-bell.co.uk/a-more-modern-css-reset */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+    line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+    text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}

package/types/GridSpacing.d.ts

@@ -1,2 +1,2 @@
 export type GridAlignment = 'start' | 'end';
-export type GridSpacing = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 40;
+export type GridSpacing = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56;