@artsy/palette 43.3.0 → 43.3.1-canary.1463.32460.0

package/dist/elements/PhoneInput/PhoneInputList.story.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookStates = require("storybook-states");
+var _PhoneInputList = require("./PhoneInputList");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = {
+  title: "Components/PhoneInputList"
+};
+var Default = exports.Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}]
+  }, /*#__PURE__*/_react.default.createElement(_PhoneInputList.PhoneInputList, {
+    options: EXAMPLE_COUNTRIES,
+    onSelect: function onSelect(option) {
+      return console.log(option);
+    },
+    onClose: function onClose() {
+      return console.log("close");
+    }
+  }));
+};
+Default.displayName = "Default";
+var EXAMPLE_COUNTRIES = [{
+  text: "🇦🇫 +93",
+  name: "Afghanistan",
+  value: "af",
+  countryCode: "+93",
+  flag: "🇦🇫"
+}, {
+  text: "🇦🇽 +358",
+  name: "Aland Islands",
+  value: "ax",
+  countryCode: "+358",
+  flag: "🇦🇽"
+}, {
+  text: "🇦🇱 +355",
+  name: "Albania",
+  value: "al",
+  countryCode: "+355",
+  flag: "🇦🇱"
+}, {
+  text: "🇩🇿 +213",
+  name: "Algeria",
+  value: "dz",
+  countryCode: "+213",
+  flag: "🇩🇿"
+}, {
+  text: "🇦🇸 +1684",
+  name: "American Samoa",
+  value: "as",
+  countryCode: "+1684",
+  flag: "🇦🇸"
+}, {
+  text: "🇦🇩 +376",
+  name: "Andorra",
+  value: "ad",
+  countryCode: "+376",
+  flag: "🇦🇩"
+}, {
+  text: "🇦🇴 +244",
+  name: "Angola",
+  value: "ao",
+  countryCode: "+244",
+  flag: "🇦🇴"
+}, {
+  text: "🇦🇮 +1264",
+  name: "Anguilla",
+  value: "ai",
+  countryCode: "+1264",
+  flag: "🇦🇮"
+}, {
+  text: "🇦🇶 +672",
+  name: "Antarctica",
+  value: "aq",
+  countryCode: "+672",
+  flag: "🇦🇶"
+}, {
+  text: "🇦🇬 +1268",
+  name: "Antigua and Barbuda",
+  value: "ag",
+  countryCode: "+1268",
+  flag: "🇦🇬"
+}, {
+  text: "🇦🇷 +54",
+  name: "Argentina",
+  value: "ar",
+  countryCode: "+54",
+  flag: "🇦🇷"
+}, {
+  text: "🇦🇲 +374",
+  name: "Armenia",
+  value: "am",
+  countryCode: "+374",
+  flag: "🇦🇲"
+}, {
+  text: "🇦🇼 +297",
+  name: "Aruba",
+  value: "aw",
+  countryCode: "+297",
+  flag: "🇦🇼"
+}, {
+  text: "🇦🇺 +61",
+  name: "Australia",
+  value: "au",
+  countryCode: "+61",
+  flag: "🇦🇺"
+}, {
+  text: "🇦🇹 +43",
+  name: "Austria",
+  value: "at",
+  countryCode: "+43",
+  flag: "🇦🇹"
+}, {
+  text: "🇦🇿 +994",
+  name: "Azerbaijan",
+  value: "az",
+  countryCode: "+994",
+  flag: "🇦🇿"
+}, {
+  text: "🇧🇸 +1242",
+  name: "Bahamas",
+  value: "bs",
+  countryCode: "+1242",
+  flag: "🇧🇸"
+}, {
+  text: "🇧🇭 +973",
+  name: "Bahrain",
+  value: "bh",
+  countryCode: "+973",
+  flag: "🇧🇭"
+}, {
+  text: "🇧🇩 +880",
+  name: "Bangladesh",
+  value: "bd",
+  countryCode: "+880",
+  flag: "🇧🇩"
+}, {
+  text: "🇧🇧 +1246",
+  name: "Barbados",
+  value: "bb",
+  countryCode: "+1246",
+  flag: "🇧🇧"
+}, {
+  text: "🇧🇾 +375",
+  name: "Belarus",
+  value: "by",
+  countryCode: "+375",
+  flag: "🇧🇾"
+}, {
+  text: "🇧🇪 +32",
+  name: "Belgium",
+  value: "be",
+  countryCode: "+32",
+  flag: "🇧🇪"
+}, {
+  text: "🇧🇿 +501",
+  name: "Belize",
+  value: "bz",
+  countryCode: "+501",
+  flag: "🇧🇿"
+}, {
+  text: "🇧🇯 +229",
+  name: "Benin",
+  value: "bj",
+  countryCode: "+229",
+  flag: "🇧🇯"
+}, {
+  text: "🇧🇲 +1441",
+  name: "Bermuda",
+  value: "bm",
+  countryCode: "+1441",
+  flag: "🇧🇲"
+}, {
+  text: "🇧🇹 +975",
+  name: "Bhutan",
+  value: "bt",
+  countryCode: "+975",
+  flag: "🇧🇹"
+}, {
+  text: "🇧🇴 +591",
+  name: "Bolivia",
+  value: "bo",
+  countryCode: "+591",
+  flag: "🇧🇴"
+}, {
+  text: "🇧🇦 +387",
+  name: "Bosnia and Herzegovina",
+  value: "ba",
+  countryCode: "+387",
+  flag: "🇧🇦"
+}];
+//# sourceMappingURL=PhoneInputList.story.js.map

