@artsy/palette 41.0.0-canary.1423.31655.0 → 41.0.0

package/dist/elements/Select/tokens.js

@@ -7,28 +7,28 @@ exports.SELECT_STATES = void 0;
 var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var SELECT_STATES = {
-  default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";+ label{color:", ";font-size:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref) {
+  default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";+ label{color:", ";font-size:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref) {
     var optionSelected = _ref.optionSelected;
     return optionSelected && (0, _styledComponents.css)(["+ label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("textVariants.xs.fontSize"));
   }),
-  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:has(option[value=\"\"]:checked) + label{text-decoration:underline;}", ""], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref2) {
+  focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:has(option[value=\"\"]:checked) + label{text-decoration:underline;}", ""], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref2) {
     var optionSelected = _ref2.optionSelected;
     return !optionSelected && (0, _styledComponents.css)(["+ label{text-decoration:underline;}"]);
   }),
-  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";}&:has(option[value=\"\"]:checked):not(:disabled) + label{color:", ";text-decoration:underline;}", ""], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref3) {
+  hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";}&:has(option[value=\"\"]:checked):not(:disabled) + label{color:", ";text-decoration:underline;}", ""], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref3) {
     var optionSelected = _ref3.optionSelected,
       disabled = _ref3.disabled;
     return !optionSelected && !disabled && (0, _styledComponents.css)(["+ label{color:", ";text-decoration:underline;}"], (0, _themeGet.themeGet)("colors.blue100"));
   }),