package/dist/elements/PhoneInput/PhoneInputList.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInputList.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_PhoneInputList","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","PhoneInputList","options","EXAMPLE_COUNTRIES","onSelect","option","console","log","onClose","displayName","text","name","value","countryCode","flag"],"sources":["../../../src/elements/PhoneInput/PhoneInputList.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { PhoneInputList, PhoneInputListProps } from \"./PhoneInputList\"\n\nexport default {\n  title: \"Components/PhoneInputList\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<PhoneInputListProps>> states={[{}]}>\n      <PhoneInputList\n        options={EXAMPLE_COUNTRIES}\n        onSelect={(option) => console.log(option)}\n        onClose={() => console.log(\"close\")}\n      />\n    </States>\n  )\n}\n\nconst EXAMPLE_COUNTRIES = [\n  {\n    text: \"🇦🇫 +93\",\n    name: \"Afghanistan\",\n    value: \"af\",\n    countryCode: \"+93\",\n    flag: \"🇦🇫\",\n  },\n  {\n    text: \"🇦🇽 +358\",\n    name: \"Aland Islands\",\n    value: \"ax\",\n    countryCode: \"+358\",\n    flag: \"🇦🇽\",\n  },\n  {\n    text: \"🇦🇱 +355\",\n    name: \"Albania\",\n    value: \"al\",\n    countryCode: \"+355\",\n    flag: \"🇦🇱\",\n  },\n  {\n    text: \"🇩🇿 +213\",\n    name: \"Algeria\",\n    value: \"dz\",\n    countryCode: \"+213\",\n    flag: \"🇩🇿\",\n  },\n  {\n    text: \"🇦🇸 +1684\",\n    name: \"American Samoa\",\n    value: \"as\",\n    countryCode: \"+1684\",\n    flag: \"🇦🇸\",\n  },\n  {\n    text: \"🇦🇩 +376\",\n    name: \"Andorra\",\n    value: \"ad\",\n    countryCode: \"+376\",\n    flag: \"🇦🇩\",\n  },\n  {\n    text: \"🇦🇴 +244\",\n    name: \"Angola\",\n    value: \"ao\",\n    countryCode: \"+244\",\n    flag: \"🇦🇴\",\n  },\n  {\n    text: \"🇦🇮 +1264\",\n    name: \"Anguilla\",\n    value: \"ai\",\n    countryCode: \"+1264\",\n    flag: \"🇦🇮\",\n  },\n  {\n    text: \"🇦🇶 +672\",\n    name: \"Antarctica\",\n    value: \"aq\",\n    countryCode: \"+672\",\n    flag: \"🇦🇶\",\n  },\n  {\n    text: \"🇦🇬 +1268\",\n    name: \"Antigua and Barbuda\",\n    value: \"ag\",\n    countryCode: \"+1268\",\n    flag: \"🇦🇬\",\n  },\n  {\n    text: \"🇦🇷 +54\",\n    name: \"Argentina\",\n    value: \"ar\",\n    countryCode: \"+54\",\n    flag: \"🇦🇷\",\n  },\n  {\n    text: \"🇦🇲 +374\",\n    name: \"Armenia\",\n    value: \"am\",\n    countryCode: \"+374\",\n    flag: \"🇦🇲\",\n  },\n  {\n    text: \"🇦🇼 +297\",\n    name: \"Aruba\",\n    value: \"aw\",\n    countryCode: \"+297\",\n    flag: \"🇦🇼\",\n  },\n  {\n    text: \"🇦🇺 +61\",\n    name: \"Australia\",\n    value: \"au\",\n    countryCode: \"+61\",\n    flag: \"🇦🇺\",\n  },\n  {\n    text: \"🇦🇹 +43\",\n    name: \"Austria\",\n    value: \"at\",\n    countryCode: \"+43\",\n    flag: \"🇦🇹\",\n  },\n  {\n    text: \"🇦🇿 +994\",\n    name: \"Azerbaijan\",\n    value: \"az\",\n    countryCode: \"+994\",\n    flag: \"🇦🇿\",\n  },\n  {\n    text: \"🇧🇸 +1242\",\n    name: \"Bahamas\",\n    value: \"bs\",\n    countryCode: \"+1242\",\n    flag: \"🇧🇸\",\n  },\n  {\n    text: \"🇧🇭 +973\",\n    name: \"Bahrain\",\n    value: \"bh\",\n    countryCode: \"+973\",\n    flag: \"🇧🇭\",\n  },\n  {\n    text: \"🇧🇩 +880\",\n    name: \"Bangladesh\",\n    value: \"bd\",\n    countryCode: \"+880\",\n    flag: \"🇧🇩\",\n  },\n  {\n    text: \"🇧🇧 +1246\",\n    name: \"Barbados\",\n    value: \"bb\",\n    countryCode: \"+1246\",\n    flag: \"🇧🇧\",\n  },\n  {\n    text: \"🇧🇾 +375\",\n    name: \"Belarus\",\n    value: \"by\",\n    countryCode: \"+375\",\n    flag: \"🇧🇾\",\n  },\n  {\n    text: \"🇧🇪 +32\",\n    name: \"Belgium\",\n    value: \"be\",\n    countryCode: \"+32\",\n    flag: \"🇧🇪\",\n  },\n  {\n    text: \"🇧🇿 +501\",\n    name: \"Belize\",\n    value: \"bz\",\n    countryCode: \"+501\",\n    flag: \"🇧🇿\",\n  },\n  {\n    text: \"🇧🇯 +229\",\n    name: \"Benin\",\n    value: \"bj\",\n    countryCode: \"+229\",\n    flag: \"🇧🇯\",\n  },\n  {\n    text: \"🇧🇲 +1441\",\n    name: \"Bermuda\",\n    value: \"bm\",\n    countryCode: \"+1441\",\n    flag: \"🇧🇲\",\n  },\n  {\n    text: \"🇧🇹 +975\",\n    name: \"Bhutan\",\n    value: \"bt\",\n    countryCode: \"+975\",\n    flag: \"🇧🇹\",\n  },\n  {\n    text: \"🇧🇴 +591\",\n    name: \"Bolivia\",\n    value: \"bo\",\n    countryCode: \"+591\",\n    flag: \"🇧🇴\",\n  },\n  {\n    text: \"🇧🇦 +387\",\n    name: \"Bosnia and Herzegovina\",\n    value: \"ba\",\n    countryCode: \"+387\",\n    flag: \"🇧🇦\",\n  },\n]\n"],"mappings":"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"}