-  completed: (0, _styledComponents.css)(["border-color:", ";text-decoration:none;+ label{color:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref4) {
+  completed: (0, _styledComponents.css)(["border-color:", ";text-decoration:none;+ label{color:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref4) {
     var optionSelected = _ref4.optionSelected;
     return optionSelected && (0, _styledComponents.css)(["+ label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("textVariants.xs.fontSize"));
   }),
-  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;+ label{color:", ";text-decoration:none;}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref5) {
+  disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;+ label{color:", ";text-decoration:none;}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("textVariants.xs.fontSize"), function (_ref5) {
     var optionSelected = _ref5.optionSelected;
     return optionSelected && (0, _styledComponents.css)(["+ label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], (0, _themeGet.themeGet)("textVariants.xs.fontSize"));
   }),
-  error: (0, _styledComponents.css)(["color:", ";border-color:", ";+ label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
+  error: (0, _styledComponents.css)(["color:", ";border-color:", ";+ label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
 };
 exports.SELECT_STATES = SELECT_STATES;
 //# sourceMappingURL=tokens.js.map

package/dist/elements/Select/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SELECT_STATES","default","css","themeGet","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error","exports"],"sources":["../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.black60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAQO,IAAME,aAAiC,GAAG;EAC/CC,OAAO,MAAEC,qBAAG,gOAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAK5C,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAC,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDG,KAAK,MAAEJ,qBAAG,oOACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EAajD,UAAAI,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,QACfH,qBAAG,0CAIF;EAAA,EACJ;EACDM,KAAK,MAAEN,qBAAG,sLACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKnC,UAAAM,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,QACTR,qBAAG,sDAEU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDQ,SAAS,MAAET,qBAAG,gMACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAS,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDO,QAAQ,MAAER,qBAAG,gOACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAMtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAU,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDW,KAAK,MAAEZ,qBAAG,yDACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAY,OAAA,CAAAf,aAAA,GAAAA,aAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SELECT_STATES","default","css","themeGet","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error","exports"],"sources":["../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAQO,IAAME,aAAiC,GAAG;EAC/CC,OAAO,MAAEC,qBAAG,gOAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EACrB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAK5C,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAC,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDG,KAAK,MAAEJ,qBAAG,oOACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EAajD,UAAAI,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,QACfH,qBAAG,0CAIF;EAAA,EACJ;EACDM,KAAK,MAAEN,qBAAG,sLACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKnC,UAAAM,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,QACTR,qBAAG,sDAEU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDQ,SAAS,MAAET,qBAAG,gMACI,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAKrB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAS,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDO,QAAQ,MAAER,qBAAG,gOACF,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAClB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAI9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAMrB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAU,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDW,KAAK,MAAEZ,qBAAG,yDACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAY,OAAA,CAAAf,aAAA,GAAAA,aAAA"}

package/dist/elements/Separator/Separator.js

@@ -17,6 +17,6 @@ var Separator = _styledComponents.default.div.withConfig({
 exports.Separator = Separator;
 Separator.defaultProps = {
   width: "100%",
-  color: "black10"
+  color: "mono10"
 };
 //# sourceMappingURL=Separator.js.map

package/dist/elements/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["_styledComponents","_interopRequireDefault","require","_styledSystem","obj","__esModule","default","Separator","styled","div","withConfig","displayName","componentId","compose","space","width","border","color","exports","defaultProps"],"sources":["../../../src/elements/Separator/Separator.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  color,\n  ColorProps,\n  compose,\n  space,\n  SpaceProps,\n  width,\n  WidthProps,\n} from \"styled-system\"\n\nexport interface SeparatorProps\n  extends SpaceProps,\n    WidthProps,\n    BorderProps,\n    ColorProps {}\n\n/**\n * A horizontal divider whose width and spacing can be adjusted\n */\nexport const Separator = styled.div<SeparatorProps>`\n  border-width: 1px;\n  border-style: solid;\n  border-bottom-width: 0;\n  background-color: transparent;\n  border-color: currentColor;\n  margin: 0;\n  ${compose(space, width, border, color)};\n`\n\nSeparator.defaultProps = {\n  width: \"100%\",\n  color: \"black10\",\n}\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAUsB,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQtB;AACA;AACA;AACO,IAAMG,SAAS,GAAGC,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIAO/B,IAAAC,qBAAO,EAACC,mBAAK,EAAEC,mBAAK,EAAEC,oBAAM,EAAEC,mBAAK,CAAC,CACvC;AAAAC,OAAA,CAAAX,SAAA,GAAAA,SAAA;AAEDA,SAAS,CAACY,YAAY,GAAG;EACvBJ,KAAK,EAAE,MAAM;EACbE,KAAK,EAAE;AACT,CAAC"}
+{"version":3,"file":"Separator.js","names":["_styledComponents","_interopRequireDefault","require","_styledSystem","obj","__esModule","default","Separator","styled","div","withConfig","displayName","componentId","compose","space","width","border","color","exports","defaultProps"],"sources":["../../../src/elements/Separator/Separator.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  color,\n  ColorProps,\n  compose,\n  space,\n  SpaceProps,\n  width,\n  WidthProps,\n} from \"styled-system\"\n\nexport interface SeparatorProps\n  extends SpaceProps,\n    WidthProps,\n    BorderProps,\n    ColorProps {}\n\n/**\n * A horizontal divider whose width and spacing can be adjusted\n */\nexport const Separator = styled.div<SeparatorProps>`\n  border-width: 1px;\n  border-style: solid;\n  border-bottom-width: 0;\n  background-color: transparent;\n  border-color: currentColor;\n  margin: 0;\n  ${compose(space, width, border, color)};\n`\n\nSeparator.defaultProps = {\n  width: \"100%\",\n  color: \"mono10\",\n}\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAUsB,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQtB;AACA;AACA;AACO,IAAMG,SAAS,GAAGC,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIAO/B,IAAAC,qBAAO,EAACC,mBAAK,EAAEC,mBAAK,EAAEC,oBAAM,EAAEC,mBAAK,CAAC,CACvC;AAAAC,OAAA,CAAAX,SAAA,GAAAA,SAAA;AAEDA,SAAS,CAACY,YAAY,GAAG;EACvBJ,KAAK,EAAE,MAAM;EACbE,KAAK,EAAE;AACT,CAAC"}

package/dist/elements/Separator/Separator.story.js

@@ -15,7 +15,7 @@ exports.default = _default;
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
     states: [{}, {
-      color: "black30"
+      color: "mono30"
     }, {
       borderColor: "red100"
     }, {

package/dist/elements/Separator/Separator.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Separator","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","color","borderColor","borderWidth","my","Separator","as","displayName"],"sources":["../../../src/elements/Separator/Separator.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Separator, SeparatorProps } from \"./Separator\"\n\nexport default {\n  title: \"Components/Separator\",\n}\n\nexport const Default = () => {\n  return (\n    <States<SeparatorProps>\n      states={[\n        {},\n        { color: \"black30\" },\n        { borderColor: \"red100\" },\n        { borderWidth: 5, my: 2 },\n      ]}\n    >\n      <Separator as=\"hr\" />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAuD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAExC;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAU,CAAC,EACpB;MAAEC,WAAW,EAAE;IAAS,CAAC,EACzB;MAAEC,WAAW,EAAE,CAAC;MAAEC,EAAE,EAAE;IAAE,CAAC;EACzB,gBAEFlB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAe,SAAS;IAACC,EAAE,EAAC;EAAI,EAAG,CACd;AAEb,CAAC;AAAAV,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAbYA,OAAO,CAAAU,WAAA"}
+{"version":3,"file":"Separator.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Separator","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","color","borderColor","borderWidth","my","Separator","as","displayName"],"sources":["../../../src/elements/Separator/Separator.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Separator, SeparatorProps } from \"./Separator\"\n\nexport default {\n  title: \"Components/Separator\",\n}\n\nexport const Default = () => {\n  return (\n    <States<SeparatorProps>\n      states={[\n        {},\n        { color: \"mono30\" },\n        { borderColor: \"red100\" },\n        { borderWidth: 5, my: 2 },\n      ]}\n    >\n      <Separator as=\"hr\" />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAuD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAExC;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAS,CAAC,EACnB;MAAEC,WAAW,EAAE;IAAS,CAAC,EACzB;MAAEC,WAAW,EAAE,CAAC;MAAEC,EAAE,EAAE;IAAE,CAAC;EACzB,gBAEFlB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAe,SAAS;IAACC,EAAE,EAAC;EAAI,EAAG,CACd;AAEb,CAAC;AAAAV,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAbYA,OAAO,CAAAU,WAAA"}

package/dist/elements/Shelf/Shelf.story.js

@@ -37,9 +37,9 @@ var Demo = function Demo(_ref) {
       key: j,
       width: 300,
       height: height,
-      bg: "black10",
+      bg: "mono10",
       border: "1px solid",
-      borderColor: "black30",
+      borderColor: "mono30",
       p: 1,
       display: "flex",
       alignItems: "center",

package/dist/elements/Shelf/Shelf.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shelf.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_Box","_Text","_Shelf","_ShelfNavigation","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_default","title","exports","Demo","_ref","_ref$amount","amount","rest","createElement","Shelf","map","_","height","j","Box","width","bg","border","borderColor","p","display","alignItems","justifyContent","Text","variant","displayName","Default","maxWidth","mx","States","states","showProgress","DifferingAmounts","NavigationButtons","hover","focus","disabled","ShelfNext","ClientSideUpdates","_useState","useState","_useState2","setAmount","useEffect","interval","setInterval","Math","floor","random","clearInterval","Fragment","story","parameters","chromatic","disable"],"sources":["../../../src/elements/Shelf/Shelf.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Shelf, ShelfProps } from \"./Shelf\"\nimport { ShelfNavigationProps, ShelfNext } from \"./ShelfNavigation\"\n\nexport default {\n  title: \"Components/Shelf\",\n}\n\nconst Demo = ({\n  amount = 25,\n  ...rest\n}: Partial<ShelfProps> & { amount?: number }) => {\n  return (\n    <Shelf {...rest}>\n      {Array.from(Array(amount))\n        .map((_, i) => [300, 250, 200, 333, 400][i % 5])\n        .map((height, j) => (\n          <Box\n            key={j}\n            width={300}\n            height={height}\n            bg=\"black10\"\n            border=\"1px solid\"\n            borderColor=\"black30\"\n            p={1}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Text variant=\"sm-display\">{j + 1}</Text>\n          </Box>\n        ))}\n    </Shelf>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <States<Partial<ShelfProps>>\n          states={[{}, { alignItems: \"center\" }, { showProgress: false }]}\n        >\n          <Demo />\n        </States>\n      </Box>\n    </Box>\n  )\n}\n\nexport const DifferingAmounts = () => {\n  return (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <States<Partial<ShelfProps> & { amount: number }>\n          states={[\n            { amount: 1 },\n            { amount: 3 },\n            { amount: 20 },\n            { amount: 10 },\n          ]}\n        >\n          <Demo />\n        </States>\n      </Box>\n    </Box>\n  )\n}\n\nexport const NavigationButtons = () => {\n  return (\n    <States<ShelfNavigationProps>\n      states={[\n        {},\n        { hover: true },\n        { focus: true },\n        { disabled: true },\n        { hover: true, focus: true },\n      ]}\n    >\n      <ShelfNext />\n    </States>\n  )\n}\n\nexport const ClientSideUpdates = () => {\n  const [amount, setAmount] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setAmount(Math.floor(Math.random() * Math.floor(15)) + 1)\n    }, 1000)\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  return (\n    <>\n      <pre>Amount: {amount}</pre>\n      <Demo amount={amount} />\n    </>\n  )\n}\n\nClientSideUpdates.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Shelf.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_Box","_Text","_Shelf","_ShelfNavigation","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_default","title","exports","Demo","_ref","_ref$amount","amount","rest","createElement","Shelf","map","_","height","j","Box","width","bg","border","borderColor","p","display","alignItems","justifyContent","Text","variant","displayName","Default","maxWidth","mx","States","states","showProgress","DifferingAmounts","NavigationButtons","hover","focus","disabled","ShelfNext","ClientSideUpdates","_useState","useState","_useState2","setAmount","useEffect","interval","setInterval","Math","floor","random","clearInterval","Fragment","story","parameters","chromatic","disable"],"sources":["../../../src/elements/Shelf/Shelf.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Shelf, ShelfProps } from \"./Shelf\"\nimport { ShelfNavigationProps, ShelfNext } from \"./ShelfNavigation\"\n\nexport default {\n  title: \"Components/Shelf\",\n}\n\nconst Demo = ({\n  amount = 25,\n  ...rest\n}: Partial<ShelfProps> & { amount?: number }) => {\n  return (\n    <Shelf {...rest}>\n      {Array.from(Array(amount))\n        .map((_, i) => [300, 250, 200, 333, 400][i % 5])\n        .map((height, j) => (\n          <Box\n            key={j}\n            width={300}\n            height={height}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Text variant=\"sm-display\">{j + 1}</Text>\n          </Box>\n        ))}\n    </Shelf>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <States<Partial<ShelfProps>>\n          states={[{}, { alignItems: \"center\" }, { showProgress: false }]}\n        >\n          <Demo />\n        </States>\n      </Box>\n    </Box>\n  )\n}\n\nexport const DifferingAmounts = () => {\n  return (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <States<Partial<ShelfProps> & { amount: number }>\n          states={[\n            { amount: 1 },\n            { amount: 3 },\n            { amount: 20 },\n            { amount: 10 },\n          ]}\n        >\n          <Demo />\n        </States>\n      </Box>\n    </Box>\n  )\n}\n\nexport const NavigationButtons = () => {\n  return (\n    <States<ShelfNavigationProps>\n      states={[\n        {},\n        { hover: true },\n        { focus: true },\n        { disabled: true },\n        { hover: true, focus: true },\n      ]}\n    >\n      <ShelfNext />\n    </States>\n  )\n}\n\nexport const ClientSideUpdates = () => {\n  const [amount, setAmount] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setAmount(Math.floor(Math.random() * Math.floor(15)) + 1)\n    }, 1000)\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  return (\n    <>\n      <pre>Amount: {amount}</pre>\n      <Demo amount={amount} />\n    </>\n  )\n}\n\nClientSideUpdates.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"mappings":"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"}

package/dist/elements/Shelf/ShelfNavigation.js

@@ -17,14 +17,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /** ShelfNavigationProps */
 
 var STATES = {
-  hover: (0, _styledComponents.css)(["outline:0;color:", ";box-shadow:", ";"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("effects.dropShadow")),
-  focus: (0, _styledComponents.css)(["outline:0;color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.brand")),
+  hover: (0, _styledComponents.css)(["outline:0;color:", ";box-shadow:", ";"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("effects.dropShadow")),
+  focus: (0, _styledComponents.css)(["outline:0;color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.brand")),
   disabled: (0, _styledComponents.css)(["opacity:0;cursor:default;"])
 };
 var Arrow = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "ShelfNavigation__Arrow",
   componentId: "sc-myqxb5-0"
-})(["height:50px;width:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:opacity 250ms,color 250ms,border-color 250ms,box-shadow 0.25s ease;color:", ";background-color:", ";border:1px solid ", ";border-radius:50%;pointer-events:auto;> svg{fill:currentColor;}", " &:hover{", "}&:focus{", "}&:disabled{", "}"], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("colors.black5"), function (props) {
+})(["height:50px;width:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:opacity 250ms,color 250ms,border-color 250ms,box-shadow 0.25s ease;color:", ";background-color:", ";border:1px solid ", ";border-radius:50%;pointer-events:auto;> svg{fill:currentColor;}", " &:hover{", "}&:focus{", "}&:disabled{", "}"], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono5"), function (props) {
   return (0, _styledComponents.css)(["", " ", " ", ""], props.hover && STATES.hover, props.focus && STATES.focus, props.disabled && STATES.focus);
 }, STATES.hover, STATES.focus, STATES.disabled);
 

package/dist/elements/Shelf/ShelfNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShelfNavigation.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_ChevronLeftIcon","_ChevronRightIcon","_Clickable","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","STATES","hover","css","themeGet","focus","disabled","Arrow","styled","Clickable","withConfig","displayName","componentId","props","ShelfNext","createElement","width","height","exports","ShelfPrevious"],"sources":["../../../src/elements/Shelf/ShelfNavigation.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.black100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.black60\")};\n  background-color: ${themeGet(\"colors.white100\")};\n  border: 1px solid ${themeGet(\"colors.black5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<React.PropsWithChildren<ShelfNavigationProps>> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronRightIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<React.PropsWithChildren<ShelfNavigationProps>> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronLeftIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShelfNavigation.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_ChevronLeftIcon","_ChevronRightIcon","_Clickable","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","STATES","hover","css","themeGet","focus","disabled","Arrow","styled","Clickable","withConfig","displayName","componentId","props","ShelfNext","createElement","width","height","exports","ShelfPrevious"],"sources":["../../../src/elements/Shelf/ShelfNavigation.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.mono60\")};\n  background-color: ${themeGet(\"colors.mono0\")};\n  border: 1px solid ${themeGet(\"colors.mono5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronRightIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronLeftIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Shelf/ShelfScrollBar.js

@@ -114,7 +114,7 @@ var ShelfScrollBar = /*#__PURE__*/_react.default.memo(function (_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(Track, _extends({
     ref: trackRef,
-    bg: "black15",
+    bg: "mono15",
     role: "scrollbar",
     "aria-orientation": "vertical",
     "aria-valuemax": 100,
@@ -122,7 +122,7 @@ var ShelfScrollBar = /*#__PURE__*/_react.default.memo(function (_ref) {
     "aria-valuenow": progress
   }, rest), /*#__PURE__*/_react.default.createElement(TrackHitArea, null), requiresScrolling && /*#__PURE__*/_react.default.createElement(Thumb, {
     position: "relative",
-    bg: "black60",
+    bg: "mono60",
     height: "100%",
     borderRadius: 3,
     width: thumbWidth,
@@ -153,7 +153,7 @@ var Thumb = (0, _styledComponents.default)(_Box.Box).withConfig({
 var HitArea = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "ShelfScrollBar__HitArea",
   componentId: "sc-iwm55u-3"
-})(["position:absolute;top:-10px;bottom:-10px;width:100%;left:0;opacity:0;transition:opacity 250ms;&:hover{opacity:1;}&:after{content:\"\";display:block;position:absolute;left:0;width:100%;background-color:", ";top:50%;margin-top:-1.5px;height:3px;}"], (0, _themeGet.themeGet)("colors.black100"));
+})(["position:absolute;top:-10px;bottom:-10px;width:100%;left:0;opacity:0;transition:opacity 250ms;&:hover{opacity:1;}&:after{content:\"\";display:block;position:absolute;left:0;width:100%;background-color:", ";top:50%;margin-top:-1.5px;height:3px;}"], (0, _themeGet.themeGet)("colors.mono100"));
 var buildScrollBar = function buildScrollBar(_ref2) {
   var trackWidth = _ref2.trackWidth,
     scrollLeft = _ref2.scrollLeft,

package/dist/elements/Shelf/ShelfScrollBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShelfScrollBar.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_useMutationObserver","_Box","_Clickable","_useClickScroll","_useDragScroll","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ShelfScrollBar","React","memo","_ref","_viewport$scrollLeft","_viewport$scrollWidth","_viewport$clientWidth","_trackRef$current$cli","_trackRef$current","viewport","rest","_useState","useState","scrollLeft","scrollWidth","clientWidth","_useState2","_useState2$","setScrollState","trackRef","useRef","thumbRef","trackWidth","current","_buildScrollBar","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","useEffect","updateScrollState","_viewport$scrollLeft2","_viewport$scrollWidth2","_viewport$clientWidth2","addEventListener","passive","window","removeEventListener","useMutationObserver","element","onMutate","mutations","_viewport$scrollLeft3","_viewport$scrollWidth3","_viewport$clientWidth3","hasMeaningfullyMutated","some","mutation","addedNodes","removedNodes","useDragScroll","useClickScroll","createElement","Track","ref","bg","role","TrackHitArea","Thumb","position","height","borderRadius","width","style","transform","concat","backfaceVisibility","HitArea","tabIndex","exports","displayName","styled","Box","withConfig","componentId","Clickable","themeGet","_ref2","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"sources":["../../../src/elements/Shelf/ShelfScrollBar.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n  viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<React.PropsWithChildren<ShelfScrollBarProps>> = React.memo(\n  ({ viewport, ...rest }) => {\n    const [\n      { scrollLeft, scrollWidth, clientWidth },\n      setScrollState,\n    ] = useState<ScrollState>({\n      scrollLeft: viewport?.scrollLeft ?? 0,\n      scrollWidth: viewport?.scrollWidth ?? 1,\n      clientWidth: viewport?.clientWidth ?? 1,\n    })\n\n    const trackRef = useRef<HTMLDivElement | null>(null)\n    const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n    const trackWidth = trackRef.current?.clientWidth ?? 1\n\n    const {\n      progress,\n      requiresScrolling,\n      thumbOffset,\n      thumbWidth,\n    } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n    // Update scrollState on scroll and resize\n    useEffect(() => {\n      if (!viewport) return\n\n      const updateScrollState = () => {\n        setScrollState({\n          scrollLeft: viewport?.scrollLeft ?? 0,\n          scrollWidth: viewport?.scrollWidth ?? 1,\n          clientWidth: viewport?.clientWidth ?? 1,\n        })\n      }\n\n      updateScrollState()\n\n      viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n      window.addEventListener(\"resize\", updateScrollState)\n\n      return () => {\n        viewport.removeEventListener(\"scroll\", updateScrollState)\n        window.removeEventListener(\"resize\", updateScrollState)\n      }\n    }, [viewport])\n\n    useMutationObserver({\n      element: viewport,\n      onMutate: (mutations) => {\n        // Check to see if any of the mutations has either added or removed nodes\n        const hasMeaningfullyMutated = mutations.some((mutation) => {\n          return (\n            mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n          )\n        })\n\n        // Only update scroll state if something was added or removed\n        if (!hasMeaningfullyMutated) return\n\n        setScrollState({\n          scrollLeft: viewport?.scrollLeft ?? 0,\n          scrollWidth: viewport?.scrollWidth ?? 1,\n          clientWidth: viewport?.clientWidth ?? 1,\n        })\n      },\n    })\n\n    useDragScroll({\n      viewport,\n      thumbRef,\n      clientWidth,\n      scrollWidth,\n      scrollLeft,\n      trackWidth,\n    })\n\n    useClickScroll({\n      viewport,\n      thumbRef,\n      trackRef,\n      scrollWidth,\n      trackWidth,\n    })\n\n    return (\n      <Track\n        ref={trackRef as any}\n        bg=\"black15\"\n        role=\"scrollbar\"\n        aria-orientation=\"vertical\"\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={progress}\n        {...rest}\n      >\n        {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n        <TrackHitArea />\n\n        {requiresScrolling && (\n          <Thumb\n            position=\"relative\"\n            bg=\"black60\"\n            height=\"100%\"\n            borderRadius={3}\n            width={thumbWidth}\n            style={{\n              transform: `translateX(${thumbOffset}px)`,\n              backfaceVisibility: \"hidden\",\n            }}\n          >\n            <HitArea ref={thumbRef as any} tabIndex={-1} aria-label=\"Thumb\" />\n          </Thumb>\n        )}\n      </Track>\n    )\n  }\n)\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n  position: relative;\n  height: 3px;\n  width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  right: 0;\n  left: 0;\n  width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  width: 100%;\n  left: 0;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    background-color: ${themeGet(\"colors.black100\")};\n    /*\n     * Positioning this using top/bottom and translate each have cross-browser\n     * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n     */\n    top: 50%;\n    margin-top: -1.5px;\n    height: 3px;\n  }\n`\n\ninterface ScrollState {\n  /** Left most scroll edge */\n  scrollLeft: number\n  /** Width of the underlying rail */\n  scrollWidth: number\n  /** Width of the viewport */\n  clientWidth: number\n}\n\nexport const buildScrollBar = ({\n  trackWidth,\n  scrollLeft,\n  scrollWidth,\n  clientWidth,\n}: ScrollState & {\n  /** Width of the scrollbar track */\n  trackWidth: number\n}) => {\n  const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n  // Sets up a scrollbar for viewport\n  const percentageVisible = clientWidth / scrollWidth\n  const thumbWidth = percentageVisible * clientWidth\n  const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n  // Transform it down to whatever our actual track width is as\n  // it's always smaller than the target viewport.\n  const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n  const normalizedThumbOffset =\n    percentageOffset * (trackWidth - normalizedThumbWidth)\n\n  const requiresScrolling = percentageVisible < 1\n\n  return {\n    requiresScrolling,\n    progress,\n    percentageVisible,\n    percentageOffset,\n    thumbWidth: normalizedThumbWidth,\n    thumbOffset: normalizedThumbOffset,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShelfScrollBar.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_interopRequireDefault","_useMutationObserver","_Box","_Clickable","_useClickScroll","_useDragScroll","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ShelfScrollBar","React","memo","_ref","_viewport$scrollLeft","_viewport$scrollWidth","_viewport$clientWidth","_trackRef$current$cli","_trackRef$current","viewport","rest","_useState","useState","scrollLeft","scrollWidth","clientWidth","_useState2","_useState2$","setScrollState","trackRef","useRef","thumbRef","trackWidth","current","_buildScrollBar","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","useEffect","updateScrollState","_viewport$scrollLeft2","_viewport$scrollWidth2","_viewport$clientWidth2","addEventListener","passive","window","removeEventListener","useMutationObserver","element","onMutate","mutations","_viewport$scrollLeft3","_viewport$scrollWidth3","_viewport$clientWidth3","hasMeaningfullyMutated","some","mutation","addedNodes","removedNodes","useDragScroll","useClickScroll","createElement","Track","ref","bg","role","TrackHitArea","Thumb","position","height","borderRadius","width","style","transform","concat","backfaceVisibility","HitArea","tabIndex","exports","displayName","styled","Box","withConfig","componentId","Clickable","themeGet","_ref2","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"sources":["../../../src/elements/Shelf/ShelfScrollBar.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n  viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<\n  React.PropsWithChildren<ShelfScrollBarProps>\n> = React.memo(({ viewport, ...rest }) => {\n  const [\n    { scrollLeft, scrollWidth, clientWidth },\n    setScrollState,\n  ] = useState<ScrollState>({\n    scrollLeft: viewport?.scrollLeft ?? 0,\n    scrollWidth: viewport?.scrollWidth ?? 1,\n    clientWidth: viewport?.clientWidth ?? 1,\n  })\n\n  const trackRef = useRef<HTMLDivElement | null>(null)\n  const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n  const trackWidth = trackRef.current?.clientWidth ?? 1\n\n  const {\n    progress,\n    requiresScrolling,\n    thumbOffset,\n    thumbWidth,\n  } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n  // Update scrollState on scroll and resize\n  useEffect(() => {\n    if (!viewport) return\n\n    const updateScrollState = () => {\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    }\n\n    updateScrollState()\n\n    viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n    window.addEventListener(\"resize\", updateScrollState)\n\n    return () => {\n      viewport.removeEventListener(\"scroll\", updateScrollState)\n      window.removeEventListener(\"resize\", updateScrollState)\n    }\n  }, [viewport])\n\n  useMutationObserver({\n    element: viewport,\n    onMutate: (mutations) => {\n      // Check to see if any of the mutations has either added or removed nodes\n      const hasMeaningfullyMutated = mutations.some((mutation) => {\n        return (\n          mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n        )\n      })\n\n      // Only update scroll state if something was added or removed\n      if (!hasMeaningfullyMutated) return\n\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    },\n  })\n\n  useDragScroll({\n    viewport,\n    thumbRef,\n    clientWidth,\n    scrollWidth,\n    scrollLeft,\n    trackWidth,\n  })\n\n  useClickScroll({\n    viewport,\n    thumbRef,\n    trackRef,\n    scrollWidth,\n    trackWidth,\n  })\n\n  return (\n    <Track\n      ref={trackRef as any}\n      bg=\"mono15\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={progress}\n      {...rest}\n    >\n      {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n      <TrackHitArea />\n\n      {requiresScrolling && (\n        <Thumb\n          position=\"relative\"\n          bg=\"mono60\"\n          height=\"100%\"\n          borderRadius={3}\n          width={thumbWidth}\n          style={{\n            transform: `translateX(${thumbOffset}px)`,\n            backfaceVisibility: \"hidden\",\n          }}\n        >\n          <HitArea ref={thumbRef as any} tabIndex={-1} aria-label=\"Thumb\" />\n        </Thumb>\n      )}\n    </Track>\n  )\n})\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n  position: relative;\n  height: 3px;\n  width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  right: 0;\n  left: 0;\n  width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  width: 100%;\n  left: 0;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono100\")};\n    /*\n     * Positioning this using top/bottom and translate each have cross-browser\n     * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n     */\n    top: 50%;\n    margin-top: -1.5px;\n    height: 3px;\n  }\n`\n\ninterface ScrollState {\n  /** Left most scroll edge */\n  scrollLeft: number\n  /** Width of the underlying rail */\n  scrollWidth: number\n  /** Width of the viewport */\n  clientWidth: number\n}\n\nexport const buildScrollBar = ({\n  trackWidth,\n  scrollLeft,\n  scrollWidth,\n  clientWidth,\n}: ScrollState & {\n  /** Width of the scrollbar track */\n  trackWidth: number\n}) => {\n  const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n  // Sets up a scrollbar for viewport\n  const percentageVisible = clientWidth / scrollWidth\n  const thumbWidth = percentageVisible * clientWidth\n  const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n  // Transform it down to whatever our actual track width is as\n  // it's always smaller than the target viewport.\n  const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n  const normalizedThumbOffset =\n    percentageOffset * (trackWidth - normalizedThumbWidth)\n\n  const requiresScrolling = percentageVisible < 1\n\n  return {\n    requiresScrolling,\n    progress,\n    percentageVisible,\n    percentageOffset,\n    thumbWidth: normalizedThumbWidth,\n    thumbOffset: normalizedThumbOffset,\n  }\n}\n"],"mappings":"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"}

package/dist/elements/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { BoxProps } from "../Box";
 import { TextProps } from "../Text";
 /** SkeletonProps */
 export declare type SkeletonBoxProps = BoxProps;
-/** A black10 Box */
+/** A mono10 Box */
 export declare const SkeletonBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;

package/dist/elements/Skeleton/Skeleton.js

@@ -28,14 +28,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /** SkeletonProps */
 
-/** A black10 Box */
+/** A mono10 Box */
 var SkeletonBox = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Skeleton__SkeletonBox",
   componentId: "sc-1vwqe5c-0"
 })([""]);
 exports.SkeletonBox = SkeletonBox;
 SkeletonBox.defaultProps = {
-  bg: "black10"
+  bg: "mono10"
 };
 SkeletonBox.displayName = "SkeletonBox";
 var splitBorderProps = (0, _splitProps.splitProps)(_styledSystem.border);
@@ -72,7 +72,7 @@ var FADE_ANIMATION = (0, _styledComponents.keyframes)(["0%{opacity:0.5;}50%{opac
 var SkeletonFade = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Skeleton__SkeletonFade",
   componentId: "sc-1vwqe5c-2"
-})(["background-color:", ";animation:", " 2s ease-in-out infinite;"], (0, _themeGet.themeGet)("colors.white100"), FADE_ANIMATION);
+})(["background-color:", ";animation:", " 2s ease-in-out infinite;"], (0, _themeGet.themeGet)("colors.mono0"), FADE_ANIMATION);
 /**
  * Animated wrapper for Skeletons
  */

package/dist/elements/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_splitProps","_Box","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SkeletonBox","styled","Box","withConfig","displayName","componentId","exports","defaultProps","bg","splitBorderProps","splitProps","border","SkeletonTextOverlay","SkeletonText","_ref","children","rest","_splitBorderProps","_splitBorderProps2","borderProps","textProps","createElement","Text","color","as","display","position","FADE_ANIMATION","keyframes","SkeletonFade","themeGet","Skeleton","_ref2","top","right","bottom","left"],"sources":["../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A black10 Box */\nexport const SkeletonBox = styled(Box)``\nSkeletonBox.defaultProps = { bg: \"black10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<React.PropsWithChildren<SkeletonTextProps>> = ({\n  children,\n  ...rest\n}) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden>\n        {children}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.white100\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> = ({ children, ...rest }) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Skeleton.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_splitProps","_Box","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SkeletonBox","styled","Box","withConfig","displayName","componentId","exports","defaultProps","bg","splitBorderProps","splitProps","border","SkeletonTextOverlay","SkeletonText","_ref","children","rest","_splitBorderProps","_splitBorderProps2","borderProps","textProps","createElement","Text","color","as","display","position","FADE_ANIMATION","keyframes","SkeletonFade","themeGet","Skeleton","_ref2","top","right","bottom","left"],"sources":["../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A mono10 Box */\nexport const SkeletonBox = styled(Box)``\nSkeletonBox.defaultProps = { bg: \"mono10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<\n  React.PropsWithChildren<SkeletonTextProps>\n> = ({ children, ...rest }) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden>\n        {children}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.mono0\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Skip/Skip.js

@@ -35,7 +35,7 @@ var Skip = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef)
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
     ref: forwardedRef,
     display: "block",
-    bg: "black10"
+    bg: "mono10"
   }, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     p: 1,
     variant: "sm"

package/dist/elements/Skip/Skip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skip.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Clickable","_Text","_VisuallyHidden","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Container","styled","Clickable","withConfig","displayName","componentId","visuallyHiddenMixin","Skip","React","forwardRef","_ref","forwardedRef","children","rest","createElement","ref","display","bg","Text","p","variant","exports"],"sources":["../../../src/elements/Skip/Skip.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"black10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"sm\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nSkip.displayName = \"Skip\"\n"],"mappings":"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"}
+{"version":3,"file":"Skip.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Clickable","_Text","_VisuallyHidden","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Container","styled","Clickable","withConfig","displayName","componentId","visuallyHiddenMixin","Skip","React","forwardRef","_ref","forwardedRef","children","rest","createElement","ref","display","bg","Text","p","variant","exports"],"sources":["../../../src/elements/Skip/Skip.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"mono10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"sm\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nSkip.displayName = \"Skip\"\n"],"mappings":"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"}

package/dist/elements/Spacer/Spacer.story.js

@@ -44,13 +44,13 @@ var Default = function Default() {
       return /*#__PURE__*/_react.default.createElement(_Spacer, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
         height: 2,
         width: 100,
-        bg: "black60"
+        bg: "mono60"
       }), /*#__PURE__*/_react.default.createElement(_Spacer2.Spacer, {
         y: y
       }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
         height: 2,
         width: 100,
-        bg: "black60"
+        bg: "mono60"
       }));
     }
     return /*#__PURE__*/_react.default.createElement(_Spacer, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
@@ -58,13 +58,13 @@ var Default = function Default() {
     }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
       height: 100,
       width: 2,
-      bg: "black60"
+      bg: "mono60"
     }), /*#__PURE__*/_react.default.createElement(_Spacer2.Spacer, {
       x: x
     }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
       height: 100,
       width: 2,
-      bg: "black60"
+      bg: "mono60"
     })));
   });
 };

package/dist/elements/Spacer/Spacer.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.story.js","names":["_v","require","_react","_interopRequireDefault","_storybookStates","_Box","_Spacer2","obj","__esModule","default","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","length","i","arr2","_default","title","component","Spacer","exports","VALUES","keys","THEME","space","sort","a","b","Number","map","value","Default","createElement","States","states","concat","y","x","_ref","_Spacer","Box","height","width","bg","display","displayName"],"sources":["../../../src/elements/Spacer/Spacer.story.tsx"],"sourcesContent":["import { THEME } from \"@artsy/palette-tokens/dist/themes/v3\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Spacer, SpacerProps } from \"./Spacer\"\n\nexport default {\n  title: \"Components/Spacer\",\n  component: Spacer,\n}\n\nconst VALUES = Object.keys(THEME.space)\n  .sort((a, b) => {\n    return Number(a) - Number(b)\n  })\n  .map((value) => Number(value))\n\nexport const Default = () => {\n  return (\n    <States<SpacerProps>\n      states={[\n        ...VALUES.map((value) => ({ y: value })),\n        ...VALUES.map((value) => ({ x: value })),\n      ]}\n    >\n      {({ x, y }) => {\n        if (y) {\n          return (\n            <_Spacer>\n              <Box height={2} width={100} bg=\"black60\" />\n\n              <Spacer y={y} />\n\n              <Box height={2} width={100} bg=\"black60\" />\n            </_Spacer>\n          )\n        }\n\n        return (\n          <_Spacer>\n            <Box display=\"flex\">\n              <Box height={100} width={2} bg=\"black60\" />\n\n              <Spacer x={x} />\n\n              <Box height={100} width={2} bg=\"black60\" />\n            </Box>\n          </_Spacer>\n        )\n      }}\n    </States>\n  )\n}\n\nconst _Spacer = Box\n_Spacer.displayName = \"Spacer\"\n"],"mappings":"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"}
+{"version":3,"file":"Spacer.story.js","names":["_v","require","_react","_interopRequireDefault","_storybookStates","_Box","_Spacer2","obj","__esModule","default","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","length","i","arr2","_default","title","component","Spacer","exports","VALUES","keys","THEME","space","sort","a","b","Number","map","value","Default","createElement","States","states","concat","y","x","_ref","_Spacer","Box","height","width","bg","display","displayName"],"sources":["../../../src/elements/Spacer/Spacer.story.tsx"],"sourcesContent":["import { THEME } from \"@artsy/palette-tokens/dist/themes/v3\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Spacer, SpacerProps } from \"./Spacer\"\n\nexport default {\n  title: \"Components/Spacer\",\n  component: Spacer,\n}\n\nconst VALUES = Object.keys(THEME.space)\n  .sort((a, b) => {\n    return Number(a) - Number(b)\n  })\n  .map((value) => Number(value))\n\nexport const Default = () => {\n  return (\n    <States<SpacerProps>\n      states={[\n        ...VALUES.map((value) => ({ y: value })),\n        ...VALUES.map((value) => ({ x: value })),\n      ]}\n    >\n      {({ x, y }) => {\n        if (y) {\n          return (\n            <_Spacer>\n              <Box height={2} width={100} bg=\"mono60\" />\n\n              <Spacer y={y} />\n\n              <Box height={2} width={100} bg=\"mono60\" />\n            </_Spacer>\n          )\n        }\n\n        return (\n          <_Spacer>\n            <Box display=\"flex\">\n              <Box height={100} width={2} bg=\"mono60\" />\n\n              <Spacer x={x} />\n\n              <Box height={100} width={2} bg=\"mono60\" />\n            </Box>\n          </_Spacer>\n        )\n      }}\n    </States>\n  )\n}\n\nconst _Spacer = Box\n_Spacer.displayName = \"Spacer\"\n"],"mappings":"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"}

package/dist/elements/Spinner/Spinner.js

@@ -53,7 +53,7 @@ var Spinner = function Spinner(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "large" : _ref$size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "black100" : _ref$color,
+    color = _ref$color === void 0 ? "mono100" : _ref$color,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(delay === 0),
     _useState2 = _slicedToArray(_useState, 2),