package/dist/elements/PhoneInput/tokens.js

@@ -8,11 +8,11 @@ var _themeGet = require("@styled-system/theme-get");
 var _styledComponents = require("styled-components");
 var PHONE_INPUT_STATES = exports.PHONE_INPUT_STATES = {
   default: (0, _styledComponents.css)(["> div{border-color:", ";}> input{border-color:", ";outline:none;}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono60")),
-  active: (0, _styledComponents.css)(["> div,> input{border-color:", ";color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100")),
-  focus: (0, _styledComponents.css)(["> div,> input{border-color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100")),
-  hover: (0, _styledComponents.css)(["> div,> input{border-color:", ";}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60")),
-  completed: (0, _styledComponents.css)(["> div,> input{border-color:", ";color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono60")),
+  active: (0, _styledComponents.css)(["> div,> button,> input{border-color:", ";color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.blue100")),
+  focus: (0, _styledComponents.css)(["> div,> button,> input{border-color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.blue100")),
+  hover: (0, _styledComponents.css)(["> div,> button,> input{border-color:", ";}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono60")),
+  completed: (0, _styledComponents.css)(["> div,> button,> input{border-color:", ";color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono60")),
   disabled: (0, _styledComponents.css)(["> div,> input{cursor:default;background-color:transparent;border-color:", ";}> input::placeholder,> label{color:", ";}"], (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30")),
-  error: (0, _styledComponents.css)(["> div,> input{border-color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
+  error: (0, _styledComponents.css)(["> div,> button,> input{border-color:", ";}> label{color:", ";}"], (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
 };
 //# sourceMappingURL=tokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","PHONE_INPUT_STATES","exports","default","css","themeGet","active","focus","hover","completed","disabled","error"],"sources":["../../../src/elements/PhoneInput/tokens.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const PHONE_INPUT_STATES = {\n  default: css`\n    > div {\n      border-color: ${themeGet(\"colors.mono30\")};\n    }\n\n    > input {\n      border-color: ${themeGet(\"colors.mono30\")};\n      outline: none;\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  active: css`\n    > div,\n    > input {\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > input::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.blue100\")};\n    }\n  `,\n  focus: css`\n    > div,\n    > input {\n      border-color: ${themeGet(\"colors.blue100\")};\n    }\n\n    > input::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.blue100\")};\n    }\n  `,\n  hover: css`\n    > div,\n    > input {\n      border-color: ${themeGet(\"colors.mono60\")};\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  completed: css`\n    > div,\n    > input {\n      border-color: ${themeGet(\"colors.mono60\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  disabled: css`\n    > div,\n    > input {\n      cursor: default;\n      background-color: transparent;\n      border-color: ${themeGet(\"colors.mono30\")};\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    > div,\n    > input {\n      border-color: ${themeGet(\"colors.red100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,IAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG;EAChCE,OAAO,MAAEC,qBAAG,kHAEQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAMhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDC,MAAM,MAAEF,qBAAG,yGAGS,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACjC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDE,KAAK,MAAEH,qBAAG,8FAGU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAIjC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDG,KAAK,MAAEJ,qBAAG,kFAGU,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAKhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDI,SAAS,MAAEL,qBAAG,wEAGM,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAChC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDK,QAAQ,MAAEN,qBAAG,8HAKO,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAKhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDM,KAAK,MAAEP,qBAAG,6DAGU,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAIhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","PHONE_INPUT_STATES","exports","default","css","themeGet","active","focus","hover","completed","disabled","error"],"sources":["../../../src/elements/PhoneInput/tokens.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const PHONE_INPUT_STATES = {\n  default: css`\n    > div {\n      border-color: ${themeGet(\"colors.mono30\")};\n    }\n\n    > input {\n      border-color: ${themeGet(\"colors.mono30\")};\n      outline: none;\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  active: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > input::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.blue100\")};\n    }\n  `,\n  focus: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.blue100\")};\n    }\n\n    > input::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.blue100\")};\n    }\n  `,\n  hover: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.mono60\")};\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  completed: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.mono60\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  disabled: css`\n    > div,\n    > input {\n      cursor: default;\n      background-color: transparent;\n      border-color: ${themeGet(\"colors.mono30\")};\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.red100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,IAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG;EAChCE,OAAO,MAAEC,qBAAG,kHAEQ,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAMhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDC,MAAM,MAAEF,qBAAG,kHAIS,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACjC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDE,KAAK,MAAEH,qBAAG,uGAIU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAIjC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAIzB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAEtC;EACDG,KAAK,MAAEJ,qBAAG,2FAIU,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAKhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDI,SAAS,MAAEL,qBAAG,iFAIM,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAChC,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDK,QAAQ,MAAEN,qBAAG,8HAKO,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAKhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC,CAErC;EACDM,KAAK,MAAEP,qBAAG,sEAIU,IAAAC,kBAAQ,EAAC,eAAe,CAAC,EAIhC,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/utils/useMouseActivity.d.ts

@@ -0,0 +1,8 @@
+interface UseMouseActivityProps {
+    /** Optionally disable for performance (default: `true`) */
+    active?: boolean;
+}
+export declare const useMouseActivity: ({ active }?: UseMouseActivityProps) => {
+    lastMouseMoveTimestamp: import("react").MutableRefObject<number>;
+};
+export {};

package/dist/utils/useMouseActivity.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMouseActivity = void 0;
+var _react = require("react");
+var useMouseActivity = exports.useMouseActivity = function useMouseActivity() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      active: true
+    },
+    active = _ref.active;
+  var lastMouseMoveTimestamp = (0, _react.useRef)(0);
+  (0, _react.useEffect)(function () {
+    if (!active) return;
+    var handleMouseMove = function handleMouseMove() {
+      lastMouseMoveTimestamp.current = performance.now();
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return function () {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [active]);
+  return {
+    lastMouseMoveTimestamp: lastMouseMoveTimestamp
+  };
+};
+//# sourceMappingURL=useMouseActivity.js.map

package/dist/utils/useMouseActivity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseActivity.js","names":["_react","require","useMouseActivity","exports","_ref","arguments","length","undefined","active","lastMouseMoveTimestamp","useRef","useEffect","handleMouseMove","current","performance","now","window","addEventListener","removeEventListener"],"sources":["../../src/utils/useMouseActivity.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\"\n\ninterface UseMouseActivityProps {\n  /** Optionally disable for performance (default: `true`) */\n  active?: boolean\n}\n\nexport const useMouseActivity = (\n  { active }: UseMouseActivityProps = { active: true }\n) => {\n  const lastMouseMoveTimestamp = useRef<number>(0)\n\n  useEffect(() => {\n    if (!active) return\n\n    const handleMouseMove = () => {\n      lastMouseMoveTimestamp.current = performance.now()\n    }\n\n    window.addEventListener(\"mousemove\", handleMouseMove)\n\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove)\n    }\n  }, [active])\n\n  return { lastMouseMoveTimestamp }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAOO,IAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAA,EAExB;EAAA,IAAAE,IAAA,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MADiC;MAAEG,MAAM,EAAE;IAAK,CAAC;IAAlDA,MAAM,GAAAJ,IAAA,CAANI,MAAM;EAER,IAAMC,sBAAsB,GAAG,IAAAC,aAAM,EAAS,CAAC,CAAC;EAEhD,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI,CAACH,MAAM,EAAE;IAEb,IAAMI,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;MAC5BH,sBAAsB,CAACI,OAAO,GAAGC,WAAW,CAACC,GAAG,EAAE;IACpD,CAAC;IAEDC,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEL,eAAe,CAAC;IAErD,OAAO,YAAM;MACXI,MAAM,CAACE,mBAAmB,CAAC,WAAW,EAAEN,eAAe,CAAC;IAC1D,CAAC;EACH,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,OAAO;IAAEC,sBAAsB,EAAtBA;EAAuB,CAAC;AACnC,CAAC"}

package/dist/utils/useWidthOf.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useWidthOf = void 0;
 var _react = require("react");
+var _useResizeObserver = require("./useResizeObserver");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -18,18 +19,19 @@ var useWidthOf = exports.useWidthOf = function useWidthOf(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
+
+  // Set initial width on mount
   (0, _react.useEffect)(function () {
     if (!ref.current) return;
-    var handleResize = function handleResize() {
-      if (!ref.current) return;
-      setWidth(ref.current.offsetWidth);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return function () {
-      window.removeEventListener("resize", handleResize);
-    };
+    setWidth(ref.current.offsetWidth);
   }, [ref]);
+  (0, _useResizeObserver.useResizeObserver)({
+    target: ref,
+    onResize: function onResize(entry) {
+      var element = entry.target;
+      setWidth(element.offsetWidth);
+    }
+  });
   return {
     width: width
   };

package/dist/utils/useWidthOf.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidthOf.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","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","useWidthOf","exports","_ref","ref","_useState","useState","_useState2","width","setWidth","useEffect","current","handleResize","offsetWidth","window","addEventListener","removeEventListener"],"sources":["../../src/utils/useWidthOf.ts"],"sourcesContent":["import { useEffect, useState } from \"react\"\n\ninterface UseWidthOf {\n  ref: React.MutableRefObject<HTMLElement | null>\n}\n\n/** Hook that returns the width of the given node. Updates on resize. */\nexport const useWidthOf = ({ ref }: UseWidthOf) => {\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    const handleResize = () => {\n      if (!ref.current) return\n      setWidth(ref.current.offsetWidth)\n    }\n\n    handleResize()\n\n    window.addEventListener(\"resize\", handleResize)\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [ref])\n\n  return { width }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useWidthOf.js","names":["_react","require","_useResizeObserver","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","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","useWidthOf","exports","_ref","ref","_useState","useState","_useState2","width","setWidth","useEffect","current","offsetWidth","useResizeObserver","target","onResize","entry","element"],"sources":["../../src/utils/useWidthOf.ts"],"sourcesContent":["import { useEffect, useState } from \"react\"\nimport { useResizeObserver } from \"./useResizeObserver\"\n\ninterface UseWidthOf {\n  ref: React.MutableRefObject<HTMLElement | null>\n}\n\n/** Hook that returns the width of the given node. Updates on resize. */\nexport const useWidthOf = ({ ref }: UseWidthOf) => {\n  const [width, setWidth] = useState(0)\n\n  // Set initial width on mount\n  useEffect(() => {\n    if (!ref.current) return\n    setWidth(ref.current.offsetWidth)\n  }, [ref])\n\n  useResizeObserver<HTMLElement>({\n    target: (ref as unknown) as React.RefObject<HTMLElement>,\n    onResize: (entry) => {\n      const element = entry.target as HTMLElement\n      setWidth(element.offsetWidth)\n    },\n  })\n\n  return { width }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "43.3.0",
+  "version": "43.3.1-canary.1463.32460.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -190,5 +190,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "20d4fcbd1b091da46717ce5f9f7e519c46bf1be2"
+  "gitHead": "7f8fd0f64105ecad4716ce1d2b722d51d8230b25"
 }